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