@dreamcommerce/aurora 2.12.1-7 → 2.12.1-71

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

@@ -1,1195 +1,1581 @@
-import { GALLERY_MODE, JS_CLASSES, DIMENSIONS_TYPE } from './constants.js';
+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 { 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 { 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 { 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 Hammer from 'hammerjs';
 import cssClasses from '../../css/gallery/main.module.less.js';
 
-/**
- * Class representing gallery.
- * @type {Gallery}
- * @implements IGallery
- */
-class Gallery {
-    /**
-     * creates new gallery instance with custom gallery template
-     * @param {IGalleryOptions} options
-     */
-    constructor(options) {
-        /**
-         * @param {IGalleryOptions} object
-         * @param {string} object.name - gallery name
-         * @param {string} object.initiallySelectedImageSrc - selected image's source
-         * @param {boolean} object.hasNavArrows - determines if gallery should have navigation arrows
-         * @param {boolean} object.hasImageNumbers - determines if gallery should have images numbers
-         * @param {boolean} object.hasThumbnails - determines if gallery should have thumbnails
-         * @param {string} object.mode - determines in which mode should gallery render
-         * @param {boolean} object.isCarouselEnabled - determines if images in gallery should changing in a loop
-         */
-        this.options = {
-            name: '',
-            initiallySelectedImageSrc: '',
-            hasNavArrows: true,
-            hasImageNumbers: true,
-            hasThumbnails: false,
-            mode: GALLERY_MODE.fullScreen,
-            isCarouselEnabled: true,
-            hasCopyLink: false,
-            translations: {
-                copyLink: 'Skopiuj link do galerii',
-                picture: 'Zdjęcie',
-                copyLinkShortVersion: 'Skopiuj link',
-                copyLinkConfirmation: 'Skopiowano link'
-            },
-            handleHistory: false
-        };
-        this.imageAttributes = [];
-        this.imageMarkups = [];
-        this.createdImagesIndex = [];
-        this.newImagesIndex = [];
-        this.transform = 0;
-        this.partialTransform = 0;
-        this.isAnimating = false;
-        this.previousCursorX = 0;
-        this.previousCursorY = 0;
-        this.selectors = {
-            newGallery: `.${JS_CLASSES.newGallery}`,
-            anchorImage: `.${JS_CLASSES.anchorImage}`,
-            image: `.${JS_CLASSES.image}`,
-            imageContainer: `.${cssClasses[cssGalleryImageContainer]}`,
-            selectedImageNumber: `.${JS_CLASSES.selectedImageNumber}`,
-            imageDescription: `.${JS_CLASSES.imageDescription}`,
-            previous: `.${JS_CLASSES.previous}`,
-            next: `.${JS_CLASSES.next}`,
-            images: `.${JS_CLASSES.images}`,
-            imagesContainer: `.${JS_CLASSES.imagesContainer}`,
-            copyLinkButton: `.${JS_CLASSES.copyLinkButton}`,
-            copyLinkConfirmation: `.${cssClasses[cssGalleryBarCopyLinkConfirmation]}`,
-            firstTemporaryContainer: `.${JS_CLASSES.firstTemporaryContainer}`,
-            lastTemporaryContainer: `.${JS_CLASSES.lastTemporaryContainer}`,
-            bar: `.${cssClasses[cssGalleryBar]}`,
-            arrowContainer: `.${cssClasses[cssIconArrowContainer]}`,
-            close: ''
-        };
-        this.isFirstTemporaryContainerExist = false;
-        this.isLastTemporaryContainerExist = false;
-        this.hasUserGoneToNextImage = false;
-        this.popstateUpdate = false;
-        this._createInitialImagesMarkup = () => {
-            const imageRange = [this.getPreviousImageIndex(), this.selectedImageNumber - 1, this.getNextImageIndex()].filter((index) => index !== null);
-            imageRange.forEach((index) => {
-                if (this.imageMarkups[index] != null) {
-                    return;
-                }
-                this.imageMarkups[index] = this._createImageMarkup(index, this.imageAttributes[index].source);
-            });
-        };
-        this.remove = (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) {
-                    const isCopyInHash = this.initLocation.hash.includes('-copied');
-                    if (isCopyInHash) {
-                        const newUrl = window.location.href.replace('-copied', '');
-                        window.history.replaceState(null, '', newUrl);
-                    }
-                    if (ev instanceof MouseEvent) {
-                        window.history.back();
-                    }
-                }
-                else {
-                    window.history.replaceState(null, '', window.location.origin + window.location.pathname);
-                }
-            }
-            const removeGalleryEvent = new CustomEvent('removeGallery', { detail: { target: ev.target } });
-            this.$gallery.dispatchEvent(removeGalleryEvent);
-            this.$gallery.remove();
-        };
-        this.addWindowListeners = () => {
-            window.addEventListener('keydown', this.keyBindings, true);
-            window.addEventListener('resize', this.updatePreviewImage);
-            window.addEventListener('reload', this.remove);
-        };
-        this.removeWindowListeners = () => {
-            window.removeEventListener('keydown', this.keyBindings, true);
-            window.removeEventListener('resize', this.updatePreviewImage);
-            window.removeEventListener('reload', this.remove);
-            this.previouslySelectedImageNumber = this.selectedImageNumber;
-            this.popstateUpdate = true;
-        };
-        this.addImageListeners = (imageIndex, $image, $imageContainer) => {
-            const imageHammer = new Hammer($image, {
-                inputClass: Hammer.TouchInput
-            });
-            const imageContainerHammer = new Hammer($imageContainer, {
-                inputClass: Hammer.TouchInput
-            });
-            $image.addEventListener('touchend', (ev) => ev.preventDefault());
-            imageHammer.get('pinch').set({ enable: true });
-            imageHammer.get('pan').set({ enable: false });
-            imageHammer.on('doubletap', (ev) => this.resizeImage($image, imageIndex, imageHammer, imageContainerHammer, ev));
-            imageHammer.on('panleft panright panup pandown panend', (ev) => this.handlePanAndWheel($image, imageIndex, ev));
-            imageHammer.on('pinchin pinchout pinchstart pinchend', (ev) => this.handlePinch($image, imageIndex, imageHammer, imageContainerHammer, ev));
-            if (this.imagesCount > 1) {
-                imageContainerHammer.on('pan panend', this.handleImageSwitch);
-            }
-            const mouseMoveBindFunction = this.handleMouseMove.bind(this, $image, imageIndex, $imageContainer);
-            $image.addEventListener('mousedown', (ev) => {
-                ev.preventDefault();
-                this.handleMouseDown($image, imageIndex, mouseMoveBindFunction);
-            });
-            $image.addEventListener('mouseup', () => {
-                $imageContainer.removeEventListener('mousemove', mouseMoveBindFunction);
-            });
-            $imageContainer.addEventListener('mouseleave', () => this.handleMouseLeave($image, $imageContainer, imageIndex, mouseMoveBindFunction));
-            $imageContainer.addEventListener('wheel', (ev) => this.handlePanAndWheel($image, imageIndex, ev));
-            $image.addEventListener('click', (ev) => this.resizeImage($image, imageIndex, null, null, ev));
-        };
-        this.handleMouseDown = ($image, imageIndex, mouseMoveBindFunction) => {
-            const { maxImageHeight, maxImageWidth } = this.imageAttributes[imageIndex];
-            const $imageContainer = $image.closest(this.selectors.imageContainer);
-            const isOriginalImageBiggerThanContainer = maxImageHeight > $imageContainer.offsetHeight || maxImageWidth > window.innerWidth;
-            if (!this.isMaxImageMode() || (this.isMaxImageMode() && !isOriginalImageBiggerThanContainer)) {
-                return;
-            }
-            $imageContainer.addEventListener('mousemove', mouseMoveBindFunction);
-        };
-        this.handleMouseLeave = ($image, $imageContainer, imageIndex, mouseMoveBindFunction) => {
-            $imageContainer.removeEventListener('mousemove', mouseMoveBindFunction);
-            if (this.isMaxImageMode()) {
-                $image.classList.remove(cssClasses[cssGrabbing]);
-                const { maxImageHeight, maxImageWidth } = this.imageAttributes[imageIndex];
-                const isOriginalImageBiggerThanContainer = maxImageHeight > $imageContainer.offsetHeight || maxImageWidth > window.innerWidth;
-                if (isOriginalImageBiggerThanContainer) {
-                    $image.classList.add(cssClasses[cssZoomOut]);
-                }
-            }
-        };
-        this.handleMouseMove = ($image, imageIndex, $imageContainer, ev) => {
-            const { transX, transY } = this.imageAttributes[imageIndex];
-            let movementX = 0;
-            let 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;
-            }
-            const newTranslateX = ev.movementX === undefined ? -(movementX + transX) : -(ev.movementX + transX);
-            const newTranslateY = ev.movementY === undefined ? -(movementY + transY) : -(ev.movementY + transY);
-            const containerHeight = $imageContainer.offsetHeight;
-            const { availableTranslateX, availableTranslateY } = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY);
-            this.imageAttributes[imageIndex].isDragging = true;
-            this.imageAttributes[imageIndex].transX = -availableTranslateX;
-            this.imageAttributes[imageIndex].transY = -availableTranslateY;
-            $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-            $image.classList.remove(cssClasses[cssZoomOut]);
-            $image.classList.add(cssClasses[cssGrabbing]);
-        };
-        this.handleImageSwitch = (ev) => {
-            if (this.isAnimating) {
-                return;
-            }
-            this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-            const panDistance = Math.round((ev.deltaX * 100) / window.innerWidth);
-            this.$images.style.transform = `translateX(${this.transform + panDistance}%)`;
-            if (ev.type === 'panend') {
-                if (Math.abs(panDistance) > 15) {
-                    this.partialTransform = this.transform + panDistance;
-                    if (ev.deltaX > 0) {
-                        this.handlePreviousImagePreview();
-                    }
-                    else {
-                        this.handleNextImagePreview();
-                    }
-                }
-                else {
-                    this.isAnimating = true;
-                    this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
-                    this.$images.style.transform = `translateX(${this.transform}%)`;
-                    setTimeout(() => {
-                        this.isAnimating = false;
-                    }, 300);
-                }
-            }
-        };
-        this.resizeImage = ($image, imageIndex, imageHammer, imageContainerHammer, ev) => {
-            const { maxImageWidth, maxImageHeight } = this.imageAttributes[imageIndex];
-            const $container = $image.closest(this.selectors.imageContainer);
-            const isOriginalImageBiggerThanContainer = maxImageHeight > $container.offsetHeight || maxImageWidth > window.innerWidth;
-            if (!isOriginalImageBiggerThanContainer) {
-                return;
-            }
-            if (this.isFullScreenMode()) {
-                if (imageHammer && imageContainerHammer) {
-                    imageHammer.get('pan').set({ enable: true });
-                    imageContainerHammer.get('pan').set({ enable: false });
-                }
-                this.changeSelectedImageModeToMaxImage($image, imageIndex, ev);
-                this.changeImagesMode();
-            }
-            else if (this.isMaxImageMode()) {
-                if (imageHammer && imageContainerHammer) {
-                    imageHammer.get('pan').set({ enable: false });
-                    imageContainerHammer.get('pan').set({ enable: true });
-                }
-                const isDragging = this.imageAttributes[imageIndex].isDragging;
-                this.changeSelectedImageModeToFullScreen($image, imageIndex, ev);
-                if (!isDragging || imageHammer !== null) {
-                    this.changeImagesMode();
-                }
-            }
-        };
-        this.hideLoader = (ev) => {
-            var _a, _b;
-            const $image = ev.target;
-            $image.classList.remove(cssClasses[cssHide]);
-            (_b = (_a = $image.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.classList.add(cssClasses[cssHide]);
-            this.updateImageInfo($image);
-        };
-        this.updatePreviewImage = () => {
-            const $images = document.querySelectorAll(this.selectors.image);
-            const $imageContainers = document.querySelectorAll(this.selectors.imageContainer);
-            const barHeight = this.$bar.clientHeight;
-            $imageContainers.forEach(($container) => {
-                $container.style.height = window.innerHeight - barHeight + 'px';
-            });
-            $images.forEach(($image) => {
-                const attributes = this.imageAttributes.find((imageAttributes) => imageAttributes.source === $image.currentSrc);
-                const imageIndex = this.imageAttributes.findIndex((imageAttributes) => imageAttributes.source === $image.currentSrc);
-                const { maxImageHeight, maxImageWidth, transX, transY } = attributes;
-                if (this.isFullScreenMode()) {
-                    attributes.initialWidth = $image.getBoundingClientRect().width;
-                    attributes.initialHeight = $image.getBoundingClientRect().height;
-                }
-                else {
-                    this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.initial);
-                }
-                const containerHeight = $imageContainers[0].offsetHeight;
-                const 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 {
-                    const { availableTranslateX, availableTranslateY } = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, -transX, -transY);
-                    this.imageAttributes[imageIndex].transX = -availableTranslateX;
-                    this.imageAttributes[imageIndex].transY = -availableTranslateY;
-                    $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-                }
-            });
-        };
-        this.updateImageInfo = ($image) => {
-            const imageAttributes = this.imageAttributes.find((attributes) => 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()) {
-                const $imageContainer = $image.closest(this.selectors.imageContainer);
-                const containerHeight = $imageContainer.offsetHeight;
-                const { maxImageHeight, maxImageWidth } = imageAttributes;
-                const 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);
-        };
-        this.updateGridColumnStyles = () => {
-            document.querySelectorAll(this.selectors.imageContainer).forEach(($imageContainer, index) => {
-                $imageContainer.style['msGridColumn'] = index + 1;
-            });
-        };
-        this.showImage = (imageIndex) => {
-            this.selectedImageNumber = imageIndex + 1;
-            this.hasUserGoneToNextImage =
-                this.selectedImageNumber - this.previouslySelectedImageNumber === 1 ||
-                    (this.selectedImageNumber === 1 && this.previouslySelectedImageNumber === this.imagesCount);
-            const areAllImageMarkupsCreated = this.createdImagesIndex.length === this.imagesCount;
-            const isTemporaryContainerNeeded = this.options.isCarouselEnabled &&
-                ((this.selectedImageNumber === this.imagesCount && !this.isFirstTemporaryContainerExist) ||
-                    (this.selectedImageNumber === 1 && !this.isLastTemporaryContainerExist));
-            if (!areAllImageMarkupsCreated) {
-                const imageRange = [this.getPreviousImageIndex(), imageIndex, this.getNextImageIndex()].filter((index) => index !== null);
-                imageRange.forEach((index) => {
-                    if (this.imageMarkups[index] === null) {
-                        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);
-            const createdImageIndex = this.createdImagesIndex.findIndex((index) => index === imageIndex);
-            const 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(${this.transform}%)`;
-            }
-            if (isTemporaryContainerNeeded) {
-                this.appendTemporaryImage(imageIndex);
-            }
-            if (this.hasUserGoneToNextImage) {
-                if (imageIndex === 0) {
-                    this.transform = this.transform - (this.transform % 100) - 100;
-                }
-                else {
-                    this.transform = -100 * createdImageIndex;
-                }
-            }
-            else {
-                if (imageIndex === this.imagesCount - 1) {
-                    this.transform = 0;
-                }
-                else {
-                    if (this.transform % 100 !== 0) {
-                        this.transform -= this.partialTransform % 100;
-                    }
-                    else {
-                        this.transform += 100;
-                    }
-                }
-            }
-            this.changeImageNumber();
-            this.changeImageDescription();
-            if (!this.isTouchDevice) {
-                this.handleArrowDisplay();
-            }
-            if (this.isLastTemporaryContainerExist &&
-                this.selectedImageNumber !== 1 &&
-                (this.hasUserGoneToNextImage || !this.isNeighboringImageShow)) {
-                const $lastTemporaryContainer = document.querySelector(this.selectors.lastTemporaryContainer);
-                $lastTemporaryContainer.remove();
-                this.isLastTemporaryContainerExist = false;
-                this.updateGridColumnStyles();
-                this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-                this.$images.style.transform = `translateX(${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(${this.transform}%)`;
-            }
-            // wait for the fake translate
-            setTimeout(() => {
-                this.isAnimating = true;
-                this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
-                setTimeout(() => {
-                    this.handleTransitionEnd();
-                }, 300);
-                if (this.isNeighboringImageShow) {
-                    this.$images.style.transform = `translateX(${this.transform}%)`;
-                }
-            }, 10);
-            this.popstateUpdate = false;
-        };
-        this.handleTransitionEnd = () => {
-            var _a;
-            if (this.isFirstTemporaryContainerExist && this.selectedImageNumber !== this.imagesCount) {
-                const $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(${this.transform}%)`;
-                }
-                if ((this.selectedImageNumber === this.imagesCount && !this.hasUserGoneToNextImage) ||
-                    (this.popstateUpdate && this.selectedImageNumber !== 1)) {
-                    this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-                    const createdImageIndex = this.createdImagesIndex.findIndex((index) => index === this.selectedImageNumber - 1);
-                    this.transform = -100 * (createdImageIndex + 1) + (this.partialTransform % 100);
-                    this.$images.style.transform = `translateX(${this.transform}%)`;
-                    const $lastTemporaryContainer = document.querySelector(this.selectors.lastTemporaryContainer);
-                    $lastTemporaryContainer.remove();
-                    this.isLastTemporaryContainerExist = false;
-                    this.updateGridColumnStyles();
-                    this.transform += 100 - this.partialTransform;
-                    this.$images.style.transform = `translateX(${this.transform}%)`;
-                }
-            }
-            if (this.isMaxImageMode()) {
-                const createdImageIndex = this.createdImagesIndex.findIndex((index) => index === this.selectedImageNumber - 1);
-                const $images = document.querySelectorAll(this.selectors.image);
-                const $container = $images[createdImageIndex].closest(this.selectors.imageContainer);
-                const containerHeight = $container.offsetHeight;
-                const { maxImageHeight, maxImageWidth } = this.imageAttributes[this.previouslySelectedImageIndex];
-                const isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
-                if (isOriginalImageBiggerThanContainer) {
-                    let previousCreatedImageIndex = this.createdImagesIndex.findIndex((index) => index === this.previouslySelectedImageIndex);
-                    if ((_a = $images[0].closest(this.selectors.imageContainer)) === null || _a === void 0 ? void 0 : _a.classList.contains(JS_CLASSES.lastTemporaryContainer)) {
-                        previousCreatedImageIndex += 1;
-                    }
-                    this.centerImage($images[previousCreatedImageIndex]);
-                }
-            }
-            this.isAnimating = false;
-        };
-        this.changeImageMode = ($image) => {
-            const imageIndex = this.imageAttributes.findIndex((imageAttributes) => imageAttributes.source === $image.currentSrc);
-            const attributes = this.imageAttributes.find((imageAttributes) => imageAttributes.source === $image.currentSrc);
-            const $imageContainer = $image.closest(this.selectors.imageContainer);
-            const containerHeight = $imageContainer.offsetHeight;
-            const { maxImageHeight, maxImageWidth } = attributes;
-            const isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
-            if (isOriginalImageBiggerThanContainer) {
-                if (this.isFullScreenMode() || this.isTouchDevice) {
-                    $image.classList.add(cssClasses[cssZoomIn]);
-                    $image.classList.remove(cssClasses[cssZoomOut]);
-                    $image.style.maxWidth = '';
-                    $image.style.maxHeight = '';
-                    this.imageAttributes[imageIndex] = {
-                        ...this.imageAttributes[imageIndex],
-                        transX: 0,
-                        transY: 0,
-                        scale: 1,
-                        initialScale: 1,
-                        currentScale: 1
-                    };
-                    $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${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 = '';
-                }
-            }
-            else {
-                $image.style.height = maxImageHeight + 'px';
-            }
-        };
-        this.setImageDimensionsAccordingToAspectRatio = ($image, dimensionsType) => {
-            const attributes = this.imageAttributes.find((imageAttributes) => imageAttributes.source === $image.currentSrc);
-            const { maxImageHeight, maxImageWidth } = attributes;
-            const barHeight = this.$bar.clientHeight;
-            const containerHeight = window.innerHeight - barHeight;
-            const imageAspectRatio = maxImageHeight / maxImageWidth;
-            const containerAspectRatio = containerHeight / window.innerWidth;
-            const calculatedWidth = (maxImageWidth * containerHeight) / maxImageHeight;
-            const calculatedHeight = (maxImageHeight * window.innerWidth) / maxImageWidth;
-            if (dimensionsType === DIMENSIONS_TYPE.initial) {
-                if (imageAspectRatio < containerAspectRatio) {
-                    attributes.initialWidth = window.innerWidth;
-                    attributes.initialHeight = calculatedHeight;
-                }
-                else {
-                    attributes.initialWidth = calculatedWidth;
-                    attributes.initialHeight = containerHeight;
-                }
-            }
-            else if (dimensionsType === DIMENSIONS_TYPE.real) {
-                if (imageAspectRatio < containerAspectRatio) {
-                    $image.style.width = window.innerWidth + 'px';
-                    $image.style.height = calculatedHeight + 'px';
-                }
-                else {
-                    $image.style.width = calculatedWidth + 'px';
-                    $image.style.height = containerHeight + 'px';
-                }
-            }
-        };
-        this.handleArrowDisplay = () => {
-            const $previousButton = this.$gallery.querySelector(this.selectors.previous);
-            const $nextButton = this.$gallery.querySelector(this.selectors.next);
-            const isPreviousImageAvailable = this.getPreviousImageIndex() !== null;
-            const 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]);
-            }
-        };
-        this.handlePreviousImagePreview = () => {
-            if (this.isAnimating) {
-                return;
-            }
-            this.hasUserGoneToNextImage = false;
-            this.previouslySelectedImageIndex = this.selectedImageNumber - 1;
-            const previousImageIndex = this.getPreviousImageIndex();
-            if (previousImageIndex !== null) {
-                this.previouslySelectedImageNumber = this.selectedImageNumber;
-                this.showImage(previousImageIndex);
-                const previousImageEvent = new CustomEvent('previousImage', { detail: { selectedImageNumber: this.selectedImageNumber } });
-                this.$gallery.dispatchEvent(previousImageEvent);
-            }
-        };
-        this.handleNextImagePreview = () => {
-            if (this.isAnimating) {
-                return;
-            }
-            this.hasUserGoneToNextImage = true;
-            this.previouslySelectedImageIndex = this.selectedImageNumber - 1;
-            const nextImageIndex = this.getNextImageIndex();
-            if (nextImageIndex !== null) {
-                this.previouslySelectedImageNumber = this.selectedImageNumber;
-                this.showImage(nextImageIndex);
-                const nextImageEvent = new CustomEvent('nextImage', { detail: { selectedImageNumber: this.selectedImageNumber } });
-                this.$gallery.dispatchEvent(nextImageEvent);
-            }
-        };
-        this.keyBindings = (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();
-        };
-        this.sortAscending = (number1, number2) => number1 - number2;
-        Object.assign(this.options, options);
-        this.setInitialImagesInfo();
-        this.isTouchDevice = checkIsTouchDevice();
-        this.initLocation = window.location;
-        JS_CLASSES.close = `js__gallery-${this.options.name}-close`;
-        this.selectors.close = `.${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%)[${this.imagesCount + 2}]`;
-        this.$images.style.gridTemplateColumns = `repeat(${this.imagesCount + 2}, 100%)`;
-        this.appendImages();
-        const 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);
-        }
-        const createdImageIndex = this.createdImagesIndex.findIndex((index) => index === this.selectedImageNumber - 1);
-        this.transform = -100 * createdImageIndex;
-        if (isTemporaryContainerNeeded && this.selectedImageNumber === 1) {
-            this.transform = -100;
-        }
-        this.$images.style.transform = `translateX(${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';
-        }
-    }
-    setInitialImagesInfo() {
-        const $images = document.querySelectorAll(`[data-gallery-name=${this.options.name}]`);
-        $images.forEach(($image) => {
-            const shorterEdge = $image.naturalHeight < $image.naturalWidth ? 'height' : 'width';
-            const $anchor = $image.closest(this.selectors.anchorImage);
-            const imageDescription = $image.dataset.imageDescription;
-            this.imageAttributes.push({
-                source: $anchor.href,
-                description: imageDescription,
-                maxImageWidth: 0,
-                maxImageHeight: 0,
-                shorterEdge,
-                initialWidth: 0,
-                initialHeight: 0,
-                top: 0,
-                left: 0,
-                eventCenterX: 0,
-                eventCenterY: 0,
-                initialScale: 1,
-                currentScale: 1,
-                isDragging: false,
-                transX: 0,
-                transY: 0,
-                scale: 1,
-                delta: 0
-            });
-            if ($image.currentSrc === this.options.initiallySelectedImageSrc) {
-                this.selectedImageNumber = this.imageAttributes.length;
-                this.previouslySelectedImageNumber = this.selectedImageNumber;
-            }
-            this.imageMarkups.push(null);
-        });
-        this.imagesCount = $images.length;
-    }
-    createMarkup() {
-        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);
-        let previousArrowMarkup = '';
-        let nextArrowMarkup = '';
-        if (this.isTouchDevice) {
-            this.$gallery.classList.add(cssClasses[cssGalleryMobile]);
-        }
-        else {
-            if (this.options.hasNavArrows && this.imagesCount > 1) {
-                previousArrowMarkup = this._createNavigationMarkup('previous');
-                nextArrowMarkup = this._createNavigationMarkup('next');
-            }
-        }
-        const barMarkup = this._createBarMarkup();
-        const markup = `
-            ${barMarkup}
-
-            <div class="${cssClasses[cssGalleryImagesContainer]} ${JS_CLASSES.imagesContainer}">
-                ${previousArrowMarkup}
-
-                <div class="${cssClasses[cssGalleryImages]} ${JS_CLASSES.images}"></div>
-
-                ${nextArrowMarkup}
-            </div>
-        `;
-        this.$gallery.innerHTML = markup;
-        document.body.append(this.$gallery);
-        this.changeImageDescription();
-    }
-    _createBarMarkup() {
-        let imagesNumberMarkup = '';
-        let copyLinkMarkup = '';
-        const imageDescriptionMarkup = `
-            <div class="${cssClasses[cssGalleryBarImageDescription]} ${JS_CLASSES.imageDescription}">
-            </div>
-        `;
-        if (this.options.hasImageNumbers) {
-            imagesNumberMarkup = this._createImageNumbersMarkup();
-        }
-        if (this.options.hasCopyLink) {
-            copyLinkMarkup = this._createCopyLinkMarkup();
-        }
-        return `
-            <div class="${cssClasses[cssGalleryBar]}">
-                ${imagesNumberMarkup}
-
-                ${imageDescriptionMarkup}
-
-                ${copyLinkMarkup}
-
-                <span class="${cssClasses[cssIcon]} ${cssClasses[cssIconClose]} ${cssClasses[cssGalleryBarImageClose]} ${JS_CLASSES.close}"></span>
-            </div>
-        `;
-    }
-    _createImageNumbersMarkup() {
-        return `
-            <div class="${cssClasses[cssGalleryBarImageNumbers]}">
-                <span class="${JS_CLASSES.selectedImageNumber}">
-                    ${this.selectedImageNumber}
-                </span> / ${this.imagesCount}
-            </div>
-        `;
-    }
-    _createCopyLinkMarkup() {
-        const { copyLink, picture, copyLinkShortVersion, copyLinkConfirmation } = this.options.translations;
-        return `
-            <div class="${cssClasses[cssGalleryBarCopyLink]} ${JS_CLASSES.copyLinkButton}">
-                <span class="${cssClasses[cssIcon]} ${cssClasses[cssIconLink]} ${cssClasses[cssHideMobile]}"></span>
-                <span class="${cssClasses[cssHideDesktop]}">${copyLinkShortVersion}</span>
-                <span class="${cssClasses[cssHideMobile]}">
-                    ${copyLink} (${picture} <span class="${JS_CLASSES.selectedImageNumber}">${this.selectedImageNumber}</span>)
-                </span>
-                
-                <div class="${cssClasses[cssHide]} ${cssClasses[cssGalleryBarCopyLinkConfirmation]}">
-                    <span class="${cssClasses[cssIcon]} ${cssClasses[cssIconSuccess]}"></span>
-
-                    <div class="${cssClasses[cssGalleryBarCopyLinkConfirmationText]}">
-                        ${copyLinkConfirmation}
-                    </div>
-                </div>
-            </div>
-        `;
-    }
-    _createNavigationMarkup(arrowType) {
-        let arrowClasses = `${cssClasses[cssIcon]} ${cssClasses[cssIconArrow]}`;
-        let arrowContainerClasses = `${cssClasses[cssIconArrowContainer]} ${JS_CLASSES[arrowType]}`;
-        const isPreviousArrow = arrowType === 'previous';
-        if (isPreviousArrow) {
-            arrowClasses += ` ${cssClasses[cssIconArrowRotate180]}`;
-            arrowContainerClasses += ` ${cssClasses[cssIconArrowContainerPrevious]}`;
-            const isFirstImage = this.selectedImageNumber === 1;
-            if (isFirstImage && !this.options.isCarouselEnabled) {
-                arrowContainerClasses += ` ${cssClasses[cssHide]}`;
-            }
-        }
-        else {
-            arrowContainerClasses += ` ${cssClasses[cssIconArrowContainerNext]}`;
-            const isLastImage = this.selectedImageNumber === this.imagesCount;
-            if (isLastImage && !this.options.isCarouselEnabled) {
-                arrowContainerClasses += ` ${cssClasses[cssHide]}`;
-            }
-        }
-        return `
-            <div class="${arrowContainerClasses}">
-                <span class="${arrowClasses}"></span>
-            </div>
-        `;
-    }
-    _createImageMarkup(imageIndex, source) {
-        const $imageContainer = document.createElement('div');
-        $imageContainer.classList.add(cssClasses[cssGalleryImageContainer]);
-        $imageContainer.style.overflow = 'hidden';
-        const barHeight = this.$bar.clientHeight;
-        const containerHeight = window.innerHeight - barHeight;
-        $imageContainer.style.height = containerHeight + 'px';
-        const $loader = document.createElement('span');
-        $loader.classList.add(cssClasses[cssLoaderMask]);
-        const $image = document.createElement('img');
-        const { maxWidthClass, maxHeightClass, adjustedClass } = this.getImageClasses(imageIndex);
-        // 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;
-    }
-    appendImages() {
-        this.newImagesIndex.sort(this.sortAscending).forEach((index) => {
-            const $markup = this.imageMarkups[index];
-            if (this.createdImagesIndex.length !== 0) {
-                const lowerIndex = this.getClosestLowerIndex(this.createdImagesIndex, index);
-                if (lowerIndex != null) {
-                    const lowerIndexImages = document.querySelectorAll(`[src='${this.imageAttributes[lowerIndex].source}']`);
-                    lowerIndexImages.forEach((image) => {
-                        if (image.classList.contains(JS_CLASSES.image)) {
-                            const $lowerIndexImage = image;
-                            const $lowerIndexImageContainer = $lowerIndexImage.closest(this.selectors.imageContainer);
-                            if (!$lowerIndexImageContainer.classList.contains(JS_CLASSES.firstTemporaryContainer)) {
-                                $lowerIndexImageContainer.after($markup);
-                            }
-                        }
-                    });
-                }
-                else {
-                    const firstCreatedImageIndex = this.createdImagesIndex[0];
-                    const $firstImage = document.querySelector(`[src='${this.imageAttributes[firstCreatedImageIndex].source}']`);
-                    const $firstImageContainer = $firstImage.closest(this.selectors.imageContainer);
-                    $firstImageContainer.before($markup);
-                }
-            }
-            else {
-                this.$images.append($markup);
-            }
-            if (!this.createdImagesIndex.includes(index)) {
-                this.createdImagesIndex.push(index);
-                if (index === 0 && this.hasUserGoneToNextImage) {
-                    this.$images.classList.remove(cssClasses[cssGalleryImagesWithTransition]);
-                    this.$images.style.transform = `translateX(${this.transform - 100 + (this.partialTransform % 100)}%)`;
-                }
-            }
-            this.createdImagesIndex.sort(this.sortAscending);
-        });
-        this.newImagesIndex = [];
-        this.updateGridColumnStyles();
-    }
-    appendTemporaryImage(imageIndex) {
-        if (imageIndex === 0) {
-            this.isLastTemporaryContainerExist = true;
-            const $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);
-                this.$images.style.transform = `translateX(${this.transform}%)`;
-            }
-        }
-        else if (imageIndex === this.imagesCount - 1) {
-            this.isFirstTemporaryContainerExist = true;
-            const $temporaryMarkup = this._createImageMarkup(0, this.imageAttributes[0].source);
-            $temporaryMarkup.classList.add(JS_CLASSES.firstTemporaryContainer);
-            this.$images.append($temporaryMarkup);
-        }
-        this.updateGridColumnStyles();
-    }
-    addListeners() {
-        const $closeButton = document.querySelector(this.selectors.close);
-        $closeButton === null || $closeButton === void 0 ? void 0 : $closeButton.addEventListener('click', this.remove);
-        if (this.options.hasNavArrows && !this.isTouchDevice) {
-            const $nextButton = this.$gallery.querySelector(this.selectors.next);
-            const $previousButton = this.$gallery.querySelector(this.selectors.previous);
-            $nextButton === null || $nextButton === void 0 ? void 0 : $nextButton.addEventListener('click', this.handleNextImagePreview);
-            $previousButton === null || $previousButton === void 0 ? void 0 : $previousButton.addEventListener('click', this.handlePreviousImagePreview);
-        }
-        this.addWindowListeners();
-        window.addEventListener('popstate', this.removeWindowListeners);
-        const $imagesContainer = document.querySelector(this.selectors.imagesContainer);
-        $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('mousedown', (ev) => {
-            this.mouseDownTarget = ev.target;
-        });
-        $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('mouseup', (ev) => {
-            this.mouseUpTarget = ev.target;
-            this.previousCursorX = 0;
-            this.previousCursorY = 0;
-        });
-        if (!this.isTouchDevice) {
-            $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('click', (ev) => {
-                if (this.mouseDownTarget === this.mouseUpTarget) {
-                    const $targetElement = ev.target;
-                    const isImage = $targetElement.tagName === 'IMG';
-                    const isArrowContainer = $targetElement.closest(this.selectors.arrowContainer) != null;
-                    if (!isImage && !isArrowContainer) {
-                        this.remove(ev);
-                    }
-                }
-            });
-        }
-        if (this.options.hasCopyLink) {
-            const $copyLink = document.querySelector(this.selectors.copyLinkButton);
-            $copyLink.addEventListener('click', () => {
-                const galleryUrl = getUrl(this.options.name, this.selectedImageNumber);
-                copy(`${galleryUrl}-copied`);
-                const $copyLinkConfirmation = document.querySelector(this.selectors.copyLinkConfirmation);
-                $copyLinkConfirmation.classList.remove(cssClasses[cssHide]);
-                setTimeout(() => {
-                    $copyLinkConfirmation === null || $copyLinkConfirmation === void 0 ? void 0 : $copyLinkConfirmation.classList.add(cssClasses[cssHide]);
-                }, 1500);
-            });
-        }
-    }
-    handlePanAndWheel($image, imageIndex, ev) {
-        if (ev instanceof WheelEvent) {
-            ev.preventDefault();
-        }
-        const $container = $image.closest(this.selectors.imageContainer);
-        const containerHeight = $container.offsetHeight;
-        const deltaY = ev instanceof WheelEvent ? -ev.deltaY : ev.deltaY;
-        const newTranslateX = -(ev.deltaX + this.imageAttributes[imageIndex].transX);
-        const newTranslateY = -(deltaY + this.imageAttributes[imageIndex].transY);
-        const { availableTranslateX, availableTranslateY } = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY);
-        $image.style.transform = `translate3d(${availableTranslateX * -1}px, ${availableTranslateY * -1}px, 0)`;
-        if (ev.type === 'panend') {
-            this.imageAttributes[imageIndex].transX = -availableTranslateX;
-            this.imageAttributes[imageIndex].transY = -availableTranslateY;
-        }
-        if (ev.type === 'wheel') {
-            const absoluteDeltaY = Math.abs(ev.deltaY);
-            if (absoluteDeltaY >= this.imageAttributes[imageIndex].delta) {
-                this.imageAttributes[imageIndex].delta = absoluteDeltaY;
-                this.imageAttributes[imageIndex].transX = -availableTranslateX;
-                this.imageAttributes[imageIndex].transY = -availableTranslateY;
-            }
-            else {
-                this.imageAttributes[imageIndex].delta = 0;
-            }
-        }
-    }
-    handlePinch($image, imageIndex, imageHammer, imageContainerHammer, ev) {
-        if (ev.type === 'pinchstart') {
-            $image.style.height = '';
-            $image.style.width = '';
-            this.imageAttributes[imageIndex].left = $image.getBoundingClientRect().left;
-            this.imageAttributes[imageIndex].top = $image.getBoundingClientRect().top;
-            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 });
-        const { maxImageHeight, initialWidth, initialHeight } = this.imageAttributes[imageIndex];
-        this.imageAttributes[imageIndex].currentScale = Math.max(1, Math.min(this.imageAttributes[imageIndex].scale * ev.scale, maxImageHeight / initialHeight));
-        const { currentScale } = this.imageAttributes[imageIndex];
-        $image.style.maxWidth = `${initialWidth * currentScale}px`;
-        $image.style.maxHeight = `${initialHeight * currentScale}px`;
-        const $container = $image.closest(this.selectors.imageContainer);
-        const { translateX, translateY } = this.getTranslate($container, imageIndex);
-        this.imageAttributes[imageIndex].transX = -translateX;
-        this.imageAttributes[imageIndex].transY = -translateY;
-        if (ev.type === 'pinchend') {
-            if (currentScale === 1) {
-                imageContainerHammer.get('pan').set({ enable: true });
-                imageHammer.get('pan').set({ enable: false });
-                $image.style.maxWidth = '';
-                $image.style.maxHeight = '';
-                $image.classList.add(cssClasses[cssGalleryImageAdjusted]);
-                this.options.mode = GALLERY_MODE.fullScreen;
-            }
-            else {
-                imageHammer.get('pan').set({ enable: true });
-                $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(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-    }
-    changeSelectedImageModeToMaxImage($image, imageIndex, ev) {
-        this.options.mode = GALLERY_MODE.maxImage;
-        let eventCenterX;
-        let eventCenterY;
-        if (ev instanceof MouseEvent) {
-            eventCenterX = ev.clientX;
-            eventCenterY = ev.clientY;
-        }
-        else {
-            eventCenterX = ev.center.x;
-            eventCenterY = ev.center.y;
-        }
-        const { maxImageHeight, initialHeight } = this.imageAttributes[imageIndex];
-        this.imageAttributes[imageIndex] = {
-            ...this.imageAttributes[imageIndex],
-            currentScale: maxImageHeight / initialHeight,
-            scale: maxImageHeight / initialHeight,
-            left: $image.getBoundingClientRect().left,
-            top: $image.getBoundingClientRect().top,
-            eventCenterX,
-            eventCenterY
-        };
-        const $container = $image.closest(this.selectors.imageContainer);
-        const { translateX, translateY } = this.getTranslate($container, imageIndex);
-        this.imageAttributes[imageIndex] = {
-            ...this.imageAttributes[imageIndex],
-            transX: -translateX,
-            transY: -translateY,
-            initialScale: maxImageHeight / initialHeight
-        };
-        $container.style.overflow = 'hidden';
-        $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-        $image.classList.add(cssClasses[cssZoomOut]);
-        $image.classList.remove(cssClasses[cssZoomIn]);
-        $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
-        $image.style.height = maxImageHeight + 'px';
-        $image.style.width = '';
-    }
-    changeSelectedImageModeToFullScreen($image, imageIndex, ev) {
-        const isDragging = this.imageAttributes[imageIndex].isDragging;
-        if (isDragging && ev instanceof MouseEvent) {
-            this.imageAttributes[imageIndex].isDragging = false;
-            $image.classList.remove(cssClasses[cssGrabbing]);
-            $image.classList.add(cssClasses[cssZoomOut]);
-        }
-        else {
-            this.options.mode = GALLERY_MODE.fullScreen;
-            $image.style.maxWidth = '';
-            $image.style.maxHeight = '';
-            this.imageAttributes[imageIndex] = {
-                ...this.imageAttributes[imageIndex],
-                transX: 0,
-                transY: 0,
-                scale: 1,
-                initialScale: 1,
-                currentScale: 1
-            };
-            $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-            $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
-            $image.classList.remove(cssClasses[cssZoomOut]);
-            $image.classList.add(cssClasses[cssZoomIn]);
-            this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
-        }
-    }
-    getTranslate($container, imageIndex) {
-        const { initialWidth, initialHeight, top, left, eventCenterX, eventCenterY, initialScale, currentScale } = this.imageAttributes[imageIndex];
-        const containerHeight = $container.offsetHeight;
-        const containerWidth = $container.offsetWidth;
-        const zoomImageX = (currentScale * (eventCenterX - left)) / initialScale;
-        const zoomImageY = (currentScale * (eventCenterY - top)) / initialScale;
-        const updatedEventCenterY = eventCenterY - $container.getBoundingClientRect().top;
-        let translateX;
-        if (initialWidth * currentScale <= containerWidth) {
-            translateX = 0;
-        }
-        else {
-            translateX = zoomImageX - eventCenterX;
-        }
-        let translateY;
-        if (initialHeight * currentScale <= containerHeight) {
-            translateY = 0;
-        }
-        else {
-            translateY = zoomImageY - updatedEventCenterY;
-        }
-        const width = initialWidth * currentScale;
-        const height = initialHeight * currentScale;
-        const { availableTranslateX, availableTranslateY } = this.getAvailableTranslate(width, height, containerHeight, translateX, translateY);
-        return {
-            translateX: availableTranslateX,
-            translateY: availableTranslateY
-        };
-    }
-    getAvailableTranslate(imageWidth, imageHeight, containerHeight, translateX, translateY) {
-        const maxPositionX = Math.abs(imageWidth - window.innerWidth);
-        const 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
-        };
-    }
-    getImageClasses(imageIndex) {
-        const classes = {
-            maxWidthClass: '',
-            maxHeightClass: '',
-            adjustedClass: ''
-        };
-        if (this.isTouchDevice || this.isFullScreenMode()) {
-            classes.adjustedClass = cssClasses[cssGalleryImageAdjusted];
-        }
-        else if (this.isShortestEdgeMode()) {
-            const windowWidth = window.innerWidth;
-            const imageWidth = this.imageAttributes[imageIndex].maxImageWidth;
-            const { shorterEdge, maxImageHeight } = this.imageAttributes[imageIndex];
-            if (shorterEdge === 'width') {
-                const isImageWiderThanWindowWidth = imageWidth > windowWidth;
-                if (isImageWiderThanWindowWidth) {
-                    classes.maxWidthClass = cssClasses[cssGalleryImageMaxWidth];
-                }
-            }
-            else {
-                const barHeight = this.$bar.clientHeight;
-                const containerHeight = window.innerHeight - barHeight;
-                const isImageHigherThanContainerHeight = maxImageHeight > containerHeight;
-                if (isImageHigherThanContainerHeight) {
-                    classes.maxHeightClass = cssClasses[cssGalleryImageMaxHeight];
-                }
-            }
-        }
-        return classes;
-    }
-    centerImage($image) {
-        const $container = $image.closest(this.selectors.imageContainer);
-        const containerHeight = $container.offsetHeight;
-        const imageIndex = this.imageAttributes.findIndex((imageAttributes) => imageAttributes.source === $image.currentSrc);
-        const { maxImageHeight, maxImageWidth } = this.imageAttributes[imageIndex];
-        $image.classList.add(cssClasses[cssZoomOut]);
-        $image.classList.remove(cssClasses[cssZoomIn]);
-        this.imageAttributes[imageIndex].eventCenterX = window.innerWidth / 2;
-        this.imageAttributes[imageIndex].eventCenterY = containerHeight / 2;
-        const translateX = (maxImageWidth - window.innerWidth) / 2;
-        const translateY = (maxImageHeight - containerHeight) / 2;
-        const { availableTranslateX, availableTranslateY } = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, translateX, translateY);
-        this.imageAttributes[imageIndex].transX = -availableTranslateX;
-        this.imageAttributes[imageIndex].transY = -availableTranslateY;
-        $image.style.transform = `translate3d(${this.imageAttributes[imageIndex].transX}px, ${this.imageAttributes[imageIndex].transY}px, 0)`;
-        $image.classList.remove(cssClasses[cssGalleryImageAdjusted]);
-    }
-    changeImagesMode() {
-        const $images = document.querySelectorAll(this.selectors.image);
-        $images.forEach(($image, imageIndex) => {
-            let createdImageIndex = this.createdImagesIndex.findIndex((index) => index === this.selectedImageNumber - 1);
-            if (this.isLastTemporaryContainerExist) {
-                createdImageIndex += 1;
-            }
-            if (imageIndex !== createdImageIndex) {
-                this.changeImageMode($image);
-            }
-        });
-    }
-    getPreviousImageIndex() {
-        const isFirstImageSelected = this.selectedImageNumber === 1;
-        if (isFirstImageSelected) {
-            return this.options.isCarouselEnabled ? this.imagesCount - 1 : null;
-        }
-        return this.selectedImageNumber - 2;
-    }
-    getNextImageIndex() {
-        const isLastImageSelected = this.selectedImageNumber === this.imagesCount;
-        if (isLastImageSelected) {
-            return this.options.isCarouselEnabled ? 0 : null;
-        }
-        return this.selectedImageNumber;
-    }
-    changeImageNumber() {
-        const imageNumbers = document.querySelectorAll(this.selectors.selectedImageNumber);
-        imageNumbers.forEach(($imageNumber) => ($imageNumber.textContent = `${this.selectedImageNumber}`));
-    }
-    changeImageDescription() {
-        const imageDescription = document.querySelector(this.selectors.imageDescription);
-        imageDescription.textContent = this.imageAttributes[this.selectedImageNumber - 1].description;
-    }
-    getClosestLowerIndex(imageIndexes, imageIndex) {
-        const lowerIndexes = imageIndexes.filter((index) => index < imageIndex);
-        const lowerIndexesLength = lowerIndexes.length;
-        if (lowerIndexesLength) {
-            return lowerIndexes[lowerIndexesLength - 1];
-        }
-        return null;
-    }
-    isFullScreenMode() {
-        return this.options.mode === GALLERY_MODE.fullScreen;
-    }
-    isMaxImageMode() {
-        return this.options.mode === GALLERY_MODE.maxImage;
-    }
-    isShortestEdgeMode() {
-        return this.options.mode === GALLERY_MODE.shortestEdge;
-    }
-}
+/**
+ * Class representing gallery.
+ * @type {Gallery}
+ * @implements IGallery
+ */
+
+var Gallery = /*#__PURE__*/function () {
+  /**
+   * creates new gallery instance with custom gallery template
+   * @param {IGalleryOptions} options
+   */
+  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
+     * @param {string} object.initiallySelectedImageSrc - selected image's source
+     * @param {boolean} object.hasNavArrows - determines if gallery should have navigation arrows
+     * @param {boolean} object.hasImageNumbers - determines if gallery should have images numbers
+     * @param {boolean} object.hasThumbnails - determines if gallery should have thumbnails
+     * @param {string} object.mode - determines in which mode should gallery render
+     * @param {boolean} object.isCarouselEnabled - determines if images in gallery should changing in a loop
+     */
+    _defineProperty(this, "options", {
+      name: '',
+      initiallySelectedImageSrc: '',
+      hasNavArrows: true,
+      hasImageNumbers: true,
+      hasThumbnails: false,
+      mode: GALLERY_MODE.fullScreen,
+      isCarouselEnabled: true,
+      hasCopyLink: false,
+      translations: {
+        copyLink: 'Skopiuj link do galerii',
+        picture: 'Zdjęcie',
+        copyLinkShortVersion: 'Skopiuj link',
+        copyLinkConfirmation: 'Skopiowano link'
+      },
+      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),
+      image: ".".concat(JS_CLASSES.image),
+      imageContainer: ".".concat(cssClasses[cssGalleryImageContainer]),
+      selectedImageNumber: ".".concat(JS_CLASSES.selectedImageNumber),
+      imageDescription: ".".concat(JS_CLASSES.imageDescription),
+      previous: ".".concat(JS_CLASSES.previous),
+      next: ".".concat(JS_CLASSES.next),
+      images: ".".concat(JS_CLASSES.images),
+      imagesContainer: ".".concat(JS_CLASSES.imagesContainer),
+      copyLinkButton: ".".concat(JS_CLASSES.copyLinkButton),
+      copyLinkConfirmation: ".".concat(cssClasses[cssGalleryBarCopyLinkConfirmation]),
+      firstTemporaryContainer: ".".concat(JS_CLASSES.firstTemporaryContainer),
+      lastTemporaryContainer: ".".concat(JS_CLASSES.lastTemporaryContainer),
+      bar: ".".concat(cssClasses[cssGalleryBar]),
+      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;
+      });
+      imageRange.forEach(function (index) {
+        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();
+          }
+        } else {
+          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);
+      window.removeEventListener('reload', _this.remove);
+      _this.previouslySelectedImageNumber = _this.selectedImageNumber;
+      _this.popstateUpdate = true;
+    });
+
+    _defineProperty(this, "addImageListeners", function (imageIndex, $image, $imageContainer) {
+      var imageHammer = new Hammer($image, {
+        inputClass: Hammer.TouchInput
+      });
+      var imageContainerHammer = new Hammer($imageContainer, {
+        inputClass: Hammer.TouchInput
+      });
+      $image.addEventListener('touchend', function (ev) {
+        return ev.preventDefault();
+      });
+      imageHammer.get('pinch').set({
+        enable: true
+      });
+      imageHammer.get('pan').set({
+        enable: false
+      });
+      imageHammer.on('doubletap', function (ev) {
+        return _this.resizeImage($image, imageIndex, imageHammer, imageContainerHammer, ev);
+      });
+      imageHammer.on('panleft panright panup pandown panend', function (ev) {
+        return _this.handlePanAndWheel($image, imageIndex, ev);
+      });
+      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 () {
+        $imageContainer.removeEventListener('mousemove', mouseMoveBindFunction);
+      });
+      $imageContainer.addEventListener('mouseleave', function () {
+        return _this.handleMouseLeave($image, $imageContainer, imageIndex, mouseMoveBindFunction);
+      });
+      $imageContainer.addEventListener('wheel', function (ev) {
+        return _this.handlePanAndWheel($image, imageIndex, ev);
+      });
+      $image.addEventListener('click', function (ev) {
+        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;
+      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$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$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;
+
+      _this.imageAttributes[imageIndex].isDragging = true;
+      _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)");
+      $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 {
+            _this.handleNextImagePreview();
+          }
+        } else {
+          _this.isAnimating = true;
+
+          _this.$images.classList.add(cssClasses[cssGalleryImagesWithTransition]);
+
+          _this.$images.style.transform = "translateX(".concat(_this.transform, "%)");
+          setTimeout(function () {
+            _this.isAnimating = false;
+          }, 300);
+        }
+      }
+    });
+
+    _defineProperty(this, "resizeImage", function ($image, imageIndex, imageHammer, imageContainerHammer, ev) {
+      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({
+            enable: true
+          });
+          imageContainerHammer.get('pan').set({
+            enable: false
+          });
+        }
+
+        _this.changeSelectedImageModeToMaxImage($image, imageIndex, ev);
+
+        _this.changeImagesMode();
+      } else if (_this.isMaxImageMode()) {
+        if (imageHammer && imageContainerHammer) {
+          imageHammer.get('pan').set({
+            enable: false
+          });
+          imageContainerHammer.get('pan').set({
+            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);
+      var barHeight = _this.$bar.clientHeight;
+      $imageContainers.forEach(function ($container) {
+        $container.style.height = window.innerHeight - barHeight + 'px';
+      });
+      $images.forEach(function ($image) {
+        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;
+
+        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$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;
+        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;
+        });
+        imageRange.forEach(function (index) {
+          if (_this.imageMarkups[index] === null) {
+            _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;
+        } else {
+          _this.transform = -100 * createdImageIndex;
+        }
+      } else {
+        if (imageIndex === _this.imagesCount - 1) {
+          _this.transform = 0;
+        } else {
+          if (_this.transform % 100 !== 0) {
+            _this.transform -= _this.partialTransform % 100;
+          } else {
+            _this.transform += 100;
+          }
+        }
+      }
+
+      _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
+
+
+      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$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;
+      var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+
+      if (isOriginalImageBiggerThanContainer) {
+        if (_this.isFullScreenMode() || _this.isTouchDevice) {
+          $image.classList.add(cssClasses[cssZoomIn]);
+          $image.classList.remove(cssClasses[cssZoomOut]);
+          $image.style.maxWidth = '';
+          $image.style.maxHeight = '';
+          _this.imageAttributes[imageIndex] = _objectSpread2(_objectSpread2({}, _this.imageAttributes[imageIndex]), {}, {
+            transX: 0,
+            transY: 0,
+            scale: 1,
+            initialScale: 1,
+            currentScale: 1
+          });
+          $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 = '';
+        }
+      } else {
+        $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;
+      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;
+          attributes.initialHeight = calculatedHeight;
+        } else {
+          attributes.initialWidth = calculatedWidth;
+          attributes.initialHeight = containerHeight;
+        }
+      } else if (dimensionsType === DIMENSIONS_TYPE.real) {
+        if (imageAspectRatio < containerAspectRatio) {
+          $image.style.width = window.innerWidth + 'px';
+          $image.style.height = calculatedHeight + 'px';
+        } else {
+          $image.style.width = calculatedWidth + 'px';
+          $image.style.height = containerHeight + 'px';
+        }
+      }
+    });
+
+    _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();
+    this.initLocation = window.location;
+    JS_CLASSES.close = "js__gallery-".concat(this.options.name, "-close");
+    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,
+          maxImageWidth: 0,
+          maxImageHeight: 0,
+          shorterEdge: shorterEdge,
+          initialWidth: 0,
+          initialHeight: 0,
+          top: 0,
+          left: 0,
+          eventCenterX: 0,
+          eventCenterY: 0,
+          initialScale: 1,
+          currentScale: 1,
+          isDragging: false,
+          transX: 0,
+          transY: 0,
+          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;
+    }
+  }, {
+    key: "createMarkup",
+    value: function createMarkup() {
+      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 {
+        if (this.options.hasNavArrows && this.imagesCount > 1) {
+          previousArrowMarkup = this._createNavigationMarkup('previous');
+          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);
+      this.changeImageDescription();
+    }
+  }, {
+    key: "_createBarMarkup",
+    value: function _createBarMarkup() {
+      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        ");
+    }
+  }, {
+    key: "_createImageNumbersMarkup",
+    value: function _createImageNumbersMarkup() {
+      return "\n            <div class=\"".concat(cssClasses[cssGalleryBarImageNumbers], "\">\n                <span class=\"").concat(JS_CLASSES.selectedImageNumber, "\">\n                    ").concat(this.selectedImageNumber, "\n                </span> / ").concat(this.imagesCount, "\n            </div>\n        ");
+    }
+  }, {
+    key: "_createCopyLinkMarkup",
+    value: function _createCopyLinkMarkup() {
+      var _ref = this.options.translations,
+          copyLink = _ref.copyLink,
+          picture = _ref.picture,
+          copyLinkShortVersion = _ref.copyLinkShortVersion,
+          copyLinkConfirmation = _ref.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        ");
+    }
+  }, {
+    key: "_createNavigationMarkup",
+    value: function _createNavigationMarkup(arrowType) {
+      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        ");
+    }
+  }, {
+    key: "_createImageMarkup",
+    value: function _createImageMarkup(imageIndex, source) {
+      var $imageContainer = document.createElement('div');
+      $imageContainer.classList.add(cssClasses[cssGalleryImageContainer]);
+      $imageContainer.style.overflow = 'hidden';
+      var barHeight = this.$bar.clientHeight;
+      var containerHeight = window.innerHeight - barHeight;
+      $imageContainer.style.height = containerHeight + 'px';
+      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
+
+
+      $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);
+                }
+              }
+            });
+          } else {
+            var firstCreatedImageIndex = _this3.createdImagesIndex[0];
+            var $firstImage = document.querySelector("[src='".concat(_this3.imageAttributes[firstCreatedImageIndex].source, "']"));
+            var $firstImageContainer = $firstImage.closest(_this3.selectors.imageContainer);
+            $firstImageContainer.before($markup);
+          }
+        } 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 = [];
+      this.updateGridColumnStyles();
+    }
+  }, {
+    key: "appendTemporaryImage",
+    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;
+          this.$images.style.transform = "translateX(".concat(this.transform, "%)");
+        }
+      } 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);
+      $imagesContainer === null || $imagesContainer === void 0 || $imagesContainer.addEventListener('mousedown', function (ev) {
+        _this4.mouseDownTarget = ev.target;
+      });
+      $imagesContainer === null || $imagesContainer === void 0 || $imagesContainer.addEventListener('mouseup', function (ev) {
+        _this4.mouseUpTarget = ev.target;
+        _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 () {
+          var galleryUrl = getUrl(_this4.options.name, _this4.selectedImageNumber);
+          copy("".concat(galleryUrl, "-copied"));
+          var $copyLinkConfirmation = document.querySelector(_this4.selectors.copyLinkConfirmation);
+          $copyLinkConfirmation.classList.remove(cssClasses[cssHide]);
+          setTimeout(function () {
+            $copyLinkConfirmation === null || $copyLinkConfirmation === void 0 || $copyLinkConfirmation.classList.add(cssClasses[cssHide]);
+          }, 1500);
+        });
+      }
+    }
+  }, {
+    key: "handlePanAndWheel",
+    value: function handlePanAndWheel($image, imageIndex, ev) {
+      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$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;
+          this.imageAttributes[imageIndex].transY = -availableTranslateY;
+        } else {
+          this.imageAttributes[imageIndex].delta = 0;
+        }
+      }
+    }
+  }, {
+    key: "handlePinch",
+    value: function handlePinch($image, imageIndex, imageHammer, imageContainerHammer, ev) {
+      if (ev.type === 'pinchstart') {
+        $image.style.height = '';
+        $image.style.width = '';
+        this.imageAttributes[imageIndex].left = $image.getBoundingClientRect().left;
+        this.imageAttributes[imageIndex].top = $image.getBoundingClientRect().top;
+        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$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;
+
+      this.imageAttributes[imageIndex].transX = -translateX;
+      this.imageAttributes[imageIndex].transY = -translateY;
+
+      if (ev.type === 'pinchend') {
+        if (currentScale === 1) {
+          imageContainerHammer.get('pan').set({
+            enable: true
+          });
+          imageHammer.get('pan').set({
+            enable: false
+          });
+          $image.style.maxWidth = '';
+          $image.style.maxHeight = '';
+          $image.classList.add(cssClasses[cssGalleryImageAdjusted]);
+          this.options.mode = GALLERY_MODE.fullScreen;
+        } else {
+          imageHammer.get('pan').set({
+            enable: true
+          });
+          $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)");
+    }
+  }, {
+    key: "changeSelectedImageModeToMaxImage",
+    value: function changeSelectedImageModeToMaxImage($image, imageIndex, ev) {
+      this.options.mode = GALLERY_MODE.maxImage;
+      var eventCenterX;
+      var eventCenterY;
+
+      if (ev instanceof MouseEvent) {
+        eventCenterX = ev.clientX;
+        eventCenterY = ev.clientY;
+      } else {
+        eventCenterX = ev.center.x;
+        eventCenterY = ev.center.y;
+      }
+
+      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,
+        left: $image.getBoundingClientRect().left,
+        top: $image.getBoundingClientRect().top,
+        eventCenterX: eventCenterX,
+        eventCenterY: eventCenterY
+      });
+      var $container = $image.closest(this.selectors.imageContainer);
+
+      var _this$getTranslate2 = this.getTranslate($container, imageIndex),
+          translateX = _this$getTranslate2.translateX,
+          translateY = _this$getTranslate2.translateY;
+
+      this.imageAttributes[imageIndex] = _objectSpread2(_objectSpread2({}, this.imageAttributes[imageIndex]), {}, {
+        transX: -translateX,
+        transY: -translateY,
+        initialScale: maxImageHeight / initialHeight
+      });
+      $container.style.overflow = 'hidden';
+      $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
+      $image.classList.add(cssClasses[cssZoomOut]);
+      $image.classList.remove(cssClasses[cssZoomIn]);
+      $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
+      $image.style.height = maxImageHeight + 'px';
+      $image.style.width = '';
+    }
+  }, {
+    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]);
+        $image.classList.add(cssClasses[cssZoomOut]);
+      } else {
+        this.options.mode = GALLERY_MODE.fullScreen;
+        $image.style.maxWidth = '';
+        $image.style.maxHeight = '';
+        this.imageAttributes[imageIndex] = _objectSpread2(_objectSpread2({}, this.imageAttributes[imageIndex]), {}, {
+          transX: 0,
+          transY: 0,
+          scale: 1,
+          initialScale: 1,
+          currentScale: 1
+        });
+        $image.style.transform = "translate3d(".concat(this.imageAttributes[imageIndex].transX, "px, ").concat(this.imageAttributes[imageIndex].transY, "px, 0)");
+        $image.classList.toggle(cssClasses[cssGalleryImageAdjusted]);
+        $image.classList.remove(cssClasses[cssZoomOut]);
+        $image.classList.add(cssClasses[cssZoomIn]);
+        this.setImageDimensionsAccordingToAspectRatio($image, DIMENSIONS_TYPE.real);
+      }
+    }
+  }, {
+    key: "getTranslate",
+    value: function getTranslate($container, imageIndex) {
+      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$getAvailableTra5 = this.getAvailableTranslate(width, height, containerHeight, translateX, translateY),
+          availableTranslateX = _this$getAvailableTra5.availableTranslateX,
+          availableTranslateY = _this$getAvailableTra5.availableTranslateY;
+
+      return {
+        translateX: availableTranslateX,
+        translateY: availableTranslateY
+      };
+    }
+  }, {
+    key: "getAvailableTranslate",
+    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
+      };
+    }
+  }, {
+    key: "getImageClasses",
+    value: function getImageClasses(imageIndex) {
+      var classes = {
+        maxWidthClass: '',
+        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$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];
+          }
+        } else {
+          var barHeight = this.$bar.clientHeight;
+          var containerHeight = window.innerHeight - barHeight;
+          var isImageHigherThanContainerHeight = maxImageHeight > containerHeight;
+
+          if (isImageHigherThanContainerHeight) {
+            classes.maxHeightClass = cssClasses[cssGalleryImageMaxHeight];
+          }
+        }
+      }
+
+      return classes;
+    }
+  }, {
+    key: "centerImage",
+    value: function centerImage($image) {
+      var $container = $image.closest(this.selectors.imageContainer);
+      var containerHeight = $container.offsetHeight;
+      var imageIndex = this.imageAttributes.findIndex(function (imageAttributes) {
+        return imageAttributes.source === $image.currentSrc;
+      });
+      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$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)");
+      $image.classList.remove(cssClasses[cssGalleryImageAdjusted]);
+    }
+  }, {
+    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);
+        }
+      });
+    }
+  }, {
+    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);
+      });
+    }
+  }, {
+    key: "changeImageDescription",
+    value: function changeImageDescription() {
+      var imageDescription = document.querySelector(this.selectors.imageDescription);
+      imageDescription.textContent = this.imageAttributes[this.selectedImageNumber - 1].description;
+    }
+  }, {
+    key: "getClosestLowerIndex",
+    value: function getClosestLowerIndex(imageIndexes, imageIndex) {
+      var lowerIndexes = imageIndexes.filter(function (index) {
+        return index < imageIndex;
+      });
+      var lowerIndexesLength = lowerIndexes.length;
+
+      if (lowerIndexesLength) {
+        return lowerIndexes[lowerIndexesLength - 1];
+      }
+
+      return null;
+    }
+  }, {
+    key: "isFullScreenMode",
+    value: function isFullScreenMode() {
+      return this.options.mode === GALLERY_MODE.fullScreen;
+    }
+  }, {
+    key: "isMaxImageMode",
+    value: function isMaxImageMode() {
+      return this.options.mode === GALLERY_MODE.maxImage;
+    }
+  }, {
+    key: "isShortestEdgeMode",
+    value: function isShortestEdgeMode() {
+      return this.options.mode === GALLERY_MODE.shortestEdge;
+    }
+  }]);
+}();
 
 export default Gallery;
 //# sourceMappingURL=index.js.map