<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="/pool/xslt_ht.xslt" type="application/xml"?>
<xsl:stylesheet
  xmlns:xsl = "http://www.w3.org/1999/XSL/Transform"
  xmlns:is = "http://herbaer.de/xmlns/20080705/imgshow"
  xmlns:d = "http://herbaer.de/xmlns/20051201/doc"
  xmlns:l = "http://herbaer.de/xmlns/20141210/localization"
  xmlns = "http://www.w3.org/1999/xhtml"
  exclude-result-prefixes = "d is"
  version = "1.0"
  xml:lang = "de-DE"
>
<d:info xmlns="http://herbaer.de/xmlns/20051201/doc">
  <title>imgview.xslt</title>
  <subtitle>Bilderschau für Mobilgeräte</subtitle>
  <date>2014-09-25</date>
  <author>
    <personname>
      <firstname>Herbert</firstname>
      <surname>Schiemann</surname>
    </personname>
    <email>h.schiemann@herbaer.de</email>
  </author>
</d:info>

<d:section xmlns="http://herbaer.de/xmlns/20051201/doc" role="stylesheet">
  <para>
Das erzeugte XHTML-Dokument enthält eine Reihe von Knöpfen,
ein Feld, in dem ein Bild angezeigt wird,
und ein <tag class="element">iframe</tag>-Element,
in dem die Hilfe zu dieser Darstellung angezeigt wird.
Es ist immer nur entweder das Bild oder die Hilfe sichtbar.
  </para>
  <para>
Die eingebettete Hilfe hängt von der Sprache
(<tag class="attribute">@xml:lang</tag>)
des Quelldokuments ab.
  </para>
  <para>
Das erzeugte Dokument nutzt die folgenden ID-Werte:
  </para>
  <variablelist>
    <varlistentry>
      <term><literal>b_left</literal></term>
      <listitem>
        <para>
Der Knopf "links" zur Anzeige des vorigen Bildes.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_right</literal></term>
      <listitem>
        <para>
Der Knopf "rechts" zur Anzeige des nächsten Bildes.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_pause</literal></term>
      <listitem>
        <para>
Der Knopf "Pause" hält den automatischen Bildlauf an.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_stop</literal></term>
      <listitem>
        <para>
Der Knopf "Stop" beendet den automatischen Bildlauf.
Wenn der Bildlauf neu gestartet wird,
werden die Bilder neu gemischt.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_play</literal></term>
      <listitem>
        <para>
Der Knopf "Play" startet den Bildlauf oder setzt den Bildlauf fort.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_story</literal></term>
      <listitem>
        <para>
Der Knopf "Story" zeigt die Bildergeschichte in Smartfon-Ansicht an.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>b_help</literal></term>
      <listitem>
        <para>
Der Knopf "Hilfe" zeigt die Hilfe zu dieser Darstellung an.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>div_img</literal></term>
      <listitem>
        <para>
Der Abschnitt, der das Bild enthält.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>img</literal></term>
      <listitem>
        <para>
Das <tag class="element">img</tag>-Element
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>iframe</literal></term>
      <listitem>
        <para>
Das <tag class="element">iframe</tag>-Element,
in dem die Hilfe zu dieser Darstellung angezeigt wird.
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
  <para>
Es nutzt die folgenden Wörter in den Werten des Attributs
<tag class="attribute">class</tag>:
  </para>
  <variablelist>
    <varlistentry>
      <term><literal>hidden</literal></term>
      <listitem>
        <para>
Das Wort <literal>hidden</literal> bedeutet,
dass das Element nicht angezeigt werden soll.
Stets ist entweder das
<tag class="element">div</tag>-Element mit der ID
<literal>div_img</literal>, das das Bild enthält,
oder das <tag class="element">iframe</tag>-Element mit der ID
<literal>iframe</literal>, das die Hilfe enthält, verborgen.
Die Umschaltung erfolgt durch Javascript <filename>imgview.js</filename>.
        </para>
      </listitem>
    </varlistentry>
    <varlistentry>
      <term><literal>outline</literal></term>
      <listitem>
        <para>
Dieses Wort zeigt an, dass das Element hervorgeheben werden soll.
Die Javascript-Datei zur Hilfe (<filename>imgview_help.js</filename>)
setzt dieses Wort ein.
        </para>
      </listitem>
    </varlistentry>
  </variablelist>
</d:section>

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

<d:para>
Präfix des Pfades von Bild-Dateien.
Der Wert wird als Zeichenkette der Javascript-Variablen
<d:varname>imgprf</d:varname> zugewiesen.
</d:para>
<xsl:param name="p_imgprefix" select="'images/'"/>

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

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

<d:para>
HTML-Rahmen
</d:para>
<xsl:template match="is:document">
  <html>
    <xsl:copy-of select="*/@xml:lang"/>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <xsl:element name="title">
        <l:ph id="bilderschau"/>
        <xsl:text> </xsl:text>
        <xsl:value-of select="is:document/is:title"/>
      </xsl:element>
      <xsl:element name="link">
        <xsl:attribute name="href">
          <xsl:value-of select="concat ($p_styleprf, 'imgview.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_styleprf, 'shortcut_icon.png')"/>
        </xsl:attribute>
        <xsl:attribute name="rel">icon</xsl:attribute>
      </xsl:element>
      <xsl:element name="script">
        <xsl:text>
var imgprf = "</xsl:text>
        <xsl:value-of select="$p_imgprefix"/>
        <xsl:text>";
var imgs = [</xsl:text>
        <xsl:apply-templates select="//is:jpg"/>
        <xsl:text>
];
onload = function () { initialize (); };</xsl:text>
      </xsl:element>
      <xsl:element name="script">
        <xsl:attribute name="src">
          <xsl:value-of select="concat ($p_styleprf, 'imgview.js')"/>
        </xsl:attribute>
      </xsl:element>
    </head>
    <body>
      <div>
        <button id="b_left" type="button" onclick="on_btn_left()">&#x2190;</button>
        <button id="b_right" type="button" onclick="on_btn_right()">&#x2192;</button>
        <button id="b_pause" type="button" onclick="on_btn_pause()" disabled="1"
        >&#x29d3;</button>
        <button id="b_stop" type="button" onclick="on_btn_stop()" disabled="1"
        >&#x25a0;</button>
        <button id="b_play" type="button" onclick="on_btn_play()">&#x25b6;</button>
        <button id="b_story" type="button" onclick="on_btn_story()">&#x21d1;</button>
        <button id="b_help" type="button" onclick="on_btn_help()">?</button>
      </div>
      <div id="div_img">
        <img alt="Bild" id="img"/>
      </div>
      <xsl:element name="iframe">
        <xsl:attribute name="id">iframe</xsl:attribute>
        <xsl:attribute name="class">hidden</xsl:attribute>
        <xsl:attribute name="src">
          <xsl:value-of select="concat ($p_styleprf, 'imgview_help.xhtml.', $g_lang)"/>
        </xsl:attribute>
      </xsl:element>
    </body>
  </html>
</xsl:template>

<d:para>
Zu jedem Bild wird ein Array-Eintrag mit zwei Komponenten angelegt:
die erste Komponente ist die Bildkennung, die zweite der Bildtitel.
</d:para>
<xsl:template match="is:jpg">
  <xsl:value-of select="concat ('[&quot;', @src, '&quot;,&quot;', @alt, '&quot;],')"/>
</xsl:template>

</xsl:stylesheet>
