varn_imgsect
varn_sect
varinit_d
varprf_img
varlg
functionlg_g
varlng
varset
functionset_g
varhelp_l
varhelp_k
varhelp_e
functionhelp_h
(e) functionhelp_c
(k) functionhelp_t
(k) varky_l
functionky_c
(k) varradio
varilm
varlinks_d
varhint_d
varaudio
varsl
functionc_l
functionisrc
(e, cb) functionRadio
(div)radio
.data
radio
.cid
radio
.pid
Radio
.prototype.cd
Radio
.prototype.back
Radio
.prototype.prev
Radio
.prototype.xl
= function (i)Radio
.prototype.show
= function (id, b, z)Radio
.prototype.onk
= function (e) functionPlain
(div)Plain
.snr
Plain
.fe
Plain
.prototype.oncl
= function (e)Plain
.prototype.onk
= function (e)Plain
.prototype.activate
Plain
.prototype.tm_f
functionPw
(div)Pw
.div
Pw
.rmx
Pw
.ctsq
Pw
.clpx
Pw
.clpy
Pw
.lvq
Pw
.im
Pw
.vix
Pw
.tm
Pw
._f
Pw
.prototype.setup
Pw
.prototype.tm_f
Pw
.prototype.oncl
= function (e)Pw
.prototype.isv
= function (i)Pw
.prototype.vte
= function (j)Pw
.prototype.toe
= function (i)Pw
.prototype.ivw
= function (l, r, e, w)Pw
.prototype.rv
= function (l, r, e, w, z)Pw
.prototype.az
= function (flds, i)Pw
.prototype.pose
= function (end)Pw
.prototype.init
= function (cb)Pw
.prototype.load
Pw
.prototype.onk
= function (e) functionDias
(e, t)Dias
.il
Dias
.ms
Dias
.cur
Dias
.tm
Dias
.tf
Dias
.rd
Dias
.ln
Dias
.im
Dias
.prototype.cip
Dias
.prototype.cii
Dias
.prototype.tm_f
Dias
.prototype.oncl
= function (e)Dias
.prototype.xl
= function (l)Dias
.prototype.onk
= function (e)Dias
.prototype.fit
Dias
.prototype.store
Dias
.prototype.load
Dias
.prototype.spd
= function (up)Dias
.prototype.stp
Dias
.prototype.stst
Dias
.prototype.shn
Dias
.prototype.tmf
Dias
.prototype.shf
= function (i)Dias
.prototype.nxt
Dias
.prototype.pvi
Dias
.prototype.set
= function (v, b) functiononrsz
functionshare
functionsound
(k) functionlike
functionlinks
functionlinks_h
(e) functionhint_h
(e) functionclk
(e) functionxl
(l) functionbkg
functionthd
functionhmt
functionclk_hmt
functionstore
functionload
functiononk
(e) functioninitialize
var n_imgsect
Die Anzahl der Bilderabschnitte (Abschnitte mit Bildern). Der Wert wird in pinw.xslt
bestimmt.
var n_sect
Die Anzahl der Abschnitte (mit Bildern oder ohne Bilder) Der Wert wird in pinw.xslt
bestimmt.
var init_d
Die Liste init_d
enthält zu jedem Abschnitt der Bildergeschichte einen Eintrag. Aber die Einträge stehen nicht in der Reihenfolge der Abschnitte in der Bildergeschichte, sondern alle Bilderabschnitte stehen vor allen Textabschnitten. Der Eintrag init_d [i]
bezieht sich auf einen Bilderabschnitt, falls 0 <= i <
, und auf einen Textabschnitt, falls n_imgsect
n_imgsect <= i <
.n_sect
Jeder Eintrag ist selbst eine Liste mit vier Einträgen. Das erste Listenelement ist die Nummer des Abschnitts in der Bildergeschichte, beginnend mit 1
. Das zweite Listenelement ist der Titel des Abschnitts.
Für Textabschnitte sind der dritte und der vierte Eintrag null
. Für Bilderabschnitte ist der dritte Eintrag eine Liste mit einem Eintrag zu jedem Bild. Der vierte Eintrag ist die Anzahl der Bilder.
Der Eintrag für ein Bild ist eine Liste mit zwei Einträgen. Der erste Eintrag ist die Kennung des Bilder (jpg/@src
), der zweite Eintrag das Format (jpg/@fmt
, Werte h
, q
, theoretisch auch k
und p
).
Die Daten werden in pinw.xslt
zusammengestellt.
init_d[i] // Daten zum Abschnitt mit Index i (nicht Abschnittsnummer) init_d[i][0] // Nummer des Abschnitts im Dokument init_d[i][1] // Titel des Abschnitts init_d[i][2] // Liste der Bilder des Abschnitts init_d[i][2][j] // Daten zum Bild mit Index j im Abschnitt init_d[i][2][j][0] // Kennung des Bildes init_d[i][2][j][1] // Format des Bildes init_d[i][3] // Anzahl der Bilder des Abschnitts
var prf_img
Präfix des relativen Pfades der Bilddateien. Der Wert wird in pinw.xslt
gesetzt.
var lg
Der Benutzername, kodiert mit encodeURIComponent
.
Der Anwender kann einen Benutzernamen auf der Seite „Einstellungen” eingeben. Die Funktion lg_g
liest den Benutzernamen aus den globalen Einstellungen. Er wird für einen „Like” (like
) benötigt.
function lg_g
Liest den Benutzernamen lg
aus den Einstellungen (localStorage
).
var lng
Dateinamenssuffix zur Festlegung der Sprache einschließlich des führenden Punktes.
var set
Unter dem Schlüssel set
ist in den Einstellungen eine Zeichenkette gespeichert, die aus Komponenten der Form
aufgebaut ist, die durch einen Doppelpunkt (SCHLUESSEL
=WERT
:
) getrennt sind. Für jeden Schlüssel SCHLUESSEL
gilt:
set["
SCHLUESSEL
"] = "WERT
"
function set_g
Liest die Daten von set
aus den Einstellungen.
var help_l
Aktueller Stand der Hilfe:
0
: nicht geladen1
: wird geladen2
: ist geladen, Hilfemodus ausgeschaltet3
: ist geladen, Hilfemodus eingechaltetvar help_k
Die Schlüssel der Einträge im Objekt help_k
sind die IDs der Hilfetexte, die angezeigt worden sind, seitdem der Hilfemodus zuletzt eingeschaltet worden ist.
Der Wert wird zurückgesetzt, wenn der Hilfemodus ausgeschaltet wird (help_t
)
var help_e
Das zuletzt angezeigte Hilfe-Element: die normale, ausführliche Hilfe im Hilfemodus (help_c
, help_h
) oder die Kurzhilfe zu Tastenbefehlen (ky_c
):
function help_h
(e)
function help_c
(k)
Verbirgt den Hilfetext.
Diese Funktion behandelt das Mausereignis „mouseout
”, in diesem Fall ist e
das Mausereignis. Sie wird auch aufgerufen, wenn die Taste „Escape” gedrückt wird (onk
), in diesem Fall ist e
undefiniert.
function help_t
(k)
Diese Funktion schaltet den Hilfemodus (help_l
) ein und aus und zeigt dazu in jedem Fall einen Hilfetext an. Sie wird durch einen Tastenbefehl (onk
) oder eine andere Eingabe (Maus oder Tab und Enter, xl
) aufgerufen. Im ersten Fall hat k
den Wert "f1"
, im zweiten Fall den Wert "qm"
: Der angezeigte Hilfetext hängt von k
ab.
Im Falle
(beim ersten Aufruf) wird die Hilfe vom URI help_l
== 0/h/pinw/h.xhtml
geladen. LANG
LANG
steht für einen Punkt, gefolgt von der Kennung der Sprache, falls diese definiert ist.
var ky_l
k
gibt den Zustand der immer verfügbaren Tastenhilfe (ky_c
) an:
0
: nicht geladen1
: wird geladen2
: ist geladen, aber nicht angezeigt3
: wird angezeigtfunction ky_c
(k)
Zeigt die Tasten-Hilfe zum Schlüssel k
an. Im Falle
wird die Hilfe vom URI ky_l
== 0/h/pinw/k.xhtml
geladen. LANG
LANG
steht für einen Punkt, gefolgt von der Kennung der Sprache, falls diese definiert ist.
var radio
Das Objekt radio
(Konstruktor Radio
) repräsentiert den Inhaltsbereich unterhalb der Kopfzeile mit den Funktionen, zwischen den verschiedenen „Tafeln” zu wechseln.
var ilm
Diese Liste enthält zu jedem Bilderabschnitt Daten zum ersten Bild des Abschnitts:
für ilm
[i] = init_d
[i][2][0]0 <= i <=
(n_imgsect
initialize
).
var links_d
div
-Element mit Verweisen auf andere Darstellungen und Inhalte der Website. Der Inhalt wird in der Funktion links
„dynamisch” geladen.
var hint_d
Ein div
-Element. Es wird angezeigt, wenn bein einem „Like” kein Nutzername (lg
) definiert ist (like
, hint_h
).
var audio
Das audio
-Element dient zum Abspielen von Klangsignalen (sound
) bei einem „Like” (like
) oder bei einem Fehler beim Laden der Hilfe.
var sl
Auf der Pinwand zu einem Bilderabschnitt wird ein Bild angezeigt, das zu einem anderen Bilderabschnitt gehört, das „Fremdbild”. Dieses Bild dient als Verweis auf den anderen Bilderabschnitt. Im Bilderabschnitt mit dem Index i
ist das „Fremdbild” aus dem Abschnitt mit dem Index sl[i]
. Diese Abbildung durchläuft zyklisch alle Bilderabschnitte (initialize
). Die Besucherin der Website kann sich also durch alle Bilderabschnitte klicken, indem sie auf der Übersichtspinwand irgendein Bild anklickt und dann in den Bildergeschichten- Pinwänden immer das Fremdbild anklickt.
function c_l
Diese Funktion ergibt einen URI mit einem Hash-Fragment, das zur aktuellen Anzeige passt. Das Fragment ist:
leer, falls die Übersicht angezeigt wird, |
#d , falls der Abschnitt SECTNR angezeigt wird, |
#rndimgshow_s , falls die Bilderübersicht mit dem aktuellen Bild aus dem Abschnitt SECTNR angezeigt wird, |
#s , falls in der Bilderschau zum Abschnitt SECTNR das Bild mit der Kennung IMGID an der Position IMGPOS (innerhalb des Abschnitts gezählt ab 0) angezeigt wird. |
function isrc
(e, cb)
isrc
setzt das Attribut src
für alle img
-Elemente unter den Nachkommen von e
. Die Anzeige kann am Anfang nicht so lange warten, bis alle Bilder geladen sind, weil die Wartezeit zu lang wäre. Deshalb werden die Bilder eines Abschnitts dann geladen, wenn der Abschnitt angezeigt wird. Dazu dient diese Funktion. Jede img
-Element, das genau ein Bild der Bildergeschichte repräsentiert (das img
-Element der Bilderschau gehört nicht dazu), hat ein Attribut x-id
, dessen Wert die Kennung des Bildes ist. Daraus bestimmt isrc
das Attribut src
und setzt es. Das Bild wird dann geladen.
cb
ist eine Funktion, die aufgerufen wird, wenn alle Bilder geladen sind. Nachdem die src
-Attribute aller Bilder gesetzt sind, prüft isrc
, ob alle Bilder geladen sind. Ob ein Bild geladen ist, erkennt isrc
daran, dass img.height
definiert und nicht Null ist. Wenn ein Bild noch nicht geladen ist, wartet isrc
200 ms.
isrc
wird von den Funktionen Plain
und
aufgerufen.Pw
.prototype.init
function Radio
(div)
Dieser „Konstruktor” erzeugt ein Objekt, das den Bereich unterhalb der Kopfzeile darstellt. Von den Kindelementen von div
ist, abgesehen vom ersten Anfang, immer genau eines „aktiv”, also sichtbar. Ich stelle mit den unteren Bereich als einen Tafel-Ständer vor, der immer genau eine auswechselbare Tafel trägt.
Dieses Objekt (s. radio
) behandelt hauptsächlich das Wechseln der Tafeln (Kindelemente).
radio
.data
Die Namen der Elemente sind die IDs der Kindelemente („Tafeln”), die Werte Listen. Der erste Listeneintrag ist die ID der Tafel, die vor dieser Tafel angezeigt wurde (aufrufende Tafel). Er wird gesetzt, wenn die aktuelle Tafel nicht über eine Zurück-Funktion angezeigt wird wie „Bilderansicht beenden” oder die Pfeil-Schaltflächen „zurück” oder „zuvor angezeigte Ansicht” angezeigt wird. Er wird gesetzt, wenn eine Tafel das erste Mal angezeigt wird. Der zweite ist ein Objekt, das die Tafel repräsentiert (Pw
Plain
, Dias
). Dieser Listeneinträge wird einmal gesetzt und dann nicht mehr geändert. Mögliche weitere Listeneinträge sind spezifisch für die jeweilige Tafel.
radio.data["ID"][0] // ID der "aufrufenden" Tafel radio.data["ID"][1] // Pw, Plain oder Dias
radio
.cid
Die ID der sichtbaren Tafel.
radio
.pid
Die ID der zuvor sichtbaren Tafel. Wenn die aktuelle sichtbare Tafel zum ersten Mal gezeigt wird, ist radio.data[radio.cid][0] == radio.pid
, später aber gilt das im allgemeinen nicht.
Radio
.prototype.cd
Radio
.prototype.back
Zeigt die „aufrufende” Tafel mit der ID this.
an, sofern die Werte definiert sind.data
[this.cid
][0]
Radio
.prototype.prev
Zeigt die zuvor angezeigte Tafel mit der ID this.pid
an.
Radio
.prototype.xl
= function (i)
Anzeige-Elemente können ein Attribut c_l
enthalten, dessen Wert eine Aktion oder ein internes Verweisziel angibt. i
ist der Wert dieses Attributs. Diese Funktion führt die bezeichnete Aktion aus oder folgt dem Verweisziel. Für i
-Werte, die hier nicht behandelt werden, wird die „übergeordnete” Funktion xl
aufgerufen. Hier werden die folgenden Werte von i
behandelt:
back
Zurück zur „erstaufrufenden” Tafel, s. Radio.prototype.back
prev
Zurück zur zuvor angezeigten Tafel, s. Radio.prototype.prev
top
Zur Übersicht (Tafel mit der ID d_main
), s. Radio.prototype.show
SECTNR
SECTNR
ist ein Platzhalter für die Nummer eines Abschnitts in der Dokument-Reihenfolge als Dezimalzahl Die Zählung beginnt mit 0
. Die ID des Abschnitts ist d_
. Der Abschnitt wird neu angezeigt.SECTNR
img
Wechselt zur Bilderübersicht. Das erste angezeigte Bild wird pseudo-zufällig bestimmt.
iSECTIX
_IMGPOS
Wechselt zur Bilderschau des Bilderabschnitts mit dem Index SECTIX
(0 <=
). SECTIX
< n_imgsectIMGPOS
ist die Position des ersten angezeigten Bildes im Abschnitt, beginnend mit 0
. Beide Werte sind Dezimalzahlen.
img_SECTIX
Wechselt zur Bilderübersicht. SECTIX
ist der Index des Abschnitts des ersten angezeigten Bildes (0 <=
).SECTIX
< n_imgsect
Radio
.prototype.show
= function (id, b, z)
Zeigt die Tafel mit der ID id
an. Wenn die Tafel bereits angezeigt wird, geschieht nichts. Andernfalls wird die aktuell angezeigte Tafel deaktiviert und verborgen, die neue Tafel angezeigt und aktiviert. pid
und cid
werden aktualisiert.
Wenn Parameter z
nicht logisch wahr ist, wird auch der Listeneintrag this.data[this.cid][0]
(ID der aufrufenden Tafel) gesetzt. this.data[this.cid][0]
wird auch dann gesetzt, wenn es bisher noch nicht gesetzt ist.
Das Deaktivieren der alten Tafel betrifft nur die Bilderschau: der Bildlauf wird angehalten.
Das Aktivieren betrifft alle Tafeln. Beim ersten Anzeigen einer Tafel wird das zugeöhrige Objekt (Plain
, Pw
oder Dias
) erzeugt. Eine bereits existierende Pw wird „aufgestellt” (
), ein Textabschnitt aktiviert (Pw
.prototype.pose
).Plain
.prototype.activate
Wenn der Parameter z
definiert ist, wird die Bilderschau mit einer neuen Bilderliste und einem neuen Anfangsbild gezeigt. z
ist eine Liste von zwei Zahlen. Wenn die erste Zahl (z[0]
) negativ ist, ist ilm
die Bilderliste, sonst ist die erste Zahl der Index des Bilderabschnitts im Bereich von 0
bis ausschließlich n_imgsect
. Die zweite Zahl (z[1]
) ist die Position des ersten angezeigten Bildes in der Liste, s.
.Dias
.prototype.set
Radio
.prototype.onk
= function (e)
Diese Funktion wird von der Tastenbehandlungs-Funktion onk
aufgerufen. Der Parameter e
ist das Tastatur-Ereignis. Der Rückgabewert ist 1
, wenn die Eingabe behandelt wird, sonst 0
. Im zweiten Fall behandelt die aufrufende Funktion das Tastatur-Ereignis.
Zuerst wird die Methode onk
des Objekts zur aktuellen Tafel aufgerufen (
, Plain
.prototype.onk
, Pw
.prototype.onk
).Dias
.prototype.onk
function Plain
(div)
Ein „Plain”-Objekt repräsentiert einen Textabschnitt ohne eigene Bilder.
Am Ende des Textinhaltes sind Vorschaubilder zum ersten Bild jedes Bildabschnitts eingefügt. Der Konstruktor ruft die Funktion isrc
auf, damit die Vorschaubilder geladen werden.
Plain
.snr
Die Nummer des Abschnitts in der Textfolge, beginnend mit 1
. Der Wert wird bei der Behanlung der Tastenkombinationen Shift+ArrowUp und Shift+ArrowDown benutzt.
Plain
.fe
Das erste Element, das den Tastatur-Fokus bekommen kann: ein Verweis im Text oder ein Vorschaubild. Bei der ersten Anzeige und bei jeder erneuten Anzeige des Textabschnitts bekommt dieses Element den Fokus, s. activate
.
Plain
.prototype.oncl
= function (e)
Diese Funktion behandelt einen Mausklick. Wenn das „Klickziel” das Attribut x-l
enthält, wird der Wert dieses Attributs an die Funktion radio
.xl
übergeben.
Plain
.prototype.onk
= function (e)
Diese Funktion behandelt eine Tasteneingabe. Sie wird von radio
.onk
aufgerufen und behandelt die Tasteneingaben KeyH (Hilfe zur Tastenbefehlen), Shift+ArrowUp (zum nächsten Abschnitt in der Textfolge) und Shift+ArrowDown (zum vorhergehenden Abschnitt in der Textfolge).
Plain
.prototype.activate
Das Element fe
bekommt den Fokus. Diese Funktion wird von Radio
.prototype.show
aufgerufen, wenn der Textabschnitt neu oder wieder angezeigt wird.
Plain
.prototype.tm_f
Die Funktion onrsz
ruft die Methode tm_f
für das aktuelle Objekt (zur aktuellen Ansicht) auf. Für einen Textabschnitt ist nichts zu tun.
function Pw
(div)
Ein Pw
-Objekt repräsentiert eine „Pinwand”: die Übersicht oder einen Bilderabschnitt.
Anzeige-Elemente (Bilder, Texte, Verweislisten) werden bei jeder neuen Anzeige pseudozufällig gemischt.
Die Einstellungen zur Positionierung der „Pinwandzettel” (rmx
, ctsq
, clpx
, clpy
, lvq
) werden durch die Funktion load
aus den allgemeinen Einstellungen gelesen. Die Konstruktor-Funktion ruft load
auf.
Der Konstruktor ruft dann die Funktion init
auf, die spezielle Initialisierungen vornimmt, die nicht direkt mit den Pinwand-Funktionen zu tun haben. Erst nachdem alle Bilder der Pinwand geladen sind, kann die Größe aller Pinwandzettel bestimmt werden. Die Funktion setup
wird als „Callback” aufgerufen, wenn alle Bilder geladen sind.
Pw
.div
Dieses HTML-Element steht für die Pinwand. Die Kindelemente werden als „Pinwandzettel” dargestellt.
Pw
.rmx
rmx
regelt, ob und wie die Einstellungen zur Positionierung der Pinwandzettel (ctsq
, clpx
, clpy
) pseudozufällig geändert werden:
0 | Die Einstellungen bleiben unverändert |
1 | Die Einstellungen werden vor jeder neuen Verteilung der Pinwandzettel zufällig gesetzt. |
2 | Die Einstellungen werden vor jeder neuen Verteilung der Pinwandzettel zufällig gesetzt, aber es gilt
|
Pw
.ctsq
Der Wert bestimmt, wie zwei überlappende rechteckige Felder bei der Positionierung der Pinwndzettel in nicht-überlappende Felder zerlegt werden.
0 | Zuerst wird entlang den senkrechten Seiten geschnitten. |
1 | Zuerst wird entlang den waagerechten Seiten geschnitten. |
2 | Zyklisch: ein Feld wird zuerst an der linken Seite, dann an der oberen, dann an der rechten, dann an der unteren Seite beschnitten. |
3 | Es wird immer das größte Stück des Feldes abgeschnitten. |
Pw
.clpx
Die Überlappung der Projektionen des Ausrichtungsfeldes und des neu zu positionierenden Pinwandzettels ist in einem Intervall maximal. Ich nenne die Endpunkte des Inveralls die „Maximalpunkte”. clpx
bestimmt, ob und wie der Pinwandzettel außerhalb dieses Intervalls positioniert werden kann:
0 | Jede mögliche „x-Position” des Pinwandzettels wird mit der Länge der Projektion der Überlappung mit dem Ausrichtungsfeld auf die x-Achse gewichtet. |
1 | Der Pinwandzettel wird zunächst wie im Fall 0 positioniert, die Position dann auf den Bereich zwischen den Maximalpunkten beschränkt. |
2 | Der Pinwandzettel wird an einem der Maximalpunkte positioniert. Beide Maximalpunkte bekommen das gleiche Gewicht. |
3 | Der Pinwandzettel wird im Intervall zwischen den Maximalpunkten gleichverteilt. |
Pw
.clpy
Diese Einstellung regelt die Positionierung eines Pinwandzettels in y-Richtung, ganz entsprechend, wie clpx
die Positionierung in x-Richtung regelt.
Pw
.lvq
Das Gewicht eines Feldes zur Positionierung eines Pinwandzettels hängt auch davon ab, durch wie viele Pinwandzettel das Feld überdeckt ist. Für jeden Pinwandzettel, der das Feld überdeckt, wird das Gewicht durch lvq
geteilt.
Pw
.im
im
ist eine Liste der Pinwandzettel. Die Einträge sind Listen mit den folgenden Einträgen:
li[0] | Das XHTML-Element |
li[1] | Lage der linken Seite |
li[2] | Lage der oberen Seite |
li[3] | Lage der rechten Seite |
li[4] | Lage der unteren Seite |
Die Reihenfolge der Pinwandzettel bleibt nicht erhalten. Die Funktion pose
bringt die Pinwandzettel in eine pseudozufällige Reihenfolge.
Pw
.vix
Alle Pinwandzettel, die vollständig sichtbar sind, haben einen im
-Index, der nicht kleiner ist als vix
, alle Pinwandzettel, die ganz oder teilweise verdeckt sind, haben einen im
-Index, der kleiner ist als vix
.
Pw
.tm
Wenn die Größe des Browserfensters zum Beispiel durch „Ziehen” mit der Maus geändert wird, so werden viele Resize
-Ereignisse ausgelöst. Würden bei jedem Ereignis die Pinwandzettel neu angeordnet, so flackerte der Bildschirm. Um das Flackern zu vermeiden, werden die Pinwandzettel verzögert neu positioniert, nachdem sich die Größe des Browserfensters geändert hat (_f
, tm_f
). tm
ist der „Timer” für den verzögerten Aufruf.
Pw
._f
>
Die Funktion _f
ist an dieses Objekt gebunden. Sie löscht den Timer tm
und ruft pose
auf. Sie wird von tm_f
verzögert aufgerufen.
Pw
.prototype.setup
Diese Funktion schließt die Initialisierung ab. Nachdem init
alle Pinwandzettel aufbereitet hat, stellt init
die Liste der Pinwandzettel (im
) auf und ordnet den Pinwandzetteln die Mausklick-Behandlungsfunktion oncl
zu.
Auch wenn init
die src
-Attribute der img
-Elemente gesetzt hat, sind die Bilder möglicherweise noch nicht alle geladen oder ihre Höhe noch nicht bekannt. setup
muss in diesem Fall warten.
Pw
.prototype.tm_f
Ruft zeitverzögert _f
und damit pose
auf, s. tm
.
Diese Funktion wird bei einer Änderung der Fenstergröße aufgerufen (onrsz
).
Pw
.prototype.oncl
= function (e)
Die Funktion setup
setzt sie als Ereignisbehandler für einen Klick auf einen „Pinwandzettel”.
Wenn der angeklickte Pinwandzettel nicht frei sichtbar ist, wird er aufgedeckt und die dann teilverdeckten Pinwandzettel neu gemischt. Hierzu gibt es einen Vorab-Hilfetext.
Im anderen Fall kann es mehrere Vorab-Hilfetexte geben. Der erste Hilfetext entspricht dem Attribut x-h
des Pinwandzettels. Vom „Klickziel” aufwärts wird nach einem Attribut x-l
gesucht, das die Aktion bestimmt. Zu jedem Element auf dem Weg vom Klickziel zum Attribut x-l
kann das Attribut x-h
einen Hilfetext festlegen, der vorab angezeigt wird.
Schließlich wird der Funktion radio
.xl
der Wert des Attributs x-l
als Argument übergeben.
Pw
.prototype.isv
= function (i)
Diese Funktion ergibt 0
, wenn der Pinwandzettel mit dem Index i
in der aktuellen Reihenfolge ganz oder teilweise verdeckt ist, sonst 1
. Sie wird in vte
aufgerufen.
Pw
.prototype.vte
= function (j)
Voraussetzung ist, dass alle Pinwandzettel mit einem Index j
oder größer unverdeckt sind. Diese Funktion setzt alle unverdeckten Pinwandzettel an das Ende der Liste im
und setzt vix
.
Pw
.prototype.toe
= function (i)
Setzt den Pinwandzettel an der Position i
an das Ende der Liste, so dass er unverdeckt ist.
Diese Funktion wird in setup
aufgerufen. Sie setzt den ersten Pinwandzettel nach „oben”. In der Übersicht ist es der Pinwandzettel zum ersten Abschnitt, in einem Bilderabschnitt der erste Text-Zettel.
In der Funktion oncl
setzt sie den angeklickten Pinwandzettel nach oben.
Pw
.prototype.ivw
= function (l, r, e, w)
Diese Hilfsfunktion dient in pose
zur Berechnung des Gewichts eines Feldes.
Ich versuche, das Ergebnis des Funktionsaufrufes anschaulich zu beschreiben. Das Intervall [0,
enthält das Teilintervall e
][
: l
, r
]0 <=
. l
< r
<= e
e
ist die Breite der Pinwand, w
die Breite eines Pinwandzettels,
.w
<= e
Ich schiebe den Pinwandzettel auf der Pinwand von der linken zur rechten Seite. Ein Stift an einem Punkt im Intervall [
hinterlässt einen Strich auf dem Zettel. Die Länge des Strichs ist das „Gewicht” des Punktes. Die Funktion ergibt das Doppelte des Integrals des Gewichts im Intervall l
, r
][
.l
, r
]
Zur Berechnung des Gewichts eines Ausrichtungsfeldes wird diese Funktion für die beiden Koordinaten-Achsen aufgerufen, einmal mit den Werten der waagerechten Koordinaten (wie hier veranschaulicht), einmal mit den Werten der senkrechten Koordinaten. Das Gewicht des Ausrichtungsfeldes ist das Produkt, das für jede Überdeckung einmal durch lvq
dividiert wird.
Pw
.prototype.rv
= function (l, r, e, w, z)
Die Parameter l
und r
sind die Grenzen des Ausrichtungsfeldes, e
die Breite der Pinwand, w
die Breite des Pinwandzettels und z
ein Berechnungsmodus (0
, 1
, 2
oder 3
). Ich veranschauliche die Werte als waagerechte Koordinaten, die Funktion wird ebenso mit den senkrechten Koordinaten als Argumenten aufgerufen. Es gilt 0 <=
und l
< r
<= e
.w
<= e
Das Ergebnis der Funktion ist die pseudozufällige Lage der linken Seite des Pinwandzettels im Intervall [0,
. Im Falle e
- w
]
ist die Verteilungsdichte die Länge der Überschneidung des Pinwandzettels und des Ausrichtungsfeldes.z
= 0
Die Verteilungsdichte ist in einem Intervall zwischen zwei „Maximalpunkten” maximal.
Im Falle
wird die Pseudozufallsvariable zunächst wie im Falle z
= 1
bestimmt und dann auf das Intervall zwischen den Maximalpunkten beschränkt.z
= 0
Im Falle
ist die Pseudozufallsvariable diskret verteilt. Beide Maximalpunkte haben dasselbe Gewicht.z
= 2
Im Falle
ist die Pseudozufallsvariable im Intervall zwischen den Maximalpunkten gleichverteilt.z
= 3
Pw
.prototype.az
= function (flds, i)
flds
ist eine Liste von Feldern, die die Pinwand zerlegt. i
ein Eintrag in der Liste im
(Pinwandzettel).
Der Pinwandzettel i
ist bei der Zerlegung noch nicht berücksichtigt. Das Ergebnis ist eine neue, verfeinerte Zerlegung der Pinwand, in der jedes Feld ganz innerhalb oder ganz außerhalb von i
liegt. Der „Überdeckungsfaktor” eines Felds innerhalb des Pinwandzettels ist der Überdeckungsfaktor des enthaltenden Feldes in flds
, dividiert durch lvq
.
Pw
.prototype.pose
= function (end)
Im ersten Schritt mischt diese Funktion die Pinwandzettel (im
). Falls end
definiert ist, werden alle Pinwandzettel mit einem Index kleiner als end
gemischt, sonst alle Pinwandzettel bis auf den letzten, der an der letzten Position bleibt.
Im zweiten Schritt werden die Pinwandzettel pseudozufällig neu positioniert. Falls end
definiert ist, bleiben alle Pinwandzettel mit einem Index end
oder größer an ihrer Position auf der Pinwand.
Im dritten Schritt werden die HTML-Elemente entsprechend der Reihenfolge in der Liste im
angeordnet.
Pw
.prototype.init
= function (cb)
Der Konstruktor Pw
ruft diese Funktion vor setup
auf. Sie setzt die pseudozufälligen Verweisziele und das „Fremdbild” und setzt die src
-Attribute der img
-Elemente.
Pw
.prototype.load
Lädt die Einstellungen (s. load
) und übernimmt die Einstellungen zur Verteilung der Pinwandzettel für diese Pinwand. Sie wird vom Konstruktor aufgerufen.
Pw
.prototype.onk
= function (e)
Diese Funktion wird von
zur Behandlung einer Tastatur-Eingabe aufgerufen. Sie behandelt die Tasten-Eingaben:Radio
.prototype.onk
Enter: Aktion für das fokussierte HTML-Element |
KeyG: Einstellungen laden, auch die zur Pinwandzettel-Verteilung |
KeyH: Hilfe zu Tastenbefehlen, Übersicht oder Bilderabschnitt |
KeyX: Pinwandzettel mischen und neu anordnen |
In der Übersicht werden auch die folgenden Tasten-Eingaben behandelt:
Shift+ArrowDown: Bilderübersicht mit einem zufällig ausgewählten Anfangsbild |
ArrowDown: Bilderübersicht mit dem obersten Bild als erstem angezeigten Bild |
In einem Bilderabschnitt werden auch die folgenden Tasten-Eingaben behandelt:
Shift+ArrowUp: nächster Abschnitt in der Text-Reihenfolge |
Ctrl+ArrowUp: Abschnitt des Fremdbildes |
Shift+ArrowDown: Bilderschau mit einem zufällig gewählten Anfangsbild |
ArrowDown: Bilderschau mit dem obersten Bild als Anfangsbild |
function Dias
(e, t)
Das Dias
-Objekt repräsentiert eine Bilderschau. Es gibt hier nur ein Dias
-Objekt, aber mehrere sind möglich.
e
ist das HTML-Element, das die Bilderschau repräsentiert und dem der Ereignisbehandler oncl
zur Behandlung von „Klicks” zugeordnet ist.
t
ist die ID des img
-Elements zur Anzeige der Bilder. Es ist hier im Element e
enthalten, aber das ist nicht notwendig.
Dias
.il
il
ist die Liste der Bilder. Die Listeneinträge sind selbst Listen, deren erster Eintrag die Kennung des Bildes ist, aus der die URL des Bildes bestimmt wird. Die weiteren Listeneinträge werden zur Bilderschau nicht benötigt.
Dias
.ms
Die Anzeigedauer eines Bildes in Millisekunden beim automatischen Bildlauf.
Dias
.cur
Der Index des angezeigten Bildes. Die Kennung des Bildes ist this.
.il
[this.rd
[this.cur]][0]
Der Wert -1
bedeutet, dass (noch) kein Bild angezeigt wird.
Dias
.tm
Dias
.tf
Die Bildlauf-Funktion tmf
, gebunden an das Objekt.
Dias
.rd
Die Liste rd
enthält die Zahlen von 0
bis
in zufälliger Reihenfolge.ln
- 1
Dias
.ln
Die Anzahl der Bilder in der Liste il
Dias
.im
Das HTML-img
-Element zur Anzeige des aktuellen Bildes.
Dias
.prototype.cip
Die Position des aktuellen Bildes in der Liste il
. Diese Funktion wird in c_l
aufgerufen.
Dias
.prototype.cii
Die Kennung des aktuellen Bildes: this.
. Diese Funktion wird in il
[this.rd
[this.cur]][0]c_l
aufgerufen.
Dias
.prototype.tm_f
Die Methode tm_f
ist vorgesehen für eine verzögerte Anpassung der Darstellung an eine geänderte Fenstergröße, um ein Flackern zu vermeiden. Bei der Bilderschau ist nichts zu tun.
Dias
.prototype.oncl
= function (e)
Diese Funktion behandelt einen Mausklick e
im Element, das dem Konstruktor als Parameter übergeben worden ist.
Wenn das Zielelement das Attribut x-h
enthält, wird im Hilfemodus das Hilfethema angezeigt,
Wenn das Zielelement das Attribut x-l
enthält, wird der Attributwert an die Methode xl
übergeben. Andernfalls wechselt die Bilderübersicht zum Abschnitt des angezeigten Bildes.
Dias
.prototype.xl
= function (l)
Führt die Aktion gemäß dem Parameter l
aus. Hier werden die folgenden Werte interpretiert:
Andere Werte werden an radio
.xl
übergeben.
startstop
Startet und beendet den automatischen Bildlauf (stst
)
next
Zeigt das nächste Bild an und beendet den automatischen Bildlauf. (nxt
)
previmg
Zeigt das vorhergehende Bild an und beendet den automatischen Bildlauf. (pvi
)
fast
Beschleunigt den automatischen Bildlauf (spd
)
slow
Verlangsamt den automatischen Bildlauf (spd
)
imgfit
Schaltet die Vergrößerung des Bildes auf das verfügbare Feld an oder aus (fit
).
store
Speichert die Einstellungen (store
).
Dias
.prototype.onk
= function (e)
radio
.onk
ruft diese Funktion auf zu Behandlung einer Tasteneingabe e
. Sie behandelt die folgenden Tasten oder Tastenkombinationen:
wie ein Klick
Diese Tastenkombination wird nur in der Bilderübersicht behandelt. Sie zeigt den Abschnitt zum aktuellen Bild an.
Tastenbefehle zu Bilderübersicht oder zur Bilderschau eines Abschnitts.
zuvor angezeigtes Bild (pvi
)
nächstes Bild (nxt
)
automatischen Bildlauf starten oder beenden (stst
)
automatischer Bildlauf schneller (spd
)
automatischer Bildlauf langsamer (spd
)
Einstellungen laden (load
)
Bildanpassung (fit
)
Dias
.prototype.fit
Diese Funktion schaltet die Darstellung des Bildes der Bilderschau um, indem sie den Wert des Attributs class
des HTML-Elements im
zwischen shrink
und fit
umschaltet.
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Taste KeyF (onk
) aufgerufen.
Dias
.prototype.store
Diese Funktion speichert die Bilddarstellung gemäß dem Attribut class
von im
, die Anzeigedauer beim automatischen Bildlauf (ms
) und ruft dann store
auf.
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Taste KeyS (onk
) aufgerufen.
Dias
.prototype.load
Lädt die gespeicherten Einstellungen mit load
und setzt dann die Bilddarstellung und die Bild-Anzeigedauer ms
.
Diese Funktion wird beim Drücken der Taste KeyG (onk
) aufgerufen. Eine Mausbedienung ist für diese Funktion nicht vorgesehen.
Dias
.prototype.spd
= function (up)
Wenn up
logisch wahr ist, wird die Anzeigedauer ms
um 20% vermindert bis zu einer Mindestdauer von 300 ms. Andernfalls wird die Anzeigeauder um 25% erhöht bis zu einer Höchstdauer von 300000 ms (5 min). Die Anzeigedauer in Millisekunden wird auf eine ganze Zahl abgerundet.
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Tasten ArrowUp oder ArrowDown (onk
) aufgerufen.
Dias
.prototype.stp
Beendet den automatischen Bildlauf. Diese Funktion wird beim Verlassen der Bilderschau (
) oder als Teil der Behandlung einer Eingabe (Radio
.prototype.show
nxt
, pvi
, stst
) aufgerufen.
Dias
.prototype.stst
Startet oder beendet den automatischen Bildlauf.
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Leertaste Space (onk
) aufgerufen.
Dias
.prototype.shn
Zeigt das nächste Bild in der Reihenfolge gemäß rd
an. Nach dem letzten Bild wird das erste Bild angezeigt, ohne dass die Bilder neu gemischt werden.
Dias
.prototype.tmf
Wenn das letzte Bild angezeigt wird, werden alle Bilder neu gemischt (shf
). Das nächste Bild wird angezeigt (shn
) und der Timer gesetzt (tm
, tf
).
Dias
.prototype.shf
= function (i)
Mischt die Einträge in der Liste rd
ab dem Index i
und damit die Reihenfolge, in der die Bilder angezeigt werden.
Dias
.prototype.nxt
Beendet den Bildlauf (stp
) und zeigt das nächste Bild an (shn
).
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Taste ArrowRight (onk
) aufgerufen.
Dias
.prototype.pvi
= function (e)
Beendet den Bildlauf (stp
) und zeigt das vorhergehende oder das letzte Bild an.
Diese Funktion wird bei einem Klick (xl
) oder beim Drücken der Taste ArrowLeft (onk
) aufgerufen.
Dias
.prototype.set
= function (v, b)
v
ist die Bilderliste (neuer Wert von il
und b
der Index des ersten anzuzeigenden Bildes.
bekommt den Wert rd
[0]b
, die übrigen Bildpositionen werden gemischt (shf
). Das erste Bild wird angezeigt.
function onrsz
Diese Funktion behandelt eine Änderung der Fenstergröße. Der Inhaltsbereich (Element mit der ID d_cont
) wird unter dem Kopfbereich (ID head
) positioniert. Dann wird für das Objekt, das die angezeigte Tafel repräsentiert, die Methode tm_f
aufgerufen.
Für die Bilderansicht (Dias
) und Textabschnitte (Plain
) macht die Methode nichts, nur Pinwände (Pw
) positionieren die Pinwandzettel neu (tm_f
).
Außer bei einer Änderung der Fenstergröße wird onrsz
bei der Initialisierung (initialize
) und in der Funktion thd
aufgerufen.
Diese Funktion startet den E-Mail-Dienst. Der vorgeschlagene Textinhalt enthält die URI der aktuellen Ansicht (c_l
).
function sound
(k)
Spielt die Klangdatei, die unter dem Schlüssel k
eingestellt ist:
.set
[k
]
k
kann die Werte "o"
oder "e"
annehmen. "e"
steht für ein Klangsignal, das auf einen Fehler hinweist, "o"
steht für ein Klangsignal, das eine Aktion bestätigt.
function like
Sendet eine „Gefällt mir”-Nachricht mit der Pfad-Komponente und der Fragment-Komponente der URI zur aktuellen Ansicht (c_l
), der Sprache und dem Benutzernamen (lg
), falls dieser angegeben ist und nicht mit anonym
beginnt.
Wenn kein Benutzername angegeben ist, wird ein Hinweis angezeigt (hint_d
).
function links
Zeigt das Feld mit Verweisen (links_d
) an oder verbirgt es. Beim ersten Aufruf werden die Verweise dynamisch geladen.
Diese Funktion wird von xl
(Klick) aufgerufen.
function links_h
(e)
Verbirgt das Verweisfeld links_d
. Diese Funktion wird aufgerufen, wenn eine neue Tafel angezeigt wird (
), die Taste Escape gedrückt wird (radio
.show
onk
) oder wenn der Mauszeiger auf dem Verweisfeld herausläuft.
function hint_h
(e)
Verbirgt den Hinweis zum Benutzernamen (hint_d
). Diese Funktion wird aufgerufen, wenn die Taste Escape gedrückt wird (onk
) oder wenn der Mauszeiger auf dem Hinweisfeld herausläuft.
function clk
(e)
Behandelt einen Klick in der Kopfzeile. Das Attribut x-l
des Klick-Ziels wird zunächst an die Funktion xl
übergeben, und wenn diese Funktion den Wert nicht verarbeiten kann, an
.radio
.xl
Vorsicht, hier kann ein Aufruf-Ring möglich sein.
function xl
(l)
Führt die Aktion gemäß dem Wert von l
aus:
function bkg
Tauscht im Attribut class
des body
-Elements die Wörter clear
, grey
und black
zyklisch aus. CSS-Regeln verbinden mit diesen Wörtern die Hintergrundfarbe.
function thd
Verbirgt die Kopfzeile oder zeigt sie wieder an und ruft dann onrsz
auf.
Diese Funktion wird von load
, durch Drücken der Taste KeyI (onk
) oder durch einen Klick (xl
aufgerufen.
function hmt
Verbirgt den Hinweis auf die maschinelle Übersetzung (Abschnitt mit der ID mt
)
Diese Funktion wird von clk_hmt
oder durch Drücken der Taste KeyQ aufgerufen.
function clk_hmt
Diese Funktion behandelt einen Klick auf die Schaltfläche „Übersetzungshinweis verbergen” (ID hmt
). Dazu ruft sie hmt
auf.
function store
Überträgt die Einstellung der Hintergrundfarbe und der Anzeige der Kopfleiste nach set
und speichert die Einstellungen.
function load
Liest die Einstellungen (set_g
) und übernimmt die Einstellung der Hintergrundfarbe und der Anzeige der Kopfleiste.
Diese Funktion wird von
, Pw
.prototype.load
oder durch Drücken der Taste KeyG (Dias
.prototype.load
onk
) aufgerufen.
function onk
(e)
Behandelt eine Tasteneingabe e
. Im Hilfemodus zeigt sie bei Drücken der Taste KeyH den Hilfetext zur Tastenhilfe an. Dann ruft sie radio
.onk
auf. Wenn diese Funktion die Tasteneingabe nicht behandelt, behandelt onk
die folgenden Tasten oder Tastenkombinationen:
Hintergrund (bkg
)
„Gefällt mir”-Nachricht (like
)
Einstellungen laden (load
)
Kopfzeile verbergen oder anzeigen (thd
)
E-Mail-Dienst aufrufen (share
)
Hilfemodus ein- oder ausschalten (help_t
)
Einstellungen speichern (store
)
Verweisfeld (links_h
), Hilfe (help_h
) und Hinweisfeld (hint_h
) verbergen.
Falls das Tastenereignis behandelt ist, wird die Default-Aktion verhindert. Bei Pfeil-Tasten zusammen mit der Shift-Taste kann die Default-Aktion zum Beispiel eine Auswahl sein.
function initialize
Diese „Startfunktion” initialisiert zunächst die Variablen sl
, links_d
, hint_d
lng
lg
(lg_g
) audio
und ilm
und lädt die Einstellungen (load
). Die Funktion onrsz
positioniert den „Tafelhalter”, bevor radio
initialisiert wird. Die Anzeige wird entsprechend der URI-Fragment-Komponente gesetzt,
Dann werden Ereignisbehandler zugeordnet:
„click ” in der Kopfzeile (clk ) |
„click ” auf der Schaltfläche „Übersetzungshinweis verbergen” (clk_hmt ) |
„mouseout ” im Verweisfeld links_d (links_h ) |
„mouseout ” im Hinweisfeld hint_d (hint_h ) |
„resize ” (onrsz ) |
„keydown ” (onk ) |
Schließlich wird alle 0,25 Sekunden „im Hintergrund” ein Bild geladen.
Zur Prüfung der Positionierung der Pinwandzettel können Daten ausgegeben werden. Der Code dazu ist in der normalen „Arbeitsversion” der Skriptdatei nicht nötig. Er steht zwischen Markierungszeilen:
//#if INFO_POSE /* Hier Code zur Ausgabe von Daten zur Positionierung der Pinwandzettel */ //#endif INFO_POSE
Das Perl-Skript js_conditional.pl
(Quelltext) entfernt die Markierungszeilen und die Zeilen zwischen ihnen.
varinfo_msg
varinfo_mode
varinfo_cnt
varinfo_on
functioninfo_show
functioninfo_pose_step
(flds, fl, li, self, left, top, wd, ht)Pw
.prototype.info_distrib
var info_msg
Der anzuzeigende Text
var info_mode
Bestimmt die Art der Ausgabe. Die möglichen Werte sind die ganzen Zahlen 0
, 1
, 2
, 3
und 4
.
var info_cnt
Wenn diese Zahl größer als 1
ist, gibt sie an, wie oft die Neupositionierung der Pinwandzettel beim Drücken der Taste KeyX insgesamt wiederholft werden soll.
var info_on
Dieser Schalter zeigt an, ob die Funktion pose
Daten zur Verteilung an info_msg
anhängen soll. Er wird bei der Behandlung der Taste KeyX (onk
auf 1
gesetzt.
function info_show
Zeigt den Wert von info_msg
an, setzt info_msg
auf die leere Zeichenkette und info_on
auf 0
. Diese Funktion wird in onk
bei der Behandlung der Taste KeyX aufgerufen.
function info_pose_step
(flds, fl, li, self, left, top, wd, ht)
Diese Hilfsfunktion hängt nach der Positionierung eines Pinwandzettels detaillierte Daten zur Positionierung an info_msg
an, darunter die Daten der Zerlegungsfelder. Sie wird in pose
aufgerufen, wenn info_mode
1
oder 2
ist.
Pw
.prototype.info_distrib
Diese Funktion fügt die Kennung der Verteilung aus drei Zeichen an info_msg
an. Sie wird in pose
und onk
aufgerufen.
In den Einstellungen (s. set
) kann eingestellt werden, dass beim Drücken der Taste KeyX in einer Pinwandansicht Informationen zur Positionierung der Pinwandzettel in einem Fenster angezeigt werden. Ob es Beschränkungen der Länge von Zeichenketten in ECMAsript sind oder Beschränkungen der Funktion alert
- es kann nur eine beschränkte Zahl von Zeichen ausgegeben werden. Die detaillierte Ausgabe der Verteilung einer großen Zahl von Pinwandzetteln ist auf diese Weise nicht möglich.
Die Einträge unter dem Schlüssel set
haben die Form pinwinfo=
oder MODE
pinwinfo=
. MODE
/CNT
CNT
steht für den Wert von info_cnt
, die möglichen Werte von MODE
entsprechen den Werten von info_mode
:
detailed_pose_info
(1
)Zu jedem Pinwandzettel wird die vollständige Zerlegung der Pinwand, das Ausrichtungsfeld und die neue Position des Pinwandzettels ausgegeben. Das ist nur bei einer kleinen Zahl von Pinwandzetteln möglich, bis zu ungefähr sieben Pinwandzetteln. Das Perl-Skript posinfo_svg.pl
(Quelltext) erzeugt aus der Ausgabe SVG-Dateien, die die Zerlegung der Pinwand zeigen.
last_pose_info
(2
)Gibt die Zerlegung der Pinwand und das Ausrichtungsfeld vor der Positionierung des letzten Pinwandzettels und dessen neue Position aus. Aus der Ausgabe kann das Skript posinfo_svg.pl
(Quelltext) eine SVG-Datei erstellen.
detailed_field_count
(3
)Gibt die Kennung der Verteilung und zu jedem Pinwandzettel (in der Reihenfolge der Positionierung) die Anzahl der Zerlegungsfelder aus. Die Ausgabe kann von dem Skript diagramme
(Quelltext) graphisch aufbereitet werden.
last_field_count
(4
)Gibt die Anzahl der Zerlegungsfelder vor der Positionierung des letzten Pinwandzettels aus.