pinw.js

Variable und Funktionen

var n_imgsect
var n_sect
var init_d
var prf_img
var lg
function lg_g
var lng
var set
function set_g
var help_l
var help_k
var help_e
function help_h (e)
function help_c (k)
function help_t (k)
var ky_l
function ky_c (k)
var radio
var ilm
var links_d
var hint_d
var audio
var sl
function c_l
function isrc (e, cb)
function Radio (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)
function Plain (div)
Plain.snr
Plain.fe
Plain.prototype.oncl = function (e)
Plain.prototype.onk = function (e)
Plain.prototype.activate
Plain.prototype.tm_f
function Pw (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)
function Dias (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)
function onrsz
function share
function sound (k)
function like
function links
function links_h (e)
function hint_h (e)
function clk (e)
function xl (l)
function bkg
function thd
function hmt
function clk_hmt
function store
function load
function onk (e)
function initialize

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 < n_imgsect, und auf einen Textabschnitt, falls 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 SCHLUESSEL=WERT aufgebaut ist, die durch einen Doppelpunkt (:) 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 geladen
1: wird geladen
2: ist geladen, Hilfemodus ausgeschaltet
3: ist geladen, Hilfemodus eingechaltet

var 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 help_l == 0 (beim ersten Aufruf) wird die Hilfe vom URI /h/pinw/h.xhtmlLANG geladen. 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 geladen
1: wird geladen
2: ist geladen, aber nicht angezeigt
3: wird angezeigt

function ky_c (k)

Zeigt die Tasten-Hilfe zum Schlüssel k an. Im Falle ky_l == 0 wird die Hilfe vom URI /h/pinw/k.xhtmlLANG geladen. 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: ilm [i] = init_d [i][2][0] für 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,

#dSECTNR, falls der Abschnitt SECTNR angezeigt wird,

#rndimgshow_sSECTNR, falls die Bilderübersicht mit dem aktuellen Bild aus dem Abschnitt SECTNR angezeigt wird,

#sSECTNR_IMGID_IMGPOS, 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.

c_l wird in den Funktionen share und like aufgerufen.

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 Pw.prototype.init aufgerufen.

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

Ergibt this.data[this.cid] oder null.

Radio.prototype.back

Zeigt die „aufrufende” Tafel mit der ID this.data[this.cid][0] an, sofern die Werte definiert sind.

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_SECTNR. Der Abschnitt wird neu angezeigt.
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_imgsect). IMGPOS 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” (Pw.prototype.pose), ein Textabschnitt aktiviert (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 `clpx = clpy`

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, e] enthält das Teilintervall [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 [l, r] 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].

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 rsind 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 <= l < r <= e und w <= e.

Das Ergebnis der Funktion ist die pseudozufällige Lage der linken Seite des Pinwandzettels im Intervall [0, e - w]. Im Falle z = 0 ist die Verteilungsdichte die Länge der Überschneidung des Pinwandzettels und des Ausrichtungsfeldes.

Die Verteilungsdichte ist in einem Intervall zwischen zwei „Maximalpunkten” maximal.

Im Falle z = 1 wird die Pseudozufallsvariable zunächst wie im Falle z = 0 bestimmt und dann auf das Intervall zwischen den Maximalpunkten beschränkt.

Im Falle z = 2 ist die Pseudozufallsvariable diskret verteilt. Beide Maximalpunkte haben dasselbe Gewicht.

Im Falle z = 3 ist die Pseudozufallsvariable im Intervall zwischen den Maximalpunkten gleichverteilt.

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 Radio.prototype.onk zur Behandlung einer Tastatur-Eingabe aufgerufen. Sie behandelt die Tasten-Eingaben:

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

Der Timer für den automatischen Bildlauf (tmf, stst, stp).

Dias.tf

Die Bildlauf-Funktion tmf, gebunden an das Objekt.

Dias.rd

Die Liste rd enthält die Zahlen von 0 bis ln - 1 in zufälliger Reihenfolge.

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.il[this.rd[this.cur]][0]. Diese Funktion wird in 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:

Enter: wie ein Klick
Shift+ArrowUp: Diese Tastenkombination wird nur in der Bilderübersicht behandelt. Sie zeigt den Abschnitt zum aktuellen Bild an.
KeyH: Tastenbefehle zu Bilderübersicht oder zur Bilderschau eines Abschnitts.
NumpadMultiply, KeyX: vorher angezeigte Ansicht (radio.xl ("prev"))
ArrowLeft: zuvor angezeigtes Bild (pvi)
ArrowLeft: nächstes Bild (nxt)
Space: automatischen Bildlauf starten oder beenden (stst)
ArrowUp: automatischer Bildlauf schneller (spd)
ArrowDown: automatischer Bildlauf langsamer (spd)
KeyG: Einstellungen laden (load)
KeyF: Bildanpassung (fit)
KeyS: Einstellungen speichern (store, 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 (Radio.prototype.show) oder als Teil der Behandlung einer Eingabe (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.

Diese Funktion wird von tmf und nxt aufgerufen.

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

Diese Funktion wird von stst und tf aufgerufen.

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.

Diese Funktion wird in tmf und set aufgerufen.

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. rd[0] bekommt den Wert b, die übrigen Bildpositionen werden gemischt (shf). Das erste Bild wird angezeigt.

Diese Funktion wird in radio.show aufgerufen.

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.

function share

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.

sound wird in help_t, ky_c, like und links aufgerufen.

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 (radio.show), die Taste Escape gedrückt wird (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:

backgr: Ändert den Hintergrund (bkg)
imgonly: Verbirgt oder zeigt die Kopfzeile (thd)
share: Ruft den E-Mail-Dienst auf (share).
like: Sendet eine „Gefällt mir”-Nachricht (like).
links: Zeigt das Verweisfeld an oder verbirgt es (links).
help: Schaltet den Hilfemodus ein oder aus (help_t)

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, Dias.prototype.load oder durch Drücken der Taste KeyG (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:

KeyB: Hintergrund (bkg)
Alt+Ctrl+Shift+KeyL: „Gefällt mir”-Nachricht (like)
KeyG: Einstellungen laden (load)
KeyI: Kopfzeile verbergen oder anzeigen (thd)
KeyM: E-Mail-Dienst aufrufen (share)
F1: Hilfemodus ein- oder ausschalten (help_t)
KeyS: Einstellungen speichern (store)
Escape: 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.

pinw.js

Variable und Funktionen

Informationen zur Positionierung