@dreamcommerce/aurora 0.3.18 → 0.3.21

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

@@ -0,0 +1,1126 @@
+import { __assign } from "tslib";
+import { DIMENSIONS_TYPE, GALLERY_MODE, JS_CLASSES } from './constants';
+import './types';
+import { checkIsTouchDevice, copy, getUrl, handleHistory } from './utilities';
+import { cssGallery, cssGalleryBar, cssGalleryBarCopyLink, cssGalleryBarCopyLinkConfirmation, cssGalleryBarCopyLinkConfirmationText, cssGalleryBarImageClose, cssGalleryBarImageDescription, cssGalleryBarImageNumbers, cssGalleryImage, cssGalleryImageAdjusted, cssGalleryImageContainer, cssGalleryImageMaxHeight, cssGalleryImageMaxWidth, cssGalleryImages, cssGalleryImagesContainer, cssGalleryImagesWithTransition, cssGalleryMobile, cssGrabbing, cssHide, cssHideDesktop, cssHideMobile, cssIcon, cssIconArrow, cssIconArrowContainer, cssIconArrowContainerNext, cssIconArrowContainerPrevious, cssIconArrowRotate180, cssIconClose, cssIconLink, cssIconSuccess, cssLoaderMask, cssZoomIn, cssZoomOut } from './css_classes';
+import Hammer from 'hammerjs';
+import cssClasses from '@auroraCss/gallery/main.module.less';
+/**
+ * Class representing gallery.
+ * @type {Gallery}
+ * @implements IGallery
+ */
+var Gallery = /** @class */ (function () {
+    /**
+     * creates new gallery instance with custom gallery template
+     * @param {IGalleryOptions} options
+     */
+    function Gallery(options) {
+        var _this = this;
+        /**
+         * @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: ".".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: ''
+        };
+        this.isFirstTemporaryContainerExist = false;
+        this.isLastTemporaryContainerExist = false;
+        this.hasUserGoneToNextImage = false;
+        this.popstateUpdate = false;
+        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);
+            });
+        };
+        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();
+        };
+        this.addWindowListeners = function () {
+            window.addEventListener('keydown', _this.keyBindings, true);
+            window.addEventListener('resize', _this.updatePreviewImage);
+            window.addEventListener('reload', _this.remove);
+        };
+        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;
+        };
+        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); });
+        };
+        this.handleMouseDown = function ($image, imageIndex, mouseMoveBindFunction) {
+            var _a = _this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, maxImageWidth = _a.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);
+        };
+        this.handleMouseLeave = function ($image, $imageContainer, imageIndex, mouseMoveBindFunction) {
+            $imageContainer.removeEventListener('mousemove', mouseMoveBindFunction);
+            if (_this.isMaxImageMode()) {
+                $image.classList.remove(cssClasses[cssGrabbing]);
+                var _a = _this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, maxImageWidth = _a.maxImageWidth;
+                var isOriginalImageBiggerThanContainer = maxImageHeight > $imageContainer.offsetHeight || maxImageWidth > window.innerWidth;
+                if (isOriginalImageBiggerThanContainer) {
+                    $image.classList.add(cssClasses[cssZoomOut]);
+                }
+            }
+        };
+        this.handleMouseMove = function ($image, imageIndex, $imageContainer, ev) {
+            var _a = _this.imageAttributes[imageIndex], transX = _a.transX, transY = _a.transY;
+            var newTranslateX, newTranslateY;
+            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;
+            }
+            newTranslateX = ev.movementX === undefined ? -(movementX + transX) : -(ev.movementX + transX);
+            newTranslateY = ev.movementY === undefined ? -(movementY + transY) : -(ev.movementY + transY);
+            var containerHeight = $imageContainer.offsetHeight;
+            var _b = _this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY), availableTranslateX = _b.availableTranslateX, availableTranslateY = _b.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]);
+        };
+        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);
+                }
+            }
+        };
+        this.resizeImage = function ($image, imageIndex, imageHammer, imageContainerHammer, ev) {
+            var _a = _this.imageAttributes[imageIndex], maxImageWidth = _a.maxImageWidth, maxImageHeight = _a.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();
+                }
+            }
+        };
+        this.hideLoader = function (ev) {
+            var _a, _b;
+            var $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 = 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.src; });
+                var imageIndex = _this.imageAttributes.findIndex(function (imageAttributes) { return imageAttributes.source === $image.src; });
+                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 _a = _this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, -transX, -transY), availableTranslateX = _a.availableTranslateX, availableTranslateY = _a.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)");
+                }
+            });
+        };
+        this.updateImageInfo = function ($image) {
+            var imageAttributes = _this.imageAttributes.find(function (attributes) { return attributes.source === $image.src; });
+            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);
+        };
+        this.updateGridColumnStyles = function () {
+            document.querySelectorAll(_this.selectors.imageContainer).forEach(function ($imageContainer, index) {
+                $imageContainer.style['msGridColumn'] = index + 1;
+            });
+        };
+        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;
+        };
+        this.handleTransitionEnd = function () {
+            var _a;
+            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 createdImageIndex = _this.createdImagesIndex.findIndex(function (index) { return index === _this.selectedImageNumber - 1; });
+                var $images = document.querySelectorAll(_this.selectors.image);
+                var $container = $images[createdImageIndex].closest(_this.selectors.imageContainer);
+                var containerHeight = $container.offsetHeight;
+                var _b = _this.imageAttributes[_this.previouslySelectedImageIndex], maxImageHeight = _b.maxImageHeight, maxImageWidth = _b.maxImageWidth;
+                var isOriginalImageBiggerThanContainer = maxImageHeight > containerHeight || maxImageWidth > window.innerWidth;
+                if (isOriginalImageBiggerThanContainer) {
+                    var previousCreatedImageIndex = _this.createdImagesIndex.findIndex(function (index) { return 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 = function ($image) {
+            var imageIndex = _this.imageAttributes.findIndex(function (imageAttributes) { return imageAttributes.source === $image.src; });
+            var attributes = _this.imageAttributes.find(function (imageAttributes) { return imageAttributes.source === $image.src; });
+            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] = __assign(__assign({}, _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';
+            }
+        };
+        this.setImageDimensionsAccordingToAspectRatio = function ($image, dimensionsType) {
+            var attributes = _this.imageAttributes.find(function (imageAttributes) { return imageAttributes.source === $image.src; });
+            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';
+                }
+            }
+        };
+        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]);
+            }
+        };
+        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);
+            }
+        };
+        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);
+            }
+        };
+        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();
+        };
+        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';
+        }
+    }
+    Gallery.prototype.setInitialImagesInfo = function () {
+        var _this = 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(_this.selectors.anchorImage);
+            var imageDescription = $image.dataset.imageDescription;
+            _this.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.src === _this.options.initiallySelectedImageSrc) {
+                _this.selectedImageNumber = _this.imageAttributes.length;
+                _this.previouslySelectedImageNumber = _this.selectedImageNumber;
+            }
+            _this.imageMarkups.push(null);
+        });
+        this.imagesCount = $images.length;
+    };
+    Gallery.prototype.createMarkup = function () {
+        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();
+    };
+    Gallery.prototype._createBarMarkup = function () {
+        var imagesNumberMarkup = '';
+        var copyLinkMarkup = '';
+        var imageDescriptionMarkup = "\n            <div class=\"".concat(cssClasses[cssGalleryBarImageDescription], " ").concat(JS_CLASSES.imageDescription, "\">\n            </div>\n        ");
+        if (this.options.hasImageNumbers) {
+            imagesNumberMarkup = this._createImageNumbersMarkup();
+        }
+        if (this.options.hasCopyLink) {
+            copyLinkMarkup = this._createCopyLinkMarkup();
+        }
+        return "\n            <div class=\"".concat(cssClasses[cssGalleryBar], "\">\n                ").concat(imagesNumberMarkup, "\n\n                ").concat(imageDescriptionMarkup, "\n\n                ").concat(copyLinkMarkup, "\n\n                <span class=\"").concat(cssClasses[cssIcon], " ").concat(cssClasses[cssIconClose], " ").concat(cssClasses[cssGalleryBarImageClose], " ").concat(JS_CLASSES.close, "\"></span>\n            </div>\n        ");
+    };
+    Gallery.prototype._createImageNumbersMarkup = function () {
+        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        ");
+    };
+    Gallery.prototype._createCopyLinkMarkup = function () {
+        var _a = this.options.translations, copyLink = _a.copyLink, picture = _a.picture, copyLinkShortVersion = _a.copyLinkShortVersion, copyLinkConfirmation = _a.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        ");
+    };
+    Gallery.prototype._createNavigationMarkup = function (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        ");
+    };
+    Gallery.prototype._createImageMarkup = function (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 _a = this.getImageClasses(imageIndex), maxWidthClass = _a.maxWidthClass, maxHeightClass = _a.maxHeightClass, adjustedClass = _a.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;
+    };
+    Gallery.prototype.appendImages = function () {
+        var _this = this;
+        this.newImagesIndex.sort(this.sortAscending).forEach(function (index) {
+            var $markup = _this.imageMarkups[index];
+            if (_this.createdImagesIndex.length !== 0) {
+                var lowerIndex = _this.getClosestLowerIndex(_this.createdImagesIndex, index);
+                if (lowerIndex != null) {
+                    var lowerIndexImages = document.querySelectorAll("[src='".concat(_this.imageAttributes[lowerIndex].source, "']"));
+                    lowerIndexImages.forEach(function (image) {
+                        if (image.classList.contains(JS_CLASSES.image)) {
+                            var $lowerIndexImage = image;
+                            var $lowerIndexImageContainer = $lowerIndexImage.closest(_this.selectors.imageContainer);
+                            if (!$lowerIndexImageContainer.classList.contains(JS_CLASSES.firstTemporaryContainer)) {
+                                $lowerIndexImageContainer.after($markup);
+                            }
+                        }
+                    });
+                }
+                else {
+                    var firstCreatedImageIndex = _this.createdImagesIndex[0];
+                    var $firstImage = document.querySelector("[src='".concat(_this.imageAttributes[firstCreatedImageIndex].source, "']"));
+                    var $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(".concat(_this.transform - 100 + (_this.partialTransform % 100), "%)");
+                }
+            }
+            _this.createdImagesIndex.sort(_this.sortAscending);
+        });
+        this.newImagesIndex = [];
+        this.updateGridColumnStyles();
+    };
+    Gallery.prototype.appendTemporaryImage = function (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();
+    };
+    Gallery.prototype.addListeners = function () {
+        var _this = this;
+        var $closeButton = document.querySelector(this.selectors.close);
+        $closeButton === null || $closeButton === void 0 ? 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 ? 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);
+        var $imagesContainer = document.querySelector(this.selectors.imagesContainer);
+        $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('mousedown', function (ev) {
+            _this.mouseDownTarget = ev.target;
+        });
+        $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('mouseup', function (ev) {
+            _this.mouseUpTarget = ev.target;
+            _this.previousCursorX = 0;
+            _this.previousCursorY = 0;
+        });
+        if (!this.isTouchDevice) {
+            $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('click', function (ev) {
+                if (_this.mouseDownTarget === _this.mouseUpTarget) {
+                    var $targetElement = ev.target;
+                    var isImage = $targetElement.tagName === 'IMG';
+                    var isArrowContainer = $targetElement.closest(_this.selectors.arrowContainer) != null;
+                    if (!isImage && !isArrowContainer) {
+                        _this.remove(ev);
+                    }
+                }
+            });
+        }
+        if (this.options.hasCopyLink) {
+            var $copyLink = document.querySelector(this.selectors.copyLinkButton);
+            $copyLink.addEventListener('click', function () {
+                var galleryUrl = getUrl(_this.options.name, _this.selectedImageNumber);
+                copy("".concat(galleryUrl, "-copied"));
+                var $copyLinkConfirmation = document.querySelector(_this.selectors.copyLinkConfirmation);
+                $copyLinkConfirmation.classList.remove(cssClasses[cssHide]);
+                setTimeout(function () {
+                    $copyLinkConfirmation === null || $copyLinkConfirmation === void 0 ? void 0 : $copyLinkConfirmation.classList.add(cssClasses[cssHide]);
+                }, 1500);
+            });
+        }
+    };
+    Gallery.prototype.handlePanAndWheel = function ($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 _a = this.getAvailableTranslate($image.width, $image.height, containerHeight, newTranslateX, newTranslateY), availableTranslateX = _a.availableTranslateX, availableTranslateY = _a.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;
+            }
+        }
+    };
+    Gallery.prototype.handlePinch = function ($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 _a = this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, initialWidth = _a.initialWidth, initialHeight = _a.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 _b = this.getTranslate($container, imageIndex), translateX = _b.translateX, translateY = _b.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)");
+    };
+    Gallery.prototype.changeSelectedImageModeToMaxImage = function ($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 _a = this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, initialHeight = _a.initialHeight;
+        this.imageAttributes[imageIndex] = __assign(__assign({}, 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 _b = this.getTranslate($container, imageIndex), translateX = _b.translateX, translateY = _b.translateY;
+        this.imageAttributes[imageIndex] = __assign(__assign({}, 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 = '';
+    };
+    Gallery.prototype.changeSelectedImageModeToFullScreen = function ($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] = __assign(__assign({}, 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);
+        }
+    };
+    Gallery.prototype.getTranslate = function ($container, imageIndex) {
+        var _a = this.imageAttributes[imageIndex], initialWidth = _a.initialWidth, initialHeight = _a.initialHeight, top = _a.top, left = _a.left, eventCenterX = _a.eventCenterX, eventCenterY = _a.eventCenterY, initialScale = _a.initialScale, currentScale = _a.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 _b = this.getAvailableTranslate(width, height, containerHeight, translateX, translateY), availableTranslateX = _b.availableTranslateX, availableTranslateY = _b.availableTranslateY;
+        return {
+            translateX: availableTranslateX,
+            translateY: availableTranslateY
+        };
+    };
+    Gallery.prototype.getAvailableTranslate = function (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
+        };
+    };
+    Gallery.prototype.getImageClasses = function (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 _a = this.imageAttributes[imageIndex], shorterEdge = _a.shorterEdge, maxImageHeight = _a.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;
+    };
+    Gallery.prototype.centerImage = function ($image) {
+        var $container = $image.closest(this.selectors.imageContainer);
+        var containerHeight = $container.offsetHeight;
+        var imageIndex = this.imageAttributes.findIndex(function (imageAttributes) { return imageAttributes.source === $image.src; });
+        var _a = this.imageAttributes[imageIndex], maxImageHeight = _a.maxImageHeight, maxImageWidth = _a.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 _b = this.getAvailableTranslate(maxImageWidth, maxImageHeight, containerHeight, translateX, translateY), availableTranslateX = _b.availableTranslateX, availableTranslateY = _b.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]);
+    };
+    Gallery.prototype.changeImagesMode = function () {
+        var _this = this;
+        var $images = document.querySelectorAll(this.selectors.image);
+        $images.forEach(function ($image, imageIndex) {
+            var createdImageIndex = _this.createdImagesIndex.findIndex(function (index) { return index === _this.selectedImageNumber - 1; });
+            if (_this.isLastTemporaryContainerExist) {
+                createdImageIndex += 1;
+            }
+            if (imageIndex !== createdImageIndex) {
+                _this.changeImageMode($image);
+            }
+        });
+    };
+    Gallery.prototype.getPreviousImageIndex = function () {
+        var isFirstImageSelected = this.selectedImageNumber === 1;
+        if (isFirstImageSelected) {
+            return this.options.isCarouselEnabled ? this.imagesCount - 1 : null;
+        }
+        return this.selectedImageNumber - 2;
+    };
+    Gallery.prototype.getNextImageIndex = function () {
+        var isLastImageSelected = this.selectedImageNumber === this.imagesCount;
+        if (isLastImageSelected) {
+            return this.options.isCarouselEnabled ? 0 : null;
+        }
+        return this.selectedImageNumber;
+    };
+    Gallery.prototype.changeImageNumber = function () {
+        var _this = this;
+        var imageNumbers = document.querySelectorAll(this.selectors.selectedImageNumber);
+        imageNumbers.forEach(function ($imageNumber) { return ($imageNumber.textContent = "".concat(_this.selectedImageNumber)); });
+    };
+    Gallery.prototype.changeImageDescription = function () {
+        var imageDescription = document.querySelector(this.selectors.imageDescription);
+        imageDescription.textContent = this.imageAttributes[this.selectedImageNumber - 1].description;
+    };
+    Gallery.prototype.getClosestLowerIndex = function (imageIndexes, imageIndex) {
+        var lowerIndexes = imageIndexes.filter(function (index) { return index < imageIndex; });
+        var lowerIndexesLength = lowerIndexes.length;
+        if (lowerIndexesLength) {
+            return lowerIndexes[lowerIndexesLength - 1];
+        }
+        return null;
+    };
+    Gallery.prototype.isFullScreenMode = function () {
+        return this.options.mode === GALLERY_MODE.fullScreen;
+    };
+    Gallery.prototype.isMaxImageMode = function () {
+        return this.options.mode === GALLERY_MODE.maxImage;
+    };
+    Gallery.prototype.isShortestEdgeMode = function () {
+        return this.options.mode === GALLERY_MODE.shortestEdge;
+    };
+    return Gallery;
+}());
+export default Gallery;
+//# sourceMappingURL=index.js.map