themes/simpleslides/template.xsl

0001 <?xml version="1.0" encoding="UTF-8" ?>
0002
0003 <!--
0004  * ============================================================
0005  *
0006  * This file is a part of digiKam project
0007  * https://www.digikam.org
0008  *
0009  * Date        : 2018-05-10
0010  * Description : A slideshow theme for the digiKam html gallery tool.
0011  *
0012  * SPDX-FileCopyrightText: 2018 by Simon Kuss <sjk281 at iinet dot net dot au>
0013  *
0014  * SPDX-License-Identifier: GPL-2.0-or-later
0015  *
0016  * ============================================================
0017  -->
0018
0019 <!DOCTYPE stylesheet>
0020 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
0021
0022 <xsl:output
0023         method="html"
0024         indent="yes"
0025         encoding="utf-8" />
0026
0027 <xsl:template match="/">
0028
0029 <xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
0030 <html>
0031 <head>
0032         <meta charset="UTF-8" />
0033         <title>Slideshow</title>
0034         <style>
0035         html {
0036                 background-image: url(<xsl:value-of select=".//fileName"/>/<xsl:value-of select=".//image/full/@fileName" />);
0037                 background-position: center;
0038                 background-size: cover;
0039                 background-repeat: no-repeat;
0040                 background-attachment: fixed;
0041                 transition: background 3s;
0042                 transform: translate3d(0,0,0);
0043         }
0044         #controls {
0045                 position: absolute;
0046                 left: 0;
0047                 right: 0;
0048                 text-align: center;
0049         <xsl:if test="$controls='bottom'">bottom: 1em;</xsl:if>
0050         <xsl:if test="$controls='none'">display: none;</xsl:if>
0051         }
0052         .control {
0053                 cursor: pointer;
0054         }
0055         </style>
0056 </head>
0057 <body>
0058         <div id="controls"></div>
0059 <script>
0060 var controls = document.getElementById('controls');
0061 var speed = <xsl:value-of select="$delay" />000;
0062 var currentImg = 0;
0063 var img = [
0064 <xsl:for-each select=".//collection">
0065         <xsl:variable name="dir" select=".//fileName" />
0066                 <xsl:for-each select="./image">
0067                 "<xsl:value-of select="$dir"/>/<xsl:value-of select="full/@fileName"/>",
0068                 </xsl:for-each>
0069         </xsl:for-each>
0070     ];
0071
0072 function stopAtImg(index) {
0073     return function() {
0074         clearInterval(timer);
0075         buttons[currentImg].checked = false;
0076         currentImg = index;
0077         switchToImg();
0078     };
0079 }
0080
0081 function switchToImg() {
0082     document.documentElement.style.backgroundImage = "url('" + img[currentImg] + "')";
0083     buttons[currentImg].checked = true;
0084     buttons[currentImg].focus();
0085 }
0086
0087 if (controls) {
0088     for (var i = 0; i &lt; img.length; i++ ) {
0089         var el = document.createElement("input");
0090         el.type = 'radio';
0091         el.className = 'control';
0092         if ( i == 0 ) { el.checked = true; }
0093         controls.appendChild(el);
0094     }
0095     var buttons = controls.querySelectorAll('.control');
0096     for (var i = 0; i &lt; buttons.length; i++) {
0097         buttons[i].addEventListener("click", stopAtImg(i));
0098     }
0099     buttons[0].focus();
0100     var timer = setInterval(function() {
0101         buttons[currentImg].checked = false;
0102         currentImg++;
0103         if (currentImg == img.length) { currentImg = 0;}
0104         switchToImg(currentImg);
0105     }, speed);
0106 }
0107 </script>
0108 </body>
0109 </html>
0110
0111 </xsl:template>
0112 </xsl:stylesheet>
0113