mirror of
https://github.com/greflm13/StaticGalleryBuilder.git
synced 2026-02-05 11:09:26 +00:00
267 lines
9.9 KiB
Django/Jinja
267 lines
9.9 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ title }}</title>
|
|
{%- if webmanifest %}
|
|
<link rel="manifest" href="/.static/manifest.json">
|
|
{%- endif %}
|
|
<link rel="preload" href="{{ stylesheet }}" as="style">
|
|
{%- if theme %}
|
|
<link rel="preload" href="{{ theme }}" as="style">
|
|
{%- endif %}
|
|
<link rel="icon" type="image/x-icon" href="{{ favicon }}">
|
|
<link rel="stylesheet" href="{{ stylesheet }}">
|
|
{%- if theme %}
|
|
<link rel="stylesheet" href="{{ theme }}">
|
|
{%- endif %}
|
|
<link rel="preload" href="{{ root }}.static/pswp/photoswipe.css" as="style">
|
|
<link rel="preload" href="{{ root }}.static/pswp/default-skin/default-skin.css" as="style">
|
|
<link rel="modulepreload" href="{{ root }}.static/pswp/photoswipe.min.js">
|
|
<link rel="modulepreload" href="{{ root }}.static/pswp/photoswipe-ui-default.min.js">
|
|
{%- if images %}
|
|
<link rel="stylesheet" href="{{ root }}.static/pswp/photoswipe.css">
|
|
<link rel="stylesheet" href="{{ root }}.static/pswp/default-skin/default-skin.css">
|
|
<script src="{{ root }}.static/pswp/photoswipe.min.js"></script>
|
|
<script src="{{ root }}.static/pswp/photoswipe-ui-default.min.js"></script>
|
|
{%- endif %}
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<ol class="navbar">
|
|
<div class="navleft">
|
|
<li><a href="{{ root }}">Home</a></li>
|
|
{%- if parent %}
|
|
<li><a href="{{ parent }}">Parent Directory</a></li>
|
|
{%- endif %}
|
|
{%- if info %}
|
|
<li class="tooltip"><a>Info</a><span class="tooltiptext infotext">
|
|
{%- for infoline in info -%}
|
|
{{ infoline }}<br />
|
|
{%- endfor -%}
|
|
</span></li>
|
|
{%- endif %}
|
|
</div>
|
|
<div class="navcenter">
|
|
<li class="title"><span class="header">{{ header }}</span></li>
|
|
</div>
|
|
<div class="navright">
|
|
{%- if tags|length > 0 %}
|
|
<li class="tooltip"><a>Filter by Tags</a>
|
|
<ol class="tooltiptext tagdropdown" id="tagdropdown">
|
|
{%- for tag in tags -%}
|
|
<li class="tagentry"><label onclick="filter()"><input type="checkbox" />{{ tag }}</label></li><br />
|
|
{%- endfor -%}
|
|
</ol>
|
|
</li>
|
|
{%- endif %}
|
|
{%- if licensefile %}
|
|
<li class="license"><a href="{{ licensefile }}">License</a></li>
|
|
{%- endif %}
|
|
</div>
|
|
</ol>
|
|
{% if subdirectories %}
|
|
{%- for subdirectory in subdirectories %}
|
|
<link rel="preload" href="{{ subdirectory.url }}/index.html" type="text/html">
|
|
{%- endfor %}
|
|
<div class="folders">
|
|
{%- for subdirectory in subdirectories %}
|
|
<a href="{{ subdirectory.url }}">
|
|
<figure>
|
|
<img class="foldericon" />
|
|
{%- if subdirectory.thumb %}
|
|
<img class="folderthumb" src="{{ subdirectory.thumb }}" />
|
|
{%- endif %}
|
|
<figcaption>{{ subdirectory.name }}</figcaption>
|
|
</figure>
|
|
</a>
|
|
{%- endfor %}
|
|
</div>
|
|
{%- endif %}
|
|
</div>
|
|
{% if images %}
|
|
{%- set ns = namespace(count = 0) -%}
|
|
<div class="row" id="imagelist">
|
|
{%- for image in images %}
|
|
<div class="column">
|
|
<figure>
|
|
<img src="{{ image.thumbnail }}" alt="{{ image.name }}" onclick="openSwipe({{ ns.count }})" onmouseover="prefetch({{ ns.count }})" onmouseleave="cancel({{ ns.count }})" />
|
|
{%- set ns.count = ns.count + 1 %}
|
|
<figcaption class="caption">{{ image.name }}
|
|
{%- if image.tiff %}
|
|
<a href="{{ image.tiff }}">TIFF</a>
|
|
{%- endif %}
|
|
{%- if image.raw %}
|
|
<a href="{{ image.raw }}">RAW</a>
|
|
{%- endif %}
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
{%- endfor %}
|
|
</div>
|
|
{%- endif %}
|
|
{% if license %}
|
|
{%- if 'CC' in license.type %}
|
|
<div class="footer" xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/">
|
|
{%- if license.type == 'CC0 1.0' %}
|
|
<a property="dct:title" rel="cc:attributionURL" href="{{ root }}">{{ license.project }}</a> by <span property="cc:attributionName">{{ license.author }}</span> is marked with
|
|
<a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer" style="display: inline-block">CC0 1.0
|
|
{%- for pic in license.pics %}
|
|
<img style="height: 22px !important; margin-left: 3px; vertical-align: text-bottom" src="{{ pic }}" alt="" />
|
|
{%- endfor %}
|
|
</a>
|
|
{%- else %}
|
|
<a property="dct:title" rel="cc:attributionURL" href="{{ root }}">{{ license.project }}</a> by <span property="cc:attributionName">{{ license.author }}</span> is licensed under
|
|
<a href="{{ license.url }}" target="_blank" rel="license noopener noreferrer">{{ license.type }}
|
|
{%- for pic in license.pics %}
|
|
<img src="{{ pic }}" alt="" />
|
|
{%- endfor %}
|
|
</a>
|
|
{%- endif %}
|
|
<span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
|
|
href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">{{ logo }}</a>.</span>
|
|
<button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
|
|
</div>
|
|
{%- endif %}
|
|
{%- else %}
|
|
<div class="footer">
|
|
<span class="attribution">Made with <a href="https://github.com/greflm13/StaticGalleryBuilder" target="_blank" rel="noopener noreferrer">StaticGalleryBuilder {{ version }}</a> by <a
|
|
href="https://github.com/greflm13" target="_blank" rel="noopener noreferrer">{{ logo }}</a>.</span>
|
|
<button onclick="topFunction()" id="totop" title="Back to Top">Back to Top</button>
|
|
</div>
|
|
{%- endif %}
|
|
{% if images %}
|
|
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="pswp__bg"></div>
|
|
<div class="pswp__scroll-wrap">
|
|
<div class="pswp__container">
|
|
<div class="pswp__item"></div>
|
|
<div class="pswp__item"></div>
|
|
<div class="pswp__item"></div>
|
|
</div>
|
|
<div class="pswp__ui pswp__ui--hidden">
|
|
<div class="pswp__top-bar">
|
|
<div class="pswp__counter"></div>
|
|
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
|
<button class="pswp__button pswp__button--share" title="Share"></button>
|
|
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
|
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
|
<div class="pswp__preloader">
|
|
<div class="pswp__preloader__icn">
|
|
<div class="pswp__preloader__cut">
|
|
<div class="pswp__preloader__donut"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
|
<div class="pswp__share-tooltip"></div>
|
|
</div>
|
|
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
|
</button>
|
|
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
|
</button>
|
|
<div class="pswp__caption">
|
|
<div class="pswp__caption__center"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var pswpElement = document.querySelectorAll('.pswp')[0];
|
|
var items = [
|
|
{%- for image in images %}
|
|
{%- if image.exifdata.DateTime %}
|
|
{ src: "{{ image.url }}", w: {{ image.width }}, h: {{ image.height }}, msrc: "{{ image.thumbnail }}", tags: "{{ image.tags }}", title: "Captured: {{ image.exifdata.DateTime }}" },
|
|
{%- else %}
|
|
{ src: "{{ image.url }}", w: {{ image.width }}, h: {{ image.height }}, msrc: "{{ image.thumbnail }}", tags: "{{ image.tags }}" },
|
|
{%- endif %}
|
|
{%- endfor %}
|
|
];
|
|
var re = /pid=(\d+)/;
|
|
var controllers = {}
|
|
|
|
function openSwipe(img) {
|
|
var options = {
|
|
index: img
|
|
};
|
|
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
|
gallery.init();
|
|
}
|
|
|
|
if (re.test(window.location.href)) {
|
|
var pid = window.location.href.match(re)[1];
|
|
openSwipe(parseInt(pid));
|
|
}
|
|
|
|
let totopbutton = document.getElementById("totop");
|
|
|
|
window.onscroll = function () { scrollFunction() };
|
|
|
|
function scrollFunction() {
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
totopbutton.style.display = "block";
|
|
} else {
|
|
totopbutton.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function topFunction() {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
|
|
function prefetch(img) {
|
|
const controller = new AbortController()
|
|
const signal = controller.signal
|
|
controllers[img] = controller;
|
|
let urlToFetch = items[img].src;
|
|
|
|
fetch(urlToFetch, {
|
|
method: 'get',
|
|
signal: signal,
|
|
}).catch(function (err) { });
|
|
}
|
|
|
|
function cancel(img) {
|
|
controllers[img].abort();
|
|
delete controllers[img];
|
|
}
|
|
|
|
{%- if tags|length > 0 %}
|
|
function filter() {
|
|
var selected_tags = [];
|
|
var tagdropdown, imagelist, figures, i, j, tags, incl;
|
|
tagdropdown = document.getElementById("tagdropdown").getElementsByTagName("li");
|
|
for (i = 0; i < tagdropdown.length; i++) {
|
|
if (tagdropdown[i].firstChild.firstChild.checked) {
|
|
selected_tags.push([tagdropdown[i].innerText])
|
|
}
|
|
}
|
|
imagelist = document.getElementById("imagelist");
|
|
figures = imagelist.getElementsByTagName("div");
|
|
for (i = 0; i < figures.length; i++) {
|
|
tags = items[i].tags;
|
|
incl = true;
|
|
for (j = 0; j < selected_tags.length; j++) {
|
|
if (tags.indexOf(selected_tags[j]) == -1) {
|
|
incl = false;
|
|
}
|
|
}
|
|
if (incl || selected_tags == []) {
|
|
figures[i].style.display = "";
|
|
} else {
|
|
figures[i].style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
filter()
|
|
{%- endif %}
|
|
</script>
|
|
{%- endif %}
|
|
</body>
|
|
|
|
</html> |