Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
b7fb64e5bd
|
|||
|
4f7a9d514e
|
56
index.html
56
index.html
@ -3,6 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<title>Fotogallerie</title>
|
||||
<script>
|
||||
const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
document.querySelector('head meta[name=theme-color]').content = darkModePreference ? '#000' : '#fff';
|
||||
@ -13,12 +14,14 @@
|
||||
--background: #fff;
|
||||
--border-light: #999;
|
||||
--border-dark: #000;
|
||||
--overlay-background: #ffffff47;
|
||||
}
|
||||
.dark {
|
||||
--foreground: #fff;
|
||||
--background: #000;
|
||||
--border-dark: #999;
|
||||
--border-light: #fff;
|
||||
--overlay-background: #00000066;
|
||||
}
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
@ -96,6 +99,21 @@
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#pauseIndicator {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
font-size: xx-large;
|
||||
font-size: xxx-large;
|
||||
background-color: var(--overlay-background);
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
@ -148,6 +166,7 @@
|
||||
leftElement.classList.add('left');
|
||||
rightElement.classList.remove('right');
|
||||
window.isPaused = false;
|
||||
document.getElementById('pauseIndicator').classList.add('hidden');
|
||||
} else {
|
||||
const { left: leftElement, right: rightElement} = getImagePositions();
|
||||
leftElement.style.transitionDelay = '0s';
|
||||
@ -155,6 +174,13 @@
|
||||
leftElement.classList.remove('left');
|
||||
rightElement.classList.add('right');
|
||||
window.isPaused = true;
|
||||
|
||||
const pauseIndicator = document.getElementById('pauseIndicator');
|
||||
const imageRect = getImagePositions().left.getBoundingClientRect();
|
||||
pauseIndicator.style.top = imageRect.top + 'px';
|
||||
pauseIndicator.style.left = imageRect.left + 'px';
|
||||
|
||||
document.getElementById('pauseIndicator').classList.remove('hidden');
|
||||
}
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
@ -170,8 +196,8 @@
|
||||
setTimeout(() => {
|
||||
first.style.transitionDelay = window.showTimeSeconds + 's';
|
||||
second.style.transitionDelay = window.showTimeSeconds + 's';
|
||||
});
|
||||
});
|
||||
}, 50);
|
||||
}, 50);
|
||||
break;
|
||||
case 'r': {
|
||||
window.shuffle = !window.shuffle;
|
||||
@ -229,6 +255,7 @@
|
||||
|
||||
document.getElementById('first').style.transitionDelay = window.showTimeSeconds + 's';
|
||||
document.getElementById('second').style.transitionDelay = window.showTimeSeconds + 's';
|
||||
//document.getElementById('pauseIndicator').style.top = '';
|
||||
|
||||
if (controls.elements['submit'].value === 'save') {
|
||||
return;
|
||||
@ -240,12 +267,13 @@
|
||||
setTimeout(() => {
|
||||
document.getElementById('first').classList.add('left');
|
||||
document.getElementById('second').classList.remove('right');
|
||||
});
|
||||
}, 50);
|
||||
controls.elements['submit'].value = 'save';
|
||||
controls.elements['submit'].innerText = 'Speichern';
|
||||
});
|
||||
|
||||
let remainingTransitions = document.querySelectorAll('img').length;
|
||||
let delay = 20;
|
||||
addEventListener('transitionend', (event) => {
|
||||
if (event.target.tagName !== 'IMG') {
|
||||
return;
|
||||
@ -255,8 +283,11 @@
|
||||
return;
|
||||
}
|
||||
remainingTransitions = document.querySelectorAll('img').length;
|
||||
const leftElement = document.querySelector('.left');
|
||||
const rightElement = document.querySelector('img:not([class~=left])');
|
||||
let leftElement = document.querySelector('.left');
|
||||
let rightElement = document.querySelector('img:not([class~=left])');
|
||||
if (leftElement === null) {
|
||||
return;
|
||||
}
|
||||
leftElement.classList.add('instant');
|
||||
leftElement.style.transitionDelay = '0s';
|
||||
// Wait until 'instant' and transitionDelay are applied
|
||||
@ -269,12 +300,17 @@
|
||||
leftElement.style.transitionDelay = window.showTimeSeconds + 's';
|
||||
// Wait until 'instant' is removed and transitionDelay applied
|
||||
setTimeout(() => {
|
||||
// Check if the element is in the right place.
|
||||
// If not, our client is too slow and needs an additional delay
|
||||
if (getComputedStyle(leftElement).translate !== '200%') {
|
||||
delay = Math.max(Math.floor(delay * 1.1), delay + 10);
|
||||
}
|
||||
leftElement.classList.remove('right');
|
||||
rightElement.classList.add('left');
|
||||
loadNextPhoto(leftElement);
|
||||
});
|
||||
});
|
||||
});
|
||||
}, delay);
|
||||
}, delay);
|
||||
}, delay);
|
||||
});
|
||||
});
|
||||
|
||||
@ -301,6 +337,7 @@
|
||||
console.error('Error fetching photo', data['error']);
|
||||
} else {
|
||||
document.getElementById('headline').innerText = `Zeige Album: ${data.album}`;
|
||||
document.title = data.album;
|
||||
element.src = data.src;
|
||||
window.photoCount = data.count;
|
||||
window.displayed.push(offset);
|
||||
@ -317,7 +354,7 @@
|
||||
const second = document.getElementById('second');
|
||||
|
||||
let leftElement, rightElement;
|
||||
if (first.className.includes('left')) {
|
||||
if (first.className.includes('left') || second.className.includes('right')) {
|
||||
leftElement = first;
|
||||
rightElement = second;
|
||||
} else {
|
||||
@ -374,6 +411,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="pauseIndicator" class="hidden">⏸</div>
|
||||
<form id="controls">
|
||||
<h3 id="headline">Zeige Album: </h3>
|
||||
<label for="random">Zufällig</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user