@dreamcommerce/aurora 2.24.0-1 → 2.24.0-3

package/build/esm/packages/aurora/src/components/gallery/index.js

@@ -1,10 +1,10 @@
-import { createClass as _createClass, objectSpread2 as _objectSpread2, classCallCheck as _classCallCheck, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { JS_CLASSES, GALLERY_MODE, DIMENSIONS_TYPE } from './constants.js';
+import { createClass as _createClass, classCallCheck as _classCallCheck, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { GALLERY_MODE, JS_CLASSES, DIMENSIONS_TYPE } from './constants.js';
 import { getUrl } from './utilities/get_url.js';
 import { copy } from './utilities/copy_to_clipboard.js';
 import { checkIsTouchDevice } from './utilities/check_is_touch_device.js';
 import { handleHistory } from './utilities/handle_history.js';
-import { cssGallery, cssGalleryMobile, cssGalleryBar, cssIcon, cssIconClose, cssGalleryBarImageClose, cssGalleryBarImageNumbers, cssGalleryBarCopyLink, cssIconLink, cssHideMobile, cssHideDesktop, cssHide, cssGalleryBarCopyLinkConfirmation, cssIconSuccess, cssGalleryBarCopyLinkConfirmationText, cssGalleryImageContainer, cssLoaderMask, cssGalleryImage, cssGalleryImagesWithTransition, cssGalleryImageAdjusted, cssZoomOut, cssZoomIn, cssGrabbing, cssIconArrowContainer, cssGalleryImagesContainer, cssGalleryImages, cssGalleryBarImageDescription, cssIconArrow, cssIconArrowRotate180, cssIconArrowContainerPrevious, cssIconArrowContainerNext, cssGalleryImageMaxWidth, cssGalleryImageMaxHeight } from './css_classes.js';
+import { cssGalleryImageContainer, cssGalleryBarCopyLinkConfirmation, cssGalleryBar, cssIconArrowContainer, cssGrabbing, cssZoomOut, cssGalleryImagesWithTransition, cssHide, cssZoomIn, cssGalleryImageAdjusted, cssGallery, cssGalleryMobile, cssIcon, cssIconClose, cssGalleryBarImageClose, cssGalleryBarImageNumbers, cssGalleryBarCopyLink, cssIconLink, cssHideMobile, cssHideDesktop, cssIconSuccess, cssGalleryBarCopyLinkConfirmationText, cssLoaderMask, cssGalleryImage, cssGalleryImagesContainer, cssGalleryImages, cssGalleryBarImageDescription, cssIconArrow, cssIconArrowRotate180, cssIconArrowContainerPrevious, cssIconArrowContainerNext, cssGalleryImageMaxWidth, cssGalleryImageMaxHeight } from './css_classes.js';
 import Hammer from 'hammerjs';
 import cssClasses from '../../css/gallery/main.module.less.js';
 
@@ -13,6 +13,7 @@ import cssClasses from '../../css/gallery/main.module.less.js';
  * @type {Gallery}
  * @implements IGallery
  */
+
 var Gallery = /*#__PURE__*/function () {
   /**
    * creates new gallery instance with custom gallery template
@@ -20,12 +21,15 @@ var Gallery = /*#__PURE__*/function () {
    */
   function Gallery(options) {
     var _this = this;
+
     _classCallCheck(this, Gallery);
+
     /**
      * gallery HTMLDivElement
      * @type {HTMLDivElement}
      */
     _defineProperty(this, "$gallery", void 0);
+
     /**
      * @param {IGalleryOptions} object
      * @param {string} object.name - gallery name
@@ -53,23 +57,41 @@ var Gallery = /*#__PURE__*/function () {
       },
       handleHistory: false
     });
+
     _defineProperty(this, "selectedImageNumber", void 0);
+
     _defineProperty(this, "previouslySelectedImageNumber", void 0);
+
     _defineProperty(this, "previouslySelectedImageIndex", void 0);
+
     _defineProperty(this, "imagesCount", void 0);
+
     _defineProperty(this, "imageAttributes", []);
+
     _defineProperty(this, "imageMarkups", []);
+
     _defineProperty(this, "$images", void 0);
+
     _defineProperty(this, "$bar", void 0);
+
     _defineProperty(this, "createdImagesIndex", []);
+
     _defineProperty(this, "newImagesIndex", []);
+
     _defineProperty(this, "mouseDownTarget", void 0);
+
     _defineProperty(this, "mouseUpTarget", void 0);
+
     _defineProperty(this, "transform", 0);
+
     _defineProperty(this, "partialTransform", 0);
+
     _defineProperty(this, "isAnimating", false);
+
     _defineProperty(this, "previousCursorX", 0);
+
     _defineProperty(this, "previousCursorY", 0);
+
     _defineProperty(this, "selectors", {
       newGallery: ".".concat(JS_CLASSES.newGallery),
       anchorImage: ".".concat(JS_CLASSES.anchorImage),
@@ -89,13 +111,21 @@ var Gallery = /*#__PURE__*/function () {
       arrowContainer: ".".concat(cssClasses[cssIconArrowContainer]),
       close: ''
     });
+
     _defineProperty(this, "isTouchDevice", void 0);
+
     _defineProperty(this, "isFirstTemporaryContainerExist", false);
+
     _defineProperty(this, "isLastTemporaryContainerExist", false);
+
     _defineProperty(this, "hasUserGoneToNextImage", false);
+
     _defineProperty(this, "initLocation", void 0);
+
     _defineProperty(this, "popstateUpdate", false);
+
     _defineProperty(this, "isNeighboringImageShow", void 0);
+
     _defineProperty(this, "_createInitialImagesMarkup", function () {
       var imageRange = [_this.getPreviousImageIndex(), _this.selectedImageNumber - 1, _this.getNextImageIndex()].filter(function (index) {
         return index !== null;
@@ -104,21 +134,26 @@ var Gallery = /*#__PURE__*/function () {
         if (_this.imageMarkups[index] != null) {
           return;
         }
+
         _this.imageMarkups[index] = _this._createImageMarkup(index, _this.imageAttributes[index].source);
       });
     });
+
     _defineProperty(this, "remove", function (ev) {
       document.body.style.overflow = 'auto';
       document.body.style.position = '';
       window.removeEventListener('resize', _this.updatePreviewImage);
       window.removeEventListener('keydown', _this.keyBindings, true);
+
       if (_this.options.handleHistory) {
         if (_this.isTouchDevice) {
           var isCopyInHash = _this.initLocation.hash.includes('-copied');
+
           if (isCopyInHash) {
             var newUrl = window.location.href.replace('-copied', '');
             window.history.replaceState(null, '', newUrl);
           }
+
           if (ev instanceof MouseEvent) {
             window.history.back();
           }
@@ -126,19 +161,24 @@ var Gallery = /*#__PURE__*/function () {
           window.history.replaceState(null, '', window.location.origin + window.location.pathname);
         }
       }
+
       var removeGalleryEvent = new CustomEvent('removeGallery', {
         detail: {
           target: ev.target
         }
       });
+
       _this.$gallery.dispatchEvent(removeGalleryEvent);
+
       _this.$gallery.remove();
     });
+
     _defineProperty(this, "addWindowListeners", function () {
       window.addEventListener('keydown', _this.keyBindings, true);
       window.addEventListener('resize', _this.updatePreviewImage);
       window.addEventListener('reload', _this.remove);
     });
+
     _defineProperty(this, "removeWindowListeners", function () {
       window.removeEventListener('keydown', _this.keyBindings, true);
       window.removeEventListener('resize', _this.updatePreviewImage);
@@ -146,6 +186,7 @@ var Gallery = /*#__PURE__*/function () {
       _this.previouslySelectedImageNumber = _this.selectedImageNumber;
       _this.popstateUpdate = true;
     });
+
     _defineProperty(this, "addImageListeners", function (imageIndex, $image, $imageContainer) {
       var imageHammer = new Hammer($image, {
         inputClass: Hammer.TouchInput
@@ -171,12 +212,16 @@ var Gallery = /*#__PURE__*/function () {
       imageHammer.on('pinchin pinchout pinchstart pinchend', function (ev) {
         return _this.handlePinch($image, imageIndex, imageHammer, imageContainerHammer, ev);
       });
+
       if (_this.imagesCount > 1) {
         imageContainerHammer.on('pan panend', _this.handleImageSwitch);
       }
+
       var mouseMoveBindFunction = _this.handleMouseMove.bind(_this, $image, imageIndex, $imageContainer);
+
       $image.addEventListener('mousedown', function (ev) {
         ev.preventDefault();
+
         _this.handleMouseDown($image, imageIndex, mouseMoveBindFunction);
       });
       $image.addEventListener('mouseup', function () {
@@ -192,48 +237,59 @@ var Gallery = /*#__PURE__*/function () {
         return _this.resizeImage($image, imageIndex, null, null, ev);
       });
     });
+
     _defineProperty(this, "handleMouseDown", function ($image, imageIndex, mouseMoveBindFunction) {
       var _this$imageAttributes = _this.imageAttributes[imageIndex],
-        maxImageHeight = _this$imageAttributes.maxImageHeight,
-        maxImageWidth = _this$imageAttributes.maxImageWidth;
+          maxImageHeight = _this$imageAttributes.maxImageHeight,
+          maxImageWidth = _this$imageAttributes.maxImageWidth;
       var $imageContainer = $image.closest(_this.selectors.imageContainer);
       var isOriginalImageBiggerThanContainer = maxImageHeight > $imageContainer.offsetHeight || maxImageWidth > window.innerWidth;
+
       if (!_this.isMaxImageMode() || _this.isMaxImageMode() && !isOriginalImageBiggerThanContainer) {
         return;
       }
+
       $imageContainer.addEventListener('mousemove', mouseMoveBindFunction);
     });
+
     _defineProperty(this, "handleMouseLeave", function ($image, $imageContainer, imageIndex, mouseMoveBindFunction) {
       $imageContainer.removeEventListener('mousemove', mouseMoveBindFunction);
+
       if (_this.isMaxImageMode()) {
         $image.classList.remove(cssClasses[cssGrabbing]);
-        var _this$imageAttributes2 = _this.imageAttributes[imageIndex],
-          maxImageHeight = _this$imageAttributes2.maxImageHeight,
-          maxImageWidth = _this$imageAttributes2.maxImageWidth;
+        var _this$imageAttributes3 = _this.imageAttributes[imageIndex],
+            maxImageHeight = _this$imageAttributes3.maxImageHeight,
+            maxImageWidth = _this$imageAttributes3.maxImageWidth;
         var isOriginalImageBiggerThanContainer = maxImageHeight > $imageContainer.offsetHeight || maxImageWidth > window.innerWidth;
+
         if (isOriginalImageBiggerThanContainer) {
           $image.classList.add(cssClasses[cssZoomOut]);
         }
       }
     });
+
     _defineProperty(this, "handleMouseMove", function ($image, imageIndex, $imageContainer, ev) {
-      var _this$imageAttributes3 = _this.imageAttributes[imageIndex],
-        transX = _this$imageAttributes3.transX,
-        transY = _this$imageAttributes3.transY;
+      var _this$imageAttributes4 = _this.imageAttributes[imageIndex],
+          transX = _this$imageAttributes4.transX,
+          transY = _this$imageAttributes4.transY;
       var movementX = 0;
       var movementY = 0;
+
       if (ev.movementX === undefined) {
         movementX = _this.previousCursorX ? ev.screenX - _this.previousCursorX : 0;
         movementY = _this.previousCursorY ? ev.screenY - _this.previousCursorY : 0;
         _this.previousCursorX = ev.screenX;
         _this.previousCursorY = ev.screenY;
       }
+
       var newTranslateX = ev.movementX === undefined ? -(movementX + transX) : -(ev.movementX + transX);
       var newTranslateY = ev.movementY === undefined ? -(movementY + transY) : -(ev.movementY + transY);
       var containerHeight = $imageContainer.offsetHeight;
+
       var _this$getAvailableTra = _this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY),
-        availableTranslateX = _this$getAvailableTra.availableTranslateX,
-        availableTranslateY = _this$getAvailableTra.availableTranslateY;
+          availableTranslateX = _this$getAvailableTra.availableTranslateX,
+          availableTranslateY = _this$getAvailableTra.availableTranslateY;
+
       _this.imageAttributes[imageIndex].isDragging = true;
       _this.imageAttributes[imageIndex].transX = -availableTranslateX;
       _this.imageAttributes[imageIndex].transY = -availableTranslateY;
@@ -241,16 +297,21 @@ var Gallery = /*#__PURE__*/function () {
       $image.classList.remove(cssClasses[cssZoomOut]);
       $image.classList.add(cssClasses[cssGrabbing]);
     });
+
     _defineProperty(this, "handleImageSwitch", function (ev) {
       if (_this.isAnimating) {
         return;
       }
+
       _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
       var panDistance = Math.round(ev.deltaX * 100 / window.innerWidth);
       _this.$images.style.transform = "translateX(".concat(_this.transform + panDistance, "%)");
+
       if (ev.type === 'panend') {
         if (Math.abs(panDistance) > 15) {
           _this.partialTransform = _this.transform + panDistance;
+
           if (ev.deltaX > 0) {
             _this.handlePreviousImagePreview();
           } else {
@@ -258,7 +319,9 @@ var Gallery = /*#__PURE__*/function () {
           }
         } else {
           _this.isAnimating = true;
+
           _this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
+
           _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
           setTimeout(function () {
             _this.isAnimating = false;
@@ -266,15 +329,18 @@ var Gallery = /*#__PURE__*/function () {
         }
       }
     });
+
     _defineProperty(this, "resizeImage", function ($image, imageIndex, imageHammer, imageContainerHammer, ev) {
-      var _this$imageAttributes4 = _this.imageAttributes[imageIndex],
-        maxImageWidth = _this$imageAttributes4.maxImageWidth,
-        maxImageHeight = _this$imageAttributes4.maxImageHeight;
+      var _this$imageAttributes5 = _this.imageAttributes[imageIndex],
+          maxImageWidth = _this$imageAttributes5.maxImageWidth,
+          maxImageHeight = _this$imageAttributes5.maxImageHeight;
       var $container = $image.closest(_this.selectors.imageContainer);
       var isOriginalImageBiggerThanContainer = maxImageHeight > $container.offsetHeight || maxImageWidth > window.innerWidth;
+
       if (!isOriginalImageBiggerThanContainer) {
         return;
       }
+
       if (_this.isFullScreenMode()) {
         if (imageHammer && imageContainerHammer) {
           imageHammer.get('pan').set({
@@ -284,7 +350,9 @@ var Gallery = /*#__PURE__*/function () {
             enable: false
           });
         }
+
         _this.changeSelectedImageModeToMaxImage($image, imageIndex, ev);
+
         _this.changeImagesMode();
       } else if (_this.isMaxImageMode()) {
         if (imageHammer && imageContainerHammer) {
@@ -295,20 +363,27 @@ var Gallery = /*#__PURE__*/function () {
             enable: true
           });
         }
+
         var isDragging = _this.imageAttributes[imageIndex].isDragging;
+
         _this.changeSelectedImageModeToFullScreen($image, imageIndex, ev);
+
         if (!isDragging || imageHammer !== null) {
           _this.changeImagesMode();
         }
       }
     });
+
     _defineProperty(this, "hideLoader", function (ev) {
       var _$image$parentElement;
+
       var $image = ev.target;
       $image.classList.remove(cssClasses[cssHide]);
       (_$image$parentElement = $image.parentElement) === null || _$image$parentElement === void 0 || (_$image$parentElement = _$image$parentElement.firstElementChild) === null || _$image$parentElement === void 0 || _$image$parentElement.classList.add(cssClasses[cssHide]);
+
       _this.updateImageInfo($image);
     });
+
     _defineProperty(this, "updatePreviewImage", function () {
       var $images = document.querySelectorAll(_this.selectors.image);
       var $imageContainers = document.querySelectorAll(_this.selectors.imageContainer);
@@ -320,79 +395,97 @@ var Gallery = /*#__PURE__*/function () {
         var attributes = _this.imageAttributes.find(function (imageAttributes) {
           return imageAttributes.source === $image.currentSrc;
         });
+
         var imageIndex = _this.imageAttributes.findIndex(function (imageAttributes) {
           return imageAttributes.source === $image.currentSrc;
         });
+
         var maxImageHeight = attributes.maxImageHeight,
-          maxImageWidth = attributes.maxImageWidth,
-          transX = attributes.transX,
-          transY = attributes.transY;
+            maxImageWidth = attributes.maxImageWidth,
+            transX = attributes.transX,
+            transY = attributes.transY;
+
         if (_this.isFullScreenMode()) {
           attributes.initialWidth = $image.getBoundingClientRect().width;
           attributes.initialHeight = $image.getBoundingClientRect().height;
         } else {
           _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.initial);
         }
+
         var containerHeight = $imageContainers[0].offsetHeight;
         var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+
         if (isOriginalImageBiggerThanContainer) {
           if (_this.isFullScreenMode()) {
             $image.classList.add(cssClasses[cssZoomIn]);
+
             _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
           }
         } else {
           if (_this.isFullScreenMode()) {
             $image.style.height = attributes.maxImageHeight + 'px';
           }
+
           $image.classList.remove(cssClasses[cssZoomIn]);
           $image.classList.remove(cssClasses[cssZoomOut]);
         }
+
         if (isOriginalImageBiggerThanContainer && _this.isMaxImageMode()) {
           _this.centerImage($image);
         } else {
-          var _this$getAvailableTra2 = _this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, -transX, -transY),
-            availableTranslateX = _this$getAvailableTra2.availableTranslateX,
-            availableTranslateY = _this$getAvailableTra2.availableTranslateY;
+          var _this$getAvailableTra3 = _this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, -transX, -transY),
+              availableTranslateX = _this$getAvailableTra3.availableTranslateX,
+              availableTranslateY = _this$getAvailableTra3.availableTranslateY;
+
           _this.imageAttributes[imageIndex].transX = -availableTranslateX;
           _this.imageAttributes[imageIndex].transY = -availableTranslateY;
           $image.style.transform = "translate3d(".concat(_this.imageAttributes[imageIndex].transX, "px, ").concat(_this.imageAttributes[imageIndex].transY, "px, 0)");
         }
       });
     });
+
     _defineProperty(this, "updateImageInfo", function ($image) {
       var imageAttributes = _this.imageAttributes.find(function (attributes) {
         return attributes.source === $image.currentSrc;
       });
+
       imageAttributes.top = $image.getBoundingClientRect().top;
       imageAttributes.left = Math.abs($image.getBoundingClientRect().left % window.innerWidth);
       imageAttributes.maxImageHeight = $image.naturalHeight;
       imageAttributes.maxImageWidth = $image.naturalWidth;
+
       if (_this.isFullScreenMode()) {
         var $imageContainer = $image.closest(_this.selectors.imageContainer);
         var containerHeight = $imageContainer.offsetHeight;
         var maxImageHeight = imageAttributes.maxImageHeight,
-          maxImageWidth = imageAttributes.maxImageWidth;
+            maxImageWidth = imageAttributes.maxImageWidth;
         var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+
         if (isOriginalImageBiggerThanContainer) {
           _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
         }
+
         imageAttributes.initialWidth = $image.getBoundingClientRect().width;
         imageAttributes.initialHeight = $image.getBoundingClientRect().height;
       } else {
         _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.initial);
       }
+
       _this.changeImageMode($image);
     });
+
     _defineProperty(this, "updateGridColumnStyles", function () {
       document.querySelectorAll(_this.selectors.imageContainer).forEach(function ($imageContainer, index) {
         $imageContainer.style['msGridColumn'] = index + 1;
       });
     });
+
     _defineProperty(this, "showImage", function (imageIndex) {
       _this.selectedImageNumber = imageIndex + 1;
       _this.hasUserGoneToNextImage = _this.selectedImageNumber - _this.previouslySelectedImageNumber === 1 || _this.selectedImageNumber === 1 && _this.previouslySelectedImageNumber === _this.imagesCount;
       var areAllImageMarkupsCreated = _this.createdImagesIndex.length === _this.imagesCount;
       var isTemporaryContainerNeeded = _this.options.isCarouselEnabled && (_this.selectedImageNumber === _this.imagesCount && !_this.isFirstTemporaryContainerExist || _this.selectedImageNumber === 1 && !_this.isLastTemporaryContainerExist);
+
       if (!areAllImageMarkupsCreated) {
         var imageRange = [_this.getPreviousImageIndex(), imageIndex, _this.getNextImageIndex()].filter(function (index) {
           return index !== null;
@@ -402,27 +495,36 @@ var Gallery = /*#__PURE__*/function () {
             _this.imageMarkups[index] = _this._createImageMarkup(index, _this.imageAttributes[index].source);
           }
         });
+
         if (_this.newImagesIndex.length !== 0) {
           _this.appendImages();
         }
       }
+
       _this.isNeighboringImageShow = Math.abs(_this.previouslySelectedImageNumber - _this.selectedImageNumber) === 1 || _this.previouslySelectedImageNumber === 1 && _this.selectedImageNumber === _this.imagesCount || _this.previouslySelectedImageNumber === _this.imagesCount && _this.selectedImageNumber === 1;
+
       var createdImageIndex = _this.createdImagesIndex.findIndex(function (index) {
         return index === imageIndex;
       });
+
       var isFakeTransformNeeded = imageIndex === 0 || !_this.isNeighboringImageShow ? _this.transform === -100 * (createdImageIndex + 1) : _this.transform === -100 * createdImageIndex && !(imageIndex === 1 && imageIndex === _this.imagesCount - 1);
+
       if (isFakeTransformNeeded) {
         _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
         if (_this.hasUserGoneToNextImage) {
           _this.transform += 100 - _this.partialTransform;
         } else {
           _this.transform = _this.partialTransform % 100 === 0 ? _this.transform - 100 : _this.transform + _this.partialTransform % 100;
         }
+
         _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
       }
+
       if (isTemporaryContainerNeeded) {
         _this.appendTemporaryImage(imageIndex);
       }
+
       if (_this.hasUserGoneToNextImage) {
         if (imageIndex === 0) {
           _this.transform = _this.transform - _this.transform % 100 - 100;
@@ -440,100 +542,134 @@ var Gallery = /*#__PURE__*/function () {
           }
         }
       }
+
       _this.changeImageNumber();
+
       _this.changeImageDescription();
+
       if (!_this.isTouchDevice) {
         _this.handleArrowDisplay();
       }
+
       if (_this.isLastTemporaryContainerExist && _this.selectedImageNumber !== 1 && (_this.hasUserGoneToNextImage || !_this.isNeighboringImageShow)) {
         var $lastTemporaryContainer = document.querySelector(_this.selectors.lastTemporaryContainer);
         $lastTemporaryContainer.remove();
         _this.isLastTemporaryContainerExist = false;
+
         _this.updateGridColumnStyles();
+
         _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
         _this.$images.style.transform = "translateX(".concat(_this.partialTransform % 100, "%)");
       }
+
       if (!_this.isNeighboringImageShow) {
         _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
         _this.transform = _this.selectedImageNumber === 1 ? -100 : createdImageIndex * -100;
         _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
-      }
-      // wait for the fake translate
+      } // wait for the fake translate
+
+
       setTimeout(function () {
         _this.isAnimating = true;
+
         _this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
+
         setTimeout(function () {
           _this.handleTransitionEnd();
         }, 300);
+
         if (_this.isNeighboringImageShow) {
           _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
         }
       }, 10);
       _this.popstateUpdate = false;
     });
+
     _defineProperty(this, "handleTransitionEnd", function () {
       if (_this.isFirstTemporaryContainerExist && _this.selectedImageNumber !== _this.imagesCount) {
         var $firstTemporaryContainer = document.querySelector(_this.selectors.firstTemporaryContainer);
         $firstTemporaryContainer.remove();
         _this.isFirstTemporaryContainerExist = false;
       }
+
       if (_this.isLastTemporaryContainerExist) {
         if (_this.hasUserGoneToNextImage && _this.selectedImageNumber === 1) {
           _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
           _this.transform = -100;
           _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
         }
+
         if (_this.selectedImageNumber === _this.imagesCount && !_this.hasUserGoneToNextImage || _this.popstateUpdate && _this.selectedImageNumber !== 1) {
           _this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
           var createdImageIndex = _this.createdImagesIndex.findIndex(function (index) {
             return index === _this.selectedImageNumber - 1;
           });
+
           _this.transform = -100 * (createdImageIndex + 1) + _this.partialTransform % 100;
           _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
           var $lastTemporaryContainer = document.querySelector(_this.selectors.lastTemporaryContainer);
           $lastTemporaryContainer.remove();
           _this.isLastTemporaryContainerExist = false;
+
           _this.updateGridColumnStyles();
+
           _this.transform += 100 - _this.partialTransform;
           _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
         }
       }
+
       if (_this.isMaxImageMode()) {
         var _createdImageIndex2 = _this.createdImagesIndex.findIndex(function (index) {
           return index === _this.selectedImageNumber - 1;
         });
+
         var $images = document.querySelectorAll(_this.selectors.image);
+
         var $container = $images[_createdImageIndex2].closest(_this.selectors.imageContainer);
+
         var containerHeight = $container.offsetHeight;
-        var _this$imageAttributes5 = _this.imageAttributes[_this.previouslySelectedImageIndex],
-          maxImageHeight = _this$imageAttributes5.maxImageHeight,
-          maxImageWidth = _this$imageAttributes5.maxImageWidth;
+        var _this$imageAttributes7 = _this.imageAttributes[_this.previouslySelectedImageIndex],
+            maxImageHeight = _this$imageAttributes7.maxImageHeight,
+            maxImageWidth = _this$imageAttributes7.maxImageWidth;
         var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+
         if (isOriginalImageBiggerThanContainer) {
           var _$images$0$closest;
+
           var previousCreatedImageIndex = _this.createdImagesIndex.findIndex(function (index) {
             return index === _this.previouslySelectedImageIndex;
           });
+
           if ((_$images$0$closest = $images[0].closest(_this.selectors.imageContainer)) !== null && _$images$0$closest !== void 0 && _$images$0$closest.classList.contains(JS_CLASSES.lastTemporaryContainer)) {
             previousCreatedImageIndex += 1;
           }
+
           _this.centerImage($images[previousCreatedImageIndex]);
         }
       }
+
       _this.isAnimating = false;
     });
+
     _defineProperty(this, "changeImageMode", function ($image) {
       var imageIndex = _this.imageAttributes.findIndex(function (imageAttributes) {
         return imageAttributes.source === $image.currentSrc;
       });
+
       var attributes = _this.imageAttributes.find(function (imageAttributes) {
         return imageAttributes.source === $image.currentSrc;
       });
+
       var $imageContainer = $image.closest(_this.selectors.imageContainer);
       var containerHeight = $imageContainer.offsetHeight;
       var maxImageHeight = attributes.maxImageHeight,
-        maxImageWidth = attributes.maxImageWidth;
+          maxImageWidth = attributes.maxImageWidth;
       var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+
       if (isOriginalImageBiggerThanContainer) {
         if (_this.isFullScreenMode() || _this.isTouchDevice) {
           $image.classList.add(cssClasses[cssZoomIn]);
@@ -549,9 +685,11 @@ var Gallery = /*#__PURE__*/function () {
           });
           $image.style.transform = "translate3d(".concat(_this.imageAttributes[imageIndex].transX, "px, ").concat(_this.imageAttributes[imageIndex].transY, "px, 0)");
           $image.classList.add(cssClasses[cssGalleryImageAdjusted]);
+
           _this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
         } else if (_this.isMaxImageMode()) {
           _this.centerImage($image);
+
           $image.style.height = maxImageHeight + 'px';
           $image.style.width = '';
         }
@@ -559,18 +697,21 @@ var Gallery = /*#__PURE__*/function () {
         $image.style.height = maxImageHeight + 'px';
       }
     });
+
     _defineProperty(this, "setImageDimensionsAccordingToAspectRatio", function ($image, dimensionsType) {
       var attributes = _this.imageAttributes.find(function (imageAttributes) {
         return imageAttributes.source === $image.currentSrc;
       });
+
       var maxImageHeight = attributes.maxImageHeight,
-        maxImageWidth = attributes.maxImageWidth;
+          maxImageWidth = attributes.maxImageWidth;
       var barHeight = _this.$bar.clientHeight;
       var containerHeight = window.innerHeight - barHeight;
       var imageAspectRatio = maxImageHeight / maxImageWidth;
       var containerAspectRatio = containerHeight / window.innerWidth;
       var calculatedWidth = maxImageWidth * containerHeight / maxImageHeight;
       var calculatedHeight = maxImageHeight * window.innerWidth / maxImageWidth;
+
       if (dimensionsType === DIMENSIONS_TYPE.initial) {
         if (imageAspectRatio < containerAspectRatio) {
           attributes.initialWidth = window.innerWidth;
@@ -589,83 +730,113 @@ var Gallery = /*#__PURE__*/function () {
         }
       }
     });
+
     _defineProperty(this, "handleArrowDisplay", function () {
       var $previousButton = _this.$gallery.querySelector(_this.selectors.previous);
+
       var $nextButton = _this.$gallery.querySelector(_this.selectors.next);
+
       var isPreviousImageAvailable = _this.getPreviousImageIndex() !== null;
       var isNextImageAvailable = _this.getNextImageIndex() !== null;
+
       if (isPreviousImageAvailable) {
         $previousButton.classList.remove(cssClasses[cssHide]);
       } else {
         $previousButton.classList.add(cssClasses[cssHide]);
       }
+
       if (isNextImageAvailable) {
         $nextButton.classList.remove(cssClasses[cssHide]);
       } else {
         $nextButton.classList.add(cssClasses[cssHide]);
       }
     });
+
     _defineProperty(this, "handlePreviousImagePreview", function () {
       if (_this.isAnimating) {
         return;
       }
+
       _this.hasUserGoneToNextImage = false;
       _this.previouslySelectedImageIndex = _this.selectedImageNumber - 1;
+
       var previousImageIndex = _this.getPreviousImageIndex();
+
       if (previousImageIndex !== null) {
         _this.previouslySelectedImageNumber = _this.selectedImageNumber;
+
         _this.showImage(previousImageIndex);
+
         var previousImageEvent = new CustomEvent('previousImage', {
           detail: {
             selectedImageNumber: _this.selectedImageNumber
           }
         });
+
         _this.$gallery.dispatchEvent(previousImageEvent);
       }
     });
+
     _defineProperty(this, "handleNextImagePreview", function () {
       if (_this.isAnimating) {
         return;
       }
+
       _this.hasUserGoneToNextImage = true;
       _this.previouslySelectedImageIndex = _this.selectedImageNumber - 1;
+
       var nextImageIndex = _this.getNextImageIndex();
+
       if (nextImageIndex !== null) {
         _this.previouslySelectedImageNumber = _this.selectedImageNumber;
+
         _this.showImage(nextImageIndex);
+
         var nextImageEvent = new CustomEvent('nextImage', {
           detail: {
             selectedImageNumber: _this.selectedImageNumber
           }
         });
+
         _this.$gallery.dispatchEvent(nextImageEvent);
       }
     });
+
     _defineProperty(this, "keyBindings", function (ev) {
       if (ev.defaultPrevented) {
         return;
       }
+
       switch (ev.key) {
         case 'Left':
         case 'ArrowLeft':
           _this.handlePreviousImagePreview();
+
           break;
+
         case 'Right':
         case 'ArrowRight':
           _this.handleNextImagePreview();
+
           break;
+
         case 'Esc':
         case 'Escape':
           _this.remove(ev);
+
           break;
+
         default:
           return;
       }
+
       ev.preventDefault();
     });
+
     _defineProperty(this, "sortAscending", function (number1, number2) {
       return number1 - number2;
     });
+
     Object.assign(this.options, options);
     this.setInitialImagesInfo();
     this.isTouchDevice = checkIsTouchDevice();
@@ -674,40 +845,53 @@ var Gallery = /*#__PURE__*/function () {
     this.selectors.close = ".".concat(JS_CLASSES.close);
     this.createMarkup();
     this.$bar = document.querySelector(this.selectors.bar);
+
     this._createInitialImagesMarkup();
+
     this.$images = this.$gallery.querySelector(this.selectors.images);
     this.$images.style['msGridColumns'] = "(100%)[".concat(this.imagesCount + 2, "]");
     this.$images.style.gridTemplateColumns = "repeat(".concat(this.imagesCount + 2, ", 100%)");
     this.appendImages();
+
     var _isTemporaryContainerNeeded = this.options.isCarouselEnabled && this.imagesCount > 1 && (this.selectedImageNumber === this.imagesCount && !this.isFirstTemporaryContainerExist || this.selectedImageNumber === 1 && !this.isLastTemporaryContainerExist);
+
     if (_isTemporaryContainerNeeded) {
       this.appendTemporaryImage(this.selectedImageNumber - 1);
     }
+
     var _createdImageIndex = this.createdImagesIndex.findIndex(function (index) {
       return index === _this.selectedImageNumber - 1;
     });
+
     this.transform = -100 * _createdImageIndex;
+
     if (_isTemporaryContainerNeeded && this.selectedImageNumber === 1) {
       this.transform = -100;
     }
+
     this.$images.style.transform = "translateX(".concat(this.transform, "%)");
     this.addListeners();
+
     if (this.options.handleHistory) {
       handleHistory(this.$gallery, this.options.name, this.selectedImageNumber, this.remove, this.showImage);
     }
+
     if (this.isTouchDevice) {
       document.body.style.position = 'fixed';
     }
   }
+
   return _createClass(Gallery, [{
     key: "setInitialImagesInfo",
     value: function setInitialImagesInfo() {
       var _this2 = this;
+
       var $images = document.querySelectorAll("[data-gallery-name=".concat(this.options.name, "]"));
       $images.forEach(function ($image) {
         var shorterEdge = $image.naturalHeight < $image.naturalWidth ? 'height' : 'width';
         var $anchor = $image.closest(_this2.selectors.anchorImage);
         var imageDescription = $image.dataset.imageDescription;
+
         _this2.imageAttributes.push({
           source: $anchor.href,
           description: imageDescription,
@@ -728,10 +912,12 @@ var Gallery = /*#__PURE__*/function () {
           scale: 1,
           delta: 0
         });
+
         if ($image.currentSrc === _this2.options.initiallySelectedImageSrc) {
           _this2.selectedImageNumber = _this2.imageAttributes.length;
           _this2.previouslySelectedImageNumber = _this2.selectedImageNumber;
         }
+
         _this2.imageMarkups.push(null);
       });
       this.imagesCount = $images.length;
@@ -739,12 +925,13 @@ var Gallery = /*#__PURE__*/function () {
   }, {
     key: "createMarkup",
     value: function createMarkup() {
-      this.$gallery = document.createElement('div');
-      // used 2 separate add calls instead of 1 to handle IE11
+      this.$gallery = document.createElement('div'); // used 2 separate add calls instead of 1 to handle IE11
+
       this.$gallery.classList.add(cssClasses[cssGallery]);
       this.$gallery.classList.add(JS_CLASSES.newGallery);
       var previousArrowMarkup = '';
       var nextArrowMarkup = '';
+
       if (this.isTouchDevice) {
         this.$gallery.classList.add(cssClasses[cssGalleryMobile]);
       } else {
@@ -753,7 +940,9 @@ var Gallery = /*#__PURE__*/function () {
           nextArrowMarkup = this._createNavigationMarkup('next');
         }
       }
+
       var barMarkup = this._createBarMarkup();
+
       var markup = "\n            ".concat(barMarkup, "\n\n            <div class=\"").concat(cssClasses[cssGalleryImagesContainer], " ").concat(JS_CLASSES.imagesContainer, "\">\n                ").concat(previousArrowMarkup, "\n\n                <div class=\"").concat(cssClasses[cssGalleryImages], " ").concat(JS_CLASSES.images, "\"></div>\n\n                ").concat(nextArrowMarkup, "\n            </div>\n        ");
       this.$gallery.innerHTML = markup;
       document.body.append(this.$gallery);
@@ -765,12 +954,15 @@ var Gallery = /*#__PURE__*/function () {
       var imagesNumberMarkup = '';
       var copyLinkMarkup = '';
       var imageDescriptionMarkup = "\n            <div class=\"".concat(cssClasses[cssGalleryBarImageDescription], " ").concat(JS_CLASSES.imageDescription, "\">\n            </div>\n        ");
+
       if (this.options.hasImageNumbers) {
         imagesNumberMarkup = this._createImageNumbersMarkup();
       }
+
       if (this.options.hasCopyLink) {
         copyLinkMarkup = this._createCopyLinkMarkup();
       }
+
       return "\n            <div class=\"".concat(cssClasses[cssGalleryBar], "\">\n                ").concat(imagesNumberMarkup, "\n\n                ").concat(imageDescriptionMarkup, "\n\n                ").concat(copyLinkMarkup, "\n\n                <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconClose], " ").concat(cssClasses[cssGalleryBarImageClose], " ").concat(JS_CLASSES.close, "\"></span>\n            </div>\n        ");
     }
   }, {
@@ -782,10 +974,10 @@ var Gallery = /*#__PURE__*/function () {
     key: "_createCopyLinkMarkup",
     value: function _createCopyLinkMarkup() {
       var _this$options$transla = this.options.translations,
-        copyLink = _this$options$transla.copyLink,
-        picture = _this$options$transla.picture,
-        copyLinkShortVersion = _this$options$transla.copyLinkShortVersion,
-        copyLinkConfirmation = _this$options$transla.copyLinkConfirmation;
+          copyLink = _this$options$transla.copyLink,
+          picture = _this$options$transla.picture,
+          copyLinkShortVersion = _this$options$transla.copyLinkShortVersion,
+          copyLinkConfirmation = _this$options$transla.copyLinkConfirmation;
       return "\n            <div class=\"".concat(cssClasses[cssGalleryBarCopyLink], " ").concat(JS_CLASSES.copyLinkButton, "\">\n                <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconLink], " ").concat(cssClasses[cssHideMobile], "\"></span>\n                <span class=\"").concat(cssClasses[cssHideDesktop], "\">").concat(copyLinkShortVersion, "</span>\n                <span class=\"").concat(cssClasses[cssHideMobile], "\">\n                    ").concat(copyLink, " (").concat(picture, " <span class=\"").concat(JS_CLASSES.selectedImageNumber, "\">").concat(this.selectedImageNumber, "</span>)\n                </span>\n                \n                <div class=\"").concat(cssClasses[cssHide], " ").concat(cssClasses[cssGalleryBarCopyLinkConfirmation], "\">\n                    <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconSuccess], "\"></span>\n\n                    <div class=\"").concat(cssClasses[cssGalleryBarCopyLinkConfirmationText], "\">\n                        ").concat(copyLinkConfirmation, "\n                    </div>\n                </div>\n            </div>\n        ");
     }
   }, {
@@ -794,20 +986,24 @@ var Gallery = /*#__PURE__*/function () {
       var arrowClasses = "".concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconArrow]);
       var arrowContainerClasses = "".concat(cssClasses[cssIconArrowContainer], " ").concat(JS_CLASSES[arrowType]);
       var isPreviousArrow = arrowType === 'previous';
+
       if (isPreviousArrow) {
         arrowClasses += " ".concat(cssClasses[cssIconArrowRotate180]);
         arrowContainerClasses += " ".concat(cssClasses[cssIconArrowContainerPrevious]);
         var isFirstImage = this.selectedImageNumber === 1;
+
         if (isFirstImage && !this.options.isCarouselEnabled) {
           arrowContainerClasses += " ".concat(cssClasses[cssHide]);
         }
       } else {
         arrowContainerClasses += " ".concat(cssClasses[cssIconArrowContainerNext]);
         var isLastImage = this.selectedImageNumber === this.imagesCount;
+
         if (isLastImage && !this.options.isCarouselEnabled) {
           arrowContainerClasses += " ".concat(cssClasses[cssHide]);
         }
       }
+
       return "\n            <div class=\"".concat(arrowContainerClasses, "\">\n                <span class=\"").concat(arrowClasses, "\"></span>\n            </div>\n        ");
     }
   }, {
@@ -822,46 +1018,58 @@ var Gallery = /*#__PURE__*/function () {
       var $loader = document.createElement('span');
       $loader.classList.add(cssClasses[cssLoaderMask]);
       var $image = document.createElement('img');
+
       var _this$getImageClasses = this.getImageClasses(imageIndex),
-        maxWidthClass = _this$getImageClasses.maxWidthClass,
-        maxHeightClass = _this$getImageClasses.maxHeightClass,
-        adjustedClass = _this$getImageClasses.adjustedClass;
-      // used 3 separate add calls instead of 1 to handle IE11
+          maxWidthClass = _this$getImageClasses.maxWidthClass,
+          maxHeightClass = _this$getImageClasses.maxHeightClass,
+          adjustedClass = _this$getImageClasses.adjustedClass; // used 3 separate add calls instead of 1 to handle IE11
+
+
       $image.classList.add(cssClasses[cssGalleryImage]);
       $image.classList.add(cssClasses[cssHide]);
       $image.classList.add(JS_CLASSES.image);
       $image.setAttribute('src', source);
       $image.onload = this.hideLoader;
+
       if (maxHeightClass) {
         $image.classList.add(maxHeightClass);
       }
+
       if (maxWidthClass) {
         $image.classList.add(maxWidthClass);
       }
+
       if (adjustedClass) {
         $image.classList.add(adjustedClass);
       }
+
       $imageContainer.append($loader, $image);
       this.addImageListeners(imageIndex, $image, $imageContainer);
+
       if (!this.createdImagesIndex.includes(imageIndex)) {
         this.newImagesIndex.push(imageIndex);
       }
+
       return $imageContainer;
     }
   }, {
     key: "appendImages",
     value: function appendImages() {
       var _this3 = this;
+
       this.newImagesIndex.sort(this.sortAscending).forEach(function (index) {
         var $markup = _this3.imageMarkups[index];
+
         if (_this3.createdImagesIndex.length !== 0) {
           var lowerIndex = _this3.getClosestLowerIndex(_this3.createdImagesIndex, index);
+
           if (lowerIndex != null) {
             var lowerIndexImages = document.querySelectorAll("[src='".concat(_this3.imageAttributes[lowerIndex].source, "']"));
             lowerIndexImages.forEach(function (image) {
               if (image.classList.contains(JS_CLASSES.image)) {
                 var $lowerIndexImage = image;
                 var $lowerIndexImageContainer = $lowerIndexImage.closest(_this3.selectors.imageContainer);
+
                 if (!$lowerIndexImageContainer.classList.contains(JS_CLASSES.firstTemporaryContainer)) {
                   $lowerIndexImageContainer.after($markup);
                 }
@@ -876,13 +1084,17 @@ var Gallery = /*#__PURE__*/function () {
         } else {
           _this3.$images.append($markup);
         }
+
         if (!_this3.createdImagesIndex.includes(index)) {
           _this3.createdImagesIndex.push(index);
+
           if (index === 0 && _this3.hasUserGoneToNextImage) {
             _this3.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
+
             _this3.$images.style.transform = "translateX(".concat(_this3.transform - 100 + _this3.partialTransform % 100, "%)");
           }
         }
+
         _this3.createdImagesIndex.sort(_this3.sortAscending);
       });
       this.newImagesIndex = [];
@@ -893,9 +1105,12 @@ var Gallery = /*#__PURE__*/function () {
     value: function appendTemporaryImage(imageIndex) {
       if (imageIndex === 0) {
         this.isLastTemporaryContainerExist = true;
+
         var $temporaryMarkup = this._createImageMarkup(this.imagesCount - 1, this.imageAttributes[this.imagesCount - 1].source);
+
         $temporaryMarkup.classList.add(JS_CLASSES.lastTemporaryContainer);
         this.$images.prepend($temporaryMarkup);
+
         if (this.hasUserGoneToNextImage) {
           this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
           this.transform = -100 * this.createdImagesIndex.length + this.partialTransform % 100;
@@ -903,24 +1118,31 @@ var Gallery = /*#__PURE__*/function () {
         }
       } else if (imageIndex === this.imagesCount - 1) {
         this.isFirstTemporaryContainerExist = true;
+
         var _$temporaryMarkup = this._createImageMarkup(0, this.imageAttributes[0].source);
+
         _$temporaryMarkup.classList.add(JS_CLASSES.firstTemporaryContainer);
+
         this.$images.append(_$temporaryMarkup);
       }
+
       this.updateGridColumnStyles();
     }
   }, {
     key: "addListeners",
     value: function addListeners() {
       var _this4 = this;
+
       var $closeButton = document.querySelector(this.selectors.close);
       $closeButton === null || $closeButton === void 0 || $closeButton.addEventListener('click', this.remove);
+
       if (this.options.hasNavArrows && !this.isTouchDevice) {
         var $nextButton = this.$gallery.querySelector(this.selectors.next);
         var $previousButton = this.$gallery.querySelector(this.selectors.previous);
         $nextButton === null || $nextButton === void 0 || $nextButton.addEventListener('click', this.handleNextImagePreview);
         $previousButton === null || $previousButton === void 0 || $previousButton.addEventListener('click', this.handlePreviousImagePreview);
       }
+
       this.addWindowListeners();
       window.addEventListener('popstate', this.removeWindowListeners);
       var $imagesContainer = document.querySelector(this.selectors.imagesContainer);
@@ -932,18 +1154,21 @@ var Gallery = /*#__PURE__*/function () {
         _this4.previousCursorX = 0;
         _this4.previousCursorY = 0;
       });
+
       if (!this.isTouchDevice) {
         $imagesContainer === null || $imagesContainer === void 0 || $imagesContainer.addEventListener('click', function (ev) {
           if (_this4.mouseDownTarget === _this4.mouseUpTarget) {
             var $targetElement = ev.target;
             var isImage = $targetElement.tagName === 'IMG';
             var isArrowContainer = $targetElement.closest(_this4.selectors.arrowContainer) != null;
+
             if (!isImage && !isArrowContainer) {
               _this4.remove(ev);
             }
           }
         });
       }
+
       if (this.options.hasCopyLink) {
         var $copyLink = document.querySelector(this.selectors.copyLinkButton);
         $copyLink.addEventListener('click', function () {
@@ -963,21 +1188,27 @@ var Gallery = /*#__PURE__*/function () {
       if (ev instanceof WheelEvent) {
         ev.preventDefault();
       }
+
       var $container = $image.closest(this.selectors.imageContainer);
       var containerHeight = $container.offsetHeight;
       var deltaY = ev instanceof WheelEvent ? -ev.deltaY : ev.deltaY;
       var newTranslateX = -(ev.deltaX + this.imageAttributes[imageIndex].transX);
       var newTranslateY = -(deltaY + this.imageAttributes[imageIndex].transY);
-      var _this$getAvailableTra3 = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY),
-        availableTranslateX = _this$getAvailableTra3.availableTranslateX,
-        availableTranslateY = _this$getAvailableTra3.availableTranslateY;
+
+      var _this$getAvailableTra4 = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY),
+          availableTranslateX = _this$getAvailableTra4.availableTranslateX,
+          availableTranslateY = _this$getAvailableTra4.availableTranslateY;
+
       $image.style.transform = "translate3d(".concat(availableTranslateX * -1, "px, ").concat(availableTranslateY * -1, "px, 0)");
+
       if (ev.type === 'panend') {
         this.imageAttributes[imageIndex].transX = -availableTranslateX;
         this.imageAttributes[imageIndex].transY = -availableTranslateY;
       }
+
       if (ev.type === 'wheel') {
         var absoluteDeltaY = Math.abs(ev.deltaY);
+
         if (absoluteDeltaY >= this.imageAttributes[imageIndex].delta) {
           this.imageAttributes[imageIndex].delta = absoluteDeltaY;
           this.imageAttributes[imageIndex].transX = -availableTranslateX;
@@ -998,26 +1229,30 @@ var Gallery = /*#__PURE__*/function () {
         this.imageAttributes[imageIndex].eventCenterX = ev.center.x;
         this.imageAttributes[imageIndex].eventCenterY = ev.center.y;
       }
+
       imageHammer.get('pan').set({
         enable: false
       });
       imageContainerHammer.get('pan').set({
         enable: false
       });
-      var _this$imageAttributes6 = this.imageAttributes[imageIndex],
-        maxImageHeight = _this$imageAttributes6.maxImageHeight,
-        initialWidth = _this$imageAttributes6.initialWidth,
-        initialHeight = _this$imageAttributes6.initialHeight;
+      var _this$imageAttributes8 = this.imageAttributes[imageIndex],
+          maxImageHeight = _this$imageAttributes8.maxImageHeight,
+          initialWidth = _this$imageAttributes8.initialWidth,
+          initialHeight = _this$imageAttributes8.initialHeight;
       this.imageAttributes[imageIndex].currentScale = Math.max(1, Math.min(this.imageAttributes[imageIndex].scale * ev.scale, maxImageHeight / initialHeight));
       var currentScale = this.imageAttributes[imageIndex].currentScale;
       $image.style.maxWidth = "".concat(initialWidth * currentScale, "px");
       $image.style.maxHeight = "".concat(initialHeight * currentScale, "px");
       var $container = $image.closest(this.selectors.imageContainer);
+
       var _this$getTranslate = this.getTranslate($container, imageIndex),
-        translateX = _this$getTranslate.translateX,
-        translateY = _this$getTranslate.translateY;
+          translateX = _this$getTranslate.translateX,
+          translateY = _this$getTranslate.translateY;
+
       this.imageAttributes[imageIndex].transX = -translateX;
       this.imageAttributes[imageIndex].transY = -translateY;
+
       if (ev.type === 'pinchend') {
         if (currentScale === 1) {
           imageContainerHammer.get('pan').set({
@@ -1037,9 +1272,11 @@ var Gallery = /*#__PURE__*/function () {
           $image.classList.remove(cssClasses[cssGalleryImageAdjusted]);
           this.options.mode = GALLERY_MODE.maxImage;
         }
+
         this.imageAttributes[imageIndex].scale = currentScale;
         this.imageAttributes[imageIndex].initialScale = currentScale;
       }
+
       $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
     }
   }, {
@@ -1048,6 +1285,7 @@ var Gallery = /*#__PURE__*/function () {
       this.options.mode = GALLERY_MODE.maxImage;
       var eventCenterX;
       var eventCenterY;
+
       if (ev instanceof MouseEvent) {
         eventCenterX = ev.clientX;
         eventCenterY = ev.clientY;
@@ -1055,9 +1293,10 @@ var Gallery = /*#__PURE__*/function () {
         eventCenterX = ev.center.x;
         eventCenterY = ev.center.y;
       }
-      var _this$imageAttributes7 = this.imageAttributes[imageIndex],
-        maxImageHeight = _this$imageAttributes7.maxImageHeight,
-        initialHeight = _this$imageAttributes7.initialHeight;
+
+      var _this$imageAttributes9 = this.imageAttributes[imageIndex],
+          maxImageHeight = _this$imageAttributes9.maxImageHeight,
+          initialHeight = _this$imageAttributes9.initialHeight;
       this.imageAttributes[imageIndex] = _objectSpread2(_objectSpread2({}, this.imageAttributes[imageIndex]), {}, {
         currentScale: maxImageHeight / initialHeight,
         scale: maxImageHeight / initialHeight,
@@ -1067,9 +1306,11 @@ var Gallery = /*#__PURE__*/function () {
         eventCenterY: eventCenterY
       });
       var $container = $image.closest(this.selectors.imageContainer);
+
       var _this$getTranslate2 = this.getTranslate($container, imageIndex),
-        translateX = _this$getTranslate2.translateX,
-        translateY = _this$getTranslate2.translateY;
+          translateX = _this$getTranslate2.translateX,
+          translateY = _this$getTranslate2.translateY;
+
       this.imageAttributes[imageIndex] = _objectSpread2(_objectSpread2({}, this.imageAttributes[imageIndex]), {}, {
         transX: -translateX,
         transY: -translateY,
@@ -1087,6 +1328,7 @@ var Gallery = /*#__PURE__*/function () {
     key: "changeSelectedImageModeToFullScreen",
     value: function changeSelectedImageModeToFullScreen($image, imageIndex, ev) {
       var isDragging = this.imageAttributes[imageIndex].isDragging;
+
       if (isDragging && ev instanceof MouseEvent) {
         this.imageAttributes[imageIndex].isDragging = false;
         $image.classList.remove(cssClasses[cssGrabbing]);
@@ -1112,37 +1354,43 @@ var Gallery = /*#__PURE__*/function () {
   }, {
     key: "getTranslate",
     value: function getTranslate($container, imageIndex) {
-      var _this$imageAttributes8 = this.imageAttributes[imageIndex],
-        initialWidth = _this$imageAttributes8.initialWidth,
-        initialHeight = _this$imageAttributes8.initialHeight,
-        top = _this$imageAttributes8.top,
-        left = _this$imageAttributes8.left,
-        eventCenterX = _this$imageAttributes8.eventCenterX,
-        eventCenterY = _this$imageAttributes8.eventCenterY,
-        initialScale = _this$imageAttributes8.initialScale,
-        currentScale = _this$imageAttributes8.currentScale;
+      var _this$imageAttributes10 = this.imageAttributes[imageIndex],
+          initialWidth = _this$imageAttributes10.initialWidth,
+          initialHeight = _this$imageAttributes10.initialHeight,
+          top = _this$imageAttributes10.top,
+          left = _this$imageAttributes10.left,
+          eventCenterX = _this$imageAttributes10.eventCenterX,
+          eventCenterY = _this$imageAttributes10.eventCenterY,
+          initialScale = _this$imageAttributes10.initialScale,
+          currentScale = _this$imageAttributes10.currentScale;
       var containerHeight = $container.offsetHeight;
       var containerWidth = $container.offsetWidth;
       var zoomImageX = currentScale * (eventCenterX - left) / initialScale;
       var zoomImageY = currentScale * (eventCenterY - top) / initialScale;
       var updatedEventCenterY = eventCenterY - $container.getBoundingClientRect().top;
       var translateX;
+
       if (initialWidth * currentScale <= containerWidth) {
         translateX = 0;
       } else {
         translateX = zoomImageX - eventCenterX;
       }
+
       var translateY;
+
       if (initialHeight * currentScale <= containerHeight) {
         translateY = 0;
       } else {
         translateY = zoomImageY - updatedEventCenterY;
       }
+
       var width = initialWidth * currentScale;
       var height = initialHeight * currentScale;
-      var _this$getAvailableTra4 = this.getAvailableTranslate(width, height, containerHeight, translateX, translateY),
-        availableTranslateX = _this$getAvailableTra4.availableTranslateX,
-        availableTranslateY = _this$getAvailableTra4.availableTranslateY;
+
+      var _this$getAvailableTra5 = this.getAvailableTranslate(width, height, containerHeight, translateX, translateY),
+          availableTranslateX = _this$getAvailableTra5.availableTranslateX,
+          availableTranslateY = _this$getAvailableTra5.availableTranslateY;
+
       return {
         translateX: availableTranslateX,
         translateY: availableTranslateY
@@ -1153,18 +1401,23 @@ var Gallery = /*#__PURE__*/function () {
     value: function getAvailableTranslate(imageWidth, imageHeight, containerHeight, translateX, translateY) {
       var maxPositionX = Math.abs(imageWidth - window.innerWidth);
       var maxPositionY = Math.abs(imageHeight - containerHeight);
+
       if (imageWidth <= window.innerWidth || translateX < 0) {
         translateX = 0;
       }
+
       if (translateX > maxPositionX) {
         translateX = maxPositionX;
       }
+
       if (imageHeight <= containerHeight || translateY < 0) {
         translateY = 0;
       }
+
       if (translateY > maxPositionY) {
         translateY = maxPositionY;
       }
+
       return {
         availableTranslateX: translateX,
         availableTranslateY: translateY
@@ -1178,16 +1431,19 @@ var Gallery = /*#__PURE__*/function () {
         maxHeightClass: '',
         adjustedClass: ''
       };
+
       if (this.isTouchDevice || this.isFullScreenMode()) {
         classes.adjustedClass = cssClasses[cssGalleryImageAdjusted];
       } else if (this.isShortestEdgeMode()) {
         var windowWidth = window.innerWidth;
         var imageWidth = this.imageAttributes[imageIndex].maxImageWidth;
-        var _this$imageAttributes9 = this.imageAttributes[imageIndex],
-          shorterEdge = _this$imageAttributes9.shorterEdge,
-          maxImageHeight = _this$imageAttributes9.maxImageHeight;
+        var _this$imageAttributes12 = this.imageAttributes[imageIndex],
+            shorterEdge = _this$imageAttributes12.shorterEdge,
+            maxImageHeight = _this$imageAttributes12.maxImageHeight;
+
         if (shorterEdge === 'width') {
           var isImageWiderThanWindowWidth = imageWidth > windowWidth;
+
           if (isImageWiderThanWindowWidth) {
             classes.maxWidthClass = cssClasses[cssGalleryImageMaxWidth];
           }
@@ -1195,11 +1451,13 @@ var Gallery = /*#__PURE__*/function () {
           var barHeight = this.$bar.clientHeight;
           var containerHeight = window.innerHeight - barHeight;
           var isImageHigherThanContainerHeight = maxImageHeight > containerHeight;
+
           if (isImageHigherThanContainerHeight) {
             classes.maxHeightClass = cssClasses[cssGalleryImageMaxHeight];
           }
         }
       }
+
       return classes;
     }
   }, {
@@ -1210,18 +1468,20 @@ var Gallery = /*#__PURE__*/function () {
       var imageIndex = this.imageAttributes.findIndex(function (imageAttributes) {
         return imageAttributes.source === $image.currentSrc;
       });
-      var _this$imageAttributes10 = this.imageAttributes[imageIndex],
-        maxImageHeight = _this$imageAttributes10.maxImageHeight,
-        maxImageWidth = _this$imageAttributes10.maxImageWidth;
+      var _this$imageAttributes13 = this.imageAttributes[imageIndex],
+          maxImageHeight = _this$imageAttributes13.maxImageHeight,
+          maxImageWidth = _this$imageAttributes13.maxImageWidth;
       $image.classList.add(cssClasses[cssZoomOut]);
       $image.classList.remove(cssClasses[cssZoomIn]);
       this.imageAttributes[imageIndex].eventCenterX = window.innerWidth / 2;
       this.imageAttributes[imageIndex].eventCenterY = containerHeight / 2;
       var translateX = (maxImageWidth - window.innerWidth) / 2;
       var translateY = (maxImageHeight - containerHeight) / 2;
-      var _this$getAvailableTra5 = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, translateX, translateY),
-        availableTranslateX = _this$getAvailableTra5.availableTranslateX,
-        availableTranslateY = _this$getAvailableTra5.availableTranslateY;
+
+      var _this$getAvailableTra6 = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, translateX, translateY),
+          availableTranslateX = _this$getAvailableTra6.availableTranslateX,
+          availableTranslateY = _this$getAvailableTra6.availableTranslateY;
+
       this.imageAttributes[imageIndex].transX = -availableTranslateX;
       this.imageAttributes[imageIndex].transY = -availableTranslateY;
       $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
@@ -1231,14 +1491,17 @@ var Gallery = /*#__PURE__*/function () {
     key: "changeImagesMode",
     value: function changeImagesMode() {
       var _this5 = this;
+
       var $images = document.querySelectorAll(this.selectors.image);
       $images.forEach(function ($image, imageIndex) {
         var createdImageIndex = _this5.createdImagesIndex.findIndex(function (index) {
           return index === _this5.selectedImageNumber - 1;
         });
+
         if (_this5.isLastTemporaryContainerExist) {
           createdImageIndex += 1;
         }
+
         if (imageIndex !== createdImageIndex) {
           _this5.changeImageMode($image);
         }
@@ -1248,24 +1511,29 @@ var Gallery = /*#__PURE__*/function () {
     key: "getPreviousImageIndex",
     value: function getPreviousImageIndex() {
       var isFirstImageSelected = this.selectedImageNumber === 1;
+
       if (isFirstImageSelected) {
         return this.options.isCarouselEnabled ? this.imagesCount - 1 : null;
       }
+
       return this.selectedImageNumber - 2;
     }
   }, {
     key: "getNextImageIndex",
     value: function getNextImageIndex() {
       var isLastImageSelected = this.selectedImageNumber === this.imagesCount;
+
       if (isLastImageSelected) {
         return this.options.isCarouselEnabled ? 0 : null;
       }
+
       return this.selectedImageNumber;
     }
   }, {
     key: "changeImageNumber",
     value: function changeImageNumber() {
       var _this6 = this;
+
       var imageNumbers = document.querySelectorAll(this.selectors.selectedImageNumber);
       imageNumbers.forEach(function ($imageNumber) {
         return $imageNumber.textContent = "".concat(_this6.selectedImageNumber);
@@ -1284,9 +1552,11 @@ var Gallery = /*#__PURE__*/function () {
         return index < imageIndex;
       });
       var lowerIndexesLength = lowerIndexes.length;
+
       if (lowerIndexesLength) {
         return lowerIndexes[lowerIndexesLength - 1];
       }
+
       return null;
     }
   }, {