pagescriptor.js

pagescriptorjs ist eine Javascript-Bibliothek, die die Logik für interaktive Vorgänge ausführt und den jeweiligen Status durch das Setzen von Klassennamen darstellt. Mittels CSS können so einfach – ohne Programmierarbeiten – dynamische Effekte, wie Ein-Ausblenden oder Austauschen/Verschieben von Inhalten.

(Fast) Alle Funktionalitäten von pagescriptorjs werden durch HTML5 "data-" Attribute gesteuert.

pagescriptorjs benötigt "prototype.js" V1.7 und höher.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/pagescriptor_v175.js"></script>

Zurzeit unterstützt pagescriptorjs diese Verhalten:

• "Async": Inhalte mit "Ajax" nachladen
• "Persist": Ändert Klassennamen von HTML-Elementen auf Click (in Überarbeitung!)
• "Shoppingcart": Implementiert clientseitig persistente (Cookie) Warenkörbe
• "Cascade": mehrere Klassen dynamisch auf einer Reihe Elemente verteilen
• "Sequencer": Klassen zeitgesteuert wechseln

Async sucht nach Hyperlinks mit dem Attribut "data-async" und setzt zusätzlich die Klasse "as_active". Click auf den Link wird der Inhalt der URL im Attribut "data-async" eingelesen und in den Container mit dem ID-Namen, der im Attribut "href" definiert ist, eingesetzt.

In das geladene HTML eingebettetes Javascript wird nach dem Laden ausgeführt.

<a class="as_once" href="index.html" data-async="async/text0.html#asyncbox">Content1</a>

Folgende Optionen können durch Klassen gesteuert werden:

• as_once, führt den Async nur einmal aus
• Einfügen innerhalb der Box:
  • keine der folgenden Klassen: Ersetzt den Inhalt der Box (#asyncbox)
  • as_top: In die Box (#asyncbox) am Anfang einfügen
  • as_bottom: In die Box (#asyncbox) vor dem Ende einfügen
• Einfügen ausserhalb der Box (#asyncbox):
  • as_before: Vor der Box (#asyncbox) einfügen
  • as_after: Hinter der Box (#asyncbox) einfügen

Eine Warenkorb ist ein HTML-Block-Element, das mit einem ID-Attribut und der Klasse "sc-cart" gekennzeichnet ist. Eine Webseite kann eine oder mehrere unterschiedliche Warenkorb-Boxen.

<div id="shopcart" class="sc-cart">
</div>

Wenn die Box von pagescriptor.js erfasst wurde, wird die Klasse sc_active hinzugefügt:

<div id="shopcart" class="sc-cart sc_active">
</div>

Artikel-Eigenschaften

pagescriptor.js erwartet für jeden Artikel mindestens diese beiden Eigenschaften:
"pid" = Eindeutige Kennung des Artikel
"preis" = Der Preis für den einzelnen Artikel.

Diese vordefinierten Eigenschaften können durch weitere Artikel-Eigenschaften ergänzt weden, die selbstgewählte Namen tragen und unter diesen im Template als Platzhalter verwendet werden: z.B. 'name' und als Platzhalter '%%name%%'

"Hinzufügen"-Hyperlink

Der "Hinzufügen"-Hyperlink enthält die Klasse "sc-cart-add" und das REL-Attribute mit dem ID-Namen des Warenkorbs, dem das Produkt hinzu2gefügt werden soll.
Ein Hinzufügen-Link muss, um einen neuen vollständigen Datensatz anlegen zu können, die Produkteigenschaften enthalten. Die Produkteigenschaften sind in Form einer Query eingesetzt. Deshalb müssen sie auch URL-codiert (Wikipedia: URL-Encoding; Online URL Decoder/Encoder) werden.

<a class="sc-cart-add" href="?pid=14674&name=Grosse%20Tasche,%2040%20x%2030%20cm&color=rot&preis=19.99" rel="shopcart"> Kaufen</a>

Innerhalb des Warenkorb kann eine vereinfachte Form des Hinzufügen-Links benutzt werden. Wenn ein Artikel schon im Warenkorb liegt, reicht es nur die Artikel-ID zu übertragen:

<a class="sc-cart-add" href="?pid=14674" rel="shopcart">hinzufügen</a>

"Entfernen"-Hyperlink

Ähnlich sieht der Entfernen-Link aus, der an jeder Stelle der Seite benutzt werden kann:

<a class="sc-cart-remove" href="?pid=14674" rel="shopcart">löschen</a>

Warenkorb-Template

Das Programm liest nach dem Laden der Seiten die ersten 5 Zeilen aus der Warenkorb-Box als Template ein.

1. Zeile:	Kopf, wird einmal ausgeben.
2. Zeile:	Schleife, wird mit den Artikeldaten gefüllt, so oft, wie Artikel vorhanden sind.
3. Zeile:	Fuss, wird einmal hinter der Schleife ausgegeben.
4. Zeile:	Auswertung: wird mit den Summen - Gesamtbetrag, Anzahl Artikel...- gefüllt und einmal ausgegeben.
5. Zeile:	Wenn der Warenkorb leer ist, wird nur (!) diese Zeile ausgegeben.

Im Template können folgende Platzhalter benutzt werden:
In der 2. Zeile: "%%pid%%","%%preis%%" und die selbstgewählten Produkteigenschaften (z.B. aus dem Beispiel oben"%%color%%" ).
Zusätzlich kann noch der Platzhalter %%num%% für die Anzahl dieses Artikels verwendet werden.
4. Zeile: Die Platzhalter in der Auswertung werden von pagescriptor.js automatisch berechnet:
"%%teile%%" Summe aller Teile, "%%anzahl%%" Summe unterschiedlicher Artikel und "%%sum%%" mit dem Gesamtbetrag.

Der Quellcode für das Template des Beispiel-Warenkorb unten:

<h4>Warenkorb</h4><ul>
	<li><a class="sc-cart-add" href="?pid=%%pid%%" rel="shopcart">+</a> / <a href="?pid=%%pid%%" class="sc-cart-remove" rel="shopcart">-</a>    %%name%% (Artikelnummer: %%pid%%)  %%num%% Stück x %%preis%% €</li>
</ul>
<p class="cs-sum">%%teile%% Teile, %%anzahl%% verschiedene Artikel, Summe: %%sum%% €</p>
<p>Der Warenkorb ist leer!</p>

Der Quellcode für das Template der Beispiel-Merkliste unten:

<h4>Merkliste</h4><ul>
	<li>%%name%% (Artikelnummer: %%pid%%) %%preis%% €</li>
</ul>

<p>Die Merkliste ist leer!</p>

Persist sucht nach HTML-Elementen mit der Klasse "cs-persist" und ersetzt diese durch die Klasse "cs-persist-off". Clicks auf das Element wechseln diese gegen die Klasse "cs-persist-on" und wieder zurück. Außer dem Klassennamen und dem Click-Eventhandler werden die Elemente nicht verändert.

Zustand im Quellcode:

<div class="cs-persist">Content</div>

Nach dem Laden der Seite:

<div class="cs-persist-off">Content</div>

Nach dem ersten Click:

<div class="cs-persist-on">Content</div>

Boxen mit der "cs-persist" können durch einen Klassennamen, der mit "cs-group-" beginnen muss, zu einer oder mehreren Gruppen zusammengefaßt werden, d.h. wird eine Box der Gruppe geöffnet, so wird eine noch offene Box der selben Gruppe geschlossen. Die Klasse "cs-group-name" ordnet eine Box der Gruppe in diesem Beispiel "name" zu. Den Namen können Sie selbst wählen, etwa: "cs-group-erste" oder "cs-group-galerie2".

Das nachstehende Beispiel benutzt den Gruppennamen "ps-group-test" und erzeugt den "Accordion"-Effekt:

Class-Cascade sucht nach HTML-Elementen - DIV oder UL - mit dem Attribut data-cascade. Kindelemente erhalten benutzerdefinierte Klassen zugewiesen. Der Wert des Attribut data-cascade wird als Folge von Optionen - getrennt durch Kommata - ausgewertet. Die erste Option definiert eine Folge von Klassennamen, verbunden mit Bindestrichen, z.B.:"data-cascade="default-links-mitte-rechts". Ist der Anzahl der definierten Klassennamen gerade, dann wird der erste Klassennamen als Default-Klasse verwendet, für die ansonsten cascade verwendet wird.

Weitere Optionen modifizieren das Verhalten von Class-Cascade, z.B.:"data-cascade="default-links-mitte-rechts,linear,hover".
Die Option first setzt den mittleren Klassennamen auf das erste Element.
Die Option linear verhindert, dass die Klassennamen ringförmig verschoben werden.
Die Option click ist default und bedeutet, dass jedes Element nach dem Mausclick zum zentralen Element wird.
Die Option next bedeutet, dass mit dem Mausclick auf das zentrale Element das nächste Element zum zentrale Element wird. Diese Option ist dann wichtig, wenn außer dem zentralen Element kein weiteres Element sichtbar ist.
Die Option hold bedeutet, dass Klassen, die den Elementen statisch zugewiesen sind, erhalten bleiben.

Sequencer sucht nach HTML-Elementen mit dem Attribut "data-sequencer" und erwartet zwei Parameter: zwei oder mehr Klassennamen durch Bindestriche verbunden sowie eine Zeitangabe in Millisekunden. Der Sequencer benutzt keinerlei Eventhandler und ist somit nicht interaktiv.

Quellcode der Ampel: CSS und HTML

[data-sequencer].rot        > li.rot, 
[data-sequencer].gelbrot    > li.rot    { background-color: red; }
[data-sequencer].gelbgruen  > li.gelb,
[data-sequencer].gelbrot    > li.gelb   { background-color: yellow; }
[data-sequencer].gelbgruen  > li.gruen,
[data-sequencer].gruen      > li.gruen  { background-color: green; }

<ul id="seq2" data-sequencer="gruen-gruen-gruen-gelbgruen-gelbgruen-rot-rot-rot-gelbrot,1000">
    <li class="rot"></li>
    <li class="gelb"></li>
    <li class="gruen"></li>
</ul>

Die Ampel in Funktion:

Das zweite Beispiel ist durch die Apple-iPhone-Seite und deren Analyse durch John B. Hall inspiriert:

<div id="seq1" data-sequencer="pos1-pos2-pos3-pos4,4000">
    <img alt="p20100917_183554_003" src="images/raster.png">
</div>