Übersicht

Die Datei common.js enthält Code, der von der Startseite der Website kleider.herbaer.de (index.xhtml, Script-Datei tabs.js) und von den "Bildergeschichten" (XML-Dateien, Script-Datei desktop.js (Quelltext)) benutzt wird.

Sie enthält einige Hilfsfunktionen und die Klassen Moveable, VarValue und Popup.

Funktionen

set_class (elt, oldword, newword);
toggle_class (elt, word_a, word_b);
sz = get_size (elt);                            // Komponenten width und height
w = get_width (elt);                            // Innenbreite
h = get_height (elt);                           // Innenhöhe
h = get_frame_height (elt);                     // Außenkanten-Höhe
set_position (style, left, top, width, height); // setzt Lage und Größe
move_bordercorner (elt, whereto, corner);       // Verschiebt eine Ecke

set_class (elt, oldword, newword)

Ersetzt im Attribut class des Elements elt das Wort oldword durch das Wort newword. Das Ergebnis ist 0, wenn elt null ist, sonst (bei Erfolg) 1.

Wenn elt null ist, endet die Funktion sofort mit dem Ergebnis 0.

wird newword der neue Wert des Attributs.

Wenn das Attribut nicht existiert oder der Wert leer ist, wird newword der neue Wert des Attributs.

Wenn der Attributwert bereits das Wort newword enthält, macht die Funktion nichts.

Wenn andernfalls der Attributwert das Wort oldword enthält, ersetzt die Funktion oldword durch newword.

Sonst hängt die Funktion ein Leerzeichen und newword an den Attributwert an.

toggle_class (elt, word_a, word_b)

Tauscht im Attribut class des Elements elt die Wörter word_a und word_b gegeneinander aus. Wenn das Attribut class weder das Wort word_a noch das Wort word_b enthält, fügt die Funktion das Wort word_a am Ende des Attributwerts an.

Das Ergebnis ist 1, wenn der neue Wert des Attributs class das Wort word_a enthält, sonst 2.

get_size (elt)

Ergibt die Größe des Innenbereichs der Darstellung des Elements elt als Objekt mit den Komponenten width und height. Die Werte sind Pixel-Größen.

get_width (elt)

Ergibt die Breite des Inhaltsbereichs (innere Höhe) der Darstellung des Elements elt in Pixeln.

get_height (elt)

Ergibt die Höhe des Inhaltsbereichs (innere Höhe) der Darstellung des Elements elt in Pixeln.

get_frame_height (elt)

Ergibt die Höhe der Rahmens (border) der Darstellung des Elements elt in Pixeln (von Oberkante der oberen Rahmenleiste zur Unterkante der unteren Rahmenleiste).

set_position ( style, left, top, width, height )

style ist das Style-Objekt eines Elements. Die Funktion positioniert den Innenbereich des Elements. Alle Parameter müssen sinnvolle Werte sein (nicht null).

move_bordercorner ( elt, whereto, corner)

elt ist ein Element.

whereto sind die Koordinaten x und y eines Punktes,

corner bezeichnet eine Ecke des Rahmens des Elements.

corner ist eine Zeichenkette. Die erlaubten Werte sind "nw", "ne", "sw", "se". Das Element wird so verschoben, daß whereto die neuen Koordinaten der bezeichneten Ecke des Rahmens (border) des Elements sind.

move_bordercorner wird von der Methode Popup::locate_frame aufgerufen.

Moveable

mv_list = new Moveable ("list", "top_bottom");
mv_text = new Moveable ("text", "side");
mv_view = new Moveable ("view");  // "top_bottom"

Diese Klasse verwaltet eine Gruppe von XHTML-Elementen, die dem Anwender erlauben, einen Ausschnitt aus einer langen Liste anzusehen. Ein angezeigtes "Sichtfenster" enthält eine lange Liste als Kindelement. Der "überlaufende" Inhalt des Sichtfensters wird abgeschnitten. Die Liste wird in (anschaulich "unter") dem Sichtfenster verschoben. Dabei wirken die XHTML-Struktur, CSS-Regeln und JavaScript zusammen.

Außer dem Sichtfenster und der Liste erwartet diese Klasse drei weitere XHTML-Elemente: zwei Schaltflächen, mit denen der Anwender das Sichtfenster (oder in anderer Anschauung die Liste unter dem Sichtfenster) nach oben und nach unten verschieben kann, und ein umfassendes Element ("Behälter").

Der Konstruktor nimmt zwei Zeichenketten als Parameter: ein Präfix (idprf) der ID-Attribute der beteiligten XHTML-Elemente und optional einen Hinweis zum Stil. Die möglichen Werte des zweiten Parameters sind:

Die ID-Werte der beteiligten HTML-Elemente sind:

Der Klasse stützt sich auf eine Konvention für Werte von ID-Attributen.

moveable.type

Die möglichen Werte sind:

Wert	Bedeutung
0	Die Höhe des Sichtfensters wird angepaßt, wenn die Bewegungs-Schaltflächen (über und unter dem Sichtfenster) angezeigt werden.
1	Die Breite des Sichtfensters wird angepaßt, wenn die Bewegungs-Schaltflächen (seitlich des Sichtfensters) angezeigt werden.
2	Die Maße des Sichtfensters bleiben unverändert, wenn die Bewegungs-Schaltflächen angezeigt werden.

Natürlich bleibt die Positionierung der Elemente CSS-Regeln überlassen. Abhängig vom Wert style wird die Breite oder die Höhe des Sichtfensters angepaßt, wenn die Bewegungs-Schaltflächen angezeigt oder verborgen werden (update_content).

moveable.main

main ist das umfassende Element (der "Behälter") mit der ID idprf_main. Es enthält die Schaltflächen up und down und das "Sichtfenster" frame als Kindelemente

moveable.up

up ist die Schaltfläche mit der ID idprf_up, die weiter oben liegende Teile des Inhalts (der Liste) sichtbar macht. Die Methode update_content aktiviert oder deaktiviert die Schaltfläche.

moveable.down

down ist die Schaltfläche mit der ID idprf_down, die weiter unten liegende Teile der Liste sichtbar macht. Die Methode update_content aktiviert oder deaktiviert die Schaltfläche.

moveable.frame

frame ist das Sichtfenster mit der ID idprf_frame. Es wird in der Methode update_content verwendet.

moveable.content

content ist der Inhaltsbereich mit der ID idprf_content, ein Kindelement des Sichtfensters idprf_frame. Das Feld wird in der Methode update_content verwendet.

moveable.contstyle

contstyle ist das Stil-Objekt des Inhaltsbereichs. Die Eigenschaft contstyle.marginTop wird gesetzt, um den Inhaltsbereich "unter" dem Sichtfenster zu verschieben. Sie wird in den Methoden update_content, step und show benutzt.

moveable.timeout

Um den Inhaltsbereich bewegt darzustellen, also nach "oben" oder "unten" laufen zu lassen, wird regelmäßig im Abstand von millisec Millisekunden die Funktion this_move aufgerufen. timeout ist die Kennzahl ("Handle") des nächten verzögerten Funktionsaufrufs, den die Standard-Funktion window.setTimeout liefert. timeout wird in der Methode move gesetzt, in der Methode stop zurückgesetzt und in der Methode toggle gelesen.

moveable.millisec

millisec ist die Zeitdauer bis zum verzögerten Aufruf der Funktion this_move in Millisekunden. Der Konstruktor belegt das Feld mit 200. Der Wert wird in move als Parameter an die Standard-Funktion window.setTimeout übergeben. Zusammen mit einer kleinen Schrittweite (stepwid) ergibt sich der Eindruck einer fließenden Bewegung.

moveable.stepwid

stepwid ist die Länge in Pixeln, um die jeder Aufruf von step den Inhaltsbereich verschiebt. Die Ereignisbehandler, die die "Bewegung" starten, setzen je nach Bewegungsrichtung das Feld sgnstep auf den positiven oder negativen Betrag von stepwid.

moveable.sgnstep

sgnstep ist die vorzeichenbehaftete Schrittweite und unterscheidet sich im Vorzeichen von stepwid: positiv für die Bewegung nach oben (up), negativ für die Bewegung nach unten (down). sgnstep wird in den Ereignisbehandlern der Schalter "up" und "down" gesetzt.

moveable.curshift

curshift ist der aktuelle obere Außenrand (CSS-Eigenschaft margin-top) des Inhaltsbereichs (content). Er ist immer Null oder negativ. Wenn das Sichtfenster (frame) höher ist als der Inhaltsbereich, dann ist er Null: die obere Seite des Inhaltsbereichs grenzt an die obere Seite des Sichtfensters. Ein negativer Wert verschiebt das Sichtfenster nach oben. Wenn der Inhaltsbereich höher ist als das Sichtfenster, dann ist die negative Differenz "Höhe Sichtfenster - Höhe Inhaltsbereich" der kleinste mögliche Wert: die untere Seite des Inhaltsbereichs grenzt dann an die untere Seite des Sichtfensters.

moveable.mmovers

Ein Maß der Bewegungs-Schaltflächen. Im Fall type = 0 ("top_bottom") ist es die Summe der Höhen der Bewegungs-Schaltflächen, im Fall type = 1 ("side") das Maximum der Breiten der beiden Bewegungs-Schaltflächen, im Fall type = 2 ("no_adjust") ist das Feld nicht relevant. Die Klasse "Moveable" ist für den Fall ausgelegt, dass sich die Bewegungs-Schaltflächen an die Größe des Behälters anpassen. Wenn sich die Größe des Behälters ändert (set_size), wird mmovers auf den Wert 0 gesetzt. Die Methode update_content bestimmt dann den neuen Wert, wenn die Bewegungs-Schaltflächen anzuzeigen sind und type nicht 0 ist.

moveable.mv_shown

Dieses logische Feld zeigt an, ob die Bewegungs-Schaltflächen angezeigt werden. check_height Es wird in der Methode check_height gesetzt und gelesen und in der Methode update_content gelesen, um unnötiges Setzen von Attributwerten zu vermeiden. Der Anfangswert false entspricht der Voreinstellung des Attributs class des Elements up.

moveable.fullh

Die Höhe des Behälters (main). Diese ist zugleich die Höhe (hframe) des Rahmens, wenn nicht die Bewegungs-Schaltflächen oben und unten ("top_bottom") angezeigt werden. fullh wird in der Methode set_size gesetzt und in der Methode update_content gelesen.

moveable.hframe

Die Höhe des Rahmens (frame). Dieses Feld wird in der Methode update_content eingeführt und gefüllt. Es wird in den Methoden show und step gelesen

moveable.bigstep

Die Höhe einer "Seite" für eine "seitenweise" Bewegung: maximum (hcont - 2 * stepwid, stepwid). Dieses Feld wird in der Methode update_content eingeführt und gefüllt. Der Wert wird hier nicht benutzt sondern nur für Anwendungen bereitgestellt.

moveable.hcont

Die Höhe des Inhaltsbereichs (content). Dieses Feld wird in der Methode update_content eingeführt und gefüllt. Es wird wie hframe in den Methoden show und step gelesen, außerdem in der Behandlung des Doppelklicks auf "down".

moveable.this_move

Die Funktion this_move ruft die Methode move über eine Variable auf, die an das Moveable-Objekt gebunden ist ("closure"). Der Kontext des Aufrufs (Schlüsselwort this) spielt keine Rolle. Die Funktion kann daher in der Methode move als Parameter an window.setTimeout übergeben werden.

Moveable::set_position (left, top, width, height)

Die Methode set_position positioniert den Behälter (main). Die Parameter sind die Koordinaten der linken oberen Ecke, die Länge und die Breite des Inneren. Sie setzt CSS-Eigenschaften des Elements left und top des Elements main und ruft dann set_size auf, um die Größe des Elements zu setzen.

Wenn einer der vier Parameter left oder top null ist, wird die entsprechende style-Eigenschaft entfernt.

Moveable::set_size (width, height)

Die Methode set_size setzt die Größe des Behälters (main). Die Parameter sind die Breite und die Höhe des Inneren. Die Methode setzt CSS-Eigenschaften width und height des Elements main und ruft dann update_content auf.

Wenn einer der Parameter width oder height null ist, wird die entsprechende style-Eigenschaft entfernt.

Moveable::check_height

Die Methode check_height prüft, ob die Höhe des Rahmens (fullh) ausreicht, um den Inhalt vollständig darzustellen. Wenn ja, dann ist das Ergebnis true, sonst false.

Sie minimiert zunächst den Inhalt (minimize_content). Wenn der Inhalt in den Rahmen passt, verbirgt sie die Bewegungs-Schaltflächen, setzt die Verschiebung (curshift) auf Null und ergibt true. Andernfalls zeigt sie die Bewegungs-Schaltflächen an und ergibt false.

Diese Hilfsfunktion wird von update_content aufgerufen.

Moveable::update_content ()

Die Methode update_content passt die Darstellung des "Bewegungs-Blocks" an eine geänderte Größe oder geänderten Inhalt an. Sie wird intern in der Methode set_size aufgerufen. Sie soll auch immer dann aufgerufen werden, nachdem der Inhaltsbereich geändert ist.

Eine laufende Bewegung wird angehalten. (stop). Die weiteren Aktionen hängen vom Typ (type) ab.

Im Falle type = 1 ("side") wird eine Festlegung der Breite des Rahmens zurückgenommen. Wenn check_height false ergibt, wird die Breite der Bewegungsschaltflächen (mmovers), falls nötig, neu ermittelt, die Breite des Rahmens neu festgesetzt und die Höhe des Inhaltsbereichs danach neu ermittelt.

Im Falle type = 2 ("no_adjust") wird nur check_height aufgerufen.

Wenn andernfalls ("top_bottom") check_height false ergibt, wird die Gesamthöhe der Bewegungs-Schaltflächen (mmovers), falls nötig, neu ermittelt, und die neue Höhe des Rahmens (Gesamthöhe vermindert um die Höhe der Bewegungs-Schaltflächen) bestimmt.

Wenn die Bewegungs-Schaltflächen angezeigt werden, wird die Verschiebung (curshift) auf das erlaubte Intervall beschränkt. Falls nötig, wird die Höhe des Rahmens neu gesetzt.

Moveable::show (offset, height)

Die Parameter bestimmen einen Ausschnitt des Inhaltsbereichs: offset ist der Abstand der oberen Seite des Ausschnitts von der oberen Seite des Inhaltsbereichs, height dessen Höhe. Die Methode show verschiebt den Inhaltsbereich (oder, je nach Anschauung, das Sichtfenster) so, dass der bezeichnete Ausschnitt sichtbar ist, falls möglich.

Wenn das Sichtfenster größer ist als der Inhaltsbereich, macht die Methode nichts.

Wenn der Ausschnitt höher ist als das Sichtfenster, wird das Sichtfenster in der Mitte über dem Ausschnitt positioniert.

Wenn die obere Seite des Ausschnitts oberhalb des Sichtfensters liegt, wird das Sichtfenster so weit nach oben verschoben, dass die obere Seite das Ausschnitts sichtbar wird

Wenn die untere Seite des Ausschnitts unterhalb des Sichtfensters liegt, wird das Sichtfenster so weit nach unten verschoben, dass die untere Seite das Ausschnitts sichtbar wird.

Es wird nicht geprüft, ob der Ausschnitt überhaupt innerhalb der Grenzen des Inhaltsbereichs liegt. Deshalb wird die neu berechnete Verschiebung am Ende der Methode auf den erlaubten Bereich begrenzt.

Moveable::step ()

Die Methode step führt einen einzelnen Bewegungsschritt aus. Zunächst wird die nächste Verschiebung ermittelt: zur aktuellen Verschiebung (curshift) wird die gerichtete Schrittweite (sgnstep) addiert und das Ergebnis auf den möglichen Bereich beschränkt. Wenn die neue Verschiebung von der aktuellen Verschiebung abweicht, wird sie eingestellt, und der Rückgabewert ist true. Andernfalls ist der Rückgabewert false.

Moveable::move ()

Die Methode move führt einen Einzelschritt in der laufenden "Bewegung" aus. Sie ruft step auf. Wenn das Ergebnis true ist, startet sie den "Timer" (timeout) neu.

Moveable::stop ()

Die Methode stop beendet eine laufende Bewegung und löscht den anstehenden verzögerten Funktionsaufruf (timeout).

Moveable::toggle ()

Die Methode toggle startet oder beendet die Bewegung. Abhängig davon, ob timeout null ist, ruft sie die Methode move oder stop auf.

Diese Methode behandelt einen Mausklick auf den Schaltflächen "up" und "down".

Moveable::minimize_content ()

Nach einer Änderung der Größe prüft die Methode check_height, ob der Inhaltsbereich vollständig in das Sichtfenster passt. Die Methode minimize_content stellt dazu den Inhaltsbereich möglichst klein dar. Hier ist sie mit einem leeren Rumpf definiert. Konkrete Objekte können diese Methode geeignet definieren.

Moveable::adjust_content ()

Wenn die Methode check_height feststellt, dass der Inhaltsbereich vollständig in das Sichtfenster passt, ruft sie die Methode adjust_content auf. Sie kann die Darstellung des Inhaltsbereichs anpassen, z.B. im Sichtfenster zentrieren oder strecken. Hier ist sie mit einem leeren Rumpf definiert.

Moveable: Ereignisbehandler

Der Konstruktor definiert Ereignis-Behandler für Maus-Ereignisse der Bewegungs-Schalter ("up" und "down"):

• Wenn die Maus auf einen Bewegungs-Schalter geführt wird (mouseover), fängt der Inhaltsbereich an sich zu bewegen, falls möglich.
• Wenn die Maus einen Bewegungs-Schalter verläßt (mouseout), endet die Bewegung des Inhaltsbereiches.
• Ein Mausklick (click) hält die Bewegung an oder startet sie (toggle).
• Ein Doppelklick (dblclick) auf die Schaltfläche "up" zeigt den Anfang (oberen Rand) des Inhaltsbereichs an.
• Ein Doppelklick (dblclick) auf die Schaltfläche "down" zeigt das Ende (unteren Rand) des Inhaltsbereichs an.

VarValue

Die Klasse VarValue beschreibt eine einfache Funktion. Das Ergebnis ist ein Prozentsatz des Arguments, eingeschränkt auf ein Intervall:

new VarValue ( minval, maxval, prz )

minval

Die untere Grenze des Intervalls, auf das das Ergebnis eingeschränkt wird.

maxval

Die obere Grenze des Intervalls, auf das das Ergebnis eingeschränkt wird.

prz

Der Prozentsatz: der Wert ist nicht auf den Bereich von 0 bis 100 beschränkt.

vv.compute (x)

Berechnet den neuen Wert abhängig von x.

vv = new VarVal (2, 5, 25);
vv.compute ( 4);  // 2
vv.compute ( 8);  // 2
vv.compute (12);  // 3
vv.compute (16);  // 4
vv.compute (20);  // 5
vv.compute (24);  // 5

Popup

Die Klasse Popup repräsentiert ein aufspringendes "Fenster". Sie stützt sie sich auf eine Konvention für ID-Attribute. Der Konstruktor nimmt ein Präfix für ID-Attribute als Parameter (idprf). Er erwartet Elemente mit den folgenden ID-Werten:

popup.link

Ein Schalter, der das aufspringende Fenster öffnet (ID idprf_link), oder null.

popup.frame

Das aufspringende Fenster (ID idprf_frame).

popup.closer

Die Schaltfläche "Schließen" (ID idprf_close), falls diese existiert; sonst null.

popup.isopen

Das logische Feld isopen zeigt an, ob das Fenster (frame) angezeigt wird.

popup.corner

Die Koordinaten der linken oberen Ecke, wenn das Fenster sichtbar ist: ein Feld mit den Komponenten x und y. Die Methode locate_frame verwendet diese Position.

popup.toggle_

Die Funktion toggle_ ist ein Ereignisbehandler. Sie ruft die Methode toggle für das Popup-Fenster auf, an das sie gebunden ist. Die Methode addSwitch ordnet diesen Ereignisbehandler einem Mausklick auf ein Element zu.

Popup::addSwitch (element)

Diese Methode ordnet einem Mausklick auf das Element element die Funktion toggle_ als Ereignis-Behandler zu. Ein Mausklick zeigt das Popup-Fenster an oder verbirgt es.

Popup::mouseout (event)

Diese Methode wird aufgerufen, wenn der Mauszeiger das Fenster (frame) verläßt (mouseout). Wenn das Element, das der Mauszeiger neu betritt, nicht ein Kindelement des Fensters ist, ruft sie close auf und schließt so das Fenster.

Popup::open (event)

Diese Methode soll das Fenster (frame) öffnen.

Wenn das Fenster bereits offen ist (isopen), endet diese Methode sofort. Andernfalls ruft sie die Methode on_open auf. Wenn das Ergebnis false ist, endet open.

Im Attribut class des Elements link ersetzt sie das Wort "popact" durch "popinact" und im Attribut class des Elements frame umgekehrt das Wort "popinact" durch "popact". Danach setzt sie isopen auf den Wert true. Ein Aufruf von locate_frame positioniert das Fenster (frame). Das Ereignis event wird danach nicht weiter verarbeitet.

Popup::close (event)

Diese Methode soll das Fenster (frame) schließen.

Wenn das Fenster nicht offen ist (isopen), endet diese Methode sofort. Andernfalls ruft sie die Methode on_close auf. Wenn das Ergebnis false ist, endet close.

Im Attribut class des Elements frame ersetzt sie das Wort "popact" durch "popinact" und im Attribut class des Elements link umgekehrt das Wort "popinact" durch "popact". Danach setzt sie isopen auf den Wert false. Das Ereignis event wird danach nicht weiter verarbeitet.

Popup::toggle (event)

Diese Methode öffnet (open) oder schließt (close) das Aufklapp-Fenster, abhängig davon, ob es geöffnet ist oder nicht (isopen).

Popup::on_open

Diese Methode ist für objekt-spezifische Aufgaben vor dem Öffnen (Anzeigen) des Popup-Fensters gedacht. Wenn sie false ergibt, wird das Fenster nicht geöffnet. Die Implementation dieser Klasse ergibt einfach true. on_open wird in der Methode open aufgerufen.

Popup::on_close

Diese Methode ist für objekt-spezifische Aufgaben vor dem Schließen des Popup-Fensters gedacht. Wenn sie false ergibt, bleibt das Fenster geöffnet. Die Implementation dieser Klasse ergibt einfach true.

Popup::locate_frame

Die Methode locate_frame ist dazu vorgesehen, die Position und Größe des Popup-Fensters einzustellen. Sie wird von der Methode open aufgerufen.

Sie platziert die linke obere Ecke des Popup-Fensters an die Position corner.