summaryrefslogtreecommitdiffhomepage
path: root/nginx/layout
diff options
context:
space:
mode:
Diffstat (limited to 'nginx/layout')
-rw-r--r--nginx/layout/gal.xslt67
-rw-r--r--nginx/layout/simple-gal.xslt36
-rw-r--r--nginx/layout/simple.xslt51
3 files changed, 154 insertions, 0 deletions
diff --git a/nginx/layout/gal.xslt b/nginx/layout/gal.xslt
new file mode 100644
index 0000000..fadcc37
--- /dev/null
+++ b/nginx/layout/gal.xslt
@@ -0,0 +1,67 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3<xsl:output method="html" encoding="utf-8" indent="yes" />
4<xsl:template match="/">
5<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
6<html>
7<head>
8 <title><xsl:value-of select="$title" /></title>
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous"/>
11 <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
12 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>
13 <script src="https://cdn.jsdelivr.net/npm/jszip@3.1.5/dist/jszip.min.js" integrity="sha256-PZ/OvdXxEW1u3nuTAUCSjd4lyaoJ3UJpv/X11x2Gi5c=" crossorigin="anonymous"></script>
14 <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js" integrity="sha256-xoh0y6ov0WULfXcLMoaA6nZfszdgI8w2CEJ/3k8NBIE=" crossorigin="anonymous"></script>
15 <style>img { display: block; }</style>
16</head>
17<body>
18<h1 style="text-align: center;"><xsl:value-of select="$title"/></h1>
19<div style="border-bottom: 1px solid gray; margin-bottom: 1rem;"></div>
20<div style="display: flex; flex-wrap: wrap; gap: 2px; justify-content: center;">
21<xsl:for-each select="list/file">
22 <xsl:sort order="descending"/>
23 <a href="{.}" data-fancybox="gallery">
24 <img loading="lazy" src="{.}!lg" height="200"/>
25 </a>
26</xsl:for-each>
27</div>
28<script>
29async function downloadAll() {
30 const zip = JSZip();
31 const folder = zip.folder('<xsl:value-of select="$title" />');
32 const files = [
33 <xsl:for-each select="list/file">
34 <xsl:value-of select="." />
35 </xsl:for-each>
36 ];
37 for(const i in files) {
38 const file = files[i];
39 const resp = await fetch(file);
40 folder.file(file, resp.blob());
41 $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: i/files.length}, 0.1);
42 }
43 const zipFile = await zip.generateAsync({type: 'blob'});
44 saveAs(zipFile, '<xsl:value-of select="$title" />' + '.zip');
45 $.fancybox.animate($.fancybox.getInstance().SlideShow.$progress.show(),{scaleX: 0}, 0.1);
46}
47
48$('[data-fancybox="gallery"]').fancybox({
49 buttons: [
50 "thumbs",
51 "slideShow",
52 "fullScreen",
53 "downloadAll",
54 "close"
55 ],
56 btnTpl: {
57 downloadAll:
58 '<a class="fancybox-button fancybox-button--download" title="Download All" href="javascript:downloadAll()">' +
59 '<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" style="fill:unset; stroke-width:2"/></svg>' +
60 '</a>',
61 }
62});
63</script>
64</body>
65</html>
66</xsl:template>
67</xsl:stylesheet>
diff --git a/nginx/layout/simple-gal.xslt b/nginx/layout/simple-gal.xslt
new file mode 100644
index 0000000..749be72
--- /dev/null
+++ b/nginx/layout/simple-gal.xslt
@@ -0,0 +1,36 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3<xsl:output method="html" encoding="utf-8" indent="yes" />
4<xsl:template match="/">
5<xsl:text disable-output-escaping='yes'>&lt;!DOCTYPE html&gt;</xsl:text>
6<html>
7<head>
8 <title><xsl:value-of select="$title" /></title>
9 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
10 <style>
11 img {
12 display: inline;
13 width: 23%;
14 margin: 2mm;
15 vertical-align: bottom;
16 }
17 @media all and (max-width: 20.4cm) {
18 img {
19 max-width: calc(100% - 4mm);
20 }
21 }
22 body {
23 margin: 0;
24 }
25 </style>
26</head>
27<body>
28 <xsl:for-each select="list/file">
29 <a href="{.}" title="click to enlarge">
30 <img src="{.}" alt="{.}"/>
31 </a>
32 </xsl:for-each>
33</body>
34</html>
35</xsl:template>
36</xsl:stylesheet>
diff --git a/nginx/layout/simple.xslt b/nginx/layout/simple.xslt
new file mode 100644
index 0000000..9cc5ad6
--- /dev/null
+++ b/nginx/layout/simple.xslt
@@ -0,0 +1,51 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3 <xsl:template match="/">
4 <html>
5 <body style="margin: 0 auto; max-width: 900px; width: fit-content;">
6
7 <h3><xsl:value-of select="name(//directory)"/></h3>
8
9 <table border="0">
10 <tr bgcolor="#7DAFFF">
11 <th>Name</th>
12 <th style="padding-inline: 2em;">Size</th>
13 <th>Date</th>
14 </tr>
15 <xsl:for-each select="list/*">
16 <xsl:sort select="mtime" />
17
18 <xsl:variable name="name">
19 <xsl:value-of select="."/>
20 </xsl:variable>
21
22 <xsl:variable name="size">
23 <xsl:if test="string-length(@size) &gt; 0">
24 <xsl:if test="number(@size) &gt; 0">
25 <xsl:choose>
26 <xsl:when test="round(@size div 1024) &lt; 1"><xsl:value-of select="@size" /></xsl:when>
27 <xsl:when test="round(@size div 1048576) &lt; 1"><xsl:value-of select="format-number((@size div 1024), '0.0')" />K</xsl:when>
28 <xsl:otherwise><xsl:value-of select="format-number((@size div 1048576), '0.00')" /> MB</xsl:otherwise>
29 </xsl:choose>
30 </xsl:if>
31 </xsl:if>
32 </xsl:variable>
33
34 <xsl:variable name="date">
35 <xsl:value-of select="substring(@mtime,6,2)"/>/<xsl:value-of select="substring(@mtime,9,2)"/><xsl:text> </xsl:text>
36 <xsl:value-of select="substring(@mtime,12,2)"/>:<xsl:value-of select="substring(@mtime,15,2)"/>:<xsl:value-of select="substring(@mtime,18,2)"/><xsl:text> </xsl:text>
37 <xsl:value-of select="substring(@mtime,1,4)"/>
38 </xsl:variable>
39
40 <tr>
41 <td><a href="{$name}"><xsl:value-of select="."/></a></td>
42 <td align="right" style="padding-right: 2em;"><xsl:value-of select="$size"/></td>
43 <td><xsl:value-of select="$date"/></td>
44 </tr>
45
46 </xsl:for-each>
47 </table>
48 </body>
49 </html>
50 </xsl:template>
51</xsl:stylesheet>