smdesk.js

Klassen, Funktionen, Daten

ToggleDetails

Die Klasse ToggleDetails steuert die Änderungen bei der Auswahl einer anderen Bildergeschichte. Zur Bildergeschichte an der Position NNN in der Übersicht gehören die folgenden XHTML-Elemente:

ID	Element
`but_NNN`	Ein Klick auf den Knopf (`button`-Element) mit der ID `but_NNN` wählt die Bildergeschichte an der Position `NNN` aus. Falls diese Bildergeschichte bereits ausgewählt ist, wird die zuvor ausgewählte Bildergeschichte wieder ausgewählt
`sto_NNN`	Der Eintrag (`div`-Element) zur Bildergeschichte an der Position `NNN` in der Übersicht.
`div_NNN`	Der Abschnitt (`div`-Element) mit den Vorschaubildern zur Bildergeschichte.

Zur Klasse gehören die folgenen Datenelemente und Methoden:

td.pos

Die Position der ausgewählten Bildergeschichte.

td.ppos

Die Position der zuvor ausgewählten Bildergeschichte.

td.div

Der Abschnitt mit den Vorschaubildern zur ausgewählten Bildergeschichte.

td.pdiv

Der Abschnitt mit den Vorschaubildern zu der zuvor ausgewählten Bildergeschichte.

td.sto

Der Eintrag (div-Element) zur ausgewählten Bildergeschichte in der Übersicht.

td.psto

Der Eintrag (div-Element) zur ausgewählten Bildergeschichte in der Übersicht.

Es brauchen nicht alle Datenelemente definiert zu sein. Wenn pos definiert ist, dann sind auch div und sto definiert. Wenn ppos definiert ist, dann sind auch die anderen Datenelemente definiert.

ToggleDetails::show (pos)

Wählt die Bildergeschichte an der Position pos aus.

Wenn die Bildergeschichte bereits ausgewählt ist, geschieht nichts. Andernsfalls wird zunächst die zuvor ausgewählte Bildergeschichte "abgewählt": Das Attribut class des Elements div bekommt den Wert hidden, und im Attribut class des Elements sto wird das Wort hilite gegen nohl ausgetauscht. Die Datenelemente ppos, pdiv und psto werden neu gesetzt.

Dann wird die neue Bildergeschichte ausgewählt: die Datenelemente pos, div und sto werden neu gesetzt, Das Attribut class des neuen Elements div bekommt den Wert shown, und im Attribut class des Elements sto wird das Wort nohl gegen hilite ausgetauscht.

ToggleDetails::toggle (pos)

Wenn die Bildergeschichte an der Position pos nicht ausgewählt ist, wird sie durch show (pos) neu ausgewählt. Andernfalls tauschen die aktuell ausgewählte Bildergeschichte und die zuvor ausgewählte Bildergeschichte ihre Rollen.

Sequencer

Die Klasse Sequencer ruft in regelmäßigen Zeitabständen die Methode select auf, der sie eine natürliche Zahl als Parameter übergibt.

In der gleichnamigen Klasse in der Datei desktop.js (Quelltext) fehlt die Methode setcurrent, sonst stimmt der Code der Klassen überein.

sequencer.timer

timer ist entweder null oder eine Kennzahl, die die Funktion window.setTimeout liefert (Zeitschalter). Der Zeitschalter ruft die Funktion tmfunc auf, die die Methode nextstep, gebunden an das Sequencer-Objekt, aufruft.

Die Methoden start, nextstep und backstep setzen timer, die Methode stop setzt timer zurück auf null.

sequencer.msec

msec ist die Zeit in Millisekunden zwischen zwei Aufrufen von tmfunc und damit indirekt der Methode select. Der Initialwert ist 2000.

sequencer.mode

mode steuert die Art, wie der Parameter des Aufrufs von select bestimmt wird. Die möglichen Werte sind:

0	Es wird immer der Wert von `current` übergeben. `current` wird nicht geändert.
1	Der Parameter durchläuft aufsteigend die ganzen Zahlen von 0 an. Wenn die obere Schranke `num` größer als Null ist, wird beim Erreichen des Werts `num` der Parameter auf `0` zurückgesetzt. Es werden wiederholt die Zahlen von `0` bis `num - 1` durchlaufen.
2	Der Parameter durchläuft absteigend die ganzen Zahlen. Wenn die obere Schranke `num` größer als Null ist, wird beim Erreichen des Werts `-1` der Parameter auf `num - 1` gesetzt. Es werden wiederholt die Zahlen von `num - 1` bis `0` durchlaufen.
3	Wenn `num` größer als Null ist, wird pseudo-zufällig eine ganze Zahl von `0` bis `num - 1` (gleichverteilt) ausgewählt. Wenn `num` Null ist, wird immer `0` als Parameter übergeben.
4	Wenn `num` Null ist, durchläuft der Parameter die ganzen Zahlen. Wenn `num` größer als Null ist, durchläuft `current` wiederholt die ganzen Zahlen von `0` bis `num - 1`. Immer wenn `current` den Wert Null erreicht, werden die ganzen Zahlen von `0` bis `num - 1` neu gemischt (`shf_arr`). Die Zahl an der Position `current` im Feld `shf_arr` wird als Parameter an `select` übergeben.

sequencer.num

Wenn num größer als Null ist, werden nur ganze Zahlen im Bereich von 0 bis num - 1 als Parameter an select übergeben.

sequencer.current

current ist ein interner Zähler, der vor jedem Aufruf von select in den Methoden nextstep oder backstep weitergesetzt wird. Wenn num größer ist als Null, durchläuft current die ganzen Zahlen von 0 bis num - 1.

sequencer.shf_arr

Im Fall num > 0 und mode = 4 ist shf_arr ein Feld, das die ganzen Zahlen von 0 bis num - 1 in einer pseudo-zufälligen Reihenfolge enthält. Die Methode shuffle legt das Feld bei Bedarf neu an und mischt die Komponenten.

sequencer.tmfunc

Die Funktion tmfunc ruft die Methode nextstep des aktuellen Sequencer-Objekts auf. Die Methode nextstep übergibt sie der Funktion window.setTimeout als Parameter.

Sequencer::on_start

Diese Methode wird von start aufgerufen. Wenn das Ergebnis false ist, startet die Aufruf-Sequenz nicht. Die Methode kann in einzelnen Objekten überschrieben werden und nötige Initialisierungen vornehmen. Diese Klassen-Methode ergibt einfach true.

Sequencer::start

Die Methode start startet den regelmäßigen Aufruf der Methode select.

Wenn der Zeitschalter timer nicht gesetzt (null) ist und on_start true ergibt, ruft sie die Funktion window.setTimeout, die ohne Verzögerung die Funktion tmfunc aufruft. Wenn timer gesetzt ist oder on_start false ergibt, macht die Methode nichts.

Sequencer::stop

Die Methode stop beendet den regelmäßigen Aufruf der Methode select, indem sie window.clearTimeout aufruft.

Sequencer::restart

Wenn der Zeitschalter timer null ist, macht diese Methode nichts. Andernfalls ruft restart erst stop und dann select auf. So verkürzt restart die Zeit bis zum nächsten Aufruf von select.

Sequencer::toggle

Die Methode toggle ruft start auf, wenn der Zeitschalter timer nicht gesetzt ist. Andernfalls ruft sie stop auf.

Sequencer::setmode (mode)

Setzt das Feld (mode) auf den Wert des Parameters mode. Wenn nötig, mischt sie das Feld shf_arr durch einen Aufruf von shuffle neu: Wenn nämlich der neue Modus (Parameter mode) 4 ist, aber nicht der alte Modus (mode), und num positiv ist.

Sequencer::shuffle (mode)

Wenn das Feld shf_arr nicht existiert, legt es diese Methode neu an und füllt es mit den Zahlen von 0 bis num.

Sie mischt die Elemente des Feldes, indem sie pseudo-zufällig ein Element vom Anfang auswählt und es mit dem letzten Element des noch nicht neu gemischten Bereichs tauscht.

Sequencer::select (ix)

Die Methode select ist die Methode, die regelmäßig aufgerufen wird. Sie sollte objekt-spezifisch definiert sein. Die Klassen-Methode ist ein Platzhalter, der nichts tut.

Der Wert des Parameters ist eine ganze Zahl im Bereich [0, num). Sie hängt von mode ab.

Sequencer::nextstep

nextstep ist die Methode, die von tmfunc aufgerufen wird. Sie setzt zunächst current auf den nächsten Wert, ruft bei Bedarf shuffle auf, dann select und schließlich window.setTimeout für den nächsten verzögerten Aufruf von tmfunc und damit von select.

Diese Methode ist nur für den internen Aufruf gedacht und sollte nicht ausserhalb des Objekts aufgerufen werden: Sie prüft nicht, ob der Zeitschalter (timer) überhaupt gesetzt ist und würde versuchen, den Zeitschalter ggf. ohne nötige Initialisierungen durch on_start zu starten.

Sequencer::backstep

Wenn der Zeitschalter timer nicht gesetzt ist, macht diese Methode nichts.

Andernfalls ruft backstep select mit dem vorhergehenden statt des nächsten Parameterwertes auf.

In manchen Fällen ist das nicht möglich: nämlich im Modus "Zufällige Auswahl" (mode = 3) oder wenn im Modus "Mischen" (mode = 4) das Feld shf_arr gerade neu gemischt ist. backstep ruft dann select erneut mit dem aktuellen Parameterwert auf.

Nach dem Aufruf von select startet sie den Zeitschalter neu.

Sequencer::setcurrent (ix)

ix ist eine ganze Zahl im Bereich [0, num). Diese Methode hält den Zeitschalter an (stop), setzt current so, dass der Wert zum Aufruf von select mit dem Parameterwert ix passt und ruft schließlich select auf. Falls mode == 4, wird current so gesetzt, dass shf_arr[current] == ix, andernfalls ist current = ix.

min_width

Die anfängliche Breite des body-Elements in Pixeln. Der Wert wird in der Datei smdesk.css (Quelltext) vorgegeben. Wenn sich die Fenstergröße ändert (onResize), wird das body-Element so breit wie das Fenster, aber nicht schmaler als min_width Pixel.

min_height

Die anfängliche Höhe des body-Elements in Pixeln. Der Wert wird in der Datei smdesk.css (Quelltext) vorgegeben. Wenn sich die Fenstergröße ändert (onResize), wird das body-Element so hoch wie das Fenster, wenigstens aber min_height Pixel hoch.

div_main

Die Übersicht: Titel und Übersicht über die Bildergeschichten. Die Funktion show_text zeigt ihn an und show_image verbirgt ihn.

h1

Die Hauptüberschrift (h1-Element

In der Funktion onResize wird die Höhe der Hauptüberschrift ermittelt und benutzt, um die Höhe der Übersicht der Bildergeschichen zu bestimmen.

div_details

Der Abschnitt mit den Vorschaubildern zu den Bildergeschichten.

In der Funktion onResize wird die Höhe des Abschnitts ermittelt und benutzt, um die Höhe der Übersicht der Bildergeschichen zu bestimmen.

div_img

Der Abschnitt der Hauptbildes ("Bilderrahmen").

Die Funktion show_text verbirgt ihn, show_image zeigt ihn an, popup_set.on_close setzt das Kennwort (im Attribut class) für die Hintergrundfarbe.

img_main

Das Hauptbild.

Die Funktion the_seq.select setzt die URL des Bildes (Attribut src). Sobald das Bild geladen ist (onload), setzt die Funktion show_image das Attribut class (normal, fullwidth oder fullheight).

style_img

Der Stil des Hauptbildes (img_main)

Die Funktion onResize setzt die Größe, die Funktion show_image den oberen Innenabstand (paddingTop).

style_body

Der Stil des body-Elements. Die Funktion onResize setzt die Größe.

style_urls

Der Stil der Übersicht über die Bildergeschichten. Die Funktion onResize setzt die Höhe.

popup_set

Das Objekt der Klasse Popup steht für das Fenster "Einstellungen" (Kennung set). Objektspezifische Felder enthalten die aktuelle Einstellung. popup_set definiert eigene Methoden on_open und on_close.

imgsize

Das Unterverzeichnis der Bilddateien entsprechend der gewählten Größe des Quell-Bildes. Die möglichen Werte sind in der Datei smdesk.xslt (Text) definiert. Der Wert beinhaltet den abschließenden Schrägstrich nach dem Verzeichnisnamen.

popup_set.imgsize wird in der Funktion the_seq.select gelesen.

view

Die gewählte Option zur Anpassung der Bildgröße an den verfügbaren Platz ("Bilddarstellung"). Der Wert wird in der Funktion show_image ausgewertet. Nach einer Änderung der Auswahl ruft die Methode on_close show_image auf, wenn das Einzelbild angezeigt wird (b_imgshown).

on_open

Wenn das Fenster "Einstellungen" geöffnet wird, setzt diese Methode den Text der Schaltfläche mit der ID inp_start auf den Wert "Stop" oder "Start", abhängig davon, ob die Bilder automatisch laufen (s. the_seq.timer).

on_close

Diese Methode übernimmt die Einstellungen der Eingabe-Elemente. Einen geänderten Wert im Auswahlfeld "Bildrahmen" setzt sie in das Attribut class des Einzelbild-Abschnitts (div_img) ein. Wenn die Auswahl im Feld "Bilddarstellung" geändert wird, während das Einzelbild angezeigt ist, ruft sie show_image auf, direkt oder indirekt über die Methode the_seq.restart. Wenn der "Bildlauf" geändert wird, während das Einzelbild angezeigt ist, ruft on_close die Methode the_seq.restart auf.

on_close wird nicht nur in der Methode close aufgerufen, sondern auch zur Initialisierung (Funktion initialize).

Das Fenster "Einstellungen" wird geschlossen (popup_set.close) von der Funktion onKeydown bei der Behandlung der Tasten C und S und von der Funktion on_click_start (Mausklick auf dem Knopf "Start/Stop", ID inp_start).

Die Taste E öffnet oder schließt das Fenster (popup_set.toggle).

popup_about

Die Variable popup_about steht für das Info-Fenster (Klasse Popup).

Die Taste C schließt das Fenster, die Taste I öffnet oder schließt (toggle) es.

popup_help

Die Variable popup_help steht für das Fenster "Befehle" (Klasse Popup).

Die Taste C schließt das Fenster, die Taste H öffnet oder schließt (toggle) es.

the_seq

Dieses Sequencer-Objekt steuert den Bildlauf.

select: Die Funktion initialize erzeugt eine Liste der Bildkennungen (s. cur_imgid). Die Methode select zeigt das Bild mit dem übergebenen Index in der Liste an. Wenn die Kennung in der Liste nicht schon mit cur_imgid übereinstimmt, setzt die Methode cur_imgid und das Attribut src des Hauptbildes img_main und ruft dann show_image auf.
on_start: Diese Methode stellt den ausgewählte Bildlauf ein (setmode).

the_toggler

Das Objekt der Klasse ToggleDetails.

Die Methode toggle wird bei einem Klick auf den Auswahlknopf zu einer Bildgeschichte (Ereignisbehandler on_click_button) aufgerufen.

Das Datenelement the_toggler.sto bestimmt, welche Bildergeschichte beim Drücken der Tasten G oder T angezeigt wird, falls nicht das Einzelbild angezeigt ist (s. b_imgshown).

sz_main

Die gemeinsame Größe des body-Elements, der Übersicht (div_main und des Einzelbild-Feldes (div_img mit den Komponenten width und height.

Die Funktion onResize setzt die Werte, die Funktion show_image wertet sie zur Anpassung der angezeigten Bildgröße aus.

b_imgshown

Die Variable zeigt an, ob das Einzelbild angezeigt wird (true) oder nicht.

Die Funktion show_text setzt sie auf den Wert false, show_image auf den Wert true.

Die Variable wird in den Funktionen popup_set.on_close, onResize und onKeydown gelesen.

cur_imgid

Die Kennung des aktuellen Einzelbildes. Sie ist aus dem Verzeichnisnamen der Bildergeschichte, einem Schrägstrich als Trennzeichen und dem Dateinamen der Bilddatei ohne die Endung ".jpg" zusammengesetzt.

Die Funktion show_image setzt den Wert und zugleich das Attribut src des Einzelbildes (img_main)

Wenn das Einzelbild angezeigt ist, bestimmt die Funktion onKeydown bei der Behandlung der Tasten G und T aus cur_imgid die anzuzeigende Bildergeschichte.

get_total_height(elt)

Ergibt die Gesamthöhe der Darstellung des Elements elt aus Außenabstand, Rahmen und Innenabstand.

Diese Hilfsfunktion ergibt in onResize die Höhe der Überschrift.

show_text

Der Bildlauf wird angehalten (the_seq.stop), der Einzelbild-Abschnitt (div_img) verborgen, und die Übersicht (div_main) angezeigt. b_imgshown wird false.

show_text wird zur Behandlung der Taste ← aufgerufen.

show_image ()

Zeigt das Einzelbild an, angepasst an die aktuelle Größe des "Rahmens" div_img.

Wenn das Einzelbild aktuell nicht angezeigt wird (b_imgshown ist logisch falsch), verbirgt diese Funktion die Übersicht (div_main), zeigt das Einzelbild-Feld (div_img an und setzt b_imgshown auf true.

Anhand der tatsächlichen Bildgröße (in Pixeln) im Vergleich zur Größe des Bildfeldes div_img und der Einstellung "Bilddarstellung" (popup_set.view) bestimmt sie den oberen Abstand des Bildes vom Rand der Bildkante (padding-top) und setzt Wert des Attributs class des Bildes: normal, fullheight oder fullwidth.

show_image wird aufgerufen

indirekt von the_seq.select, wenn die URL des Bildes gesetzt ist und das neue Bild geladen ist (onload),

wenn die Einstellung "Bilddarstellung" geändert ist (popup_set.on_close),

wenn die Größe des Browserfensters geändert ist (onResize),

wenn die Taste "→" gedrückt wird (onKeydown).

on_click_button (event)

Diese Funktion behandelt einen Klick auf den Auswahlknopf im Eintrag zu einer Bildergeschichte in der übersicht. Aus der ID des Auswahlknopfs bestimmt sie die Position Bildergeschichte und ruft the_toggler.toggle auf.

on_click_inlimg (event)

Diese Funktion behandelt einen Mausklick auf ein Vorschaubild. Aus der ID des XHTML-Elements entnimmt sie die Position des Vorschaubildes unter allen Vorschaubildern und ruft the_seq.setcurrent auf.

on_click_start (event)

Diese Funktion behandelt einen Mausklick auf den Knopf "Start" (oder "Stop") im Fenster "Einstellungen". Sie schließt das Fenster und startet oder beendet die automatischen Bildlauf (the_seq.toggle).

onResize (event)

Wenn der Wert der Variablen min_height bisher nicht bestimmt ist, werden die Werte von min_height und min_width bestimmt.

Die Funktion onResize setzt die Größe des body-Elements (s. style_body) die Höhe der Übersicht der Bildergeschichten (style_urls) und die Größe des Hauptbildes (style_img).

onKeydown (event)

Die Funktion onKeydown behandelt das Niederdrücken (keydown) einiger Tasten oder einen Klick auf ein span-Element im Fenster "Befehle". (popup_help)

Wenn eine Zusatz-Taste (Control, Shift, Meta, Alt) gedrückt ist, wird die Taste hier nicht behandelt.

Die behandelten Tasten sind:

DOM_VK_S (S)

Schließt das Fenster "Einstellungen" (popup_set) und startet den automatischen Bildlauf (the_seq) oder hält ihn an.

DOM_VK_C (C)

Schließt alle angezeigten Klappfenster ("Einstellungen" (popup_set), "Info" (popup_about), "Befehle" (popup_help))

DOM_VK_E (E)

Öffnet oder schließt das Klappfenster "Einstellungen" (popup_set)

DOM_VK_H (H)

Öffnet oder schließt das Klappfenster "Befehle" (popup_help)

DOM_VK_I (I)

Öffnet oder schließt das Info-Fenster (popup_about)

DOM_VK_DOWN (↓)

Wenn die Übersicht angezeigt wird (b_imgshown ist logisch falsch), wird die Taste hier nicht behandelt. Der Browser könnte mit der Taste die Bildlaufleiste der Übersicht steuern.

Wenn das Einzelbild angezeigt wird, wird die Taste so behandelt wie die Taste N.

DOM_VK_N (N)

Die Taste wird hier nicht behandelt, wenn das Fenster "Einstellung" angezeigt wird. Wenn der Bildlauf aktiv ist, setzt diese Taste den Bildlauf sofort mit dem nächsten Bild fort (the_seq.restart). Andernfalls startet sie den Bildlauf.

DOM_VK_UP (↑)

Wenn die Übersicht angezeigt wird (b_imgshown ist logisch falsch), Der Browser könnte mit der Taste die Bildlaufleiste der Übersicht steuern.

Wenn das Einzelbild angezeigt wird, wird die Taste so behandelt wie die Taste Z.

DOM_VK_Z (Z)

Die Taste wird hier nicht behandelt, wenn das Fenster "Einstellung" angezeigt wird. Wenn der Bildlauf aktiv ist, setzt diese Taste den Bildlauf zum zuvor angezeigten Bild zurück, (the_seq.backstep). falls möglich (wenn die Bilder nicht pseudo-zufällig gewählt werden) Andernfalls startet sie den Bildlauf.

DOM_VK_LEFT (←)

Wenn das Einzelbild angezeigt wird, wechselt die Anzeige zur Übersicht. Der automatiosche Bildlauf wird nicht unterbrochen.

DOM_VK_RIGHT (→)

Wenn die Übersicht angezeigt wird, aber zuvor bereits einmal das Einzelbild angezeigt worden ist (cur_imgid ist nicht leer), wechselt die Anzeige zum Einzelbild. Der automatische Bildlauf läuft weiter.

DOM_VK_G (G)

Wenn das Einzelbild angezeigt wird, dann wird die Galerieansicht der Bildergeschichte zum angezeigten Bild an Stelle der Sitemap geladen. Wenn die Übersicht angezeigt wird, dann wird Gelerieansicht der Bildergeschichte geladen, deren Vorschaubilder angezeigt werden.

DOM_VK_T (T)

Wenn das Einzelbild angezeigt wird, dann wird die Bildergeschichte zum angezeigten Bild an Stelle der Sitemap geladen. Wenn die Übersicht angezeigt wird, dann wird die Bildergeschichte geladen, deren Vorschaubilder angezeigt werden.

DOM_VK_HOME (Pos 1)

Statt der Sitemap wird die Startseite der Website (index.xhtml) geladen.

DOM_VK_X (X)

Statt der Sitemap wird die Hilfe zur Darstellung der Sitemap geladen (style/smdesk_help.xhtml).

initialize ()

Diese Funktion wird aufgerufen, sobald das XHTML-Dokument geladen ist. Sie initialisiert die globalen Variablen und Objekte.

Die Funktion onResize wird möglichst früh aufgerufen, damit die Übersicht schnell angezeigt wird. Erst danach werden die gespeicherten Einstellungen gelesen (get_stored_settings).

Dann werden die Ereignisbehandler, die nicht mit den "Popup"-Objekten verbunden sind, zugeordnet.

Wenn der Fragment-Bezeicher des URI "#rndimgshow" ist, wird ein zufälliger Bildlauf gestartet.

get_stored_settings ()

Der Wert, der unter dem Schlüssel „set” gespeichert ist (window.localStorage oder window.sessionStorage), ist eine Zeichenkette aus Komponenten, die durch einen Doppelpunkt getrennt sind. Jede Komponente hat die Form KEY=Wert. Jedem hier möglichen Wert KEY ist ein Wert ID zugeordnet. Wenn ID die ID eines HTML-Elements ist, dann muss das Element ein Eingabe-Element sein. Wenn ID mit "chk_" beginnt, muss das Element ein Knopf ("Button") sein. In diesem Fall wird die DOM-Eigenschaft checked true, falls "Wert" "1" ist, sonst false. Andernfalls wird "Wert" der Wert der DOM-Eigenschaft value.

get_stored_settings wird am Anfang der Initialisierung (initialize) aufgerufen.