84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.Title}}</title>
|
|
<script src="/assets/alpine.min.js" defer></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: black; height: 100vh; overflow: hidden; }
|
|
.page {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.page.landscape {
|
|
width: 100vh;
|
|
height: 100vw;
|
|
transform: rotate(270deg) translateY(-50%);
|
|
transform-origin: top right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div
|
|
x-data="{
|
|
current: 0,
|
|
landscape: false,
|
|
width: 1080,
|
|
height: 1920,
|
|
imaginary: '{{.ImaginaryURL}}',
|
|
pages: [{{range $i, $p := .Pages}}{{if $i}},{{end}}'{{$p}}'{{end}}],
|
|
urls: [],
|
|
prefetched: new Set(),
|
|
imageExts: ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.avif'],
|
|
isImage(path) {
|
|
const ext = path.substring(path.lastIndexOf('.')).toLowerCase();
|
|
return this.imageExts.includes(ext);
|
|
},
|
|
buildUrls() {
|
|
this.urls = this.pages.map(p => {
|
|
if (this.isImage(p)) {
|
|
return this.imaginary + '/fit?width=' + this.width + '&height=' + this.height + '&file=' + encodeURIComponent(p);
|
|
}
|
|
return '/static/' + p;
|
|
});
|
|
this.prefetched.clear();
|
|
},
|
|
prefetch() {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
for (let i = 1; i <= 10 && this.current + i < this.urls.length; i++) {
|
|
const url = this.urls[this.current + i];
|
|
if (!this.prefetched.has(url)) {
|
|
this.prefetched.add(url);
|
|
new Image().src = url;
|
|
}
|
|
}
|
|
};
|
|
img.src = this.urls[this.current];
|
|
},
|
|
swap() {
|
|
this.landscape = !this.landscape;
|
|
[this.width, this.height] = [this.height, this.width];
|
|
this.buildUrls();
|
|
},
|
|
init() {
|
|
this.buildUrls();
|
|
this.prefetch();
|
|
this.$watch('current', () => this.prefetch());
|
|
}
|
|
}"
|
|
@keydown.window.left.prevent="current = Math.max(0, current - 1)"
|
|
@keydown.window.right.prevent="current = Math.min(urls.length - 1, current + 1)"
|
|
@keydown.window.k.prevent="swap()"
|
|
@keydown.window.backspace.prevent="history.back()"
|
|
autofocus
|
|
>
|
|
<div class="page" :class="landscape ? 'landscape' : ''" :style="'background-image: url(\'' + urls[current] + '\');'"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|