diff options
author | Hsieh Chin Fan <typebrook@gmail.com> | 2022-02-02 13:34:47 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-11-30 21:09:29 +0800 |
commit | 9934dd538b0ce116e3b1600272cb46369b082246 (patch) | |
tree | 2f28c6c362201151eaf8218e566479ed7eb72070 /nginx/layout |
init commit
Diffstat (limited to 'nginx/layout')
-rw-r--r-- | nginx/layout/gal.xslt | 67 | ||||
-rw-r--r-- | nginx/layout/simple-gal.xslt | 36 | ||||
-rw-r--r-- | nginx/layout/simple.xslt | 51 |
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'><!DOCTYPE html></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> | ||
29 | async 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'><!DOCTYPE html></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) > 0"> | ||
24 | <xsl:if test="number(@size) > 0"> | ||
25 | <xsl:choose> | ||
26 | <xsl:when test="round(@size div 1024) < 1"><xsl:value-of select="@size" /></xsl:when> | ||
27 | <xsl:when test="round(@size div 1048576) < 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> | ||