Die Datei ixdesk.js
enthält Code für die Startseite der Website kleider.herbaer.de
. Zusammen mit den Dateien ixdesk.xslt
(Text) und ixdesk.css
(Quelltext) stellt sie die Startseite mit einem "Navigationsbaum" auf der linken Seite dar.
Sie setzt voraus, dass die Javascript-Datei common.js
(Quelltext) geladen ist. Aus dieser Datei benutzt sie die Klassen VarValue
und Popup
und die Funktionen get_width
, get_height
, set_class
und move_bordercorner
.
Die Klasse Tree
repräsentiert eine Baumansicht. Die Baumknoten sind div
-Elemente. Untergeordnete Knoten sind verschachtelte div
-Elemente.
Jeder Baumknoten enthält ein p
-Element mit zwei span
-Elementen. Das erste span
-Element enthält ein Symbol, das den Baumknoten kennzeichnen soll, das zweite span
-Element den Text des Baumknotens.
Bestimmte Wörter in den Attributen class
der div
-Elemente und der ersten span
-Elemente in jedem Knoten bezeichnen einen von drei Zuständen des Knotens:
end
Der Knoten enthält keine untergeordneten Knoten (Endknoten).
head
Der Knoten enthält untergeordneten Knoten, die aber nicht angezeigt werden. Nur das Symbol und der Text zum Knoten selbst ("Kopf") werden angezeigt. Der Knoten ist "gefaltet".
head
Der Knoten enthält untergeordneten Knoten, die auch angezeigt werden. Der Knoten ist "expandiert".
Tree
(elem_id
)elem_id
ist die ID der "Baumwurzel" root: deren div
-Kindelemente sind die Baumknoten der obersten Ebene.
Der Konstruktor setzt voraus, dass alle Knoten gefaltet sind: die class
-Attribute der div
-Elemente und der jeweils ersten span
-Elemente enthalten eines der Wörter end
oder head
, aber nicht das Wort exp
. Wenn das class
-Attribut des ersten span
-Elements das Wort head
enthält, werden den beiden span
-Elementen eines Knotens Ereignisbehandler zugeordnet: ein Mausklick auf das Symbol (erstes span
-Element) expandiert und faltet den Knoten (on_click_icon
), ein Mausklick auf den Knotentext (zweites span
-Element) wählt den Knoten aus (on_click_item
).
tree
.rootDie Baumwurzel (XHTML-Element): die div
-Kindelemente sind die Baumknoten der obersten Ebene.
tree
.id_prfDie IDs der Baumknoten beginnen alle mit dem Präfix id_prf. Der Konstruktor belegt id_prf mit der Zeichenkette nav_
.
In dieser Anwendung der Klasse Tree
folgt dem Präfix nav_
die ID des Abschnitts, auf den der Baumeintrag verweist.
tree
.prf_lenDie Länge des ID-Präfix id_prf. Sie wird in den Methoden on_click_item
und navigate
verwendet.
tree
.cur_idWenn dieses Zeichenkette nicht leer ist, dann ist sie die ID des aktuellen Baumknotens (cur_node) ohne das Präfix id_prf. cur_id und cur_node werden beide in der Methode set_id
gesetzt.
cur_id wird innerhalb der Klasse Tree
nicht benutzt.
tree
.cur_nodecur_node ist der aktuelle Baumknoten (div
-Element) oder null
. cur_node wird zusammen mit cur_id in der Methode set_id
gesetzt.
Innerhalb der Klasse wird cur_node in den Methoden set_id_and_show
, toggle_entry
und navigate
benutzt.
tree
.on_node_changed
( old_id
, new_id
)Die Methode on_node_changed
wird von set_id
aufgerufen, bevor der aktuelle Knoten neu gesetzt wird. Wenn das Ergebnis von on_node_changed
logisch false
ist, wird der aktuelle Knoten nicht neu gesetzt. Die Klasse definiert diese Methode als Platzhalter, der nur 1
ergibt. Instanzen der Klasse Tree
sollten eine eigene Methode on_node_changed
definieren.
Die beiden Parameter sind
tree
.set_id
(id
)id
Die ID des neu zu setzenden aktuellen Baumknotens ohne das Präfix id_prf.
Wenn
der Parameter id logisch true ist, |
id nicht bereits die aktuelle ID cur_id ist, |
es ein Element mit der zusammengesetzten ID id_prf . id , den neuen aktuellen Baumknoten, gibt |
und die Methode on_node_changed logisch true ergibt, |
wird im Attribut class
des bisher aktuellen Baumknotens das Wort current
durch normal
ersetzt, im Attribut class
des neuen aktuellen Baumknotens umgekehrt das Wort normal
durch current
, und die Felder cur_node und cur_id aktualisiert. Das Ergebnis ist 1
.
Andernfalls ist das Ergebnis 0
.
tree
.show_entry
(div
)div
Der Baumknoten (div
-Element), der sichtbar gemacht werden soll.
Diese Methode expandiert alle Knoten, die dem Knoten div
übergeordnet sind. Sie ruft dazu expand_entry
auf.
tree
.set_id_and_show
(id
)id
Die ID des neu zu setzenden aktuellen Baumknotens ohne das Präfix id_prf.
set_id_and_show
setzt den aktuellen Baumknoten neu und zeigt ihn an. Die Methode kombiniert die Methoden set_id
und show_entry
.
tree
.on_click_icon
(event
)event
Das click
-Ereignis.
Diese Methode behandelt einen Mausklick auf das Symbol zu einem Baumknoten (erstes span
-Element innerhalb des p
-Elements). Der Ereignisbehandler wird im Konstruktor zugeordnet.
Der Baumknoten ist der "Großvater" des angeklickten span
-Elements. Der Zustand des Knotens wechselt zwischen "gefaltet" (Wort head
im Attribut class
) und "expandiert" (exp
). Sie ruft dazu die Methode toggle_entry
auf.
tree
.on_click_item
(event
)event
Das click
-Ereignis.
Diese Methode behandelt einen Mausklick auf den Text eines Baumknotens (zweites span
-Element innerhalb des p
-Elements). Der Ereignisbehandler wird im Konstruktor zugeordnet.
Der Baumknoten ist der "Großvater" des angeklickten span
-Elements. Wenn er bereits der aktuelle Knoten ist, ergibt die Methode set_id
false
, und der Zustand des Knotens wird geändert (toggle_entry
). Andernfalls wird er zum neuen aktuellen Baumknoten und expandiert (expand_entry
).
tree
.expand_entry
(div
)div
Der zu expandierende Baumknoten (div
-Element)
Diese Methode expandiert den Baumknoten div
. Wenn das Attribut class
das Wort head
enthält, wird der Zustand des Knotens geändert (toggle_entry
).
expand_entry
wird von den Methoden show_entry
, on_click_item
und expand_tree
aufgerufen.
tree
.fold_entry
(div
)div
Der einzufaltende Baumknoten (div
-Element)
Diese Methode faltet den Baumknoten div
. Wenn das Attribut class
das Wort exp
enthält, wird der Zustand des Knotens geändert (toggle_entry
).
fold_entry
wird von fold_tree
aufgerufen.
tree
.toggle_entry
(div
)div
Der Baumknoten (div
-Element), dessen Zustand zu ändern ist. Ein Wert, der logisch false
ist, steht für den aktuellen Baumknoten.
Diese Methode ändert den Zustand des Baumknotens div
von "gefaltet" zu "expandiert" und umgekehrt. Wenn das Attribut class
nicht das Wort end
enthält, werden die Wörter head
und exp
im Attribut gegen einander ausgetauscht. Das Attribut class
des ersten span
-Kindelements des ersten p
-Kindelements (des Baumknoten-Symbols) wird entsprechend geändert.
toggle_entry
wird von den Methoden on_click_icon
, on_click_item
, expand_entry
und fold_entry
aufgerufen.
tree
.expand_tree
Diese Methode expandiert den gesamten Baum, indem sie für jeden Baumknoten expand_entry
aufruft.
tree
.fold_tree
Diese Methode faltet den gesamten Baum, indem sie für jeden Baumknoten fold_entry
aufruft.
Eine Zeichenkette, die die "Navigationsrichtung" angibt. Die möglichen Werte sind:
first |
last |
visible_next |
visible_prev |
up |
next |
prev |
Diese Methode setzt den aktuellen Knoten entsprechend der "Navigationsrichtung" neu. Wenn die "Richtung" first
oder last
ist, braucht es keinen aktuellen Knoten zu geben. Die anderen Richtungen beziehen sich auf den aktuellen Knoten und wirken nur, wenn er dfiniert ist. Diese Methode setzt den aktuellen Knoten mit der Methode set_id
und macht ihn mit der Methode show_entry
sichtbar.
Untergeordnete Knoten sind nach ihren übergeordneten Knoten eingeordnet. Abhängig von der Richtung ist der neue aktuelle Knoten
Der erste Baumknoten (der obersten Ebene)
Der letzte Baumknoten. Er kann keinen untergeordneten Knoten haben.
Der nächste sichtbare Knoten. Untergeordnete Knoten von Knoten, die nicht expandiert sind, werden übergangen.
Der vorhergehende sichtbare Knoten. Untergeordnete Knoten von Knoten, die nicht expandiert sind, werden übergangen.
Der übergeordnete Knoten. Wenn der aktuelle Knoten ein Knoten der obersten Ebene ist, ist der neue aktuelle Knoten der vorhergehende Knoten der obersten Ebene.
Der nächste Knoten. Wenn der aktuelle Knoten einen untergeordneten Knoten hat, dann wird der erste untergeordnete Knoten zum neuen aktuellen Knoten.
Der vorhergehende Knoten. Wenn es nicht der übergeordnete Knoten des bisher aktuellen Knotens ist, kann dieser Knoten keinen untergeordneten Knoten haben.
Eine Einstellung, die hier vorgenommen wird, ist nur die Variable nav_width
. Die übrigen hier beschriebenen Variablen werden anhand des Dokuments und der CSS-Regeln einmalig von einer der Initialisierungsfunktionen initialize
oder initialize_sound
mit einem Wert oder einem Objekt belegt. Werte, die auf Stil-Informationen beruhen, insbesondere Maße, werden erstmals in der Funktion onResize
gesetzt. Bei der Initialisierung sind die Stil-Informationen möglicherweise noch nicht verfügbar.
Dieses VarValue
-Objekt bestimmt die Breite des Navigationsbaums bezüglich des Fensters. Es wird bei der Festlegung der Fenstergröße (onResize
) benutzt.
min_width
Die Mindestbreite des body
-Elements in Pixeln. Der Wert wird anfangs durch CSS-Regeln festgelegt, die Mindestbreite ist die Hälfte der anfänglichen Breite. Wenn das Fenster breiter ist, wird das body
-Element auf die gesamte Fensterbreite ausgedehnt. Wenn das Fenster schmaler ist, wird das body
-Element auf diese Mindestbreite gesetzt. Es wird dann üblicherweise mit einer waagerechten Bildlaufleiste angezeigt.
min_width
wird in der Funktion onResize
gelesen.
min_height
Die Mindesthöhe des body
-Elements in Pixeln. Der Wert wird anfangs durch CSS-Regeln festgelegt, die Mindesthöhe ist die Hälfte der anfänglichen Höhe. Wenn das Fenster höher ist, wird das body
-Element auf die gesamte Fensterhöhe ausgedehnt. Wenn das Fenster weniger hoch ist, wird das body
-Element auf diese Mindesthöhe gesetzt. Es wird dann üblicherweise mit einer senkrechten Bildlaufleiste angezeigt.
logo_height
Die Höhe der Titelleiste (ID div_title
) mit dem Logo-Feld (ID div_logo
), der Überschrift (ID div_head
), der Verweis-Leiste (ID div_links
) und dem Klangschalter (ID div_sound
). Der Wert ist das Maximum der anfänglichen Höhen der Logofeldes und Summe der Höhen der Überschrift und der Verweisleiste laut CSS-Regeln.
logo_height
wird in onResize
benutzt.
links_height
Die Höhe der Verweis-Leiste (ID div_links
)
links_height
wird in onResize
benutzt.
sound_width
Die Breite des Klangschalters (ID div_sound
) in Pixeln. Der Wert ist die anfängliche Breite laut CSS-Regeln. Wenn die Klangwiedergabe verfügbar ist, benutzt die Funktion onResize
diesen Wert.
style_body
Das Stil-Objekt des body
-Elements. Diese und die folgenden Variablen, deren Name mit style_
beginnt, werden in der Funktion onResize
benutzt.
style_logo
Das Stil-Objekt des Logo-Feldes (ID div_logo
).
style_head
Das Stil-Objekt des Überschrift-Feldes (ID div_head
).
style_links
Das Stil-Objekt der Verweis-Leiste (ID div_links
).
Das Stil-Objekt des Behälters des Navigationsbaums (ID div_navig
). Die Wurzel des Navigationsbaums ist darin verschachtelt.
style_content
Das Stil-Objekt des Inhalts-Feldes (ID div_content
).
style_iframe
Das Stil-Objekt des iframe
-Elements (ID iframe
).
div_sound
Die Schaltfläche (ID div_sound
), die die Klangwiedergabe einschaltet und anhält.
popup_help
Das Aufklapp-Fenster (Objekt der Klasse Popup
, HTML-Element mit der ID help_frame
) mit einer kurzen Hilfe zu den Tastenfunktionen.
Wenn die Taste H gedrückt wird, ruft onKeydown
die Methode popup_help
.toggle
auf.
Der Navigationsbaum (Objekt der Klasse Tree
) auf der linken Seite. Die Wurzel des Baums ist das di
-Element, das im div
-Element mit der ID div_navig
enthalten ist.
Die Funktion initialize
definiert die objektspezifische Methode
Jedem Baumknoten entspricht der Abschnitt (div
-Element) mit der ID navig_tree
.cur_id. Wenn der bisher aktuelle Eintrag für einen "echten" Abschnitt, nicht für einen eingebetteten Inhalt steht, wird der bisher aktuelle Abschnitt verborgen, indem im Attribut class
das Wort current
durch hidden
ersetzt wird. Wenn er für einen eingebetteten Inhalt steht, der neue aktuelle Eintrag aber nicht, wird der eingebettete Inhalt verborgen. Wenn der neue Eintrag für einen "echten" Abschnitt steht, wird der neue Abschnitt angezeigt, indem im Attribut class
das Wort hidden
durch current
ersetzt wird. Wenn der neue Eintrag für einen einzubettenden Inhalt steht, wird die URL des einzubettenden Inhalts gesetzt: Der Wert des Attributs
wird der neue Wert des Attributs div
/@e:embed
. Das iframe
/@src
iframe
-Element wird angezeigt, falls es bisher verborgen war.
Die Methode tree_navig
.set_id_and_show
stellt am Ende der Initialisierung (initialize
) den aktiven Baumknoten und angezeigten Abschnitt ein.
Die Behandlung der Taste M liest die aktuelle ID navig_tree
.cur_id.
Zur Behandlung der verschiedenen Tasten-Ereignisse werden die folgenden Methoden aufgerufen:
tree_navig .toggle_entry |
tree_navig .show_entry |
tree_navig .expand_tree |
tree_navig .fold_tree |
tree_navig .show_entry |
tree_navig .navigate |
iframe
Das iframe
-Element, in dem eingebetteter Inhalt angezeigt wird. Die Methode tree_navig
.on_node_changed
setzt den Wert des Attributs src
, wenn ein neuer eingebetter Inhalt anzuzeigen ist.
Sobald ein Dokument geladen ist (Ereignis load
), wird die Funktion add_nested_event_listener
aufgerufen.
initial_sect_id
Die Deklaration und Initialisierung dieser Variable wird von ixdesk.xslt
(Text) in das Dokument eingefügt. Der Wert ist die ID des "navigierbaren" Abschnitts, der anfangs nicht verborgen ist. Für Vorschaubilder in Suchmaschinen ist es sinnvoll, dass auch ohne Javascript die Seite ansprechend aussieht. Der Abschnitt mit dieser ID wird erst von der Funktion initialize
verborgen.
Der Anwender kann außer den Standard-Tastenfunktionen hier definierte Tastenfunktionen nutzen, um die Verweise im angezeigten eingebetteten Dokument zu durchlaufen. Wenn ein eingebettetes Dokument geladen ist, ordnet die Funktion add_nested_event_listener
dem eingebetteten Dokument Tastenkürzel zu, die die Verweise fokussieren.
Die Tastenkürzel werden zusätzlich zu den Tastenkürzeln zugeordnet, die das eingebettete Dokument selbst definiert. So können die Tasten ← und → doppelte Funktionen haben.
add_nested_event_listener
Die Funktion erstellt eine Liste der Verweise (a
-Elemente) im eingebetteten Dokument und verwaltet den Index eines aktuellen Verweises. Anfangs ist der Index -1
. Dieser Wert -1
bedeutet, dass die Funktion keinen aktuellen Verweis kennt. Der aktuelle Verweis im Sinne dieser Funktion ist normalerweise der fokussierte Verweis, aber der Tasten-Fokus kann wechseln, ohne dass diese Funktion das mitbekommt.
Der Tasten-Behandler (keydown
) des eingebetteten Dokuments behandelt die Tasten ← und →.
Wenn kein Verweis oder der erste Verweis der Liste aktuell ist, wird das einbettende Dokument fokussiert. Das eingebettete Dokument verliert den Fokus.
Andernfalls wird der Verweis vor dem aktuellen Verweis fokussiert.
Die Taste → im einbettenden Dokument fokussiert das eingebettete Dokument.
Wenn es keinen aktuellen Verweis gibt und die Liste der Verweise nicht leer ist, wird der erste Verweis fokussiert.
Wenn der letzte Verweis der Liste aktuell ist, wird diesem Verweis der Fokus entzogen. Es gibt jetzt keinen aktuellen Verweis mehr.
Sonst wird der Verweis nach dem aktuellen Verweis in der Liste fokussiert und zum neuen aktuellen Verweis.
Browser, die das HTML5 - Element audio
kennen, zeigen oben rechts (s. onResize
) die Klang-Schaltfläche (div_sound
) an. Die hier beschriebenen Variablen und Funktionen steuern die Klangwiedergabe.
varsound_elt
varsound_playing
functioninitialize_sound
() functionsound_on_ended
(event) functionsound_play_pause
(event)
sound_elt
Diese Variable repräsentiert das audio
-Element. Die Funktion initialize_sound
prüft, ob die Methoden play
und pause
verfügbar sind. Falls nicht, setzt sie sound_elt
auf null
.
sound_playing
Diese Variable zeigt an, ob die Klangwiedergabe läuft (1
). Die Funktion sound_on_ended
setzt den Wert auf 0
, die Funktion sound_play_pause
schalten zwischen den Werten 0
und 1
um.
initialize_sound
Initialisiert die Klangwiedergabe, aufgerufen von initialize
.
sound_elt
ist zunächst das HTML-Element mit der ID audio
. Wenn dieses Element die Methoden play
und pause
bietet, ordnet sie Ereignisbehandler zu: Ein Klick auf die Schaltfläche div_sound
ruft sound_play_pause
auf. Das Ende der Klangwiedergabe (Ereignis ended
des Elements sound_elt
) ruft die Funktion sound_on_ended
auf. Wenn eine der Methoden play
und pause
nicht verfügbar ist, setzt diese Funktion sound_elt
auf null
.
sound_on_ended
(event
)Diese Funktion behandelt das Ende der Klangwiedergabe (Ereignis ended
des Elements sound_elt
) Sie setzt sound_playing
auf 0
und tauscht im Attribut class
der Schaltfläche div_sound
die Wörter playing
und paused
gegen einander aus.
sound_play_pause
(event
)Diese Funktion startet und stoppt die Klangwiedergabe.
Wenn die Klangwiedergabe läuft, ruft sie sound_elt
.pause
auf, setzt sound_playing
auf 0
und ersetzt im Attribut class
der Schaltfläche div_sound
das Wort playing
durch paused
.
Wenn die Klangwiedergabe nicht läuft, ruft sie sound_elt
.play
auf, setzt sound_playing
auf 1
und ersetzt im Attribut class
der Schaltfläche div_sound
das Wort paused
durch playing
.
Die Funktion tell_about
startet, falls möglich, das E-Mail-Programm mit einem Fenster zur Erstellung einer neuen Nachricht. Als Betreff ist voreingestellt "Das gefällt mir", der voreingestellte Rumpf enthält die URL zur aktuellen Anzeige.
Diese Funktion behandelt einen Klick auf den Menüeintrag "Weitersagen" und die Taste "w".
Die Funktion onKeydown
behandelt das Ereignis keydown
.
Speichert die ID des aktuellen Abschnitts (tree_navig
.cur_id als "hash" (Ankerteil) der URL.
Startet die Klangwiedergabe und hält sie an (sound_play_pause
).
Zeigt und verbirgt das Fenster "Tastatur-Steuerung" (popup_help
.toggle
).
Wechselt den Zustand des aktuellen Knotens des Navigations-Baums zwischen "gefaltet" und "expandiert" (tree_navig
.toggle_entry
) und zeigt ihn an (tree_navig
.show_entry
).
Expandiert den gesamten Navigationsbaum (tree_navig
.expand_tree
)
Faltet den gesamten Navigationsbaum ein (tree_navig
.fold_tree
) und zeigt den aktuellen Knoten an (tree_navig
.show_entry
).
Wechselt zum nächsten Knoten des Navigationsbaums (tree_navig
.navigate
("next
") und macht ihn sichtbar.
Wechselt zum vorhergehenden Knoten des Navigationsbaums (tree_navig
.navigate
("prev
") und macht ihn sichtbar.
Startet das E-Mail-Programm zur Weitergabe der URL zur aktuellen Anzeige (tell_about
).
m Wechselt zum nächsten sichtbaren Knoten des Navigationsbaums (tree_navig
.navigate
("visible_next
").
Wechselt zum vorhergehenden sichtbaren Knoten des Navigationsbaums (tree_navig
.navigate
("visible_prev
").
Wechselt zum übergeordneten Baumknoten oder zum vorhergegenden Baumknoten der obersten Ebene (tree_navig
.navigate
("up
").
Wenn ein eingebettetes Dokument fokussiert ist, liegt die Tasten-Behandlung beim eingebetteten Dokument.
Fokussiert das eingebettete Dokument, wenn dieses angezeigt wird. Die weitere Tasten-Behandlung liegt beim eingebetteten Dokument.
Zur Initialisierung (Ereignis load
) wird die Funktion initialize
aufgerufen. Zunächst verbirgt sie den anfangs sichtbaren Abschnitt (s. initial_sect_id
) Dieser sollte ein "echter" Abschnitt sein, kein eingebetteter Inhalt. Eingebetter Inhalt wird nämlich erst durch Javascript sichtbar. Da der erste Abschnitt ("Neues") ein eingebetteter Inhalt ist, taugt er nicht für die ursprüngliche Anzeige ohne Javascript.
Sie initialisiert die Variablen und Objekte. Zur Initialisierung der Klangwiedergabe ruft sie initialize_sound
auf. Dem Fenster ordnet sie den Ereignisbehandler onResize
(Ereignis resize
) und dem Dokument den Tasten-Ereignisbehandler onKeydown
(Ereignis keydown
) zu. Zur Anpassung an die Fenstergröße ruft sie onKeydown
auf.
Wenn die URL einen Ankerteil ("hash") enthält, zeigt der Aufruf der Methode tree_navig
.set_id_and_show
den angegebenen Abschnitt an, sonst der Aufruf tree_navig
.navigate
("first
") den ersten Abschnitt.
Die Funktion onResize
passt die Anordnung und die Größe der Felder der Anzeige an die Größe des Fensters an. Das Layout ist fest vorgegeben: Stets wird die gesamte Fenstergröße ausgefüllt. Wenn die Fenstergröße bestimmte Mindestmaße unterschreitet, werden Rollbalken angezeigt (die Standard-Anzeige des Browser bei "Fenster-Überlauf"). Die Mindestmaße sind durch CSS-Regeln (ixdesk.css
(Quelltext)) vorgegeben.