ixdesk.js


Übersicht

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.

Tree

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.root

Die Baumwurzel (XHTML-Element): die div-Kindelemente sind die Baumknoten der obersten Ebene.

tree.id_prf

Die 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_len

Die Länge des ID-Präfix id_prf. Sie wird in den Methoden on_click_item und navigate verwendet.

tree.cur_id

Wenn 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_node

cur_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

old_id

Die ID des bisher aktuellen Baumknotens ohne das Präfix id_prf. Wenn es keinen aktuellen Baumknoten gibt, ist der Wert die leere Zeichenkette.

new_id

Die ID des Baumknotens, der der neue aktuelle Knoten werden soll, ohne das Präfix id_prf. Dieser Wert kann nicht leer sein.

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.

tree.navigate (dir)
dir

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

first

Der erste Baumknoten (der obersten Ebene)

last

Der letzte Baumknoten. Er kann keinen untergeordneten Knoten haben.

visible_next

Der nächste sichtbare Knoten. Untergeordnete Knoten von Knoten, die nicht expandiert sind, werden übergangen.

visible_prev

Der vorhergehende sichtbare Knoten. Untergeordnete Knoten von Knoten, die nicht expandiert sind, werden übergangen.

up

Der übergeordnete Knoten. Wenn der aktuelle Knoten ein Knoten der obersten Ebene ist, ist der neue aktuelle Knoten der vorhergehende Knoten der obersten Ebene.

next

Der nächste Knoten. Wenn der aktuelle Knoten einen untergeordneten Knoten hat, dann wird der erste untergeordnete Knoten zum neuen aktuellen Knoten.

prev

Der vorhergehende Knoten. Wenn es nicht der übergeordnete Knoten des bisher aktuellen Knotens ist, kann dieser Knoten keinen untergeordneten Knoten haben.

Einstellungen und einmalig initialisierte Variable

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.

nav_width

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.

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.

Das Stil-Objekt des Logo-Feldes (ID div_logo).

style_head

Das Stil-Objekt des Überschrift-Feldes (ID div_head).

Das Stil-Objekt der Verweis-Leiste (ID div_links).

style_navig

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.

tree_navig

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

tree_navig.on_node_changed

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 div/@e:embed wird der neue Wert des Attributs iframe/@src. Das 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.

Klangwiedergabe

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.

var sound_elt
var sound_playing
function initialize_sound ()
function sound_on_ended (event)
function sound_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.

URL per E-Mail senden

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".

Tastenfunktionen

Die Funktion onKeydown behandelt das Ereignis keydown.

M

Speichert die ID des aktuellen Abschnitts (tree_navig.cur_id als "hash" (Ankerteil) der URL.

P

Startet die Klangwiedergabe und hält sie an (sound_play_pause).

H

Zeigt und verbirgt das Fenster "Tastatur-Steuerung" (popup_help.toggle).

Return

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).

X

Expandiert den gesamten Navigationsbaum (tree_navig.expand_tree)

F

Faltet den gesamten Navigationsbaum ein (tree_navig.fold_tree) und zeigt den aktuellen Knoten an (tree_navig.show_entry).

N

Wechselt zum nächsten Knoten des Navigationsbaums (tree_navig.navigate ("next") und macht ihn sichtbar.

U

Wechselt zum vorhergehenden Knoten des Navigationsbaums (tree_navig.navigate ("prev") und macht ihn sichtbar.

W

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.

Initialisierung

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.

Anpassung an die Fenstergröße

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.