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

package/lightgallery.es5.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
@@ -39,24 +39,140 @@ function __spreadArrays() {
     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 = [
@@ -189,7 +305,9 @@ var lgQuery = /** @class */ (function () {
         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;
@@ -198,7 +316,9 @@ var lgQuery = /** @class */ (function () {
         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;
@@ -398,6 +518,7 @@ var lgQuery = /** @class */ (function () {
     return lgQuery;
 }());
 function $LG(selector) {
+    initLgPolyfills();
     return new lgQuery(selector);
 }
 
@@ -521,9 +642,9 @@ var utils = {
             ', 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 + "\"" : '';
@@ -584,7 +705,7 @@ var utils = {
         // 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';
@@ -595,7 +716,7 @@ var utils = {
         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
@@ -683,103 +804,6 @@ var utils = {
     },
 };
 
-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
@@ -951,7 +975,7 @@ var LightGallery = /** @class */ (function () {
         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 =
@@ -970,19 +994,20 @@ var LightGallery = /** @class */ (function () {
             : '';
         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');
@@ -996,14 +1021,11 @@ var LightGallery = /** @class */ (function () {
         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 () {
@@ -1522,8 +1544,15 @@ var LightGallery = /** @class */ (function () {
     };
     // 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";
+            }
         });
     };
     /**
@@ -1565,7 +1594,7 @@ var LightGallery = /** @class */ (function () {
                 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) {
@@ -1576,7 +1605,7 @@ var LightGallery = /** @class */ (function () {
                 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) {
@@ -2359,17 +2388,23 @@ var LightGallery = /** @class */ (function () {
     };
     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) {