89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
(function (ns, $) {
|
|
'use strict';
|
|
|
|
let images = [];
|
|
let index = 0;
|
|
let swipe = null;
|
|
|
|
function activate(selector, handler) {
|
|
$(document)
|
|
.on('pointerup', selector, function (event) {
|
|
const pointer = event.originalEvent;
|
|
if (pointer?.isPrimary === false) return;
|
|
if (pointer?.pointerType === 'mouse' && pointer.button !== 0) return;
|
|
event.preventDefault();
|
|
handler.call(this, event);
|
|
})
|
|
.on('keydown', selector, function (event) {
|
|
if (event.key !== 'Enter' && event.key !== ' ') return;
|
|
event.preventDefault();
|
|
handler.call(this, event);
|
|
});
|
|
}
|
|
|
|
function refreshButton(selector, disabled) {
|
|
const button = $(selector).prop('disabled', disabled);
|
|
if (button.hasClass('ui-button')) button.button('refresh');
|
|
}
|
|
|
|
function render() {
|
|
const hasImages = images.length > 0;
|
|
$('#slideshow').toggle(hasImages);
|
|
if (!hasImages) return;
|
|
|
|
const image = images[index];
|
|
$('#slide-image')
|
|
.attr('src', image.url)
|
|
.attr('alt', image.caption || 'Bild zur Station');
|
|
$('#slide-caption').text(image.caption || '');
|
|
$('#slide-position').text(`${index + 1} / ${images.length}`);
|
|
refreshButton('#slide-prev', images.length < 2);
|
|
refreshButton('#slide-next', images.length < 2);
|
|
}
|
|
|
|
ns.Slideshow = {
|
|
show(items) {
|
|
images = items || [];
|
|
index = 0;
|
|
render();
|
|
},
|
|
|
|
next() {
|
|
if (images.length) index = (index + 1) % images.length;
|
|
render();
|
|
},
|
|
|
|
previous() {
|
|
if (images.length) index = (index - 1 + images.length) % images.length;
|
|
render();
|
|
}
|
|
};
|
|
|
|
activate('#slide-next', () => ns.Slideshow.next());
|
|
activate('#slide-prev', () => ns.Slideshow.previous());
|
|
|
|
$(document)
|
|
.on('pointerdown', '#slideshow', function (event) {
|
|
if ($(event.target).closest('button').length) return;
|
|
const pointer = event.originalEvent;
|
|
if (!pointer?.isPrimary) return;
|
|
swipe = { id: pointer.pointerId, x: pointer.clientX, y: pointer.clientY };
|
|
})
|
|
.on('pointerup pointercancel', '#slideshow', function (event) {
|
|
const pointer = event.originalEvent;
|
|
if (!swipe || pointer?.pointerId !== swipe.id) return;
|
|
if (event.type === 'pointercancel') {
|
|
swipe = null;
|
|
return;
|
|
}
|
|
|
|
const deltaX = pointer.clientX - swipe.x;
|
|
const deltaY = pointer.clientY - swipe.y;
|
|
swipe = null;
|
|
|
|
if (Math.abs(deltaX) < 45 || Math.abs(deltaX) <= Math.abs(deltaY)) return;
|
|
if (deltaX < 0) ns.Slideshow.next();
|
|
else ns.Slideshow.previous();
|
|
});
|
|
}(globalThis.Wegwichtel, globalThis.jQuery));
|