<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/pool/xslt_ht.xslt" type="application/xml"?>
<xsl:stylesheet
  xmlns = "http://www.w3.org/1999/xhtml"
  xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
  xmlns:ht = "http://www.w3.org/1999/xhtml"
  xmlns:l = "http://herbaer.de/xmlns/20141210/localization"
  xmlns:i = "http://herbaer.de/xmlns/20080705/imgshow"
  xmlns:d = "http://herbaer.de/xmlns/20051201/doc"
  xmlns:ti = "http://herbaer.de/xmlns/201500703/transinfo/"
  xmlns:tm = "http://herbaer.de/xmlns/20130628/transformation_attributes"
  xmlns:xl = "http://www.w3.org/1999/xlink"
  version = "1.0"
  xml:lang = "de"
  exclude-result-prefixes = "d i ht l tm ti xl"
>

<d:info xmlns="http://herbaer.de/xmlns/20051201/doc">
  <title>pinwand.xslt</title>
  <subtitle>Pinwand-Darstellung einer "Bildergeschichte"</subtitle>
  <date>2020-06-19</date>
  <author>
    <personname>
      <firstname>Herbert</firstname>
      <surname>Schiemann</surname>
    </personname>
    <email>h.schiemann@herbaer.de</email>
  </author>
</d:info>

<section xmlns="http://herbaer.de/xmlns/20051201/doc" role="stylesheet">
  <section>
    <title>Aufbau</title>
    <para>
Der Kopf der Darstellung bleibt immer gleich.
    </para>
    <para>
Der Bereich unterhalb der Kopfleiste (ID <literal>c_cont</literal>)
ist ein Platz für austauschbare Tafeln.
Es wird immer nur eine Tafel angezeigt.
Manche Tafeln kann man sich als Pinwand vorstellen,
auf der mehrere Textzettel und Bilder mehr oder weniger durcheinander angeheftet sind.
    </para>
    <para>
Die erste Tafel (Starttafel, ID <literal>c_main</literal>) ist eine Pinwand.
Der oberste, anfangs immer frei sichtbare Zettel enthält den Text des ersten Abschnitts.
Weitere Zettel enthalten Abschnittsüberschriften als Verweise auf die Abschnitte
und den Verweis "zurück".
Außerdem ist das erste Bild jedes Abschnitts angeheftet.
    </para>
    <para>
Nachfolgend wird für jeden Abschnitt eine Tafel angelegt.
    </para>
    <para>
Wenn der Abschnitt kein Bild enhält,
dann enthält das Tafelbild den Abschnittstext,
gefolgt von kleinen Vorschaubildern, die als Verweis auf einen Abschnitt dienen.
    </para>
    <para>
Wenn der Abschnitt wenigstens ein Bild enthält,
ist die Tafel eine Pinwand.
Die Pinwand enthält einen Zettel für jeden Unterabschnitt und alle Bilder.
Außerdem gibt es einen Zettel mit den Überschriften anderer Abschnitte als Verweisen
und ein Bild eines anderen Abschnitts ebenfalls als Verweis
Die "fremden" Abschnitte werden beim Laden pseudozufällig gewählt.
    </para>
    <para>
Die letzte Tafel ist, bildlich gesprochen, die Leinwand für die Diaschau.
    </para>
    <para>
Links unten wird ein Hinweis auf die maschinelle Übersetzung (ID <literal>mt</literal>)
angezeigt, den die Surferin verbergen kann.
    </para>
  </section>
  <section>
    <title>Bilder</title>
    <para>
Die <tag class="element">img</tag>-Elemente haben zunächst
kein <tag class="attribute">src</tag>-Attribut.
Die Bilddaten sollen verzögert bei Bedarf geladen werden,
damit es nicht zu langen Wartezeiten kommt.
Stattdessen haben sie ein Attribut <tag class="attribute">x-id</tag>,
dessen Wert die Bildkennung ist.
Es gibt die folgenden <tag class="element">img</tag>-Elemente:
    </para>
    <variablelist>
      <varlistentry>
        <term>Diaschau-Bild</term>
        <listitem>
          <para>
Das Bild der Diaschau mit der ID <literal>ds_img</literal>.
          </para>
        </listitem>
      </varlistentry>
      <varlistentry>
        <term>Bilder in der Übersicht</term>
        <listitem>
          <para>
An der Übersichts-Pinwand hängt das erste Bild eines jeden Bild-Abschnitts.
          </para>
        </listitem>
      </varlistentry>
      <varlistentry>
        <term>Gewöhnliche Bilder</term>
        <listitem>
          <para>
Gewöhnliche Bilder eines Bild-Abschnitts hängen an der Pinwand des Abschnitts.
          </para>
        </listitem>
      </varlistentry>
      <varlistentry>
        <term>Fremdbilder</term>
        <listitem>
          <para>
Falls es genug Bildabschnitte gibt,
hängt an der Pinwand eines Bildabschnitts das erste Bild eines anderen Abschnitts,
das &#x201e;Fremdbild&#x201d;.
          </para>
        </listitem>
      </varlistentry>
      <varlistentry>
        <term>Daumenbildchen</term>
        <listitem>
          <para>
Am Ende eines Abschnitts, der nur Text enthältt,
wird ein Block mit kleinen &#x201e;Daumenbildchen&#x201d; angefügt,
die die ersten Bilder jedes Bildabschnitts zeigen.
          </para>
        </listitem>
      </varlistentry>
    </variablelist>
  </section>
  <variablelist>
    <title>Verwendete ID-Werte</title>
    <varlistentry>
      <term>head</term>
      <listitem>
        <para>
Die Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>logo</term>
      <listitem>
        <para>
Das Logo-Bildchen in der Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>mt</term>
      <listitem>
        <para>
Der Hinweis auf die maschinelle Übersetzung
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>hmt</term>
      <listitem>
        <para>
Die Schaltfläche: Übersetzungshinweis verbergen
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_cont</term>
      <listitem>
        <para>
Das div-Element, das alle "pinw"-Elemente
(<literal>d_main</literal> und ein Element zu jedem Abschnitt)
enthält.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_main</term>
      <listitem>
        <para>
Das umfassende div-Element im body-Element,
das Verweise auf die Abschnitte enthält.
Diese Verweise können Bilder, Textinhalte oder die Titel der Abschnitte sein.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_<replaceable>SECTNR</replaceable></term>
      <listitem>
        <para>
Das darstellende div-Element zum Abschnitt <replaceable>SECTNR</replaceable>,
ein Kindelement des div-Elements <literal>d_cont</literal>
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_vw</term>
      <listitem>
        <para>
Das div-Element zur Diaschau.
Es enthält zwei überlagernde div-Elemente zur Bild-Darstellung (class
<literal>img</literal>)
und zur Darstellung der Steuerungs-Elemente (ID <literal>d_vw_ctrl</literal>).
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>ds_img</term>
      <listitem>
        <para>
Das Bildelement zur Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_vw_ctrl</term>
      <listitem>
        <para>
Das div-Element mit dieser ID enthält die Elemente zur Steuerung
der &#x201e;Diaschau&#x201d;.
Es dient zur Positionierung.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_links</term>
      <listitem>
        <para>
Das Verweis-Feld, das die Schaltfläche in der Kopfzeile öffnet.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>d_hint</term>
      <listitem>
        <para>
Das Hinweis-Feld, das bei einem &#x201e;Like&#x201d; ohne Namen angezeigt wird.
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
  <variablelist>
    <title>Verwendete <literal>class</literal>-Wörter</title>
    <varlistentry>
      <term>spacer</term>
      <listitem>
        <para>
Der Leerraum in der Kopfzeile rechts neben dem Titel
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>pinw</term>
      <listitem>
        <para>
Kennzeichnet ein div-Element ("Pinwand"),
dessen Kindelemente als "Pinwandzettel" dargestellt werden.
Die Reihenfolge und Positionierung der Kindelemente ist pseudo-zufällig.
        </para>
        <para>
Diese div-Elemente sind Kinder des Behälters <literal>d_cont</literal>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>fc</term>
      <listitem>
        <para>
Kennzeichnet als "Pinwandzettel" dargestellte Kindelemente
eines div-Elements mit dem class-Wort <literal>pinw</literal>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>show</term>
      <listitem>
        <para>
Einige Elemente werden script-gesteuert angezeigt oder verborgen.
Dieses Wort zeigt an, dass das Element angezeigt wird.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>hide</term>
      <listitem>
        <para>
Einige Elemente werden script-gesteuert angezeigt oder verborgen.
Dieses Wort zeigt an, dass das Element verborgen wird.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>h</term>
      <listitem>
        <para>
Kennzeichnet ein Bild im Hochformat (Porträt).
Das Wort wird vom Attributwert <code>jpg/@fmt</code> übernommen.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>q</term>
      <listitem>
        <para>
Kennzeichnet ein Bild im Querformat (Landschaft)
Das Wort wird vom Attributwert <code>jpg/@fmt</code> übernommen.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>dias</term>
      <listitem>
        <para>
Kennzeichnet den Abschnitt (div-Element),
der die Diaschau umfasst.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>img</term>
      <listitem>
        <para>
Kennzeichnet das div-Element,
in dem das Bild der Diaschau enthalten ist
(ein Kindelement des div-Elements <code>class~="dias"</code>).
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>sym</term>
      <listitem>
        <para>
Kennzeichnet den Listeneintrag mit Verweissymbolen
am Ende eines Verweis-Pinwandzettels.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>snim</term>
      <listitem>
        <para>
Kennzeichnet die Tafel zu einem Textabschnitt.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>thdiv</term>
      <listitem>
        <para>
Wenn ein Abschnitt keine Bilder enthält,
dann wird aus jedem Abschnitt das erste Bild zur Vorschau ausgewählt.
In die Darstellung des Abschnitts ohne Bilder wird ein div-Element
mit den Vorschaubildern eingefügt.
Dieses Wort kennzeichnet den eingefügten Abschnitt.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>thb</term>
      <listitem>
        <para>
Ein Vorschaubild in einem <literal>thdiv</literal>-Block.
Es enthält ein Attribut <code>X-l</code> mit einem Wert der Form
<replaceable>SECTNR</replaceable>,
das auf den Abschnitt verweist, zu dem das Bild gehört.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>rnd</term>
      <listitem>
        <para>
Kennzeichnet die Elemente in der Darstellung eines Bilderabschnitts,
die auf pseudo-zufällig ausgewählte andere Abschnitte verweisen.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>fit</term>
      <listitem>
        <para>
Kennzeichnet ein Bild, das in das umgebende Feld einzupassen ist
(<literal>object-fit: contain</literal>),
verwendet für das Diaschau-Bild ID <literal>ds_img</literal>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>shrink</term>
      <listitem>
        <para>
Kennzeichnet ein Bild, das auf das umgebende Feld zu verkleinern ist
(<literal>object-fit: scale-down</literal>),
zu verwenden für das Diaschau-Bild ID <literal>ds_img</literal>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>clear</term>
      <listitem>
        <para>
Für die Diaschau (ID <literal>d_vw</literal>): transparenter Hintergrund
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>grey</term>
      <listitem>
        <para>
Für die Diaschau (ID <literal>d_vw</literal>): grauer Hintergrund
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>black</term>
      <listitem>
        <para>
Für die Diaschau (ID <literal>d_vw</literal>): weiße Schrift auf schwarzem Hintergrund
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
  <variablelist>
    <title>Attribut <literal>x-l</literal></title>
    <varlistentry>
      <term><replaceable>top</replaceable></term>
      <listitem>
        <para>
Verweis auf das erste Tafelbild der Bildergeschichte
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>like</replaceable></term>
      <listitem>
        <para>
&#x201e;Like&#x201d;
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>share</replaceable></term>
      <listitem>
        <para>
Gefällt-mir-E-Mail
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>help</replaceable></term>
      <listitem>
        <para>
Hilfemodus umschalten
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>links</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;Verweise&#x201d; rechts in der Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>imgfit</replaceable></term>
      <listitem>
        <para>
Ändert die Anpassung der Bildgröße an den Rahmen.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>imgonly</replaceable></term>
      <listitem>
        <para>
Wechselt in die Nur-Bild-Darstellung und zurück.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>backgr</replaceable></term>
      <listitem>
        <para>
Ändert die Hintergrundfarbe.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>store</replaceable></term>
      <listitem>
        <para>
Speichert die aktuellen Einstellungen lokal.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>prev</term>
      <listitem>
        <para>
Ein Verweis zurück zum zuvor angezeigten Tafelbild.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>previmg</replaceable></term>
      <listitem>
        <para>
Zeigt das vorhergende Bild in der Bildlauf-Reihenfolge an.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>next</replaceable></term>
      <listitem>
        <para>
Zeigt das nächste Bild in der Bildlauf-Reihenfolge an.
Dieser und die folgenden Werte gelten nur in der &#x201e;Diaschau&#x201d;.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>startstop</replaceable></term>
      <listitem>
        <para>
Startet und beendet den automatischen Bildlauf.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>fast</replaceable></term>
      <listitem>
        <para>
Erhöht die Bildlauf-Geschwindigkeit.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>slow</replaceable></term>
      <listitem>
        <para>
Vermindert die Bildlauf-Geschwindigkeit.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>img</term>
      <listitem>
        <para>
Ein Verweis zur Diaschau mit den ersten Bildern aller Abschnitte.
Das anfangs angezeigte Bild wird pseudozufällig gewählt.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>back</term>
      <listitem>
        <para>
Ein Verweis zurück zum Tafelbild,
von dem das aktuell angezeigte Tafelbild aufgerufen wurde.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>SECTNR</replaceable></term>
      <listitem>
        <para>
Ein Verweis auf den Abschnitt Nr <replaceable>SECTNR</replaceable>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term>i<replaceable>IMGSNR</replaceable>_<replaceable>IMGIX</replaceable></term>
      <listitem>
        <para>
Verweis zu Bilderschau.
<replaceable>IMGSNR</replaceable> ist der Index eines Bilderabschnitts,
der erste Bilderabschnitt hat die Nummer 0.
<replaceable>IMGIX</replaceable> ist der Index eines Bildes im Abschnitt,
die Zählung beginnt mit 0.
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
  <variablelist>
    <title>Attribut <literal>x-h</literal></title>
    <varlistentry>
      <term><replaceable>title</replaceable></term>
      <listitem>
        <para>
Der Titel
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>likebtn</replaceable></term>
      <listitem>
        <para>
Der Like-Knopf an der linken Seite der Diaschau oder in der Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>sharebtn</replaceable></term>
      <listitem>
        <para>
Der Share-Knopf in der Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>linksbtn</replaceable></term>
      <listitem>
        <para>
Der Knopf zur Verweisliste rechts in der Kopfzeile
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>imgfitbtn</replaceable></term>
      <listitem>
        <para>
Der Knopf "Bilddarstellung anpassen" an der linken Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>hideheadbtn</replaceable></term>
      <listitem>
        <para>
Der Knopf "Kopfzeile verbergen" an der linken Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>backgrbtn</replaceable></term>
      <listitem>
        <para>
Der Knopf "Hintergrund" an der linken Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>storebtn</replaceable></term>
      <listitem>
        <para>
Der Knopf "Einstellung speichern" an der linken Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_closebtn</replaceable></term>
      <listitem>
        <para>
Der Knopf "Bilderschau schließen" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_previmg</replaceable></term>
      <listitem>
        <para>
Der Knopf "voriges Bild" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_next</replaceable></term>
      <listitem>
        <para>
Der Knopf "nächstes Bild" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_ss</replaceable></term>
      <listitem>
        <para>
Der Knopf "Start / Stop" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_fast</replaceable></term>
      <listitem>
        <para>
Der Knopf "schneller" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_slow</replaceable></term>
      <listitem>
        <para>
Der Knopf "langsamer" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ds_top</replaceable></term>
      <listitem>
        <para>
Der Knopf "Übersicht" an der rechten Seite der Diaschau.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ixlinks</replaceable></term>
      <listitem>
        <para>
Ein Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten,
aber nicht der letzte.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ixlinkslast</replaceable></term>
      <listitem>
        <para>
Der letzte Pinwandzettel auf der Übersichtstafel mit Verweisen zu den Abschnitten.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>prev</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;zurück zur vorher angezeigten Ansicht&#x201d;
am Ende eines Verweis-Pinwandzettels.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>iximgvw</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;zur Bilder-Übersicht&#x201d;
am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>ixback</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;zur aufrufenden Ansicht&#x201d;
am Ende des letzten Verweis-Pinwandzettels auf der Übersichtstafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>m_snim</replaceable></term>
      <listitem>
        <para>
Pinwandzettel zu einem Textabschnitt auf der Übersichtstafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>m_il</replaceable></term>
      <listitem>
        <para>
Ein Bild auf der Übersichtstafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>fimg</replaceable></term>
      <listitem>
        <para>
Das Fremdbild in einer Bildabschnitt-Pinwand
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>rndlist</replaceable></term>
      <listitem>
        <para>
Die Verweisliste in einer Bildabschnitt-Pinwand
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>back</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;zur aufrufenden Ansicht&#x201d;
am Ende des Verweis-Pinwandzettels auf einer Bildertafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>top</replaceable></term>
      <listitem>
        <para>
Schaltfläche &#x201e;zur Übersicht&#x201d;
am Ende des Verweis-Pinwandzettels auf einer Bildertafel.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>pimg</replaceable></term>
      <listitem>
        <para>
Ein Pinwand-Bild eines Bilderabschnitts.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><replaceable>linksect</replaceable></term>
      <listitem>
        <para>
Verweis auf einen Abschnitt im Text.
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
</section><!-- role = 'stylesheet' -->

<d:para>Präfix des Pfades von JavaScript- und CSS-Dateien</d:para>
<xsl:param name="p_styleprefix" select="'../style/'"/>

<d:para>Präfix des Pfades von Bild-Dateien</d:para>
<xsl:param name="p_imgprefix" select="''"/>

<d:para>Maximale Zahl der Einträge in einem Verweisabschnitt</d:para>
<xsl:param name="p_maxnum_li" select="8"/>

<d:para>
Mindestzahl der Abschnitte.
Wenn die Zahl der Abschnitte kleiner ist,
wird kein Verweisfeld erzeugt.
</d:para>
<xsl:param name="p_minnum_sect" select="4"/>

<d:para>
Wurzelelement der Bildergeschichte
</d:para>
<xsl:variable name="g_rootelt" select="/*"/>

<d:para>
Sprache ohne weitere Spezifikation
</d:para>
<xsl:variable name="g_lang">
  <xsl:variable name="l" select="$g_rootelt/@xml:lang"/>
  <xsl:choose>
    <xsl:when test="string-length($l) = 0">
      <xsl:text>de</xsl:text>
    </xsl:when>
    <xsl:when test="contains ($l, '-')">
      <xsl:value-of select="substring-before ($l, '-')"/>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="$l"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:variable>

<d:para>
Anzahl der Abschnitte
</d:para>
<xsl:variable name="g_numsect" select="count($g_rootelt/i:section)"/>

<d:para>
Anzahl der Abschnitte mit wenigstens einem Bild
</d:para>
<xsl:variable name="g_numis" select="count($g_rootelt/i:section[descendant::i:jpg])"/>

<xsl:output method="xml" encoding="utf-8"/>

<d:para>HTML-Rahmen</d:para>
<xsl:template match="/">
  <html>
    <xsl:copy-of select="$g_rootelt/@xml:lang"/>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <xsl:element name="title">
        <xsl:value-of select="$g_rootelt/i:title"/>
      </xsl:element>
      <xsl:element name="link">
        <xsl:attribute name="href">
          <xsl:value-of select="concat ($p_styleprefix, 'pinw.css')"/>
        </xsl:attribute>
        <xsl:attribute name="rel">stylesheet</xsl:attribute>
      </xsl:element>
      <xsl:element name="link">
        <xsl:attribute name="href">
          <xsl:value-of select="concat ($p_styleprefix, 'shortcut_icon.png')"/>
        </xsl:attribute>
        <xsl:attribute name="rel">icon</xsl:attribute>
      </xsl:element>
      <xsl:element name="script">
        <!--
            Aufbau der Einträge in init_d je Abschnitt
            [sectnr, title, [[src, fmt], ], len  ] für Bilder-Abschnitte
            [sectnr, title, null,           null ] für reine Text-Abschnitte
        -->
        <xsl:text tm:content="normal">
        var n_imgsect = </xsl:text>
        <xsl:value-of select="$g_numis"/>
        <xsl:text tm:content="normal">;
        var n_sect = </xsl:text>
        <xsl:value-of select="$g_numsect"/>
        <xsl:text tm:content="normal">;
        var init_d = [
        </xsl:text>
        <xsl:for-each select="$g_rootelt/i:section[descendant::i:jpg]">
          <xsl:value-of
            select = "
              concat(
              '[', count(preceding::i:section) + 1,
              ',&quot;', i:title, '&quot;,[')
            "
          />
          <xsl:for-each select=".//i:jpg">
            <xsl:value-of select="concat(        '[&quot;', @src, '&quot;,&quot;', @fmt, '&quot;', '],'        )"
            />
          </xsl:for-each>
          <xsl:value-of select="concat('],', count(.//i:jpg))"/>
          <xsl:text tm:content="normal">],
          </xsl:text>
        </xsl:for-each>
        <xsl:for-each select="$g_rootelt/i:section[not(descendant::i:jpg)]">
          <xsl:value-of select="concat('[', count(preceding::i:section) + 1, ',&quot;', i:title)"
          />
          <xsl:text tm:content="normal">", null, null],
          </xsl:text>
        </xsl:for-each>
        <xsl:text tm:content="normal">];
        var prf_img = "</xsl:text>
        <xsl:value-of select="$p_imgprefix"/>
        <xsl:text tm:content="normal">";
        var tell = {};</xsl:text>

        <!--
        <xsl:text>
        tell.s = "Das gefällt mir";
        tell.b = "Schau dir diese Website an:";
        </xsl:text>
        -->
        <!-- -->
        <xsl:text tm:content="normal">tell.s = "</xsl:text>
        <l:ph id="tellabout_betreff"/>
        <xsl:text tm:content="normal">";
        tell.b  = "</xsl:text>
        <l:ph id="tellabout_das_gefaellt_mir"/>
        <xsl:text tm:content="normal">";</xsl:text>
        <!-- -->
        <xsl:text tm:content="normal">onload = function() { initialize (); };</xsl:text>
      </xsl:element>
      <xsl:element name="script">
        <xsl:attribute name="src">
          <xsl:value-of select="concat ($p_styleprefix, 'pinw.js')"/>
        </xsl:attribute>
      </xsl:element>
      <xsl:element name="script">
        <xsl:text tm:content="normal">
        onload = function () { initialize (); }</xsl:text>
      </xsl:element>
    </head>
    <xsl:apply-templates select="$g_rootelt"/>
  </html>
</xsl:template>

<section xmlns="http://herbaer.de/xmlns/20051201/doc">
  <para>
Das div-Element unterhalb des Kopfes dient zu Positionierung.
Ohne diesen Behälter müssten alle "Pinwände" einzeln positioniert werden.
  </para>
  <para>
Es werden "Indexabschnitte" mit je höchstens
<d:replaceable>maxnum_li</d:replaceable> Listeneinträgen
erzeugt. Jeder Listeneintrag verweist auf einen Abschnitt.
Zusätzlich wird zu jedem Abschnitt ein Bild eingefügt.
  </para>
</section>
<xsl:template match="i:document">
  <body class="clear">
    <audio/>
    <div id="head" class="show">
      <a href="/index.xhtml"><img id="logo" src="{$p_styleprefix}logo.png"/></a>
      <span x-l="top" tabindex="0" x-h="title"><xsl:value-of select="i:title"/></span>
      <!--
          1F44D THUMBS UP SIGN
          &#x2192; 1F592 reversed thumbs up sign
          263A WHITE SMILING FACE
          &#x2192; 1F642 slightly smiling face
          = have a nice day!
      -->
      <span class="spacer"/>
      <span x-l="like" tabindex="0" x-h="likebtn">&#x263a;</span>
      <!--
          1F584 ENVELOPE WITH LIGHTNING
          = e-mail
          &#x2192; 1F4E7 e-mail symbol
          1F585 FLYING ENVELOPE
          = send message
          &#x2192; 1F4E9 envelope with downwards arrow above
          1F4E7 E-MAIL SYMBOL
          &#x2022; glyph may show an E instead of an @-sign
          &#x2192; 1F584 envelope with lightning
          1F4E9 ENVELOPE WITH DOWNWARDS ARROW ABOVE
          &#x2022; sending mail
          &#x2192;1F585 flying envelope
          299F ACUTE ANGLE
          &#x2192; 2220 angle
          2220 ANGLE
          &#x2022; used in astrological contexts for aspect semisquare
          &#x2192; 299F acute angle
          227A &#x227a; PRECEDES
          = lower rank than
      -->
      <span x-l="share" tabindex="0" x-h="sharebtn">&#x227a;</span>
      <!--
          1F582 BACK OF ENVELOPE
          &#x2022; contrasts with 2709, which shows a seal
          &#x2192; 2709 envelope
          24D8 &#x24d8; CIRCLED LATIN SMALL LETTER I
          &#x2248; <circle> 0069 i
      -->
      <a href="../index.xhtml#section.formal" tabindex="0">&#x24d8;</a>
      <!--
          2753 BLACK QUESTION MARK ORNAMENT
          2754 WHITE QUESTION MARK ORNAMENT
      -->
      <span x-l="help" tabindex="0">?</span>
      <!--
          2630 &#x2630; TRIGRAM FOR HEAVEN
      -->
      <span x-l="links" tabindex="0" x-h="linksbtn">&#x2630;</span>
    </div>
    <div id="d_cont">
      <div id="d_main" class="pinw hide">
        <xsl:apply-templates select="i:section" mode="main"/>
        <xsl:if test="count(i:section) &gt;= $p_minnum_sect">
          <xsl:apply-templates select="." mode="ix">
            <!-- ein zusätzlicher Eintrag "zurück" -->
            <xsl:with-param name="n" select="ceiling ((count (i:section) + 1) div $p_maxnum_li)"
            />
          </xsl:apply-templates>
        </xsl:if>
      </div>
      <xsl:apply-templates select="i:section" mode="top"/>
      <!-- Abschnitt für Bilderansicht / Diaschau -->
      <div id="d_vw" class="dias hide clear">
        <!-- zwei überlagernde div - Elemente zur Ausrichtung -->
        <div class="img">
          <img id="ds_img" decoding="sync" class="fit"/>
        </div>
        <div id="d_vw_ctrl">
          <div>
            <p x-l="like" tabindex="0" x-h="likebtn">&#x263a;</p>
            <!--
                2195 &#x2195; up down arrow
                2922 &#x2922; NORTH EAST AND SOUTH WEST ARROW
            -->
            <p x-l="imgfit" tabindex="0" x-h="imgfitbtn">&#x2922;</p>
            <!-- 25F1 &#x25f1; WHITE SQUARE WITH LOWER LEFT QUADRANT -->
            <p x-l="imgonly" tabindex="0" x-h="hideheadbtn">&#x25f1;</p>
            <!--
                25D0 &#x25d0; circle with left half black
                25A3 &#x25a3; WHITE SQUARE CONTAINING BLACK SMALL SQUARE
                1F792 &#x1f792; VERY HEAVY WHITE SQUARE
            -->
            <p x-l="backgr" tabindex="0" x-h="backgrbtn">&#x1f792;</p>
            <!-- 2713 &#x2713; CHECK MARK -->
            <p x-l="store" tabindex="0" x-h="storebtn">&#x2713;</p>
          </div>
          <div>
            <!--
                1F5D9 CANCELLATION X (firefox nicht ok)
                = close
                &#x2192; 274C cross mark
                FE0E VARIATION SELECTOR-15
                = text variation selector
                2715 MULTIPLICATION X
                &#x2192; 00D7 multiplication sign
                &#x2192; 2573 box drawings light diagonal cross
                &#x2192; 1F7A8 thin saltire
                2716 HEAVY MULTIPLICATION X
                &#x2192; 1F7AE extremely heavy saltire
                2717 BALLOT X
                &#x2192; 2613 saltire
                &#x2192; 1F5F4 ballot script x
                2718 &#x2718; HEAVY BALLOT X
                &#x2192; 1F5F6 ballot bold script x
                274C CROSS MARK
                &#x2022; forms a game tally pair with 2B55
                &#x2192; 00D7 multiplication sign
                &#x2192; 1F5D9 cancellation x
                &#x2192; 1F7AC heavy saltire
                &#x2192; 1FBC0 white heavy saltire with roundedcorners
            -->
            <p x-l="prev" tabindex="0" x-h="ds_closebtn">&#x2715;</p>
            <!--
                23F4 BLACK MEDIUM LEFT-POINTING TRIANGLE
                = reverse, back
                &#x2022; preferred to 25C0 &#x25c0; black left-pointing triangle
                &#x2192; 2BC7  black medium left-pointing triangle centred
                &#x2192; 1F780  black left-pointing isosceles righttriangle
                23F5 BLACK MEDIUM RIGHT-POINTING TRIANGLE
                = forward
                &#x2022; preferred to 25B6 &#x25b6; black right-pointing triangle
                &#x2192; 2BC8 black medium right-pointing triangle centred
                &#x2192; 1F782 black right-pointing isosceles righttriangle
            -->
            <p x-l="previmg" tabindex="0" x-h="ds_previmg">&#x23f4;</p>
            <p x-l="next" tabindex="0" x-h="ds_next">&#x23f5;</p>
            <!--
                23EF BLACK RIGHT-POINTING TRIANGLE WITH DOUBLE VERTICAL BAR
                = play/pause toggle
                23FB &#x23fb; POWER SYMBOL
                &#x2022; IEC 5009 standby symbol
                &#x2022; IEEE 1621 power symbol
                23FC &#x23fc; POWER ON-OFF SYMBOL
                &#x2022; IEC 5010 power on-off symbol
            -->
            <p x-l="startstop" tabindex="0" x-h="ds_ss">&#x23fb;</p>
            <!--
                23F6 &#x23f6; BLACK MEDIUM UP-POINTING TRIANGLE
                = increase
                23F7 &#x23f7; BLACK MEDIUM DOWN-POINTING TRIANGLE
                = decrease
                2303 &#x2303; UP ARROWHEAD
                &#x2192; 005E  circumflex accent
                &#x2192; 02C4  modifier letter up arrowhead
                &#x2192; 2038  caret
                &#x2192; 2227  logical and
                2304 &#x2304; DOWN ARROWHEAD
                &#x2192; 02C5  modifier letter down arrowhead
                &#x2192; 2228  logical or
                &#x2192; 2335  countersink
                2206 &#x2206; INCREMENT
                = Laplace operator
                = forward difference
                = symmetric difference (in set theory)
                &#x2022; other symbols may also be used for symmetric difference
                &#x2192; 0394 &#x0394; greek capital letter delta
                &#x2192; 25B3 &#x25b3; white up-pointing triangle
                2207 &#x2207; NABLA
                = backward difference
                = gradient, del
                &#x2022; used for Laplacian operator (written with superscript 2)
                &#x2192; 25BD &#x25bd; white down-pointing triangle
                mögliche Paare: 2303 2304 / + 2212 / 2206 2207 / 25b3 25bd
            -->
            <p x-l="fast" tabindex="0" x-h="ds_fast">&#x23f6;</p>
            <p x-l="slow" tabindex="0" x-h="ds_slow">&#x23f7;</p>
            <p x-l="top" tabindex="0" x-h="ds_top">&#x21b8;</p>
          </div>
        </div>
      </div>
    </div><!-- d_cont -->
    <div id="d_links" class="hide"/>
    <div id="d_hint" class="hide">
      <!--
          1F599 SIDEWAYS WHITE RIGHT POINTING INDEX
          261E  white right pointing index
      -->
      <a href="/sto/s.xhtml#e_name">&#x261e;</a>
    </div>
    <xsl:apply-templates select="@ti:machine"/>
  </body>
</xsl:template>

<d:para>
Hinweis auf die maschinelle Übersetzung
</d:para>
<xsl:template match="@ti:machine">
  <!-- div id = "mt" class = "show" -->
  <div id="mt" class="show">
    <xsl:choose>
      <xsl:when test="contains (., 'google')">
        <a href="https://translate.google.com" target="_blank">
          <img src="/local/trans_by_google.png"/>
        </a>
      </xsl:when>
      <!-- Datenbank translate enthält auch Google-Übersetzungen -->
      <xsl:when test="contains (., 'mysql')">
        <a href="https://translate.google.com" target="_blank">
          <img src="/local/trans_by_google.png"/>
        </a>
      </xsl:when>
    </xsl:choose>
    <span>
      <l:ph id="maschinelle_uebersetzung"/>
    </span>
    <!-- 2715 MULTIPLICATION X -->
    <span id="hmt" tabindex="0" class="dblsz">&#x2715;</span>
  </div>
</xsl:template>

<d:section xmlns="http://herbaer.de/xmlns/20051201/doc" role="mode.ix">
  <para>
Der Modus <literal>ix</literal> kennzeichnet Vorlagen
für die Verweis-Zettel auf der Übersichtstafel.
  </para>
</d:section>

<d:para>Ein Verweis-Pinwandzettel auf der Übersichtstafel</d:para>
<xsl:template match="i:document" mode="ix">
  <!-- Zahl der bereits gelisteten Abschnitte -->
  <xsl:param name="s" select="0"/>
  <!-- Zahl der noch zu listenden Abschnitte -->
  <xsl:param name="r" select="count (i:section) + 1"/>
  <!-- Zahl der noch zu erstellenden Indexabschnitte -->
  <xsl:param name="n" select="3"/>
  <xsl:if test="$r &gt; 0 and $n &gt; 0">
    <xsl:variable name="t" select="ceiling ($r div $n)"/>
    <xsl:variable name="h">
      <xsl:text>ixlinks</xsl:text>
      <xsl:if test="$n = 1">last</xsl:if>
    </xsl:variable>
    <ul class="fc" tabindex="0" x-h="{$h}">
      <xsl:apply-templates select="i:section [position() &gt; $s and position() &lt;= $s + $t]" mode="ix"
      />
      <xsl:if test="$n = 1">
        <!--
            https://www.unicode.org/charts/PDF/U2190.pdf
            Simple arrows
            2190 &#x2190; LEFTWARDS ARROW
            2191 &#x2191; UPWARDS ARROW
            2192 &#x2192; RIGHTWARDS ARROW
            2193 &#x2193; DOWNWARDS ARROW
            2194 &#x2194; LEFT RIGHT ARROW
            2195 &#x2195; UP DOWN ARROW
            2196 &#x2196; NORTH WEST ARROW
            2197 &#x2197; NORTH EAST ARROW
            2198 &#x2198; SOUTH EAST ARROW
            2199 &#x2199; SOUTH WEST ARROW

            21D0 &#x21d0; LEFTWARDS DOUBLE ARROW
            21D1 &#x21d1; UPWARDS DOUBLE ARROW
            21D2 &#x21d2; RIGHTWARDS DOUBLE ARROW
            21D3 &#x21d3; DOWNWARDS DOUBLE ARROW
            21D4 &#x21d4; LEFT RIGHT DOUBLE ARROW
            21D5 &#x21d5; UP DOWN DOUBLE ARROW
            21D6 &#x21d6; NORTH WEST DOUBLE ARROW
            21D7 &#x21d7; NORTH EAST DOUBLE ARROW
            21D8 &#x21d8; SOUTH EAST DOUBLE ARROW
            21D9 &#x21d9; SOUTH WEST DOUBLE ARROW

            21B8 &#x21b8; NORTH WEST ARROW TO LONG BAR
            = home

            1F5BB DOCUMENT WITH PICTURE = graphic document
            1F5BC FRAME WITH PICTURE = art (firefox ok)
            1F5BD FRAME WITH TILE

            234D APL FUNCTIONAL SYMBOL QUAD DELTA
        -->
        <li class="sym">
          <span x-l="prev" tabindex="0" x-h="prev">&#x2192;</span>
          <span x-l="img" tabindex="0" x-h="iximgvw">&#x234d;&#xfe0e;</span>
          <span x-l="back" tabindex="0" x-h="ixback">&#x2190;</span>
        </li>
      </xsl:if>
    </ul>
    <xsl:if test="$t &lt; $r and $n &gt; 1">
      <xsl:apply-templates select="." mode="ix">
        <xsl:with-param name="s" select="$s + $t"/>
        <xsl:with-param name="r" select="$r - $t"/>
        <xsl:with-param name="n" select="$n - 1"/>
      </xsl:apply-templates>
    </xsl:if>
  </xsl:if>
</xsl:template>

<d:para>Indexeintrag für einen Abschnitt</d:para>
<xsl:template match="i:section" mode="ix">
  <li x-l="{count (preceding::i:section) + 1}" tabindex="0">
    <xsl:value-of select="i:title"/>
  </li>
</xsl:template>

<d:section xmlns="http://herbaer.de/xmlns/20051201/doc" role="mode.main">
  <para>
Der Modus <literal>main</literal> kennzeichnet Vorlagen
für den Haupt-Inhalt der Übersichtstafel.
  </para>
</d:section>
<d:para>Block zu einem Abschnitt in der Übersicht</d:para>
<xsl:template match="i:section" mode="main">
  <xsl:choose>
    <xsl:when test=".//i:jpg">
      <xsl:apply-templates select="(.//i:jpg)[1]" mode="main"/>
    </xsl:when>
    <xsl:otherwise>
      <div class="fc" x-l="{count (preceding::i:section) + 1}" tabindex="0" x-h="m_snim">
        <xsl:apply-templates select="i:*[position() &lt; 4]"/>
      </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<d:para>Ein Bild in der Übersicht</d:para>
<xsl:template match="i:jpg" mode="main">
  <!--
      src = "{$p_imgprefix}images/{@src}.jpg"
  -->
  <img
    decoding = "sync"
    class = "fc {@fmt}"
    x-l = "{count (preceding::i:section) + 1}"
    tabindex = "0"
    x-id = "{@src}"
    x-h = "m_il"
  />
</xsl:template>

<d:para>"Tafel" zu einem Abschnitt</d:para>
<xsl:template match="i:section" mode="top">
  <xsl:variable name="sectnr" select="position()"/>
  <xsl:choose>
    <xsl:when test=".//i:jpg">
      <div id="d_{$sectnr}" tabindes="0" class="pinw hide">
        <xsl:apply-templates select="i:p[string-length(normalize-space(.))&gt;0]" mode="fc"
        >
          <xsl:with-param name="sectnr" select="$sectnr"/>
        </xsl:apply-templates>
        <xsl:apply-templates select=".//i:jpg" mode="fc">
          <xsl:with-param name="isi" select="count (preceding::i:section[.//i:jpg])"/>
        </xsl:apply-templates>
        <!-- das "fremde" Bild -->
        <xsl:if test="$g_numis &gt; 1">
          <!-- es gibt wenigstens zwei Bilderabschnitte -->
          <!-- Attribute class, src, x-l per Script -->
          <img class="fc rnd" decoding="sync" tabindex="0" x-h="fimg"/>
        </xsl:if>
        <!-- der Verweis-Pinwandzettel zu einem Abschnitt -->
        <xsl:if test="$g_numsect &gt;= $p_minnum_sect">
          <ul class="fc" tabindex="0" x-h="rndlist">
            <xsl:call-template name="rndli">
              <xsl:with-param name="n">
                <!--
                    min (g_numsect - 1, p_maxnum_li - 1), falls g_numis <= 1
                    min (g_numsect - 2, p_maxnum_li - 1), falls g_numis > 1
                -->
                <xsl:variable name="a">
                  <xsl:choose>
                    <xsl:when test="$g_numis &gt; 1">1</xsl:when>
                    <xsl:otherwise>0</xsl:otherwise>
                  </xsl:choose>
                </xsl:variable>
                <xsl:choose>
                  <xsl:when test="$g_numsect - $a &gt; $p_maxnum_li">
                    <xsl:value-of select="$p_maxnum_li - 1"/>
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:value-of select="$g_numsect - $a - 1"/>
                  </xsl:otherwise>
                </xsl:choose>
              </xsl:with-param>
            </xsl:call-template>
            <li class="sym">
              <span x-l="prev" tabindex="0" x-h="prev">&#x2192;</span>
              <span x-l="back" tabindex="0" x-h="back">&#x2190;</span>
              <span x-l="top" tabindex="0" x-h="top">&#x21b8;</span>
            </li>
          </ul>
        </xsl:if>
      </div>
    </xsl:when>
    <!-- Tafel ohne Bilder -->
    <xsl:otherwise>
      <div id="d_{$sectnr}" class="snim hide">
        <xsl:apply-templates select="i:*"/>
        <div class="thdiv">
          <xsl:for-each select="../i:section/descendant::i:jpg[1]">
            <!--
                src = "{$p_imgprefix}thumbs/{@src}.jpg"
            -->
            <img
              class = "thb"
              decoding = "sync"
              x-l = "{count (preceding::i:section) + 1}"
              tabindex = "0"
              x-id = "{@src}"
            />
          </xsl:for-each>
        </div>
      </div>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<d:para>Listeneinträge für pseudo-zufällige Verweise</d:para>
<xsl:template name="rndli">
  <xsl:param name="n" select="$p_maxnum_li - 2"/>
  <li class="rnd" tabindex="0"/>
  <xsl:if test="$n &gt; 1">
    <xsl:call-template name="rndli">
      <xsl:with-param name="n" select="$n - 1"/>
    </xsl:call-template>
  </xsl:if>
</xsl:template>

<d:section xmlns="http://herbaer.de/xmlns/20051201/doc" role="mode.fc">
  <para>
Der Modus <literal>fc</literal> kennzeichnet Vorlagen für Pinwandzettel.
  </para>
</d:section>

<d:para>Textblock als "Pinwandzettel"</d:para>
<xsl:template match="i:p" mode="fc">
  <xsl:param name="sectnr"/>
  <div class="fc" tabindex="0">
    <xsl:if test="position() = 1">
      <xsl:apply-templates select="../i:title"/>
    </xsl:if>
    <xsl:apply-templates select="."/>
  </div>
</xsl:template>

<d:para>Bild als Pinwandzettel</d:para>
<xsl:template match="i:jpg" mode="fc">
  <xsl:param name="isi"/>
  <!--
      src   = "{$p_imgprefix}images/{@src}.jpg"
  -->
  <img
    decoding = "sync"
    class = "fc {@fmt}"
    x-l = "i{$isi}_{position() - 1}"
    tabindex = "0"
    x-id = "{@src}"
    x-h = "pimg"
  />
</xsl:template>

<d:para>[] - Bildverweis im Text übergehen</d:para>
<xsl:template match="i:jpg[starts-with(.,'[')]"/>

<d:para>Titel eines Abschnitts</d:para>
<xsl:template match="i:section/i:title">
  <h2>
    <xsl:apply-templates/>
  </h2>
</xsl:template>

<d:para>Unterabschnitt</d:para>
<xsl:template match="i:p">
  <p>
    <xsl:apply-templates/>
  </p>
</xsl:template>

<d:para>Verweis auf einen Abschnitt</d:para>
<xsl:template match="i:sect">
  <xsl:if test="not (starts-with(.,'['))">
    <span x-l="{@ref}" tabindex="0" x-h="linksect">
      <xsl:apply-templates/>
    </span>
  </xsl:if>
</xsl:template>

<!--
Die folgenden Vorlagen sind aus der Desktop-Darstellung übernommen.

Probleme bei i:story:
- Der Verweis in der Darstellung ist immer aktiv,
  auch in teilverdeckten "Pinwandzetteln"
- Das Hilfesystem wird umgangen.

HTML-Elemente können problematisch sein.
Vielleicht ist ein Element für Verweise innerhalb der Website sinnvoll.
-->
<d:para>Verweis auf eine Bildergeschichte</d:para>
<xsl:template match="i:story">
  <a>
    <xsl:attribute name="href">
      <xsl:choose>
        <xsl:when test="contains (@ref, '#')">
          <xsl:value-of
            select = "
              concat (
              '../s',
              substring-before (@ref, '#'),
              '/story.xml',
              '#',
              substring-after (@ref, '#') )
            "
          />
        </xsl:when>
        <xsl:otherwise>
          <xsl:value-of select="concat ('../s', @ref, '/story.xml')"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:attribute>
    <xsl:apply-templates/>
  </a>
</xsl:template>

<d:para>HTML-Inline-Elemente</d:para>
<xsl:template match="ht:*">
  <xsl:copy-of select="."/>
</xsl:template>

</xsl:stylesheet>
