lightgallery 2.5.0-beta.3 → 2.5.0

package/scss/lightgallery-core.scss

@@ -19,6 +19,9 @@
 .lg-on {
     scroll-behavior: unset;
 }
+.lg-overlay-open {
+    overflow: hidden;
+}
 
 // for idle state
 .lg-toolbar,

package/vue/LightGalleryVue.common.js

@@ -5863,6 +5863,8 @@ var lightGalleryCoreSettings = {
   defaultCaptionHeight: 0,
   ariaLabelledby: '',
   ariaDescribedby: '',
+  resetScrollPosition: true,
+  hideScrollbar: false,
   closable: true,
   swipeToClose: true,
   closeOnTap: true,
@@ -6820,6 +6822,7 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
     this.currentItemsInDom = []; // Scroll top value before lightGallery is opened
 
     this.prevScrollTop = 0;
+    this.bodyPaddingRight = 0;
     this.isDummyImageRemoved = false;
     this.dragOrSwipeEnabled = false;
     this.mediaContainerPosition = {
@@ -7213,6 +7216,34 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         return this.settings.dynamicEl || [];
       }
     }
+  }, {
+    key: "shouldHideScrollbar",
+    value: function shouldHideScrollbar() {
+      return this.settings.hideScrollbar && document.body === this.settings.container;
+    }
+  }, {
+    key: "hideScrollbar",
+    value: function hideScrollbar() {
+      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');
+    }
+  }, {
+    key: "resetScrollBar",
+    value: function resetScrollBar() {
+      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.
@@ -7252,7 +7283,8 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       // prevent accidental double execution
       if (this.lgOpened) return;
       this.lgOpened = true;
-      this.outer.removeClass('lg-hide-items'); // Add display block, but still has opacity 0
+      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);
@@ -7766,7 +7798,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
         if (!$currentSlide.hasClass('lg-loaded')) {
           setTimeout(function () {
             if (_this10.getSlideType(currentGalleryItem) === 'image') {
-              $currentSlide.find('.lg-img-wrap').append(lg_utils.getImgMarkup(index, src, '', srcset, sizes, currentGalleryItem.sources));
+              var alt = currentGalleryItem.alt;
+              var altAttr = alt ? 'alt="' + alt + '"' : '';
+              $currentSlide.find('.lg-img-wrap').append(lg_utils.getImgMarkup(index, src, altAttr, srcset, sizes, currentGalleryItem.sources));
 
               if (srcset || sources) {
                 var _$img = $currentSlide.find('.lg-object');
@@ -8655,7 +8689,9 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
     value: function trapFocus() {
       var _this26 = this;
 
-      this.$container.get().focus();
+      this.$container.get().focus({
+        preventScroll: true
+      });
       $LG(window).on("keydown.lg.global".concat(this.lgId), function (e) {
         if (!_this26.lgOpened) {
           return;
@@ -8743,7 +8779,11 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
       }
 
       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;
 
@@ -8789,7 +8829,10 @@ var lightgallery_LightGallery = /*#__PURE__*/function () {
           _this28.outer.removeClass('lg-zoom-from-image');
         }
 
-        _this28.$container.removeClass('lg-show'); // Need to remove inline opacity as it is used in the stylesheet as well
+        _this28.$container.removeClass('lg-show'); // Reset scrollbar
+
+
+        _this28.resetScrollBar(); // Need to remove inline opacity as it is used in the stylesheet as well
 
 
         _this28.$backdrop.removeAttr('style').css('transition-duration', _this28.settings.backdropDuration + 'ms');