vcs.maemo.org Git - buliscores/blob - src/www/floating_cards/template.xsl

   1 <?xml version="1.0" encoding="UTF-8" ?>
   2 <!DOCTYPE stylesheet [
   3 ]>
   4
   5 <xsl:transform version="1.0"
   6         xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   7         xmlns:exsl="http://exslt.org/common"
   8         extension-element-prefixes="exsl">
   9 <xsl:output method="xml" indent="yes"
  10         doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
  11         doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" />
  12
  13 <!-- **** image page ******************************************************************* -->
  14 <xsl:template name="imagePage">
  15 <xsl:param name="max_thumb_height" />
  16 <xsl:param name="max_thumb_width" />
  17         <html>
  18         <head>
  19                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  20                 <title><xsl:value-of select="title"/></title>
  21                 <link rel="stylesheet" type="text/css" href="../floating_cards/style.css"/>
  22                 <link rel="stylesheet" type="text/css" href="../thumb_size.css"/>
  23         </head>
  24         <body class="image">
  25         <h1>
  26                 <xsl:value-of select="title"/>
  27                 (<xsl:value-of select="position()"/>/<xsl:value-of select="last()"/>):
  28         </h1>
  29         <h2>
  30                 <xsl:value-of select="description"/>
  31         </h2>
  32
  33         <!-- the image itself -->
  34         <div class="image">
  35         <xsl:choose>
  36                 <xsl:when test="original/@fileName != ''">
  37                         <a href="{original/@fileName}">
  38                         <img src="{full/@fileName}" width="{full/@width}" height="{full/@height}" alt=""/>
  39                         </a>
  40                 </xsl:when>
  41                 <xsl:otherwise>
  42                         <img src="{full/@fileName}" width="{full/@width}" height="{full/@height}" alt=""/>
  43                 </xsl:otherwise>
  44         </xsl:choose>
  45         </div>
  46
  47         <!-- navigation buttons at the top -->
  48         <div class="nav right">
  49                 <xsl:if test="position() &lt; last()">
  50                         <a href="{following-sibling::image[position()=1]/full/@fileName}.html">
  51                                 <img src="../floating_cards/next.png" alt="&gt;"/>
  52                         </a>
  53                 </xsl:if>
  54                 <xsl:if test="position() &gt; 1">
  55                         <a href="{preceding-sibling::image[position()=1]/full/@fileName}.html">
  56                                 <img src="../floating_cards/prev.png" alt="&lt;"/>
  57                         </a>
  58                 </xsl:if>
  59         </div>
  60
  61         <div class="nav left">
  62                 <xsl:choose>
  63                         <xsl:when test="count(/collections/collection) &gt; 1">
  64                                 <a href="../{../fileName}.html">
  65                                 <img src="../floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
  66                         </xsl:when>
  67                         <xsl:otherwise>
  68                                 <a href="../index.html">
  69                                 <img src="../floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
  70                         </xsl:otherwise>
  71                 </xsl:choose>
  72         </div>
  73
  74         <!-- back/forward selection controls -->
  75
  76         <!-- the maximum expected window width to calculate the maximum number of thumbnails to display -->
  77         <xsl:variable name="max_screen_width" select="2000"/>
  78
  79         <!-- the div has a max-width of 80%, margins + padding + border of 38px -->
  80         <xsl:variable name="select_count" select="floor($max_screen_width * 0.8 div ($max_thumb_width + 38))"/>
  81
  82         <xsl:variable name="current" select='position()'/>
  83
  84         <xsl:if test="position() &gt; 1">
  85                 <div class="select back">
  86                 <ul>
  87                         <xsl:for-each select="../image[
  88                                         position() &gt;= $current - $select_count
  89                                         and position() &lt; $current]"
  90                         >
  91                         <xsl:sort select="position()" data-type="number" order="descending"/>
  92                                 <xsl:call-template name="thumbnail">
  93                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
  94                                         <xsl:with-param name="pre_description"><xsl:value-of select="$current - position()"/>: </xsl:with-param>
  95                                         <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
  96                                         <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
  97                                 </xsl:call-template>
  98                         </xsl:for-each>
  99                 </ul>
 100                 </div>
 101         </xsl:if>
 102
 103         <xsl:if test="position() &lt; last()">
 104                 <div class="select forward">
 105                 <ul>
 106                         <xsl:for-each select="../image[
 107                                         position() &gt; $current
 108                                         and position() &lt;= $current + $select_count]"
 109                         >
 110                                 <xsl:call-template name="thumbnail">
 111                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 112                                         <xsl:with-param name="pre_description"><xsl:value-of select="$current + position()"/>: </xsl:with-param>
 113                                         <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
 114                                         <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
 115                                 </xsl:call-template>
 116                         </xsl:for-each>
 117                 </ul>
 118                 </div>
 119         </xsl:if>
 120
 121         </body>
 122         </html>
 123 </xsl:template>
 124
 125 <!-- **** collection page *************************************************************** -->
 126 <xsl:template name="collectionPage">
 127 <xsl:param name="max_thumb_height" />
 128 <xsl:param name="max_thumb_width" />
 129         <html>
 130         <head>
 131                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 132                 <title><xsl:value-of select="name"/></title>
 133                 <link rel="stylesheet" type="text/css" href="floating_cards/style.css"/>
 134                 <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
 135         </head>
 136         <body class="collection">
 137
 138         <!-- for multi-collection galleries, up is "index.html", otherwise "../" -->
 139         <xsl:variable name="up">
 140                 <xsl:choose>
 141                 <xsl:when test="count(/collections/collection) &gt; 1">index.html</xsl:when>
 142                 <xsl:otherwise>../</xsl:otherwise>
 143                 </xsl:choose>
 144         </xsl:variable>
 145
 146         <!-- header and navigation buttons -->
 147         <h1><xsl:value-of select="name"/></h1>
 148         <div class="nav left">
 149                 <a href="{$up}">
 150                 <img src="floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
 151         </div>
 152
 153         <!-- list of image thumbnails -->
 154         <ul>
 155                 <xsl:variable name="folder" select='fileName'/>
 156                 <xsl:for-each select="image">
 157                         <xsl:call-template name="thumbnail">
 158                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 159                                 <xsl:with-param name="pre_description"><xsl:value-of select="position()"/>: </xsl:with-param>
 160                                 <xsl:with-param name="img_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
 161                                 <xsl:with-param name="link_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
 162                         </xsl:call-template>
 163                         <exsl:document href='{$folder}/{full/@fileName}.html'
 164                                 method="xml" indent="yes"
 165                                 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 166                                 octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">
 167                                         <xsl:call-template name="imagePage">
 168                                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 169                                                 <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
 170                                         </xsl:call-template>
 171                         </exsl:document>
 172                 </xsl:for-each>
 173         </ul>
 174
 175         <p class="footer">
 176                 HTML export <a href="http://www.kipi-plugins.org/">KIPI Plugin</a> (Floating Cards theme)
 177                 <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
 178                 <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
 179         </p>
 180         </body>
 181         </html>
 182 </xsl:template>
 183
 184
 185 <!-- **** collection list page ********************************************************** -->
 186 <xsl:template name="collectionListPage">
 187 <xsl:param name="max_thumb_height" />
 188 <xsl:param name="max_thumb_width" />
 189         <html>
 190         <head>
 191                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 192                 <title><xsl:value-of select="$i18nCollectionList"/></title>
 193                 <link rel="stylesheet" type="text/css" href="floating_cards/style.css"/>
 194                 <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
 195         </head>
 196         <body class="collectionlist">
 197
 198         <!-- header and navigation buttons -->
 199         <h1>
 200                 <xsl:value-of select="$i18nCollectionList"/>
 201         </h1>
 202         <div class="nav left">
 203                 <a href="../">
 204                 <img src="floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
 205         </div>
 206
 207         <!-- list of collection thumbnails -->
 208         <ul>
 209                 <xsl:for-each select="collections/collection">
 210                         <!-- Use first image as collection image -->
 211                         <xsl:for-each select="image[1]">
 212                         <xsl:call-template name="thumbnail">
 213                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 214                                 <xsl:with-param name="force_description">
 215                                         <xsl:value-of select="../name"/> (<xsl:value-of select="count(../image)"/>)
 216                                 </xsl:with-param>
 217                                 <xsl:with-param name="img_path"><xsl:value-of select="../fileName"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
 218                                 <xsl:with-param name="link_path"><xsl:value-of select="../fileName"/>.html</xsl:with-param>
 219                         </xsl:call-template>
 220                         </xsl:for-each>
 221
 222                         <exsl:document href="{fileName}.html"
 223                                 method="xml" indent="yes"
 224                                 doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
 225                                 octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">
 226                                 <xsl:call-template name="collectionPage">
 227                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 228                                         <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
 229                                 </xsl:call-template>
 230                         </exsl:document>
 231                 </xsl:for-each>
 232         </ul>
 233
 234         <p class="footer">
 235                 HTML export <a href="http://www.kipi-plugins.org/">KIPI Plugin</a> (Floating Cards theme)
 236                 <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
 237                 <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
 238         </p>
 239         </body>
 240         </html>
 241 </xsl:template>
 242
 243 <!-- **** thumbnail template **************************************************************** -->
 244 <xsl:template name="thumbnail">
 245 <xsl:param name="max_thumb_height" />
 246 <xsl:param name="pre_description" />
 247 <xsl:param name="force_description" />
 248 <xsl:param name="link_path" />
 249 <xsl:param name="img_path" />
 250
 251         <!-- the image is automatically centered horizontally inside the card;
 252              for vertical centering, calculate the padding -->
 253         <xsl:variable name="padding_top">
 254                 <xsl:value-of select="floor(($max_thumb_height - thumbnail/@height) div 2)"/>
 255         </xsl:variable>
 256
 257         <xsl:variable name="padding_bottom">
 258                 <xsl:value-of select="$max_thumb_height - thumbnail/@height - $padding_top"/>
 259         </xsl:variable>
 260
 261         <li>
 262                 <a href="{$link_path}">
 263                 <!-- don't pollute the HTML with unnecessary zero paddings -->
 264                 <xsl:choose>
 265                         <xsl:when test="$padding_top > 0">
 266                                 <img style="margin: {$padding_top}px 0 {$padding_bottom}px 0;" src="{$img_path}" alt=""/>
 267                         </xsl:when>
 268                         <xsl:otherwise>
 269                                 <img src="{$img_path}" alt=""/>
 270                         </xsl:otherwise>
 271                 </xsl:choose>
 272                 <br/>
 273                 <xsl:choose>
 274                         <xsl:when test="string($force_description) != ''">
 275                                 <xsl:value-of select="$force_description"/>
 276                         </xsl:when>
 277                         <xsl:when test="string(description) != ''">
 278                                 <xsl:value-of select="$pre_description"/>
 279                                 <xsl:value-of select="description"/>
 280                         </xsl:when>
 281                         <xsl:otherwise>
 282                                 <xsl:value-of select="$pre_description"/>
 283                                 <xsl:value-of select="title"/>
 284                         </xsl:otherwise>
 285                 </xsl:choose>
 286                 </a>
 287         </li>
 288 </xsl:template>
 289
 290 <!-- **** main template **************************************************************** -->
 291 <xsl:template match="/">
 292
 293         <!-- determine the maximum thumbnail dimensions;
 294              the height needs to be passed to all templates for
 295              proper padding of thumbnails -->
 296         <xsl:variable name="max_thumb_width">
 297                 <xsl:for-each select="/collections/collection/image">
 298                         <xsl:sort select="thumbnail/@width" data-type="number" order="descending"/>
 299                         <xsl:if test="position()=1">
 300                                 <xsl:value-of select="thumbnail/@width"/>
 301                         </xsl:if>
 302                 </xsl:for-each>
 303         </xsl:variable>
 304         <xsl:variable name="max_thumb_height">
 305                 <xsl:for-each select="/collections/collection/image">
 306                         <xsl:sort select="thumbnail/@height" data-type="number" order="descending"/>
 307                         <xsl:if test="position()=1">
 308                                 <xsl:value-of select="thumbnail/@height"/>
 309                         </xsl:if>
 310                 </xsl:for-each>
 311         </xsl:variable>
 312
 313
 314         <!-- create thumb_size.css specifying thumbnail width/height
 315              based on the maximum thumbnail dimensions -->
 316         <exsl:document href='thumb_size.css' method="text">
 317 li {
 318         width: <xsl:value-of select="$max_thumb_width + 20"/>px;
 319         height: <xsl:value-of select="$max_thumb_height + 40"/>px;
 320 }
 321
 322 li a {
 323         min-height: <xsl:value-of select="$max_thumb_height + 21"/>px;
 324 }
 325         </exsl:document>
 326
 327         <!-- If there is only one collection in the gallery, make
 328              index.html the collection page; otherwise create a
 329              collection list page.  -->
 330         <xsl:choose>
 331                 <xsl:when test="count(collections/collection) &gt; 1">
 332                         <xsl:call-template name="collectionListPage">
 333                                 <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 334                                 <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
 335                         </xsl:call-template>
 336
 337                 </xsl:when>
 338                 <xsl:otherwise>
 339                         <xsl:for-each select="collections/collection">
 340                                 <xsl:call-template name="collectionPage">
 341                                         <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
 342                                         <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
 343                                 </xsl:call-template>
 344                         </xsl:for-each>
 345                 </xsl:otherwise>
 346         </xsl:choose>
 347 </xsl:template>
 348
 349
 350 </xsl:transform>