Die Datei desktop.js
enthält Code für die Website kleider.herbaer.de
. Zusammen mit den Dateien desktop.xslt
(Text) und desktop.css
(Quelltext) dient sie der Darstellung der Bildergeschichten (XML-Namensraum http://herbaer.de/xmlns/20080705/imgshow
) und der Hilfe (help.xhtml
) auf Desktop-Geräten.
Sie setzt voraus, dass die Javascript-Datei common.js
(Quelltext) geladen ist.
Einige globale Variablen werden in der Funktion initialize
oder beim ersten Aufruf von onResize
einmalig mit Werten belegt, die aber nicht in dieser Datei definiert sind.
Zu diesen Variablen gehören Maße der Darstellung von Elementen, die aus CSS-Regeln ermittelt werden. Diese Variablen werden beim ersten Aufruf der Prozedur onResize
initialisiert und in dieser Prozedur auch gelesen.
Andere Variable sind DOM-Elemente, die anfangs einmal ermittelt werden. Von einigen DOM-Elementen wird nur das style
-Objekt benutzt. In diesen Fällen wird auch nur das style
-Objekt in einer globalen Variablen gespeichert.
show_elt
(elt)hide_elt
(elt)Sequencer
() sequencer.timer
sequencer.msec
sequencer.mode
sequencer.num
// Anzahl der Einträge sequencer.current
// Der aktuelle Eintrag sequencer.shf_arr
// Misch-Feld sequencer.tmfunc
Sequencer.prototype.on_start
Sequencer.prototype.start
Sequencer.prototype.stop
Sequencer.prototype.restart
Sequencer.prototype.toggle
Sequencer.prototype.setmode
(mode) Sequencer.prototype.shuffle
Sequencer.prototype.select
(index) Sequencer.prototype.nextstep
Sequencer.prototype.backstepBreaker
() breaker.value
breaker.msec
breaker.tf
Breaker.prototype.set
varprf_img
; // Pfad-Prefix der Bilddateien varix_width
; varslides_msec
; // Schrittdauer der Vorschaubilder-Leiste varmin_width
; // Anfängliche Breite des Body-Elements ist die Mindestbreite varmin_height
; // Anfängliche Höhe des Body-Elements ist die Mindesthöhe varslides_width
; // Breite der Vorschaubilder-Leiste varlogo_height
; // Höhe der Titel-Leiste: Logo, Titel und Menüfeld varmenu_height
; // Höhe einer Menü-Zeile varheader_height
; // Höhe des Kopfes in Pixeln varfooter_height
; // Höhe des Fußes in Pixeln varcont_height
; // Höhe des Inhaltsbereichs, die Kopf und Fuß frei lassen varsldiv_height
; // Höhe des "Rahmens" (div) um ein Vorschau-Bild varlast_id
; // ID zum letzten Vorschaubild varurl_galery
; // URL der "Galerie" varstyle_body
; // "Style" der Gesamt-Seite varstyle_logo
; // "Style" des Logos varstyle_head
; // "Style" der Überschrift (rechts des Logos) varstyle_main
; // "Style" des Haupt-Inhaltsfeldes vardiv_title
; // die Titelleiste vardiv_links
; // das Menüfeld vardiv_header
; // die Kopfleiste vardiv_sound
; // Abschnitt mit Schalter zum "Ogg-Spieler" vardiv_mainimg
; // Abschnitt des Haupt-Bildes (Rahmen) varimg_mainimg
; // Haupt-Bild (Element) vardiv_footer
; // die Fußleiste vardiv_mt
; // Haupttext-Abschnitt varmover_ix
; // Index-Schiebeleiste mover_ix.num_entries
mover_ix.show_entry
(ix) varmover_sl
; // Vorschau-Schiebeleiste varpopup_set
; // Popup "Einstellungen" popup_set.initialized
popup_set.show_title
= 1 popup_set.menu
= "t" popup_set.header
= "t" popup_set.show_footer
= 1 popup_set.sections
= "l" popup_set.slides
= "r" popup_set.imgdir
popup_set.view
popup_set.on_open
() popup_set.on_close
() varpopup_about
; // Popup "Über ..." varpopup_help
; // Popup "Befehle" varseq
; // der Bildfolgen-Abspieler seq.msec
seq.select
(ix) seq.on_start
() varmouseover_stop
; // Unterbrecher für "MouseOver" varthe_store
; // der Datenspeicher: localStorage oder sessionStorage varcur_sectid
; // ID des aktiven Abschnitts (show_section / show_section_and_image) varcur_li
; // der aktuelle Index-Eintrag (Abschnitt) varcur_textdiv
; // der aktuelle Text-Abschnitt varcur_slidesdiv
; // der aktuelle Slides-Abschnitt varb_imgshown
; // wird ein Bild angezeigt? (show_text / show_image) varcur_ifid
; // Datei-Kennung des aktuellen Bildes (show_image) varb_frame
; // "Rahmenelemente" oder nur das Hauptfeld? (Taste b) varcur_sldiv
; // Rahmen um das aktuell hervorgehobene Vorschau-Bild varcur_sldivid
; // ID zum aktuell hervorgehobenen Vorschau-Bild varcur_id
; // aktuelle ID eines Elements varsz_main
; varsound_elt
; varsound_playing
; // Spielt die Musik?initialize_sound
()sound_on_ended
(event)sound_play_pause
(event)get_id_components
(combi_id)hilite_elt_on
(elt)hilite_elt_off
(elt)hilite_slide
(id)show_text
()show_image
(ifid)do_show_image
()show_section
(id)show_section_and_image
(id)get_stored_settings
()initialize
()tell_about
(event)onResize
(event)onKeydown
(event)followIndexEntry
(event)updateIndexHandlers
(evtname_old, evtname_new)followSlide
(event)updateSlidesHandlers
(evtname_old, evtname_new)on_mouseover_imglink
(event)followImglink
(event)followSectlink
(event)updateLinkHandlers
(evtname_old, evtname_new)on_click_start
(event)
show_elt
(elt
)Wenn elt
nicht null
ist, ersetzt diese Funktion das Wort "hidden
" im Attribut class
des XHTML-Elements elt
durch "shown
". CSS-Regeln können dann die Darstellung des Elements ändern. Bei typischen Anwendungen enthält das Attribut class
bereits das Wort "shown
" oder "hidden
".
show_elt
wird von onResize
aufgerufen.
hide_elt
(elt
)Die Funktion setzt voraus, dass elt
ein Element mit dem Attribut class
ist. Sie ersetzt das Wort "shown
" im Attribut class
des Elements elt
durch "hidden
".
Sequencer
Die Klasse Sequencer
ruft in regelmäßigen Zeitabständen die Methode select
auf, der sie eine natürliche Zahl als Parameter übergibt. Der Parameter kann auf verschiedene Arten bestimmt werden.
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
und nextstep
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 der Methode nextstep
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
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.
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.
Breaker
Die Klasse Breaker
setzt für eine bestimmte Zeit (msec
) das Feld value
auf den Wert true
. Während dieser Zeit kann zum Beispiel die Behandlung von Ereignissen unterbrochen werden.
breaker
.value
Die logische Variable value
wird mit false
initialisiert. Die Methode set
setzt sie für die Dauer von msec
ms auf true
.
breaker
.msec
Die Zeitdauer in Millisekunden, die die Methode set
das Feld value
auf true
setzt.
breaker
.tf
Die Funktion tf
setzt value
zurück auf false
. Sie wird von der Methode set
verzögert aufgerufen.
Breaker
::set
Die Methode set
setzt value
auf true
und ruft dann tf
mit einer Verzögerung von msec
ms auf. tf
setzt value
wieder auf false
.
prf_img
prf_img
ist das Präfix des Pfads der Bilddateien. Diese Variable muß außerhalb dieser Datei deklariert und initialisiert sein. Sie wird in der Methode popup_set
.on_close
gelesen.
Für die "Bildgeschichten" wird diese Variable in der Datei desktop.xslt
(Text) definiert.
ix_width
ix_width
steuert die Breite der Abschnitts-Liste (in der Voreinstellung auf der linken Seite). Das VarValue
- Objekt wird in der Funktion onResize
benutzt. Die Breite der Abschnitts-Liste beträgt 30 Prozent der Breite des Fensters, mindestens aber 150 Pixel und höchstens 500 Pixel.
slides_msec
slides_msec
ist die Zeitdauer in Millisekunden zwischen zwei Bewegungsschritten der Vorschaubilder, während der Mauszeiger auf eine der Bewegungs-Schaltflächen der Vorschaubilder zeigt. Der Wert wird mover_sl
.millisec
zugewiesen.
min_width
Die Mindestbreite des body
-Elements in Pixeln. Der Wert ist die Hälfte der anfänglichen Breite, die die Datei desktop.css
(Quelltext) vorgibt. 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 Mindesthöhe des body
-Elements in Pixeln. Der Wert ist die Hälfte der anfänglichen Höhe, die die Datei desktop.css
(Quelltext) vorgibt. Wenn sich die Fenstergröße ändert (onResize
), wird das body
-Element so hoch wie das Fenster, wenigstens aber min_height
Pixel hoch.
slides_width
Die Breite der Leiste der Vorschaubilder (Element mit der ID sl_main
) in Pixeln. Der Wert ist die Breite eines "Rahmens" der Vorschaubilder, definiert in desktop.css
(Quelltext). Die Funktion onResize
benutzt diesen Wert zur Positionierung der Vorschaubilder (in der Voreinstellung an der rechten Seite).
logo_height
Die Höhe der Titelleiste (ID div_title
). Sie ist das Maximum der ursprünglichen Höhen des Logo-Feldes (ID div_logo
) und der Summe der Höhen des Titels (ID div_head
) und des Menüfeldes (ID div_links
).
Die Höhe des Menüfeldes (ID div_links
) über der Überschrift.
header_height
Die maximale Höhe der Kopfleiste (Element mit der ID header
) in Pixeln. Der Wert ist die Höhe zu Anfang, festgelegt in der Datei desktop.css
(Quelltext).
Das body
-Element wird zunächst durch die Titelleiste (Logo, Titel und Menüfeld) und das Haupt-Inhaltsfeld ausgefüllt. Nur wenn das body
-Element höher ist als die Summe der Höhe der Titelleiste und der Höhe des Haupt-Inhaltsfelds zu Anfang (cont_height
), wird die Kopfleiste angezeigt.
Die maximale Höhe der Fußleiste (Element mit der ID footer
) in Pixeln. Der Wert ist die Höhe zu Anfang, festgelegt in der Datei desktop.css
(Quelltext).
Die Titelleiste, das Haupt-Inhaltsfeld und die Kopfleiste werden vorrangig vor der Fußleiste angezeigt. Die Kopfleiste und die Titelleiste können aber ausgeschaltet werden. Nur wenn die Summe der anfänglichen Höhen der vorrangig angezeigten Elemente kleiner ist als die Höhe des body
-Elements, wird die Fußleiste angezeigt (sofern nicht ausgeblendet).
cont_height
Die "minimale" Höhe des Haupt-Inhaltsfeldes (Element mit der ID div_main
) in Pixeln. Der Wert ist die Höhe zu Anfang, festgelegt in der Datei desktop.css
(Quelltext).
Wenn die Höhe des body
-Elements kleiner ist als die Summe von cont_height
und, falls angezeigt, der Höhe der Titelleiste (logo_height
) wird das Haupt-Inhaltsfeld nur in der verfügbaren Höhe (der Differenz) angezeigt. cont_height
ist also nicht wirklich die minimale Höhe.
Wenn die Höhe des body
-Elements größer ist, werden die Kopfleiste und die Fußleiste angezeigt, sofern deren Anzeige nicht ausgeschaltet ist. Erst wenn die Summe der anfänglichen Höhen der Titelleiste, des Haupt-Inhaltsfeldes und, sofern angezeigt, der Kopfleiste und der Fußleiste kleiner ist als die Höhe des body
-Elements, wird das Haupt-Inhaltsfeld höher dargestellt. Nach jeder Größenanpassung addieren sich die Höhen der angezeigten Elemente Titelleiste, Kopfleiste, Haupt-Inhaltsfeld und Fußleiste zur Höhe des body
-Elements.
sldiv_height
Die Höhe des Rahmens um ein Vorschaubild. Der Wert ist die Höhe (in Pixeln) des ersten "Enkels" des Inhaltsbereichs der Vorschauleiste (ID sl_content
). Dessen "Kinder" sind div
-Elemente zu den Abschnitten, deren Kinder sind die div
-Elemente (class
slide
), deren Hintergrund die Vorschaubilder sind. Die CSS-Datei desktop.css
(Quelltext) setzt deren Höhe.
Der Wert wird in der Funktion hilite_slide
benutzt, um die nötige Verschiebung der Vorschaubilder zu bestimmen, mit der das richtige Bild sichtbar ist. Er ist auch die Schrittweite der automatischen Bewegung der Vorschaubilder (mover_sl
.stepwid
).
last_id
Die "ID" des letzten Bildes: der Wert des Attributs id
des letzten Vorschau-Bildrahmens des letzten Abschnitts ohne das Präfix "div_
".
Die Variable wird bei der Behandlung der Taste Ende benutzt und bei Bedarf initialisiert.
url_galery
Die URL der "Galerie"-Darstellung (Stub). Der Wert ist das Verweisziel des Verweises mit der ID link_galery
. Er wird zur Behandlung der Taste G benutzt (onKeydown
)
style_body
Das style
-Objekt des body
-Elements. Die Funktion onResize
nutzt es zur Anpassung an die Fenstergröße.
style_logo
Das style
-Objekt des Logo-Feldes in der Titelleiste mit der ID div_logo
, falls die Bildergeschichte nicht eingebettet angezeigt wird. Es wird in der Funktion onResize
zur Positionierung benutzt.
style_head
Das style
-Objekt des Titels mit der ID div_head
. Es wird in der Funktion onResize
zur Positionierung benutzt.
style_main
Das style
-Objekt des Haupt-Inhaltsbereichs mit der ID div_main
. Es wird in der Funktion onResize
zur Positionierung benutzt.
div_title
Die Titelleiste. Sie wird in der Funktion onResize
positioniert oder verborgen.
div_links
Das Menüfeld in der Titelleiste. Es wird in der Funktion onResize
verborgen oder angezeigt und positioniert.
div_header
Die Kopfleiste oberhalb der Titelliste. Sie wird in der Funktion onResize
verborgen oder angezeigt und positioniert.
div_sound
Die Schaltfläche für den Klang in der Titelleiste. Wenn die Bildergeschichte eingebettet angezeigt wird, dann wird diese Schaltfläche bei der Initialisierung (initialize
) verborgen. Falls das audio
- Element zur Klangwiedergabe nicht verfügbar ist, wird sie in der Funktion initialize_sound
verborgen.
div_mainimg
Das Feld, in dem das Haupt-Bild angezeigt wird. Die Funktion show_text
verbirgt das Feld, die Funktion do_show_image
zeigt das Feld an und setzt den oberen Innenabstand gemäß der Einstellung "Bilddarstellung" (popup_set
.view
).
img_mainimg
Das Haupt-Bild.
Die Funktion show_image
setzt die Quell-Datei (Attribut src
), die Funktion do_show_image
setzt das Attribut class
auf einen der Werte normal
, fullheight
oder fullwidth
.
Die Fußleiste am unteren Rand. Sie wird in der Funktion onResize
verborgen oder angezeigt und positioniert.
div_mt
Der Haupt-Textabschnitt. Die Funktion show_text
zeigt ihn an und die Funktion do_show_image
verbirgt ihn.
mover_ix
Das Objekt der Klasse Moveable
steht für die Abschnitts-Liste.
Zu den Feldern und Methoden, die die Klasse definiert, hat mover_ix
zwei weitere Elemente:
num_entries
Die Anzahl der Abschnitte. Dieses Feld wird in der Methode show_entry
gelesen.
show_entry
(ix
)Zeigt den Eintrag zum Abschnitt an der Position ix
. Dabei wird angenommen, daß die Einträge etwa dieselbe Höhe einnehmen und daß etwa 40% der gesamten Liste zu sehen sind.
Die Methode wird in den Funktionen show_section
und onKeydown
aufgerufen.
mover_sl
Das Objekt der Klasse Moveable
steht für die Leiste der Vorschaubilder. Es enthält nur die Komponenten, die die Klasse definiert. Das Feld millisec
wird mit dem Wert slides_msec
initialisiert, das Feld stepwid
mit sldiv_height
, der Höhe des Rahmens um ein Vorschaubild.
Die Funktion hilite_slide
ruft die Methode show
auf, damit das aktuelle Bild in der Vorschau zu sehen ist.
Die Funktion show_section
ruft die Methode update_content
auf, damit die Länge der Leiste der Vorschaubilder zum neuen Abschnitt in den Feldern des Objekts übernommen wird.
Die Methode seq
.on_start
liest mover_sl
.content
, um die Liste der Bildkennungen für einen "globalen" Bildlauf zu erstellen.
Die Funktion onResize
verbirgt die Vorschaubilder an oder zeigt sie an und positioniert sie.
popup_set
Das Objekt der Klasse Popup
steht für das Fenster "Einstellungen" (Kennung set
). Objektspezifische Felder enthalten die aktuelle Einstellung. Nicht alle Felder von popup_set
entsprechen Eingabe-Elementen in Fenster "Einstellungen". Manche Einstellungen vorgegebenen Einstellungen können nicht im Fenster "Einstellungen" geändert werden.
popup_set
definiert eigene Methoden on_open
und on_close
.
initialized
Normalerweise werden beim Schließen (on_close
) die Einstellungen lokal gespeichert (the_store
). Beim ersten Aufruf der Methode on_close
während der Initialisierung ist das allerdings nicht nötig. Dieses Feld wird mit false
initialisiert und am Ende der Methode on_close
auf true
gesetzt, wenn das Storage
-Objekt the_store
existiert. Wenn das Storage
-Objekt nicht existiert, ist initialized
nicht relevant.
show_title
Das logische Feld show_title
zeigt der Funktion onResize
an, ob die Titelleiste (div_title
) anzuzeigen ist. Es wird mit 1
initialisiert.
Das Feld zeigt der Funktion onResize
an, ob und wie das Menüfeld (div_links
) anzuzeigen ist. Die möglichen Werte sind "h
" (verbergen), "t
" (über dem Titel) und "b
" (unter dem Titel).
Der eingestellte Wert ist "t
".
header
Das Feld zeigt der Funktion onResize
an, ob und wo die Kopfleiste (div_header
) anzuzeigen ist, wenn das Fenster groß genug ist. Die möglichen Werte sind "h
" (verbergen), "t
" (über der Titelleiste) und "b
" (unter der Titelleiste).
Der eingestellte Wert ist "t
".
Das logische Feld show_footer
zeigt der Funktion onResize
an, ob die Fußleiste (div_footer
) anzuzeigen ist, wenn das Fenster groß genug ist.
Der eingestellte Wert ist 1
.
sections
Das Feld sections
zeigt der Funktion onResize
an, ob und wo die Liste der Abschnitte (mover_ix
) anzuzeigen ist. Die möglichen Werte sind "h
" (verbergen), "l
" (links) und "r
" (rechts).
Der eingestellte Wert ist "l
".
slides
Das Feld slides
zeigt der Funktion onResize
an, ob und wo die Vorschaubilder (mover_sl
) anzuzeigen sind. Die möglichen Werte sind "h
" (verbergen), "l
" (links) und "r
" (rechts).
Der eingestellte Wert ist "r
".
imgdir
Das Verzeichnis der Bilddateien. Es ist zusammengesetzt aus dem Präfix prf_img
und der Einstellung im Auswahlfeld "Bildgröße". Die möglichen Werte sind in der Datei desktop.xslt
(Text) vorgegeben, zur Zeit "images/
" oder "smallimg/
".
popup_set
.imgdir
wird in der Funktion show_image
gelesen.
view
Der Wert im Auswahlfeld "Bilddarstellung" (ID sel_view
). Abhängig von diesem Wert bestimmt die Funktion do_show_image
den oberen Innenabstand (padding-top
) des Rahmens (div_mainimg
) und das Attribut class
des Bildes (img_mainimg
).
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 "■" oder "▶", abhängig davon, ob die Bilder automatisch laufen (s. seq
.timer
).
on_close
Diese Methode übernimmt die Einstellungen der Eingabe-Elemente. Wenn die Einstellung im Auswahlfeld "Bilddarstellung" (ID select_view
) geändert ist, ruft sie die Funktion do_show_image
auf. Bei einer Änderung im Auswahlfeld "Bildrahmen" (ID sel_imgframe
) ändert sie direkt das Attribut class
des "Bildrahmens" (div_mainimg
).
Bei Änderungen der Werte in den Eingabefeldern, die in der folgenden Tabelle genannt werden, ruft on_close
die genannte Funktion auf:
Feld | ID | Funktion |
---|---|---|
Abschnittwahl | sel_evtsect | updateIndexHandlers |
Bildwahl | sel_evtsl | updateSlidesHandlers |
Verweis | sel_evtlink | updateLinkHandlers |
Die Eingabe im Feld "Anzeigedauer" (ID sel_duration
) wird im Feld seq
.msec
gespeichert.
Wenn die Markierung des Feldes "Alle Bilder" (ID chk_global
) geändert wird oder die Auswahl im Feld "Bildlauf" (ID sel_sequence
) nicht dem Wert seq
.mode
entspricht, aktualisiert seq
.restart
den Bildlauf.
Wenn das Storage
-Objekt the_store
existiert und this.
initialized
logisch wahr ist, werden die neuen Einstellungen im Objekt the_store
unter dem Schlüssel "set
" gespeichert.
on_close
wird nicht nur in der Methode close
aufgerufen, sondern auch am Ende der 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 "▶/■", ID inp_start
).
Die Taste E öffnet oder schließt das Fenster (popup_set
.toggle
).
popup_about
Die Variable popup_about
stellt das Info-Fenster (Klasse Popup
) dar.
Ein Mausklick auf die Schaltfläche "Über ..." im Menüfeld (div_links
) öffnet das Fenster. Ein Mausklick auf das Logo (ID div_logo
) oder die Fußleiste (div_footer
) öffnet oder schließt das Fenster (addSwitch
).
Die Taste C schließt das Fenster, die Taste I öffnet oder schließt (toggle
) es.
popup_help
Die Variable popup_help
stellt das Fenster "Befehle" (Klasse Popup
) dar.
Die Tasten C, E und I schließen das Fenster, die Taste H oder ein Klick auf das Hilfe-Fragezeichen (ID btn_help
) öffnen oder schließwn (toggle
) es.
seq
Dieses Sequencer
-Objekt steuert den Bildlauf. Zum Bildlauf gibt es eine Liste der Kennungen der Bilder, die in den Bildlauf einbezogen sind ("Closure"-Variable).
msec
Der Wert wird aus dem Eingabefeld "Anzeigedauer" (ID sel_duration
) gelesen.
select
Die Methode select
zeigt das Bild mit dem übergebenen Index in der Liste an. Dazu ruft sie die Funktion show_section_and_image
auf.
on_start
Sie aktualisiert die Bilderliste, falls nötig, und übernimmt die Einstellung im Auswahlfeld "Bildlauf" (ID sel_sequence
).
Die Einstellung "Anzeigedauer" wird beim Schließen des Fensters "Einstellungen" (popup_set
.on_close
) in das Feld msec
übertragen.
mouseover_stop
mouseover_stop
ist ein Breaker
-Objekt, das für 50 ms die Behandlung von "Mauseintritten" (mouseover
) in Einträgen der Abschnitts-Liste oder Vorschaubildern verhindert. Die Funktionen followIndexEntry
followSlide
machen nichts, wenn mouseover_stop
.value
logisch wahr ist.
mouseover_stop
.set
wird aufgerufen, wenn eine Tastatureingabe das Bild oder den Abschnitt ändert.
the_store
Wenn window.localStorage
existiert, ist the_store
window.localStorage
, sonst window.sessionStorage
.
Die Funktion get_stored_settings
liest bei der Initialisierung die gespeicherten Einstellungen der Eingabefelder im Fenster "Einstellungen" (popup_set
).
Die Methode popup_set
.on_close
speichert die aktuellen Einstellungen nach jeder Änderung.
cur_sectid
Die Kennung des aktuellen Abschnitts in der Form "s
". "NNN
NNN
" steht für die Nummer des Abschnitts. cur_sectid
wird von der Funktion show_section
verwaltet.
Die Funktion show_section_and_image
vergleicht den Abschnitt des neu anzuzeigenden Bildes mit cur_sectid
, und ruft show_section
auf, wenn die Abschnitte nicht übereinstimmen.
Die Methode seq
.on_start
baut die Bilderliste neu auf, wenn sie nicht zum Abschnitt cur_sectid
passt.
Beim Drücken der Tasten (onKeydown
) Bild Auf und Bild Ab ergibt sich aus cur_sectid
der neu anzuzeigende Abschnitt.
Die Taste M übernimmt cur_sectid
in den Fragmentbezeichner des URI, wenn der Abschnittstext angezeigt wird.
Die Funktion tell_about
baut cur_sectid
in den zu versendenden URI, wenn der Text eines Abschnitts angezeigt wird (s. b_imgshown
)
Die Variable cur_sectid
ist redundant, denn der Wert kann immer aus cur_id
ermittelt werden. Sie spart aber den Aufwand, cur_id
zur Bestimmung des aktuellen Absichnitts zu zerlegen.
Zusammen mit cur_sectid
werden auch die redundanten Variablen cur_li
, cur_textdiv
und cur_slidesdiv
gesetzt.
cur_li
Der Eintrag in der Abschnitts-Liste zum aktuellen Abschnitt cur_sectid
. Er hat die ID "li_
CUR_SECTID
". Die Variable wird zusammen mit cur_sectid
in der Funktion show_section
benutzt. Sie erspart Aufrufe der Funktion getElementById
.
cur_textdiv
Der Text zum aktuellen Abschnitt cur_sectid
. Er hat die ID "div_
CUR_SECTID
". Die Variable wird zusammen mit cur_sectid
in der Funktion show_section
benutzt. Sie erspart Aufrufe der Funktion getElementById
.
cur_slidesdiv
Die Reihe der Vorschaubilder zum aktuellen Abschnitt cur_sectid
. Sie hat die ID "slides_
CUR_SECTID
". Die Variable wird zusammen mit cur_sectid
in der Funktion show_section
benutzt. Sie erspart Aufrufe der Funktion getElementById
.
Sie wird von der Funktion onKeydown
bei der Behandlung der Taste → benutzt.
b_imgshown
b_imgshown
zeigt an, ob aktuell ein Bild (true
) oder der Abschnitts-Text (false
) angezeigt wird. Die Funktion show_text
setzt b_imgshown
auf true
, do_show_image
auf false
.
Die Methode popup_set
.on_close
prüft b_imgshown
: Wenn ein Bild angezeigt wird und die Einstellung zur Bildansicht, aber nicht die "Geometrie" geändert ist, ruft sie do_show_image
auf.
Die Behandlung der Taste M und die Funktion tell_about
lesen b_imgshown
zur Bestimmung des URI zur aktuellen Ansicht.
Auch bei der Behandlung der Tasten (onKeydown
) ← und → wird b_imgshown
geprüft: Wenn bereits der Text bzw. das Bild angezeigt wird, bleibt nichts zu tun.
Wenn die Fenstergröße geändert wird (onResize
), hängt es von b_imgshown
ab, ob do_show_image
aufgerufen wird.
cur_ifid
Die Kennung (Dateiname ohne Dateinamens-Erweiterung) der aktuell oder zuletzt angezeigten Bilddatei. Die Funktion show_image
verwaltet diese Variable. Sie kann anhand ihrer schnell entscheiden, ob ein anderes Bild anzuzeigen ist oder nicht, auch wenn zuletzt Textabschnitte angezeigt worden sind.
b_frame
Zeigt an, ob nur das Haupt-Inhaltsfeld (true
) oder alle Felder (false
) angezeigt werden sollen. Der Wert ist anfangs true
. und wird beim Drücken der Taste B umgeschaltet. Er wird in der Funktion onResize
gelesen.
cur_sldiv
Das hervorgehobene Vorschau-Bild (div
-Element mit Hintergrundbild). Die Variable wird in der Funktion hilite_slide
benutzt.
cur_sldivid
Die ID des aktuell hervorgehobenen Vorschaubildes (cur_sldiv
): der Wert des Attributs id
ohne das Präfix "div_
". Die Form ist s
.SECT
_IMGID
_LNR
Wenn ein anderer Abschnitt ausgewählt wird, dann bleibt das hervorgehobene Vorschaubild weiterhin hervorgehoben, solange kein anderes Vorschaubild gewählt wird. Wenn dann der Abschnitt des hervorgehobenen Vorschaubildes erneut ausgewählt wird, dann wird dieses wieder sichtbar, und cur_sldivid
wird an cur_id
zugewiesen.
cur_sldiv
wird in der Funktion hilite_slide
gesetzt und in der Funktion show_section
gelesen.
cur_id
Zeichenkette, die ein Bild oder einen Abschnitt bezeichnet. Wenn sie ein Bild bezeichnet, entspricht sie dem Muster "s
SECT
_
IMGID
_
LNR
". SECT
steht für die Nummer des Abschnitts, beginnend mit 1. IMGID
steht für den Namen der Bilddatei ohne die Namensendung ".jpg
". LNR
steht für die laufende Nummer des Bilds innerhalb seines Abschnitts, beginnend mit 0
. Zu einem Wert, der diesem Muster entspricht, gibt es das Vorschaubild (div
-Element) mit der ID "div_" +
und vielleicht einen Verweis im Text mit der ID cur_id
"span_" +
.cur_id
Wenn sie einen Textabschnitt bezeichnet, entspricht sie dem Muster "s
SECT
_
". Der angehängte Unterstrich verhindert, daß ein Element mir der ID "div_" +
gefunden wird.cur_id
Die folgenden Funktionen setzen cur_id
: show_section
, show_section_and_image
und on_mouseover_imglink
.
cur_id
wird zur Behandlung der Tasten ↑, ↓ und → gelesen und dient zur Bestimmung des URI zur aktuellen Ansicht in der Funktion tell_about
und bei der Behandlung der Taste M.
sz_main
sz_main
ist die Größe des Haupt-Inhaltsbereichs (Bild-Rahmens) mit den Komponenten width
und height
. Die Werte werden in der Funktion onResize
gesetzt und in der Funktion do_show_image
gelesen.
sound_elt
Das XHTML-Element, das die Klangwiedergabe bestimmt: das audio
-Element mit der ID audio
. sound_elt
wird von der Funktion initialize_sound
gesetzt. Wenn das Element nicht die Javascript-Methoden play
und pause
anbietet, wird sound_elt
auf null
gesetzt. So zeigt sound_elt
an, ob eine Klangwiedergabe möglich ist. Wenn sound_elt
null
ist, wird die Schaltfläche div_sound
verborgen.
sound_playing
Diese logische Variable hat den Wert true
, solange die Tonwiedergabe läuft. Sie wird in den Funktionen sound_on_ended
und sound_play_pause
gesetzt.
initialize_sound
()Diese Funktion initialisiert die Variablen sound_elt
und sound_playing
. Wenn Klang wiedergegeben werden kann, ordnet sie einem Mausklick auf der Schaltfläche div_sound
den Ereignisbehandler sound_play_pause
und dem Erreichen des Endes der Klangdaten den Ereignisbehandler sound_on_ended
zu.
sound_on_ended
(event)Wenn das Ende der Klangdaten erreicht ist, setzt dieser Ereignisbehandler sound_playing
auf false
und ersetzt das Wort playing
im Attribut class
des Schalters div_sound
durch paused
sound_play_pause
(event)Startet die Tonwiedergabe und hält sie an. Diese Funktion behandelt den Mausklick auf der Schaltfläche div_sound
und das Drücken der Taste p.
get_id_components
(combi_id
)Der Parameter combi_id
ist wie cur_id
aufgebaut. Diese Funktion zerlegt den Parameter und liefert eine Struktur mit den Feldern sid
(section id) und ifid
(image file id).
Wenn combi_id
nicht mit dem Buhstaben "s
" beginnt, sind beide Felder undefiniert. Andernfalls besteht sid
aus dem Anfangsbuchstaben s
und allen unmittelbar folgenden Ziffern. Wenn nach der Ziffernfolge nach dem Anfangsbuchstaben eine Zeichenfolge folgt, die am Anfang und Ende durch einen Unterstrich begrenzt wird, enthält ifid
die Zeichen zwischen den Unterstrichen. Andernfalls ist ifid
undefiniert.
get_id_components
wird von den Funktionen show_section_and_image
und followImglink
und zur Behandlung der Taste → aufgerufen. aufgerufen.
hilite_elt_on
(elt
)Diese Funktion fügt dem Attribut class
des Elements elt
das Wort hilite
hinzu. Sie wird in hilite_slide
aufgerufen, um ein Vorschaubild hervorzuheben, und in show_section
, um einen Eintrag in der Abschnittsliste hervorzuheben.
hilite_elt_off
(elt
)Diese Funktion entfernt das Wort hilite
aus dem Attribut class
des Elements elt
. Sie wird in hilite_slide
und in show_section
aufgerufen.
hilite_slide
(id
)Diese Funktion verwaltet das hervorgehobene Vorschaubild (cur_sldiv
). Wenn ein Element mit der ID "div_
ID
existiert, wird dieses Element das neue hervorgehobene Vorschaubild. Wenn der Parameter id
mit einem Unterstrich und einer Folge von Ziffern endet, dann stellt die Ziffernfolge die Anzahl der Vorschaubilder dar, die über dem neuen hervorzuhebenden Vorschaubild angezeigt werden. Diese Zahl bestimmt, wie weit die Leiste der Vorschaubilder zu verschieben ist, damit das neue hervorgehobene Vorschaubild sichtbar ist.
hilite_slide
wird von show_section_and_image
und on_mouseover_imglink
aufgerufen.
show_text
Wenn ein Bild (div_mainimg
) angezeigt wird (b_imgshown
), dann hält diese Funktion den Bildlauf an (seq
.stop
) und wechselt zur Anzeige des Textes.
show_text
behandelt einen Mausklick im Haupt-Bild und wird von den Funktionen onKeydown
und followIndexEntry
aufgerufen.
show_image
(ifid
)Zeigt das Bild mit der Kennung (Dateiname ohne Erweiterung) ifid
an. Die Funktion verwaltet die Variable cur_ifid
. Wenn cur_ifid
und ifid
übereinstimmen, ruft sie do_show_image
auf, um die Darstellung an neue Einstellungen oder die neue Fenstergröße anzupassen. Andernfalls ist ein neues Bild zu laden. Dazu setzt die Funktion das Attribut src
des Hauptbildes (img_mainimg
). Sobald das Bild geladen ist, passt do_show_image
die Darstellung an.
show_image
wird von den Funktionen show_section_and_image
und followImglink
aufgerufen.
do_show_image
Wenn der Textabschnitt angezeigt wird (s. b_imgshown
), dann deaktiviert diese Funktion den Textabschnitt und aktiviert den Bild-Rahmen (div_mainimg
). Dann setzt sie das Attribut class
des Bildes (img_mainimg
) entsprechend der aktuellen Einstellung auf einen der Werte normal
, fullheight
oder fullwidth
und passt die CSS-Eigenschaft padding-top
des Rahmens an.
Die Funktionen show_image
, popup_set
.on_close
und onResize
rufen do_show_image
auf. do_show_image
wird auch aufgerufen, wenn ein Bild geladen ist (Event load
).
show_section
(sectid
)sectid
ist die Kennung eines Abschnitts in der Form "s
NNN
". "NNN
" steht für die Nummer des Abschnitts. Wenn der aktuelle Abschnitt (cur_sectid
) und sectid
nicht übereinstimmen, dann passt diese Funktion cur_sectid
und die damit zusammenhängenden Variablen cur_li
, cur_textdiv
und cur_slidesdiv
an und aktualisiert die Darstellung der betroffenen Elemente.
Auch die Leiste der Vorschaubilder (mover_sl
.update_content
) wird aktualisiert. Wenn das aktuell hervorgehobene Vorschaubild (s. cur_sldivid
) zum neuen Abschnitt gehört, wird dieses angezeigt und cur_sldivid
der Variablen cur_id
zugewiesen. Andernfalls wird der Anfang des Abschnitt der Vorschaubilder angezeigt und
gesetzt. Der Wert von cur_id
= sectid
+ "_"cur_id
zeigt an, daß kein Bild ausgewählt ist. Es darf kein Element mit der ID div_
existieren, damit der Durchlauf über die Bilder mit den Pfeiltasten funktioniert.CUR_ID
Die Funktionen show_section_and_image
, initialize
, onKeydown
followIndexEntry
und rufen show_section
auf.
show_section_and_image
(id
)Diese Funktion verwaltet zusammen mit der Funktion show_section
die Variable cur_id
: id
ist der neue Wert und entspricht dem Muster "s
". "SECT
_IMGID
_LNR
SECT
" steht für die Nummer eines Abschnitts, "IMGID
" für die Kennung einer Bilddatei (Dateiname ohne Erweiterung). Diese Funktion zeigt den neuen Abschnitt und das neue Bild an und aktualisiert cur_id
.
Die Funktionen initialize
, seq
.select
, onKeydown
, followSlide
und followSectlink
rufen show_section_and_image
auf.
get_stored_settings
()Diese Funktion liest aus dem Storage
-Objekt the_store
unter dem Schlüssel "set
" eine Zeichenkette. Diese ist eine ":
"-getrennte Liste von Schlüssel-/Wert-Paaren der Form "key
=value
". Jedem hier möglichen "key
" ist ein Wert ID
zugeordnet. Wenn ID
die ID eines Eingabe-Elements ist, dann ist "value
" der (neue) Wert (Attribut value
).
Wenn aber ID
mit "chk_
" beginnt, dann ist das Element ein Markierungsfeld (Element input
, Attribut type
= checkbox
). Der Wert (value
) "1
" steht für "markiert", jeder andere Wert für "nicht markiert".
initialize
Die Funktion initialize
bestimmt die Werte der einmalig gesetzten Variablen und erzeugt die Objekte. Wenn die Bildergeschichte nicht eingebettet angezeigt wird, ruft sie initialize_sound
auf.
Zur weiteren Initialisierung ruft sie die Methode popup_set
.on_close
auf.
Dann werden die Ereignisbehandler zugeordnet: Einem Mausklick auf dem Knopf "▶" (ID inp_start
) wird die Funktion on_click_start
zugeordnet. Das Hilfe-Fragezeichen (ID btn_help
) öffnet und schließt das Fenster "Befehle". Ein Klick auf den Text eines Befehls wirkt wie die das Drücken einer Taste (onKeydown
). Ein Klick in der Fußleiste öffnet und schließt das Info-Fenster (popup_about
). Ein Klick auf den Menüpunkt "Weitersagen" (ID tellabout
) ruft die Funktion tell_about
auf. Eine Änderung der Größe des Browser-Fensters ruft die Funktion onResize
auf, ein Mausklick im Haupbild (div_mainimg
) die Funktion show_text
, und Tastatureingaben (keydown
) die Funktion onKeydown
.
Zuletzt wird der Fragment-Bezeichner des URI ausgewertet. Wenn der Fragment-Bezeichner #rndimgshow
ist, werden die Rahmenelemente verborgen (b_frame
), die Darstellung an das Browser-Fenster angepasst (onResize
) und der Bildlauf in zufälliger Reihenfolge über alle Bilder gestartet. Sonst werden der Abschnitt und das Bild angezeigt, das der Teil des Fragment-Bezeichners nach dem Zeichen #
angibt, oder des erste Abschnitt, wenn der Fragment-Bezeichner fehlt oder nicht sinnvoll ist.
tell_about
Diese Funktion behandelt einen Klick auf den Menüeintrag "Weitersagen" und die Taste "w". Sie versucht, die URI zur aktuellen Ansicht per E-Mail zu versenden.
Sie 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 den URI zur aktuellen Anzeige.
tell_about
benutzt die Funktion encodeURIComponent
, die in http://ecma-international.org/ecma-262/5.1/#sec-15.1.3.4
spezifiziert ist. Das mailto
-URI-Schema ist definiert in RFC 6068 (http://tools.ietf.org/html/rfc6068
). Ich vertraue darauf, dass der Brower mit dem mailto
-Schema umgehen kann. Die Funktion isProtocolHandlerRegistered
, die im aktuellen Entwurf für HTML 5 spezifiziert ist, kann das prüfen. Mein Test-Browser kennt sie nicht.
onResize
Die Funktion onResize
behandelt die Änderung der Größe des Browserfensters und wird auch bei der Initialisierung (initialize
) aufgerufen.
Bei der Initialisierung ist möglicherweise die Fenstergröße noch nicht festgelegt. Dann kehrt onResize
sofort zurück. Wenn die Mindestbreite min_width
noch nicht definiert ist, werden die konstanten Maße einmalig bestimmt.
onResize
positioniert die anzuzeigenden Elemente und verbirgt andere Elemente. Dabei beachtet sie die Variable b_frame
. Zunächst setzt sie die "logische" Größe der Anzeige (body
-Element). Sie darf die Mindestbreite min_width
und die Mindesthöhe min_height
nicht unterschreiten.
Die Prozedur ermittelt die tatsächlichen Höhen der Titelleiste und der Kopfleiste: Abhängig davon, ob sie angezeigt wird oder nicht (popup_set
.show_title
), ist die Höhe der Titelleiste logo_height
oder Null. Die Höhe der Kopfleiste ist die Höhe der Anzeige abzüglich der Höhe des Inhaltsbereichs (cont_height
) und der Höhe der Titelleiste, höchstens aber die ursprüngliche Höhe header_height
und nicht weniger als Null. Sie ist Null, wenn die Kopfleiste nicht angezeigt wird popup_set
.header
.
Wenn die ermittelte tatsächliche Höhe der Titelleiste positiv ist, werden das Logo, der Titel, das Menüfeld und die Ton-Schaltfläche (div_sound
) einzeln positioniert. Das Logo wird über der Abschnittsliste und die Ton-Schaltfläche über den Vorschaubildern angezeigt, falls es möglich ist und die Bildergeschichte nicht eingebettet angezeigt wird. In diesem Fall bleiben das Logo und die Ton-Schaltfläche verborgen. Abhängig von popup_set
.menu
wird die Menü-Leiste über oder unter dem Titel oder gar nicht angezeigt.
Wenn die Titelleiste (div_title
) angezeigt werden soll (popup_set
.show_title
), dann positioniert sie die Titelleiste am oberen Rand. Andernfalls wird die Titelleiste verborgen.
Danach wird die Kopfzeile angezeigt und positioniert oder verborgen.
Wenn die Fußleiste (div_footer
) angezeigt werden soll (popup_set
.show_footer
) und die verbliebene freie Höhe größer ist als cont_height
, wird die Fußleiste am unteren Rand des freien Bereichs positioniert.
Abhängig von popup_set
.sections
wird die Abschnittsliste (mover_ix
) verborgen oder am linken oder rechten Rand des freien Bereichs positioniert.
Abhängig von popup_set
.slides
werden die Vorschaubilder (mover_sl
) verborgen oder am linken oder rechten Rand des freien Bereichs positioniert.
Die Funktion speichert die neuen Maße (sz_main
) des Haupt-Inhaltsbereichs und positioniert ihn (s. style_main
).
Die geöffneten Aufklapp-Fenster ( Einstellung ..., Info-Fenster und Schnellhilfe) werden ebenfalls neu positioniert.
Wenn ein Bild angezeigt wird, dann passt do_show_image
die Darstellung des Bildes an die neue Größe des Rahmens an.
onKeydown
Die Funktion onKeydown
behandelt das Niederdrücken (keydown
) von Tasten oder einen Klick (click
) auf den Text eines Befehls im Fenster "Befehle". Bei einem Mausklick liest sie den "Tastenkode" aus dem Attribut data-code
. Wenn eine Taste zusammen mit einer Zusatz-Taste (Control, Shift, Meta, Alt) gedrückt ist, kehrt die Funktion sofort zurück, ebenfalls, wenn eine Taste in einem Eingabefeld (Knotenname input
oder select
) gedrückt ist.
Die behandelten Tasten sind:
DOM_VK_B
(B)Schaltet den Wert der Variablen b_frame
zwischen true
und false
um. Dadurch werden alle anderen Felder als das Haupt-Inhaltsfeld verborgen oder angezeigt.
DOM_VK_M
(M)Die Taste "M" fügt den Wert von cur_id
als Fragmentbezeichner an den URI des Dokuments an.
DOM_VK_S
(S)Die Taste "S" schließt das Fenster "Einstellung ..." (popup_set
.close
), falls es geöffnet ist (popup_set
.isopen
), und startet den Bildlauf oder hält ihn an (seq
.toggle
).
DOM_VK_C
(C)Schließt alle geöffneten Aufklapp-Fenster ( Einstellung ..., Info-Fenster und Befehle)
DOM_VK_E
(E)Schließt das Fester "Befehle" und öffnet oder schließt das Fenster "Einstellung ..." (popup_set
.toggle
).
DOM_VK_N
(N)Setzt den aktiven Bildlauf mit dem nächsten Bild fort (seq
.restart
), wenn das Fenster "Einstellung ..." nicht geöffnet ist.
DOM_VK_Z
(Z)Wenn das Fenster "Einstellung ..." nicht geöffnet ist, setzt diese Taste den Bildlauf zum vorher angezeigten Bild zurück, falls möglich (seq
.backstep
).
DOM_VK_H
(H)Öffnet oder schließt das Fenster "Befehle" (popup_help
.toggle
).
DOM_VK_I
(I)Schließt das Fenster "Befehle" und öffnet oder schließt das Info-Fenster "Über ..." (popup_about
.toggle
).
DOM_VK_LEFT
(←)Wechselt zum Textabschnitt (show_text
), wenn ein Bild angezeigt wird (b_imgshown
).
DOM_VK_RIGHT
(→)Wechselt zur Bildansicht, wenn ein Textabschnitt angezeigt wird (b_imgshown
). Wenn cur_id
auf ein Bild verweist, dann wird dieses Bild angezeigt, sonst das erste Bild des Abschnitts.
DOM_VK_HOME
(Pos 1)Hält den Bildlauf an und zeigt den Text des ersten Abschnitts an (Anfang).
DOM_VK_END
(Ende)Hält den Bildlauf an und zeigt das letzte Bild des letzten Abschnitts an. Dabei wird die Variable last_id
initialisiert, falls nötig.
DOM_VK_P
(P)Startet oder bendet die Klangwiedergabe (sound_play_pause
).
DOM_VK_G
(G)Öffnet die "Galerieansicht".
DOM_VK_W
(W)Startet das E-Mail-Programm zur Weitergabe des URI zur aktuellen Anzeige (tell_about
).
DOM_VK_UP
(↑)Mit dem Pfeil nach oben können alle Bilder und Textabschnitte, angefangen mit dem letzten Textabschnitt, in umgekehrter Reihenfolge durchlaufen werden. Wenn ein Textabschnitt angezeigt wird (cur_id
bezeichnet kein Bild), dann wird nach dem Drücken der Taste das letzte Bild des Abschnitts angezeigt. Wenn cur_id
ein Bild bezeichnet, dann wird nach dem Drücken der Taste das vorhergehende Bild des Abschnitts angezeigt, sofern das Bild nicht bereits das erste Bild des Abschnitts ist. Wenn das erste Bild eines Abschnitts angezeigt wird, dann führt die Taste zum Text des vorhergehenden Abschnitts. Wenn das erste Bild des Dokuments angezeigt ist, dann hat die Taste keine Wirkung.
DOM_VK_PAGE_UP
(Bild auf)Wenn nicht der erste Abschnitt des Dokuments aktuell ist, dann zeigt das Drücken der Taste den Text zum vorhergehenden Abschnitt an. Wenn der Text oder ein Bild des ersten Abschnitts angezeigt wird, bleibt die Taste wirkungslos.
DOM_VK_DOWN
(↓)Diese Taste führt, angefangen mit dem Text des ersten Abschnitts, durch alle Textabschnitte und Bilder des Dokuments: vom Textabschnitt zum ersten Bild des Abschnitts, von einem Bild, das nicht das letzte Bild des Abschnittes ist, zum nächsten Bild des Abschnitts, und vom letzten Bild eines Abschnitts zum Text des nächsten Abschnitts. Wenn des letzte Bild des letzten Abschnitts angezeigt wird, bleibt die Taste wirkungslos.
DOM_VK_PAGE_DOWN
(Bild ab)Diese Taste führt zum Text des nächsten Abschnitts. Wenn der Text oder ein Bild des letzten Abschnitts angezeigt wird, bleibt die Taste wirkungslos.
followIndexEntry
(event
)Diese Funktion prüft zunächst, ob mouseover_stop
gesetzt ist (mouseover_stop
.value
). Wenn das nicht der Fall ist, hält sie den Bildlauf an (seq
.stop
), wechselt zu dem Abschnitt, auf den der Eintrag verweist (show_section
) und zeigt den Text zum Abschnitt (show_text
)
updateIndexHandlers
(evtname_old
, evtname_new
)Diese Funktion definiert und ändert für alle Einträge in der Abschnittsliste das Ereignis, das mit der Funktion followIndexEntry
verbunden ist. Sie wird von der Methode popup_set
.on_close
aufgerufen.
evtname_old
ist der Name des Ereignisses, dem followIndexEntry
bisher zugeordnet ist, evtname_new
ist der Name des Ereignisses, dem followIndexEntry
neu zugeordnet wird.
Beim ersten Aufruf, während initialize
ausgeführt wird, ist evtname_old
null
. In diesem Fall gibt es keine Ereigniszuordnung aufzuheben. Bei allen folgenden Aufrufen können die Parameter evtname_old
und evtname_new
die Werte click
, mouseover
und dblclick
annehmen. Diese Ereignisnamen sind in der Datei desktop.xslt
(Text) aufgeführt.
followSlide
(event
)Diese Funktion prüft zunächst, ob mouseover_stop
gesetzt ist (mouseover_stop
.value
). Wenn das nicht der Fall ist, hält sie den Bildlauf an (seq
.stop
) und zeigt das Bild im Haupt-Inhaltsbereich an (show_section_and_image
).
updateSlidesHandlers
(evtname_old
, evtname_new
)Diese Funktion definiert und ändert das Ereignis für ein Vorschaubild, das mit der Funktion followSlide
verbunden ist, die das Bild anzeigt. Sie wird von der Methode popup_set
.on_close
aufgerufen.
evtname_old
ist der Name des Ereignisses, dem followSlide
bisher zugeordnet ist, evtname_new
ist der Name des Ereignisses, dem followSlide
neu zugeordnet wird.
Beim ersten Aufruf, während initialize
ausgeführt wird, ist evtname_old
null
. In diesem Fall gibt es keine Ereigniszuordnung aufzuheben. Bei allen folgenden Aufrufen können die Parameter evtname_old
und evtname_new
die Werte click
, mouseover
und dblclick
annehmen. Diese Ereignisnamen sind in der Datei desktop.xslt
(Text) aufgeführt.
on_mouseover_imglink
(event
)Wenn die Maus auf einen Bildverweis in einem Textabschnitt läuft, setzt diese Funktion die Variable cur_id
und hebt das betroffene Vorschau-Bild hervor (hilite_slide
).
followImglink
(event
)Bei einem Mausklick auf einen Bildverweis in einem Textabschnitt zeigt (show_image
) diese Funktion das aktuelle Bild (cur_id
) an.
followSectlink
(event
)Bei einem Mausklick auf einen Abschnitts-Verweis im Text zeigt diese Funktion den neuen Abschnitt an (show_section_and_image
).
updateLinkHandlers
(evtname_old
, evtname_new
)Diese Funktion definiert und ändert das Ereignis für einen Bildverweis, einen Abschnitts-Verweis oder ein Inline-Bild, das mit der Funktion followImglink
oder followSectlink
verbunden ist, die das Bild oder den Abschnitt anzeigt. Sie wird von der Methode popup_set
.on_close
aufgerufen.
evtname_old
ist der Name des Ereignisses, dem followImglink
bisher zugeordnet ist. Beim ersten Aufruf, während initialize
ausgeführt wird, ist evtname_old
null
. In diesem Fall ordnet updateLinkHandlers
dem Ereignis mouseover
für Bildverweise und Inline-Bilder den Behandler on_mouseover_imglink
zu.
Bei allen folgenden Aufrufen können die Parameter evtname_old
und evtname_new
die Werte click
und dblclick
annehmen. updateLinkHandlers
hebt die Zuordnung von evtname_old
zu followImglink
auf und ordnet die Funktion followImglink
dem Ereignis evtname_new
zu.
on_click_start
(event
)Diese Funktion behandelt einen Mausklick auf den Knopf "▶" (oder "■") im Fenster "Einstellungen" (popup_set
). Sie schließt das Fenster und startet oder beendet den automatischen Bildlauf (seq
.toggle
).