lightgallery 2.3.0-beta.2 → 2.4.0-beta.0

package/lightgallery.umd.js

@@ -1,5 +1,5 @@
 /*!
- * lightgallery | 2.3.0-beta.2 | September 28th 2021
+ * lightgallery | 2.4.0-beta.0 | December 12th 2021
  * http://www.lightgalleryjs.com/
  * Copyright (c) 2020 Sachin Neravath;
  * @license GPLv3
@@ -45,24 +45,140 @@
         return r;
     }
 
-    (function () {
-        if (typeof window.CustomEvent === 'function')
-            return false;
-        function CustomEvent(event, params) {
-            params = params || { bubbles: false, cancelable: false, detail: null };
-            var evt = document.createEvent('CustomEvent');
-            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
-            return evt;
-        }
-        window.CustomEvent = CustomEvent;
-    })();
-    (function () {
-        if (!Element.prototype.matches) {
-            Element.prototype.matches =
-                Element.prototype.msMatchesSelector ||
-                    Element.prototype.webkitMatchesSelector;
-        }
-    })();
+    /**
+     * List of lightGallery events
+     * All events should be documented here
+     * Below interfaces are used to build the website documentations
+     * */
+    var lGEvents = {
+        afterAppendSlide: 'lgAfterAppendSlide',
+        init: 'lgInit',
+        hasVideo: 'lgHasVideo',
+        containerResize: 'lgContainerResize',
+        updateSlides: 'lgUpdateSlides',
+        afterAppendSubHtml: 'lgAfterAppendSubHtml',
+        beforeOpen: 'lgBeforeOpen',
+        afterOpen: 'lgAfterOpen',
+        slideItemLoad: 'lgSlideItemLoad',
+        beforeSlide: 'lgBeforeSlide',
+        afterSlide: 'lgAfterSlide',
+        posterClick: 'lgPosterClick',
+        dragStart: 'lgDragStart',
+        dragMove: 'lgDragMove',
+        dragEnd: 'lgDragEnd',
+        beforeNextSlide: 'lgBeforeNextSlide',
+        beforePrevSlide: 'lgBeforePrevSlide',
+        beforeClose: 'lgBeforeClose',
+        afterClose: 'lgAfterClose',
+        rotateLeft: 'lgRotateLeft',
+        rotateRight: 'lgRotateRight',
+        flipHorizontal: 'lgFlipHorizontal',
+        flipVertical: 'lgFlipVertical',
+        autoplay: 'lgAutoplay',
+        autoplayStart: 'lgAutoplayStart',
+        autoplayStop: 'lgAutoplayStop',
+    };
+
+    var lightGalleryCoreSettings = {
+        mode: 'lg-slide',
+        easing: 'ease',
+        speed: 400,
+        licenseKey: '0000-0000-000-0000',
+        height: '100%',
+        width: '100%',
+        addClass: '',
+        startClass: 'lg-start-zoom',
+        backdropDuration: 300,
+        container: '',
+        startAnimationDuration: 400,
+        zoomFromOrigin: true,
+        hideBarsDelay: 0,
+        showBarsAfter: 10000,
+        slideDelay: 0,
+        supportLegacyBrowser: true,
+        allowMediaOverlap: false,
+        videoMaxSize: '1280-720',
+        loadYouTubePoster: true,
+        defaultCaptionHeight: 0,
+        ariaLabelledby: '',
+        ariaDescribedby: '',
+        closable: true,
+        swipeToClose: true,
+        closeOnTap: true,
+        showCloseIcon: true,
+        showMaximizeIcon: false,
+        loop: true,
+        escKey: true,
+        keyPress: true,
+        controls: true,
+        slideEndAnimation: true,
+        hideControlOnEnd: false,
+        mousewheel: false,
+        getCaptionFromTitleOrAlt: true,
+        appendSubHtmlTo: '.lg-sub-html',
+        subHtmlSelectorRelative: false,
+        preload: 2,
+        numberOfSlideItemsInDom: 10,
+        selector: '',
+        selectWithin: '',
+        nextHtml: '',
+        prevHtml: '',
+        index: 0,
+        iframeWidth: '100%',
+        iframeHeight: '100%',
+        iframeMaxWidth: '100%',
+        iframeMaxHeight: '100%',
+        download: true,
+        counter: true,
+        appendCounterTo: '.lg-toolbar',
+        swipeThreshold: 50,
+        enableSwipe: true,
+        enableDrag: true,
+        dynamic: false,
+        dynamicEl: [],
+        extraProps: [],
+        exThumbImage: '',
+        isMobile: undefined,
+        mobileSettings: {
+            controls: false,
+            showCloseIcon: false,
+            download: false,
+        },
+        plugins: [],
+        strings: {
+            closeGallery: 'Close gallery',
+            toggleMaximize: 'Toggle maximize',
+            previousSlide: 'Previous slide',
+            nextSlide: 'Next slide',
+            download: 'Download',
+            playVideo: 'Play video',
+        },
+    };
+
+    function initLgPolyfills() {
+        (function () {
+            if (typeof window.CustomEvent === 'function')
+                return false;
+            function CustomEvent(event, params) {
+                params = params || {
+                    bubbles: false,
+                    cancelable: false,
+                    detail: null,
+                };
+                var evt = document.createEvent('CustomEvent');
+                evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+                return evt;
+            }
+            window.CustomEvent = CustomEvent;
+        })();
+        (function () {
+            if (!Element.prototype.matches) {
+                Element.prototype.matches =
+                    Element.prototype.msMatchesSelector ||
+                        Element.prototype.webkitMatchesSelector;
+            }
+        })();
+    }
     var lgQuery = /** @class */ (function () {
         function lgQuery(selector) {
             this.cssVenderPrefixes = [
@@ -195,7 +311,9 @@
             this._each(function (el) {
                 // IE doesn't support multiple arguments
                 classNames.split(' ').forEach(function (className) {
-                    el.classList.add(className);
+                    if (className) {
+                        el.classList.add(className);
+                    }
                 });
             });
             return this;
@@ -204,7 +322,9 @@
             this._each(function (el) {
                 // IE doesn't support multiple arguments
                 classNames.split(' ').forEach(function (className) {
-                    el.classList.remove(className);
+                    if (className) {
+                        el.classList.remove(className);
+                    }
                 });
             });
             return this;
@@ -404,6 +524,7 @@
         return lgQuery;
     }());
     function $LG(selector) {
+        initLgPolyfills();
         return new lgQuery(selector);
     }
 
@@ -527,9 +648,9 @@
                 ', 1)';
             return transform;
         },
-        getIframeMarkup: function (iframeWidth, iframeHeight, src, iframeTitle) {
+        getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) {
             var title = iframeTitle ? 'title="' + iframeTitle + '"' : '';
-            return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; height: " + iframeHeight + "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\"  allowfullscreen=\"true\"></iframe>\n                </div>";
+            return "<div class=\"lg-video-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n                    <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\"  allowfullscreen=\"true\"></iframe>\n                </div>";
         },
         getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) {
             var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : '';
@@ -590,7 +711,7 @@
             // No other way of checking: assume it’s ok.
             return true;
         },
-        getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, _isVideo) {
+        getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) {
             var videoClass = '';
             if (_isVideo && _isVideo.youtube) {
                 videoClass = 'lg-has-youtube';
@@ -601,7 +722,7 @@
             else {
                 videoClass = 'lg-has-html5';
             }
-            return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"Play video\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>Play video</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            " + (dummyImg || '') + "\n            <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n        </div>";
+            return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n                <div class=\"lg-video-play-button\">\n                <svg\n                    viewBox=\"0 0 20 20\"\n                    preserveAspectRatio=\"xMidYMid\"\n                    focusable=\"false\"\n                    aria-labelledby=\"" + playVideoString + "\"\n                    role=\"img\"\n                    class=\"lg-video-play-icon\"\n                >\n                    <title>" + playVideoString + "</title>\n                    <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n                </svg>\n                <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n                <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n                    <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n                </svg>\n            </div>\n            " + (dummyImg || '') + "\n            <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n        </div>";
         },
         /**
          * @desc Create dynamic elements array from gallery items when dynamic option is false
@@ -689,103 +810,6 @@
         },
     };
 
-    var lightGalleryCoreSettings = {
-        mode: 'lg-slide',
-        easing: 'ease',
-        speed: 400,
-        licenseKey: '0000-0000-000-0000',
-        height: '100%',
-        width: '100%',
-        addClass: '',
-        startClass: 'lg-start-zoom',
-        backdropDuration: 300,
-        container: document.body,
-        startAnimationDuration: 400,
-        zoomFromOrigin: true,
-        hideBarsDelay: 0,
-        showBarsAfter: 10000,
-        slideDelay: 0,
-        supportLegacyBrowser: true,
-        allowMediaOverlap: false,
-        videoMaxSize: '1280-720',
-        defaultCaptionHeight: 0,
-        ariaLabelledby: '',
-        ariaDescribedby: '',
-        closable: true,
-        swipeToClose: true,
-        closeOnTap: true,
-        showCloseIcon: true,
-        showMaximizeIcon: false,
-        loop: true,
-        escKey: true,
-        keyPress: true,
-        controls: true,
-        slideEndAnimation: true,
-        hideControlOnEnd: false,
-        mousewheel: false,
-        getCaptionFromTitleOrAlt: true,
-        appendSubHtmlTo: '.lg-sub-html',
-        subHtmlSelectorRelative: false,
-        preload: 2,
-        numberOfSlideItemsInDom: 10,
-        showAfterLoad: true,
-        selector: '',
-        selectWithin: '',
-        nextHtml: '',
-        prevHtml: '',
-        index: 0,
-        iframeWidth: '100%',
-        iframeHeight: '100%',
-        download: true,
-        counter: true,
-        appendCounterTo: '.lg-toolbar',
-        swipeThreshold: 50,
-        enableSwipe: true,
-        enableDrag: true,
-        dynamic: false,
-        dynamicEl: [],
-        extraProps: [],
-        exThumbImage: '',
-        isMobile: undefined,
-        mobileSettings: {
-            controls: false,
-            showCloseIcon: false,
-            download: false,
-        },
-        plugins: [],
-    };
-
-    /**
-     * List of lightGallery events
-     * All events should be documented here
-     * Below interfaces are used to build the website documentations
-     * */
-    var lGEvents = {
-        afterAppendSlide: 'lgAfterAppendSlide',
-        init: 'lgInit',
-        hasVideo: 'lgHasVideo',
-        containerResize: 'lgContainerResize',
-        updateSlides: 'lgUpdateSlides',
-        afterAppendSubHtml: 'lgAfterAppendSubHtml',
-        beforeOpen: 'lgBeforeOpen',
-        afterOpen: 'lgAfterOpen',
-        slideItemLoad: 'lgSlideItemLoad',
-        beforeSlide: 'lgBeforeSlide',
-        afterSlide: 'lgAfterSlide',
-        posterClick: 'lgPosterClick',
-        dragStart: 'lgDragStart',
-        dragMove: 'lgDragMove',
-        dragEnd: 'lgDragEnd',
-        beforeNextSlide: 'lgBeforeNextSlide',
-        beforePrevSlide: 'lgBeforePrevSlide',
-        beforeClose: 'lgBeforeClose',
-        afterClose: 'lgAfterClose',
-        rotateLeft: 'lgRotateLeft',
-        rotateRight: 'lgRotateRight',
-        flipHorizontal: 'lgFlipHorizontal',
-        flipVertical: 'lgFlipVertical',
-    };
-
     // @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio
     // @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html
     // Unique id for each gallery
@@ -957,7 +981,7 @@
             var subHtmlCont = '';
             // Create controls
             if (this.settings.controls) {
-                controls = "<button type=\"button\" id=\"" + this.getIdName('lg-prev') + "\" aria-label=\"Previous slide\" class=\"lg-prev lg-icon\"> " + this.settings.prevHtml + " </button>\n                <button type=\"button\" id=\"" + this.getIdName('lg-next') + "\" aria-label=\"Next slide\" class=\"lg-next lg-icon\"> " + this.settings.nextHtml + " </button>";
+                controls = "<button type=\"button\" id=\"" + this.getIdName('lg-prev') + "\" aria-label=\"" + this.settings.strings['previousSlide'] + "\" class=\"lg-prev lg-icon\"> " + this.settings.prevHtml + " </button>\n                <button type=\"button\" id=\"" + this.getIdName('lg-next') + "\" aria-label=\"" + this.settings.strings['nextSlide'] + "\" class=\"lg-next lg-icon\"> " + this.settings.nextHtml + " </button>";
             }
             if (this.settings.appendSubHtmlTo !== '.lg-item') {
                 subHtmlCont =
@@ -976,19 +1000,20 @@
                 : '';
             var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : '');
             var closeIcon = this.settings.closable && this.settings.showCloseIcon
-                ? "<button type=\"button\" aria-label=\"Close gallery\" id=\"" + this.getIdName('lg-close') + "\" class=\"lg-close lg-icon\"></button>"
+                ? "<button type=\"button\" aria-label=\"" + this.settings.strings['closeGallery'] + "\" id=\"" + this.getIdName('lg-close') + "\" class=\"lg-close lg-icon\"></button>"
                 : '';
             var maximizeIcon = this.settings.showMaximizeIcon
-                ? "<button type=\"button\" aria-label=\"Toggle maximize\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>"
+                ? "<button type=\"button\" aria-label=\"" + this.settings.strings['toggleMaximize'] + "\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>"
                 : '';
             var template = "\n        <div class=\"" + containerClassName + "\" id=\"" + this.getIdName('lg-container') + "\" tabindex=\"-1\" aria-modal=\"true\" " + ariaLabelledby + " " + ariaDescribedby + " role=\"dialog\"\n        >\n            <div id=\"" + this.getIdName('lg-backdrop') + "\" class=\"lg-backdrop\"></div>\n\n            <div id=\"" + this.getIdName('lg-outer') + "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items " + addClasses + " \">\n\n              <div id=\"" + this.getIdName('lg-content') + "\" class=\"lg-content\">\n                <div id=\"" + this.getIdName('lg-inner') + "\" class=\"lg-inner\">\n                </div>\n                " + controls + "\n              </div>\n                <div id=\"" + this.getIdName('lg-toolbar') + "\" class=\"lg-toolbar lg-group\">\n                    " + maximizeIcon + "\n                    " + closeIcon + "\n                    </div>\n                    " + (this.settings.appendSubHtmlTo === '.lg-outer'
                 ? subHtmlCont
                 : '') + "\n                <div id=\"" + this.getIdName('lg-components') + "\" class=\"lg-components\">\n                    " + (this.settings.appendSubHtmlTo === '.lg-sub-html'
                 ? subHtmlCont
                 : '') + "\n                </div>\n            </div>\n        </div>\n        ";
-            $LG(this.settings.container)
-                .css('position', 'relative')
-                .append(template);
+            $LG(this.settings.container).append(template);
+            if (document.body !== this.settings.container) {
+                $LG(this.settings.container).css('position', 'relative');
+            }
             this.outer = this.getElementById('lg-outer');
             this.$lgComponents = this.getElementById('lg-components');
             this.$backdrop = this.getElementById('lg-backdrop');
@@ -1002,14 +1027,11 @@
             if (this.settings.enableDrag) {
                 outerClassNames += 'lg-grab ';
             }
-            if (this.settings.showAfterLoad) {
-                outerClassNames += 'lg-show-after-load';
-            }
             this.outer.addClass(outerClassNames);
             this.$inner.css('transition-timing-function', this.settings.easing);
             this.$inner.css('transition-duration', this.settings.speed + 'ms');
             if (this.settings.download) {
-                this.$toolbar.append("<a id=\"" + this.getIdName('lg-download') + "\" target=\"_blank\" rel=\"noopener\" aria-label=\"Download\" download class=\"lg-download lg-icon\"></a>");
+                this.$toolbar.append("<a id=\"" + this.getIdName('lg-download') + "\" target=\"_blank\" rel=\"noopener\" aria-label=\"" + this.settings.strings['download'] + "\" download class=\"lg-download lg-icon\"></a>");
             }
             this.counter();
             $LG(window).on("resize.lg.global" + this.lgId + " orientationchange.lg.global" + this.lgId, function () {
@@ -1528,8 +1550,15 @@
         };
         // Add video slideInfo
         LightGallery.prototype.addSlideVideoInfo = function (items) {
+            var _this = this;
             items.forEach(function (element, index) {
                 element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index);
+                if (element.__slideVideoInfo &&
+                    _this.settings.loadYouTubePoster &&
+                    !element.poster &&
+                    element.__slideVideoInfo.youtube) {
+                    element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg";
+                }
             });
         };
         /**
@@ -1571,7 +1600,7 @@
                     lgVideoStyle = this.getVideoContStyle(videoSize);
                 }
                 if (iframe) {
-                    var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, src, currentGalleryItem.iframeTitle);
+                    var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle);
                     $currentSlide.prepend(markup);
                 }
                 else if (poster) {
@@ -1582,7 +1611,7 @@
                     if (hasStartAnimation) {
                         dummyImg = this.getDummyImageContent($currentSlide, index, '');
                     }
-                    var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, videoInfo);
+                    var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo);
                     $currentSlide.prepend(markup);
                 }
                 else if (videoInfo) {
@@ -2365,17 +2394,23 @@
         };
         LightGallery.prototype.mousewheel = function () {
             var _this = this;
-            this.outer.on('mousewheel.lg', function (e) {
+            var lastCall = 0;
+            this.outer.on('wheel.lg', function (e) {
                 if (!e.deltaY || _this.galleryItems.length < 2) {
                     return;
                 }
-                if (e.deltaY > 0) {
-                    _this.goToPrevSlide();
+                e.preventDefault();
+                var now = new Date().getTime();
+                if (now - lastCall < 1000) {
+                    return;
                 }
-                else {
+                lastCall = now;
+                if (e.deltaY > 0) {
                     _this.goToNextSlide();
                 }
-                e.preventDefault();
+                else if (e.deltaY < 0) {
+                    _this.goToPrevSlide();
+                }
             });
         };
         LightGallery.prototype.isSlideElement = function (target) {