<?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:ht = "http://www.w3.org/1999/xhtml"
  xmlns:d = "http://herbaer.de/xmlns/20051201/doc"
  xmlns:e = "http://herbaer.de/xmlns/20120911/embed"
  xmlns:l = "http://herbaer.de/xmlns/20141210/localization"
  xmlns:ti = "http://herbaer.de/xmlns/201500703/transinfo/"
  xmlns:tm = "http://herbaer.de/xmlns/20130628/transformation_attributes"
  xmlns = "http://www.w3.org/1999/xhtml"
  exclude-result-prefixes = "d ht tm"
  version = "1.0"
>

<d:info xmlns="http://herbaer.de/xmlns/20051201/doc">
  <title>ixmobile.xslt</title>
  <subtitle>Darstellung der Startseite auf Mobilgeräten</subtitle>
  <date>2014-08-30</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">
<para>
Auf Mobilgeräten wird unterhalb des Kopfs nur ein Navigationsbaum angezeigt.
Die Ziele, auf die die Einträge im Navigationsbaum verweisen,
werden in einem eigenen Browserfenster angezeigt.
Diese Datei wird ergänzt durch
<filename>ixmobile.js</filename> und <filename>ixmobile.css</filename>.
Die Datei <filename>ixmobile.stub</filename> verknüpft die Startseite
<filename>index.xhtml</filename> mit dieser Transformation.
</para>
<para>
Das erzeugte Dokument verwendet die folgenden ID-Werte:
</para>
<variablelist>
  <varlistentry>
    <term><tag class="attvalue">audio</tag></term>
    <listitem>
      <para>
Das <tag class="element">audio</tag>-Element zur Klangwiedergabe.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term>
      <tag class="attvalue">audiolnk</tag>
    </term>
    <listitem>
      <para>
Die Schaltfläche zum Ein- und Ausschalten der Klangwiedergabe.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><tag class="attvalue">div_links</tag></term>
    <listitem>
      <para>
Der Abschnitt mit Verweisen ("Knöpfen"),
der unter der Überschrift angezeigt wird.
Der Attributwert wird aus dem Quelldokument
<filename>index.xhtml</filename> übernommen.
Für das Quelldokument-Element mit der ID
<tag class="attvalue">div_links</tag>
gibt es eine besondere Vorlage.
      </para>
    </listitem>
  </varlistentry>
</variablelist>
<para>
Die Attribute <code>div/@id</code> werden kopiert.
</para>
<para>
Das erzeugte Dokument verwendet die folgenden Wörter in
<tag class="attribute">class</tag>-Attributen:
</para>
<variablelist>
  <varlistentry>
    <term><literal>paused</literal></term>
    <listitem>
      <para>
Das Attribut
<tag class="attribute">class</tag>
des
<tag class="element">p</tag>-Elements
mit der ID
<tag class="attvalue">audiolnk</tag>
kann die Werte
<tag class="attvalue">paused</tag> oder
<tag class="attvalue">playing</tag>
annehmen.
Hier wird der Anfangswert
<tag class="attvalue">paused</tag>
zugewiesen.
Dieses Wort zeigt an, dass kein Klang wiedergegeben wird.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>playing</literal></term>
    <listitem>
      <para>
Das Wort
<literal>playing</literal>
im Wert des Attibuts
<code>p [@id = 'audiolnk']/@class</code>
zeigt an,
dass Klang wiedergegeben wird.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>head</literal></term>
    <listitem>
      <para>
Das Wort <literal>head</literal> kennzeichnet Abschnitte der Baumansicht,
die Unterabschnitte enthalten, bei denen aber nur die Überschrift sichtbar ist
("eingefaltete" Abschnitte).
      </para>
      <para>
Die Abschnittsüberschrift enhält als erstes Element ein
<tag class="element">span</tag>-Element.
Den Inhalt des
<tag class="element">span</tag>-Elements
bestimmen CSS-Regeln.
Der Wert des Attributs
<tag class="attribute">class</tag>
enthält das Wort <literal>navig_button</literal> und das Wort
<literal>head</literal>.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>end</literal></term>
    <listitem>
      <para>
Das Wort <literal>end</literal> kennzeichnet Abschnitte der Baumansicht,
die keine Unterabschnitte enthalten.
Im Quelldokument sollen solche Abschnitte einen Verweis auf ein "externes"
Dokument enthalten.
In dieser Darstellung für Mobilgeräte wird die Abschnittsüberschrift
ein Verweis auf das externe Dokument.
      </para>
      <para>
Das erste Element innerhalb der Abschnittsüberschrift ist ein
<tag class="element">span</tag>-Element, dessen Attribut
<tag class="attribute">class</tag> die Wörter
<literal>navig_button</literal> und <literal>head</literal>.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>exp</literal></term>
    <listitem>
      <para>
Das Wort <literal>exp</literal> kennzeichnet Abschnitte der Baumansicht,
die Unterabschnitte enthalten, die auch angezeigt werden.
Dieses Stylesheet weist als Anfangswert
<literal>head</literal> oder <literal>end</literal> zu.
      </para>
      <para>
Javascript (<filename>ixmobile.js</filename>) tauscht die Wörter
<literal>head</literal> und <literal>exp</literal> in den
<tag class="attribute">class</tag>-Attributen der
<tag class="element">div</tag>-Elemente und des ersten
enthaltenen <tag class="element">span</tag>-Elements aus.
      </para>
    </listitem>
  </varlistentry>
</variablelist>
</section>

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

<d:para>
Wurzelelement
</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>
So versteht Chrome die Codierung
</d:para>
<xsl:output method="xml" encoding="utf-8"/>

<d:para>
Wurzel
</d:para>
<xsl:template match="/">
  <xsl:apply-templates select="$g_rootelt"/>
</xsl:template>

<d:para>HTML-Kopf</d:para>
<xsl:template match="ht:head">
  <xsl:copy>
    <xsl:apply-templates select="@*"/>
    <xsl:apply-templates select="ht:meta"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <xsl:apply-templates select="ht:title"/>
    <xsl:element name="link">
      <xsl:attribute name="href">
        <xsl:value-of select="concat ($p_styleprefix, 'ixmobile.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">
      <xsl:attribute name="src">
        <xsl:value-of select="concat ($p_styleprefix, 'ixmobile.js')"/>
      </xsl:attribute>
    </xsl:element>
    <xsl:element name="script">
      <xsl:text>onload = function () { initialize (); };</xsl:text>
    </xsl:element>
  </xsl:copy>
</xsl:template>

<d:para>
Der Rumpf
</d:para>
<xsl:template match="ht:body">
  <body>
    <xsl:element name="audio">
      <xsl:attribute name="id">audio</xsl:attribute>
      <xsl:attribute name="preload">auto</xsl:attribute>
      <xsl:variable name="b" select="../ht:head/ht:meta [@name = 'backgroundsound'][1]"/>
      <xsl:variable name="s">
        <xsl:choose>
          <xsl:when test="$b">
            <xsl:value-of select="$b/@content"/>
          </xsl:when>
          <xsl:otherwise>sound</xsl:otherwise>
          </xsl:choose>
      </xsl:variable>
      <source src="{$p_styleprefix}{$s}.ogg" type="audio/ogg; codecs=vorbis"/>
    </xsl:element>
    <xsl:apply-templates select="* | @*"/>
  </body>
</xsl:template>

<d:para>
Vorborgene Abschnitte werden ignoriert.
</d:para>
<xsl:template match="ht:div[@class = 'hidden']"/>

<d:para>
Die Verweisliste wird hier neu definiert,
dahinter werden der "Musik"-Verweis und ein Hinweis auf die Übersetzung eingefügt
</d:para>
<xsl:template match="ht:div[@id='div_links']">
  <xsl:copy>
    <xsl:apply-templates select="@*"/>
    <p>
      <a href="sitemap.xml"><l:ph id="sitemap"/></a>
    </p>
    <p>
      <a href="index.xhtml#section.formal">&#x2709;</a>
    </p>
    <p>
      <a href="desktop"><l:ph id="desktop"/></a>
    </p>
  </xsl:copy>
  <p id="audiolnk" class="paused"><span/>Scott Joplin: The Rag-Time Dance</p>
  <xsl:apply-templates select="/*/@ti:machine" mode="hint"/>
</xsl:template>

<d:para>
Hinweis auf maschinelle Übersetzung
</d:para>
<xsl:template match="@ti:machine" mode="hint">
  <xsl:if test="string-length (.) &gt; 0">
    <div class="machine">
      <xsl:choose>
        <xsl:when test="contains (., 'google')">
          <p>
            <a href="https://translate.google.com" target="_blank">
              <img src="/local/trans_by_google.png"/>
            </a>
          </p>
        </xsl:when>
        <!-- Datenbank translate enthält auch Google-Übersetzungen -->
        <xsl:when test="contains (., 'mysql')">
          <p>
            <a href="https://translate.google.com" target="_blank">
              <img src="/local/trans_by_google.png"/>
            </a>
          </p>
        </xsl:when>
      </xsl:choose>
      <p>
        <l:ph id="maschinelle_uebersetzung"/>
      </p>
    </div>
  </xsl:if>
</xsl:template>

<d:para>
Sonst werden Attribute @ti:* ignoriert.
</d:para>
<xsl:template match="@ti:*"/>

<d:para>
Abschnitte werden als Baumknoten gekennzeichnet.
</d:para>
<xsl:template match="ht:div">
  <xsl:variable name="type">
    <xsl:choose>
        <xsl:when test="ht:div [starts-with (@class, 'section')]">head</xsl:when>
        <xsl:otherwise>end</xsl:otherwise>
    </xsl:choose>
  </xsl:variable>
  <div class="{$type}">
    <xsl:apply-templates select="* | text() | @id">
      <xsl:with-param name="type" select="$type"/>
    </xsl:apply-templates>
  </div>
</xsl:template>

<d:para>
<d:tag class="attribute">div/@class</d:tag>
wird nicht übernommen.
</d:para>
<xsl:template match="div/@class"/>

<d:para>
Überschriften als Verweise,
wenn der Abschnitt mit einem einzubettenden Dokument verbunden ist.
</d:para>
<xsl:template match="ht:h2 | ht:h3 | ht:h4 | ht:h5 | ht:h6">
  <xsl:param name="type"/>
  <xsl:copy>
    <span class="navig_button {$type}"/>
    <span class="navig_text">
      <xsl:choose>
        <xsl:when test="../@e:embed">
          <a target="_blank">
            <xsl:attribute name="href">
              <xsl:value-of select="../@e:embed"/>
            </xsl:attribute>
            <xsl:apply-templates/>
          </a>
        </xsl:when>
        <xsl:otherwise>
          <xsl:apply-templates/>
        </xsl:otherwise>
      </xsl:choose>
    </span>
  </xsl:copy>
</xsl:template>

<d:para>
Verweise werden entfernt,
wenn der enthaltende Abschnitt mit einem einzubettenden Dokument verbunden ist.
</d:para>
<xsl:template match="ht:a">
  <xsl:choose>
    <xsl:when test="../@e:embed"/>
    <xsl:otherwise>
      <xsl:copy>
        <xsl:apply-templates select="* | @* | text()"/>
      </xsl:copy>
    </xsl:otherwise>
  </xsl:choose>
</xsl:template>

<d:para>
<d:tag class="element">code</d:tag>-Elemente werden bis auf ihren Inhalt entfernt.
</d:para>
<xsl:template match="ht:code">
  <xsl:apply-templates/>
</xsl:template>

<d:para>
Elemente und Attribute werden kopiert, sofern keine speziellere Regel existiert.
</d:para>
<xsl:template match="* | @*">
  <xsl:copy>
    <xsl:apply-templates select="* | @* | text()"/>
  </xsl:copy>
</xsl:template>

</xsl:stylesheet>
