<?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:d = "http://herbaer.de/xmlns/20051201/doc"
  xmlns = "http://www.w3.org/1999/xhtml"
  xmlns:ht = "http://www.w3.org/1999/xhtml"
  xmlns:sm = "http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:im = "http://www.google.com/schemas/sitemap-image/1.1"
  xmlns:l = "http://herbaer.de/xmlns/20141210/localization"
  exclude-result-prefixes = "xsl d sm im"
  version = "1.0"
>

<d:info xmlns="http://herbaer.de/xmlns/20051201/doc">
  <title>smmobile.xslt</title>
  <subtitle>Darstellung der Sitemap für Mobilgeräte</subtitle>
  <date>2014-11-17</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>
Die Darstellung der Sitemap für Mobilgeräte wird ergänzt durch die
CSS-Regeln <filename>smmobile.css</filename>.
Die Datei <filename>smmobile.stub</filename> verknüpft die Sitemap
mit dieser Darstellung.
Die Hilfe für den Nutzer mit den Quelldateien
<filename>smmobile_help.xhtml.de</filename>,
<filename>smmobile_help.js</filename>
und <filename>smmobile_help.css</filename>
wird eingebunden.
</para>
<para>
Unter der Überschrift (Titel) erscheint eine Verweisleiste mit Verweisen
auf die Startseite und das Impressum.
</para>
<para>
Die Bildergeschichten werden in einer Tabelle aufgelistet.
Die erste Spalte enthält
das Vorschaubild (<literal>thumbnail</literal>) der Bildergeschichte
und ist ein Verweis auf die Mobil-Darstellung der Bildergeschichte.
Die zweite Spalte enthält bis zu zwei Vorschaubilder,
die Verweise auf die Bilder in normaler Größe sind.
Die dritte Spalte verweist
auf die Bilderschau für Mobilgeräte (<literal>imgview</literal>).
</para>
<para>
Das erzeugte XHTML-Dokument verwendet die folgenden ID-Werte:
</para>
<variablelist>
  <varlistentry>
    <term><literal>d_links</literal></term>
    <listitem>
      <para>
Die Verweisleiste
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>lnkhome</literal></term>
    <listitem>
      <para>
Der Verweis zur Startseite
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>lnkimpr</literal></term>
    <listitem>
      <para>
Der Verweis zu den Kontaktdaten
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>lnkview</literal></term>
    <listitem>
      <para>
Der Verweis zu der Sitemap-Bilderschau
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>lnkdesk</literal></term>
    <listitem>
      <para>
Der Verweis zur Desktop-Ansicht
      </para>
    </listitem>
  </varlistentry>
</variablelist>
<para>
Das erzeugte Dokument enthält die folgenden Wörter in
<tag class="attribute">class</tag>-Attributen:
</para>
<variablelist>
  <varlistentry>
    <term><literal>story</literal></term>
    <listitem>
      <para>
Der Wert <literal>story</literal> des Attributs
<tag class="attribute">img/@class</tag>
kennzeichnet das Vorschaubild zu einer Bildergeschichte in der ersten Spalte.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>inlimg</literal></term>
    <listitem>
      <para>
Der Wert <literal>inlimg</literal> des Attributs
<tag class="attribute">a/@class</tag>
kennzeichnet Vorschaubilder in der zweiten Spalte,
die auf die Bilder in normaler Größe verweisen.
      </para>
    </listitem>
  </varlistentry>
  <varlistentry>
    <term><literal>arrow</literal></term>
    <listitem>
      <para>
Der Wert <literal>arrow</literal> des Attributs
<tag class="attribute">a/@class</tag>
kennzeichnet die Verweise auf die Bilderpräsentation
in der dritten Tabellenspalte.
      </para>
    </listitem>
  </varlistentry>
</variablelist>
</d:section>

<d:para>
Lokalisierung abhängig von der Einstellung des Browsers
</d:para>
<xsl:variable name="g_l" select="document('../local/local.xml')/l:localization"/>

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

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

<d:para>
Der HTML-Rahmen
</d:para>
<xsl:template match="sm:urlset">
  <xsl:variable name="title">
    <l:ph id="sitemap"/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="substring-before (substring-after (sm:url[1]/sm:loc, 'http://'), '/')"
    />
  </xsl:variable>
  <xsl:variable name="help" select="document('smmobile_help.xhtml')/ht:html"/>
  <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <title><xsl:value-of select="$title"/></title>
      <link rel="icon">
        <xsl:attribute name="href">style/shortcut_icon.png</xsl:attribute>
      </link>
      <xsl:element name="link">
        <xsl:attribute name="rel">stylesheet</xsl:attribute>
        <xsl:attribute name="href">style/smmobile.css</xsl:attribute>
      </xsl:element>
      <xsl:apply-templates select="$help/ht:head"/>
    </head>
    <body>
      <h1><xsl:value-of select="$title"/></h1>
      <div id="d_links">
        <a id="lnkhome" href="mobile" target="_top">&#x2302;</a>
        <a id="lnkimpr" href="comp/formal/index.xhtml" target="_top">&#x2709;</a>
        <a id="lnkview" href="smview" target="_top">&#x25b6;</a>
        <a id="lnkdesk" href="smdesk" target="_top"><l:ph id="desktop"/></a>
      </div>
      <xsl:apply-templates select="$help/ht:body"/>
      <table>
        <xsl:apply-templates select="sm:url [im:image]"/>
      </table>
    </body>
  </html>
</xsl:template>

<d:para>
Tabellenzeile zu einem Dokument
</d:para>
<xsl:template match="sm:url">
  <xsl:variable
    name = "base"
    select = "
      substring-after(
      substring-after(
      substring-before(sm:loc, '/story.xml'),
      '//'),
      '/')
    "
  />
  <tr>
    <td>
      <a href="{$base}/mobile">
        <img src="{$base}/thumbnail.jpg" alt="Vorschau" class="story"/>
      </a>
    </td>
    <td>
      <xsl:apply-templates select="im:image [position() &lt; 3]"/>
    </td>
    <td>
      <a class="arrow" href="{$base}/imgview">&#x21d2;</a>
    </td>
  </tr>
</xsl:template>

<xsl:template match="im:image">
  <a class="inlimg">
    <xsl:attribute name="href">
      <xsl:value-of
        select = "
          concat (
          substring-before (im:loc, '/smallimg/'),
          '/images/',
          substring-after (im:loc, '/smallimg/') )
        "
      />
    </xsl:attribute>
    <xsl:attribute name="style">
      <xsl:value-of
        select = "
          concat (
          'background-image: url(',
          substring-before (im:loc, '/smallimg/'),
          '/montage/index.jpg); background-position: -', (position() - 1) * 72, 'px 0;' )
        "
      />
    </xsl:attribute>
  </a>
  <xsl:text> </xsl:text>
</xsl:template>

<d:para>
Skript und CSS-Regeln zur Hilfe
</d:para>
<xsl:template match="ht:head">
  <xsl:copy-of select="ht:style | ht:script"/>
</xsl:template>

<d:para>
Der Inhalt der Hilfe wird kopiert.
</d:para>
<xsl:template match="ht:body">
  <div>
    <xsl:copy-of select="@* | *"/>
  </div>
</xsl:template>

</xsl:stylesheet>
