<?xml version="1.0"?>
<?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:ii = "http://herbaer.de/xmlns/20110902/imgindex"
  xmlns:ht = "http://www.w3.org/1999/xhtml"
  xmlns = "http://www.w3.org/1999/xhtml"
  version = "1.0"
>

<d:info xmlns="http://herbaer.de/xmlns/20051201/doc">
  <title>imgindex_ht.xslt</title>
  <subtitle>Bilder-Ranking zur Suchmaschinen-Indizierung, XHTML-Darstellung</subtitle>
  <date>2020-04-08</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">
<title><tag class="attribute">class</tag>-Attribute</title>

<para>
Der Wert <tag class="attvalue">tabsort</tag> des Attributs
<code><tag class="element">table</tag>/@<tag class="attribute">class</tag></code>
kennzeichnet die Tabelle als sortierbar.
Die Javascript-Datei <filename>tabsort.js</filename>
erlaubt die Sortierung der Tabellenzeilen,
nach dem Inhalt der Spalte, deren Kopf angeklickt wird.
</para><!-- table/@class -->

<section>
<title><tag class="attribute">class</tag>-Attribute der Tabellenzellen</title>
<para>
Die Wörter in den <tag class="attribute">class</tag>-Attribute der Tabellenzeilen
geben Auskunft über die ganze Spalte.
Sie zeigen den Datentyp des Spalteninhaltes an.
Dieser wirkt sich auf die Ausrichtung der Spalte und die Sortierung aus.
</para>
<variablelist>
<varlistentry>
  <term><tag class="attvalue">number</tag></term>
  <listitem>
    <para>
Der Zelleninhalt ist eine Zahl,
die ein führendes Vorzeichen,
Punkte zur Gruppierung der Vorkomma-Ziffern,
ein Dezimalkomma und Nachkomma-Stellen enthalten kann.
Die Sortierung erfolgt nach dem Zahlenwert
    </para>
  </listitem>
</varlistentry>
<varlistentry>
  <term><tag class="attvalue">text</tag></term>
  <listitem>
    <para>
Der Zelleninhalt ist ein Text, der nach dem ABC sortiert wird.
    </para>
  </listitem>
</varlistentry>
<varlistentry>
  <term><tag class="attvalue">key</tag></term>
  <listitem>
    <para>
Der Zelleninhalt ist die Kennung eines Bildes
(Dateiname ohne Suffix <literal>.jpg</literal>)
    </para>
  </listitem>
</varlistentry>
</variablelist>
</section><!-- td/@class -->

</d:section>

<d:para>Präfix für Javascript und CSS</d:para>
<xsl:param name="p_prf_style" select="'../src/addstory/'"/>

<d:para>Präfix des Pfades des Bilddateien</d:para>
<xsl:param name="p_prf_img">
  <xsl:choose>
    <xsl:when test="/ii:imgindex/ii:meta/ii:srcfile">
      <xsl:call-template name="txt.tolastchar">
        <xsl:with-param name="txt" select="/ii:imgindex/ii:meta/ii:srcfile"/>
        <xsl:with-param name="delim" select="'/'"/>
      </xsl:call-template>
    </xsl:when>
    <xsl:when test="/ii:imgindex/ii:meta/ii:storyid">
      <xsl:value-of
        select = "concat ( '../docroot/s', /ii:imgindex/ii:meta/ii:storyid, '/' )"
      />
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="''"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:param>

<d:para>
Vorlage <d:literal>txt.afterlastchar</d:literal>
</d:para>
<xsl:include href="/pool/txt.xslt"/>

<d:para>HTML-Rahmen</d:para>
<xsl:template match="/">
  <xsl:variable name="title">
    <xsl:apply-templates select="*" mode="title"/>
  </xsl:variable>
  <html xml:lang="de">
    <head>
      <xsl:element name="style">
        <xsl:attribute name="type">text/css; charset=utf-8</xsl:attribute>
        <xsl:value-of select="concat ('@import url(', $p_prf_style, 'table.css);')"/>
      </xsl:element>
      <xsl:element name="script">
        <xsl:attribute name="src">
          <xsl:value-of select="concat ($p_prf_style, 'tabsort.js')"/>
        </xsl:attribute>
        <xsl:attribute name="type">text/javascript; charset=utf-8</xsl:attribute>
      </xsl:element>
      <xsl:element name="script">
        <xsl:attribute name="type">text/javascript</xsl:attribute>
        <xsl:text>
onload = function () {tabsort_initialize ();};</xsl:text>
      </xsl:element>
      <title><xsl:value-of select="$title"/></title>
    </head>
    <body>
      <h1><xsl:value-of select="$title"/></h1>
      <p>
        zur <a href="{$p_prf_img}story.xml">Story</a>
      </p>
      <xsl:apply-templates/>
    </body>
  </html>
</xsl:template>

<d:para role="mode.title">
Vorlagen des Modus <d:tag class="attvalue">title</d:tag>
liefern einen Titel zum jeweiligen Element.
</d:para>

<d:para>Titel</d:para>
<xsl:template match="ii:imgindex" mode="title">
  <xsl:text>Bildbewertung</xsl:text>
  <xsl:apply-templates select="ii:meta" mode="title"/>
</xsl:template>

<d:para>
Meta-Angaben im Titel
</d:para>
<xsl:template match="ii:meta" mode="title">
  <xsl:choose>
    <xsl:when test="ii:storyid">
      <xsl:value-of select="concat (', Kennung ', ii:storyid)"/>
    </xsl:when>
    <xsl:when test="ii:srcfile">
      <xsl:value-of select="concat (', Quelle ', ii:srcfile)"/>
    </xsl:when>
    <xsl:when test="ii:filename">
      <xsl:value-of select="concat (', Datei ', ii:filename)"/>
    </xsl:when>
  </xsl:choose>
</xsl:template>

<d:para>
Bildbewertung als HTML-Tabelle
</d:para>
<xsl:template match="ii:imgindex">
  <table class="tabsort">
    <thead>
      <tr>
        <td class="number">Position</td>
        <td class="key text">Kennung</td>
        <td class="text">Titel</td>
        <td class="number">Rang</td>
        <td>Bild</td>
      </tr>
    </thead>
    <tbody>
      <xsl:apply-templates select="ii:image"/>
    </tbody>
  </table>
</xsl:template>

<d:para>Tabellenzeile zu einem Bild</d:para>
<xsl:template match="ii:image">
  <tr>
    <td class="number">
      <xsl:apply-templates select="ii:position"/>
    </td>
    <td class="key">
      <xsl:apply-templates select="ii:key"/>
    </td>
    <td>
      <xsl:apply-templates select="ii:alt"/>
    </td>
    <td class="number">
      <xsl:apply-templates select="ii:rank"/>
    </td>
    <td>
      <a href="{$p_prf_img}images/{ii:key}.jpg">
        <img src="{$p_prf_img}thumbs/{ii:key}.jpg" alt="Vorschaubild"/>
      </a>
    </td>
  </tr>
</xsl:template>

</xsl:stylesheet>
