make it feel like home

2025-11-03 21:43:12 +00:00 · 2021-07-15 00:50:43 +02:00
parent bcb353cc30
commit 21a51bf0dc
1 changed files with 89 additions and 117 deletions
--- 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,15 +502,14 @@ 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) {
        ev(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);
        });