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
.
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öheset_position
(style
,left
,top
,width
,height
); // setzt Lage und Größemove_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.
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:
"top_bottom" (type 0) | Dies ist die Voreinstellung, wenn der zweite Parameter fehlt. Wenn die Bewegungs-Schaltflächen angezeigt werden, dann ist die Höhe des Sichtfensters (frame) um die Summen der Höhen der beiden Bewegungs-Schaltflächen kleiner als die Höhe des Behälters (main). Sonst sind das Sichtfenster und der Behälter gleich hoch. Dieser "Stil" ist für den Fall vorgesehen, dass die Bewegungs-Schaltflächen über und unter dem Sichtfensters positioniert sind. |
"side" (type 1) | Wenn die Bewegungs-Schaltflächen angezeigt werden, dann ist die Breite des Sichtfensters (frame) um das Maximum der Breiten der beiden Bewegungs-Schaltflächen schmaler als der Behälter (main). Dieser "Stil" ist für den Fall vorgesehen, dass die Bewegungs-Schaltflächen seitlich neben dem Sichtfenster positioniert sind. |
"no_adjust" (type 2) | Die Größe des Sichtfensters bleibt unverändert, ob die Bewegungs-Schaltflächen angezeigt werden oder nicht. |
Die ID-Werte der beteiligten HTML-Elemente sind:
ID | Element |
---|---|
idprf _main | Umfassender Behälter (container) |
idprf _up | Schaltfläche "auf" (zum oberen Ende der Liste) |
idprf _down | Schaltfläche "ab" (zum unteren Ende der Liste) |
idprf _frame | Sichtfenster ("Passepartout") |
idprf _content | Liste (Inhaltsbereich) |
Der Klasse stützt sich auf eine Konvention für Werte von ID-Attributen.
moveable
.typeDie 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
.mainmain 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
.upup 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
.downdown 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
.frameframe ist das Sichtfenster mit der ID idprf
_frame
. Es wird in der Methode update_content
verwendet.
moveable
.contentcontent ist der Inhaltsbereich mit der ID idprf
_content
, ein Kindelement des Sichtfensters idprf
_frame
. Das Feld wird in der Methode update_content
verwendet.
moveable
.contstylecontstyle 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
.timeoutUm 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
.millisecmillisec 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
.stepwidstepwid 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
.sgnstepsgnstep 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
.curshiftcurshift 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
.mmoversEin 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_shownDieses 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
.fullhDie 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
.hframeDie 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
.bigstepDie 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
.hcontDie 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_moveDie 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
: EreignisbehandlerDer Konstruktor definiert Ereignis-Behandler für Maus-Ereignisse der Bewegungs-Schalter ("up
" und "down
"):
mouseover
), fängt der Inhaltsbereich an sich zu bewegen, falls möglich.mouseout
), endet die Bewegung des Inhaltsbereiches.click
) hält die Bewegung an oder startet sie (toggle
).dblclick
) auf die Schaltfläche "up
" zeigt den Anfang (oberen Rand) des Inhaltsbereichs an.dblclick
) auf die Schaltfläche "down
" zeigt das Ende (unteren Rand) des Inhaltsbereichs an.Die Klasse VarValue
beschreibt eine einfache Funktion. Das Ergebnis ist ein Prozentsatz des Arguments, eingeschränkt auf ein Intervall:
y = min (maxval, max (minval, prz * x / 100))
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
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:
ID | Element |
---|---|
idprf _link | Schaltfläche, die das aufspringende Fenster öffnet (optional). Das Attribut class enthält anfangs das Wort popact . |
idprf _frame | Das aufspringende Fenster. Das Attribut class enthält anfangs das Wort popinact . |
idprf _close | Eine Schaltfläche, die das aufspringende Fenster schließt (optional). |
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.