mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 17:12:13 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

make it feel like home

Browse source
This commit is contained in:
ed 2021-07-15 00:50:43 +02:00
parent bcb353cc30
commit 21a51bf0dc
1 changed files with 89 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

206
copyparty/web/baguettebox.js
View file

@ -22,7 +22,7 @@ window.baguetteBox = (function () {
afterHide: null, afterHide: null,
onChange: null, onChange: null,
}, },
overlay, slider, previousButton, nextButton, vmodeButton, closeButton, overlay, slider, btnPrev, btnNext, btnVmode, btnClose,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -43,26 +43,25 @@ window.baguetteBox = (function () {
isFullscreen = !!document.fullscreenElement; isFullscreen = !!document.fullscreenElement;
}; };
var overlayClickHandler = function (event) { var overlayClickHandler = function (e) {
if (event.target.id.indexOf('baguette-img') !== -1) { if (e.target.id.indexOf('baguette-img') !== -1)
hideOverlay(); hideOverlay();
}
}; };
var touchstartHandler = function (event) { var touchstartHandler = function (e) {
touch.count++; touch.count++;
if (touch.count > 1) { if (touch.count > 1)
touch.multitouch = true; touch.multitouch = true;
}
touch.startX = event.changedTouches[0].pageX; touch.startX = e.changedTouches[0].pageX;
touch.startY = event.changedTouches[0].pageY; touch.startY = e.changedTouches[0].pageY;
}; };
var touchmoveHandler = function (event) { var touchmoveHandler = function (e) {
if (touchFlag || touch.multitouch) { if (touchFlag || touch.multitouch)
return; return;
}
event.preventDefault ? event.preventDefault() : event.returnValue = false; e.preventDefault ? e.preventDefault() : e.returnValue = false;
var touchEvent = event.touches[0] || event.changedTouches[0]; var touchEvent = e.touches[0] || e.changedTouches[0];
if (touchEvent.pageX - touch.startX > 40) { if (touchEvent.pageX - touch.startX > 40) {
touchFlag = true; touchFlag = true;
showPreviousImage(); showPreviousImage();
@ -75,19 +74,19 @@ window.baguetteBox = (function () {
}; };
var touchendHandler = function () { var touchendHandler = function () {
touch.count--; touch.count--;
if (touch.count <= 0) { if (touch.count <= 0)
touch.multitouch = false; touch.multitouch = false;
}
touchFlag = false; touchFlag = false;
}; };
var contextmenuHandler = function () { var contextmenuHandler = function () {
touchendHandler(); touchendHandler();
}; };
var trapFocusInsideOverlay = function (event) { var trapFocusInsideOverlay = function (e) {
if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(event.target))) { if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(e.target))) {
event.stopPropagation(); e.stopPropagation();
closeButton.focus(); btnClose.focus();
} }
}; };
@ -107,28 +106,25 @@ window.baguetteBox = (function () {
[].forEach.call(galleryNodeList, function (galleryElement) { [].forEach.call(galleryNodeList, function (galleryElement) {
var tagsNodeList = []; var tagsNodeList = [];
if (galleryElement.tagName === 'A') { if (galleryElement.tagName === 'A')
tagsNodeList = [galleryElement]; tagsNodeList = [galleryElement];
} else { else
tagsNodeList = galleryElement.getElementsByTagName('a'); tagsNodeList = galleryElement.getElementsByTagName('a');
}
tagsNodeList = [].filter.call(tagsNodeList, function (element) { tagsNodeList = [].filter.call(tagsNodeList, function (element) {
if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1) { if (element.className.indexOf(userOptions && userOptions.ignoreClass) === -1)
return re_i.test(element.href) || re_v.test(element.href); return re_i.test(element.href) || re_v.test(element.href);
}
}); });
if (tagsNodeList.length === 0) { if (!tagsNodeList.length)
return; return;
}
var gallery = []; var gallery = [];
[].forEach.call(tagsNodeList, function (imageElement, imageIndex) { [].forEach.call(tagsNodeList, function (imageElement, imageIndex) {
var imageElementClickHandler = function (event) { var imageElementClickHandler = function (e) {
if (event && (event.ctrlKey || event.metaKey)) if (ctrl(e))
return true; return true;
event.preventDefault ? event.preventDefault() : event.returnValue = false; e.preventDefault ? e.preventDefault() : e.returnValue = false;
prepareOverlay(gallery, userOptions); prepareOverlay(gallery, userOptions);
showOverlay(imageIndex); showOverlay(imageIndex);
}; };
@ -146,26 +142,23 @@ window.baguetteBox = (function () {
} }
function clearCachedData() { function clearCachedData() {
for (var selector in data) { for (var selector in data)
if (data.hasOwnProperty(selector)) { if (data.hasOwnProperty(selector))
removeFromCache(selector); removeFromCache(selector);
}
}
} }
function removeFromCache(selector) { function removeFromCache(selector) {
if (!data.hasOwnProperty(selector)) { if (!data.hasOwnProperty(selector))
return; return;
}
var galleries = data[selector].galleries; var galleries = data[selector].galleries;
[].forEach.call(galleries, function (gallery) { [].forEach.call(galleries, function (gallery) {
[].forEach.call(gallery, function (imageItem) { [].forEach.call(gallery, function (imageItem) {
unbind(imageItem.imageElement, 'click', imageItem.eventHandler); unbind(imageItem.imageElement, 'click', imageItem.eventHandler);
}); });
if (currentGallery === gallery) { if (currentGallery === gallery)
currentGallery = []; currentGallery = [];
}
}); });
delete data[selector]; delete data[selector];
@ -190,10 +183,10 @@ window.baguetteBox = (function () {
tt.init(); tt.init();
} }
slider = ebi('bbox-slider'); slider = ebi('bbox-slider');
previousButton = ebi('bbox-prev'); btnPrev = ebi('bbox-prev');
nextButton = ebi('bbox-next'); btnNext = ebi('bbox-next');
vmodeButton = ebi('bbox-vmode'); btnVmode = ebi('bbox-vmode');
closeButton = ebi('bbox-close'); btnClose = ebi('bbox-close');
bindEvents(); bindEvents();
} }
@ -260,9 +253,9 @@ window.baguetteBox = (function () {
lbl = 'Stop'; lbl = 'Stop';
msg += 'just stop' msg += 'just stop'
} }
vmodeButton.setAttribute('aria-label', msg); btnVmode.setAttribute('aria-label', msg);
vmodeButton.setAttribute('tt', msg); btnVmode.setAttribute('tt', msg);
vmodeButton.textContent = lbl; btnVmode.textContent = lbl;
v.loop = vloop v.loop = vloop
if (vloop && v.paused) if (vloop && v.paused)
@ -313,10 +306,10 @@ window.baguetteBox = (function () {
function bindEvents() { function bindEvents() {
bind(overlay, 'click', overlayClickHandler); bind(overlay, 'click', overlayClickHandler);
bind(previousButton, 'click', showPreviousImage); bind(btnPrev, 'click', showPreviousImage);
bind(nextButton, 'click', showNextImage); bind(btnNext, 'click', showNextImage);
bind(closeButton, 'click', hideOverlay); bind(btnClose, 'click', hideOverlay);
bind(vmodeButton, 'click', tglVmode); bind(btnVmode, 'click', tglVmode);
bind(slider, 'contextmenu', contextmenuHandler); bind(slider, 'contextmenu', contextmenuHandler);
bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
bind(overlay, 'touchmove', touchmoveHandler, passiveEvent); bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -326,10 +319,10 @@ window.baguetteBox = (function () {
function unbindEvents() { function unbindEvents() {
unbind(overlay, 'click', overlayClickHandler); unbind(overlay, 'click', overlayClickHandler);
unbind(previousButton, 'click', showPreviousImage); unbind(btnPrev, 'click', showPreviousImage);
unbind(nextButton, 'click', showNextImage); unbind(btnNext, 'click', showNextImage);
unbind(closeButton, 'click', hideOverlay); unbind(btnClose, 'click', hideOverlay);
unbind(vmodeButton, 'click', tglVmode); unbind(btnVmode, 'click', tglVmode);
unbind(slider, 'contextmenu', contextmenuHandler); unbind(slider, 'contextmenu', contextmenuHandler);
unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent); unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -338,9 +331,9 @@ window.baguetteBox = (function () {
} }
function prepareOverlay(gallery, userOptions) { function prepareOverlay(gallery, userOptions) {
if (currentGallery === gallery) { if (currentGallery === gallery)
return; return;
}
currentGallery = gallery; currentGallery = gallery;
setOptions(userOptions); setOptions(userOptions);
slider.innerHTML = ''; slider.innerHTML = '';
@ -363,23 +356,21 @@ window.baguetteBox = (function () {
} }
function setOptions(newOptions) { function setOptions(newOptions) {
if (!newOptions) { if (!newOptions)
newOptions = {}; newOptions = {};
}
for (var item in defaults) { for (var item in defaults) {
options[item] = defaults[item]; options[item] = defaults[item];
if (typeof newOptions[item] !== 'undefined') { if (typeof newOptions[item] !== 'undefined')
options[item] = newOptions[item]; options[item] = newOptions[item];
}
} }
slider.style.transition = (options.animation === 'fadeIn' ? 'opacity .4s ease' : slider.style.transition = (options.animation === 'fadeIn' ? 'opacity .4s ease' :
options.animation === 'slideIn' ? '' : 'none'); options.animation === 'slideIn' ? '' : 'none');
if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1)) { if (options.buttons === 'auto' && ('ontouchstart' in window || currentGallery.length === 1))
options.buttons = false; options.buttons = false;
}
previousButton.style.display = nextButton.style.display = (options.buttons ? '' : 'none'); btnPrev.style.display = btnNext.style.display = (options.buttons ? '' : 'none');
} }
function showOverlay(chosenImageIndex) { function showOverlay(chosenImageIndex) {
@ -387,9 +378,8 @@ window.baguetteBox = (function () {
document.documentElement.style.overflowY = 'hidden'; document.documentElement.style.overflowY = 'hidden';
document.body.style.overflowY = 'scroll'; document.body.style.overflowY = 'scroll';
} }
if (overlay.style.display === 'block') { if (overlay.style.display === 'block')
return; return;
}
bind(document, 'keydown', keyDownHandler); bind(document, 'keydown', keyDownHandler);
bind(document, 'keyup', keyUpHandler); bind(document, 'keyup', keyUpHandler);
@ -410,18 +400,18 @@ window.baguetteBox = (function () {
// Fade in overlay // Fade in overlay
setTimeout(function () { setTimeout(function () {
overlay.className = 'visible'; overlay.className = 'visible';
if (options.bodyClass && document.body.classList) { if (options.bodyClass && document.body.classList)
document.body.classList.add(options.bodyClass); document.body.classList.add(options.bodyClass);
}
if (options.afterShow) { if (options.afterShow)
options.afterShow(); options.afterShow();
}
}, 50); }, 50);
if (options.onChange) {
if (options.onChange)
options.onChange(currentIndex, imagesElements.length); options.onChange(currentIndex, imagesElements.length);
}
documentLastFocus = document.activeElement; documentLastFocus = document.activeElement;
closeButton.focus(); btnClose.focus();
isOverlayVisible = true; isOverlayVisible = true;
} }
@ -432,9 +422,8 @@ window.baguetteBox = (function () {
document.documentElement.style.overflowY = 'auto'; document.documentElement.style.overflowY = 'auto';
document.body.style.overflowY = 'auto'; document.body.style.overflowY = 'auto';
} }
if (overlay.style.display === 'none') { if (overlay.style.display === 'none')
return; return;
}
unbind(document, 'keydown', keyDownHandler); unbind(document, 'keydown', keyDownHandler);
unbind(document, 'keyup', keyUpHandler); unbind(document, 'keyup', keyUpHandler);
@ -443,12 +432,12 @@ window.baguetteBox = (function () {
overlay.className = ''; overlay.className = '';
setTimeout(function () { setTimeout(function () {
overlay.style.display = 'none'; overlay.style.display = 'none';
if (options.bodyClass && document.body.classList) { if (options.bodyClass && document.body.classList)
document.body.classList.remove(options.bodyClass); document.body.classList.remove(options.bodyClass);
}
if (options.afterHide) { if (options.afterHide)
options.afterHide(); options.afterHide();
}
documentLastFocus && documentLastFocus.focus(); documentLastFocus && documentLastFocus.focus();
isOverlayVisible = false; isOverlayVisible = false;
}, 500); }, 500);
@ -458,17 +447,12 @@ window.baguetteBox = (function () {
var imageContainer = imagesElements[index]; var imageContainer = imagesElements[index];
var galleryItem = currentGallery[index]; var galleryItem = currentGallery[index];
if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined') { if (typeof imageContainer === 'undefined' || typeof galleryItem === 'undefined')
return; // out-of-bounds or gallery dirty return; // out-of-bounds or gallery dirty
}
if (imageContainer.querySelector('img, video')) { if (imageContainer.querySelector('img, video'))
// was loaded, cb and bail // was loaded, cb and bail
if (callback) { return callback ? callback() : null;
callback();
}
return;
}
// maybe unloaded video // maybe unloaded video
while (imageContainer.firstChild) while (imageContainer.firstChild)
@ -518,14 +502,13 @@ window.baguetteBox = (function () {
image.onended = vidEnd; image.onended = vidEnd;
} }
image.alt = thumbnailElement ? thumbnailElement.alt || '' : ''; image.alt = thumbnailElement ? thumbnailElement.alt || '' : '';
if (options.titleTag && imageCaption) { if (options.titleTag && imageCaption)
image.title = imageCaption; image.title = imageCaption;
}
figure.appendChild(image); figure.appendChild(image);
if (options.async && callback) { if (options.async && callback)
callback(); callback();
}
} }
function showNextImage(e) { function showNextImage(e) {
@ -538,26 +521,20 @@ window.baguetteBox = (function () {
return show(currentIndex - 1); return show(currentIndex - 1);
} }
function showFirstImage(event) { function showFirstImage(e) {
if (event) { if (e)
event.preventDefault(); e.preventDefault();
}
return show(0); return show(0);
} }
function showLastImage(event) { function showLastImage(e) {
if (event) { if (e)
event.preventDefault(); e.preventDefault();
}
return show(currentGallery.length - 1); return show(currentGallery.length - 1);
} }
/**
* Move the gallery to a specific index
* @param `index` {number} - the position of the image
* @param `gallery` {array} - gallery which should be opened, if omitted assumes the currently opened one
* @return {boolean} - true on success or false if the index is invalid
*/
function show(index, gallery) { function show(index, gallery) {
if (!isOverlayVisible && index >= 0 && index < gallery.length) { if (!isOverlayVisible && index >= 0 && index < gallery.length) {
prepareOverlay(gallery, options); prepareOverlay(gallery, options);
@ -565,15 +542,15 @@ window.baguetteBox = (function () {
return true; return true;
} }
if (index < 0) { if (index < 0) {
if (options.animation) { if (options.animation)
bounceAnimation('left'); bounceAnimation('left');
}
return false; return false;
} }
if (index >= imagesElements.length) { if (index >= imagesElements.length) {
if (options.animation) { if (options.animation)
bounceAnimation('right'); bounceAnimation('right');
}
return false; return false;
} }
@ -591,9 +568,8 @@ window.baguetteBox = (function () {
}); });
updateOffset(); updateOffset();
if (options.onChange) { if (options.onChange)
options.onChange(currentIndex, imagesElements.length); options.onChange(currentIndex, imagesElements.length);
}
return true; return true;
} }
@ -635,10 +611,6 @@ window.baguetteBox = (function () {
} }
} }
/**
* Triggers the bounce animation
* @param {('left'|'right')} direction - Direction of the movement
*/
function bounceAnimation(direction) { function bounceAnimation(direction) {
slider.className = 'bounce-from-' + direction; slider.className = 'bounce-from-' + direction;
setTimeout(function () { setTimeout(function () {
@ -669,18 +641,18 @@ window.baguetteBox = (function () {
} }
function preloadNext(index) { function preloadNext(index) {
if (index - currentIndex >= options.preload) { if (index - currentIndex >= options.preload)
return; return;
}
loadImage(index + 1, function () { loadImage(index + 1, function () {
preloadNext(index + 1); preloadNext(index + 1);
}); });
} }
function preloadPrev(index) { function preloadPrev(index) {
if (currentIndex - index >= options.preload) { if (currentIndex - index >= options.preload)
return; return;
}
loadImage(index - 1, function () { loadImage(index - 1, function () {
preloadPrev(index - 1); preloadPrev(index - 1);
}); });