lightgallery 2.5.0-beta.3 → 2.5.0

package/lightgallery.d.ts

@@ -26,6 +26,7 @@ export declare class LightGallery {
     $content: lgQuery;
     $toolbar: lgQuery;
     prevScrollTop: number;
+    bodyPaddingRight: number;
     private zoomFromOrigin;
     private currentImageSize?;
     private isDummyImageRemoved;
@@ -99,6 +100,9 @@ export declare class LightGallery {
      */
     updateSlides(items: GalleryItem[], index: number): void;
     getItems(): GalleryItem[];
+    shouldHideScrollbar(): boolean;
+    hideScrollbar(): void;
+    resetScrollBar(): void;
     /**
      * Open lightGallery.
      * Open gallery with specific slide by passing index of the slide as parameter.

package/lightgallery.es5.js

@@ -1,5 +1,5 @@
 /*!
- * lightgallery | 2.5.0-beta.3 | April 23rd 2022
+ * lightgallery | 2.5.0 | June 13th 2022
  * http://www.lightgalleryjs.com/
  * Copyright (c) 2020 Sachin Neravath;
  * @license GPLv3
@@ -96,6 +96,8 @@ var lightGalleryCoreSettings = {
     defaultCaptionHeight: 0,
     ariaLabelledby: '',
     ariaDescribedby: '',
+    resetScrollPosition: true,
+    hideScrollbar: false,
     closable: true,
     swipeToClose: true,
     closeOnTap: true,
@@ -832,6 +834,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 = {
@@ -1179,6 +1182,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.
@@ -1215,6 +1239,7 @@ var LightGallery = /** @class */ (function () {
             return;
         this.lgOpened = true;
         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);
@@ -1666,9 +1691,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);
@@ -2456,7 +2483,9 @@ var LightGallery = /** @class */ (function () {
     };
     LightGallery.prototype.trapFocus = function () {
         var _this = this;
-        this.$container.get().focus();
+        this.$container.get().focus({
+            preventScroll: true,
+        });
         $LG(window).on("keydown.lg.global" + this.lgId, function (e) {
             if (!_this.lgOpened) {
                 return;
@@ -2532,7 +2561,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) {
@@ -2577,6 +2608,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')