lightgallery 2.5.0-beta.2 → 2.5.0-beta.5

package/react/Lightgallery.es5.js

@@ -28,7 +28,7 @@ function __rest(s, e) {
 }
 
 /*!
- * lightgallery | 2.5.0-beta.2 | March 6th 2022
+ * lightgallery | 2.5.0-beta.5 | May 11th 2022
  * http://www.lightgalleryjs.com/
  * Copyright (c) 2020 Sachin Neravath;
  * @license GPLv3
@@ -125,6 +125,8 @@ var lightGalleryCoreSettings = {
     defaultCaptionHeight: 0,
     ariaLabelledby: '',
     ariaDescribedby: '',
+    resetScrollPosition: true,
+    hideScrollbar: false,
     closable: true,
     swipeToClose: true,
     closeOnTap: true,
@@ -133,6 +135,7 @@ var lightGalleryCoreSettings = {
     loop: true,
     escKey: true,
     keyPress: true,
+    trapFocus: true,
     controls: true,
     slideEndAnimation: true,
     hideControlOnEnd: false,
@@ -749,6 +752,14 @@ var utils = {
         }
         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>";
     },
+    getFocusableElements: function (container) {
+        var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
+        var visibleElements = [].filter.call(elements, function (element) {
+            var style = window.getComputedStyle(element);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        });
+        return visibleElements;
+    },
     /**
      * @desc Create dynamic elements array from gallery items when dynamic option is false
      * It helps to avoid frequent DOM interaction
@@ -852,6 +863,7 @@ var LightGallery = /** @class */ (function () {
         this.currentItemsInDom = [];
         // Scroll top value before lightGallery is opened
         this.prevScrollTop = 0;
+        this.bodyPaddingRight = 0;
         this.isDummyImageRemoved = false;
         this.dragOrSwipeEnabled = false;
         this.mediaContainerPosition = {
@@ -1199,6 +1211,27 @@ var LightGallery = /** @class */ (function () {
             return this.settings.dynamicEl || [];
         }
     };
+    LightGallery.prototype.shouldHideScrollbar = function () {
+        return (this.settings.hideScrollbar &&
+            document.body === this.settings.container);
+    };
+    LightGallery.prototype.hideScrollbar = function () {
+        if (!this.shouldHideScrollbar()) {
+            return;
+        }
+        this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight);
+        var bodyRect = document.documentElement.getBoundingClientRect();
+        var scrollbarWidth = window.innerWidth - bodyRect.width;
+        $LG(document.body).css('padding-right', scrollbarWidth + this.bodyPaddingRight + 'px');
+        $LG(document.body).addClass('lg-overlay-open');
+    };
+    LightGallery.prototype.resetScrollBar = function () {
+        if (!this.shouldHideScrollbar()) {
+            return;
+        }
+        $LG(document.body).css('padding-right', this.bodyPaddingRight + 'px');
+        $LG(document.body).removeClass('lg-overlay-open');
+    };
     /**
      * Open lightGallery.
      * Open gallery with specific slide by passing index of the slide as parameter.
@@ -1234,8 +1267,8 @@ var LightGallery = /** @class */ (function () {
         if (this.lgOpened)
             return;
         this.lgOpened = true;
-        this.outer.get().focus();
         this.outer.removeClass('lg-hide-items');
+        this.hideScrollbar();
         // Add display block, but still has opacity 0
         this.$container.addClass('lg-show');
         var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index);
@@ -1294,6 +1327,12 @@ var LightGallery = /** @class */ (function () {
                 _this.$backdrop.addClass('in');
                 _this.$container.addClass('lg-show-in');
             }, 10);
+            setTimeout(function () {
+                if (_this.settings.trapFocus &&
+                    document.body === _this.settings.container) {
+                    _this.trapFocus();
+                }
+            }, _this.settings.backdropDuration + 50);
             // lg-visible class resets gallery opacity to 1
             if (!_this.zoomFromOrigin || !transform) {
                 setTimeout(function () {
@@ -1681,9 +1720,11 @@ var LightGallery = /** @class */ (function () {
             if (!$currentSlide.hasClass('lg-loaded')) {
                 setTimeout(function () {
                     if (_this.getSlideType(currentGalleryItem) === 'image') {
+                        var alt = currentGalleryItem.alt;
+                        var altAttr = alt ? 'alt="' + alt + '"' : '';
                         $currentSlide
                             .find('.lg-img-wrap')
-                            .append(utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
+                            .append(utils.getImgMarkup(index, src, altAttr, srcset, sizes, currentGalleryItem.sources));
                         if (srcset || sources) {
                             var $img = $currentSlide.find('.lg-object');
                             _this.initPictureFill($img);
@@ -2469,6 +2510,36 @@ var LightGallery = /** @class */ (function () {
             $element.off("click.lgcustom-item-" + $element.attr('data-lg-id'));
         }
     };
+    LightGallery.prototype.trapFocus = function () {
+        var _this = this;
+        this.$container.get().focus({
+            preventScroll: true,
+        });
+        $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
+            if (!_this.lgOpened) {
+                return;
+            }
+            var isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+            if (!isTabPressed) {
+                return;
+            }
+            var focusableEls = utils.getFocusableElements(_this.$container.get());
+            var firstFocusableEl = focusableEls[0];
+            var lastFocusableEl = focusableEls[focusableEls.length - 1];
+            if (e.shiftKey) {
+                if (document.activeElement === firstFocusableEl) {
+                    lastFocusableEl.focus();
+                    e.preventDefault();
+                }
+            }
+            else {
+                if (document.activeElement === lastFocusableEl) {
+                    firstFocusableEl.focus();
+                    e.preventDefault();
+                }
+            }
+        });
+    };
     LightGallery.prototype.manageCloseGallery = function () {
         var _this = this;
         if (!this.settings.closable)
@@ -2519,7 +2590,9 @@ var LightGallery = /** @class */ (function () {
             return 0;
         }
         this.LGel.trigger(lGEvents.beforeClose);
-        $LG(window).scrollTop(this.prevScrollTop);
+        if (this.settings.resetScrollPosition && !this.settings.hideScrollbar) {
+            $LG(window).scrollTop(this.prevScrollTop);
+        }
         var currentItem = this.items[this.index];
         var transform;
         if (this.zoomFromOrigin && currentItem) {
@@ -2564,6 +2637,8 @@ var LightGallery = /** @class */ (function () {
                 _this.outer.removeClass('lg-zoom-from-image');
             }
             _this.$container.removeClass('lg-show');
+            // Reset scrollbar
+            _this.resetScrollBar();
             // Need to remove inline opacity as it is used in the stylesheet as well
             _this.$backdrop
                 .removeAttr('style')
@@ -2576,8 +2651,8 @@ var LightGallery = /** @class */ (function () {
                     instance: _this,
                 });
             }
-            if (_this.outer.get()) {
-                _this.outer.get().blur();
+            if (_this.$container.get()) {
+                _this.$container.get().blur();
             }
             _this.lgOpened = false;
         }, removeTimeout + 100);