@dreamcommerce/aurora 0.3.4-19 → 0.3.4-193

package/build/components/gallery/index.js

@@ -1,718 +0,0 @@
-import Hammer from 'hammerjs';
-import './types';
-import styles from '@css/gallery/main.module.less';
-// todo: @miguelagol uwagi ogolne
-// 1. przeniesc nazwy klasy do css_classes.ts jako stale
-// 2. opcja thumbnails nic nei robi?
-// 3. otwarcie galerii powinno odbywac sie na miniaturce zdjecia i otwierac docelowe zdjecie (dzieki temu nie ladujemy od razu wielkich fot)
-//      przyklad:
-//      <a href="/img/img_full.png">
-//          <img src="/img/img_50x50.png" />
-//      </a>
-// dzieki temu na hover elementu a mozemy zrobic preload duzego obrazka, po kliknieciu w a otwieramy w galerii img_full
-// 4. skoro operujemy w klasie Gallery nie ma sensu nadawac zmiennym, funkcjom dodatkowo prefixu "gallery", wystarczy name zamiast galleryName, remove zamiast galleryRemove itp itd
-// 5. brakuje metody showImage(? nazwa niewazne), ktora pozwolilaby na wyswietlenie (przeskoczenie do) obrazka o danym parametzre np pozycji zeby nie trzeba bylo nadawac im specjalnie identyfikatorow
-//      przyklad uzycia:
-//      const modalInstance = new Gallery({
-//          galleryName: 'test',
-//          selectedImageSrc: '/img/test.png'
-//      })
-//      await modalInstance.showImage(2);
-//      await modalInstance.showImage(5);
-// otwiera najpierw 2 potem 5 obrazek, await zeby czekalo na wykonanie animacji
-// dzieki temu logika handleNextImagePreview i handlePreviousImagePreview sprowadzalby sie do policzenia ktory element jest nastepny i wyswietleniu go
-// handleNextImagePreview () {
-//     const isLastImage = this.selectedImageNumber === (this.imagesCount - 1);
-//     const nextImageIndex = isLastImage ? 0 : (this.selectedImageNumber + 1)
-//     this.showImage(nextImageIndex);
-// }
-// handlePreviousImagePreview () {
-//     const isFirstImage = this.selectedImageNumber === 0;
-//     const previousImageIndex = isFirstImage ? (this.imagesCount - 1) : (this.selectedImageNumber + 1);
-//     this.showImage(previousImageIndex);
-// }
-// 6. "wlaczenie" przyblizanie/oddalenia imga powinno byc osobna metoda
-// todo: @miguelagol przenisc do pliku constants, breakpointy skorzystac z src/constants/responsive_breakpoints.ts
-var BREAKPOINT = 480;
-var SCROLL_SIZE = 7;
-/**
- * Class representing gallery.
- * @type {Gallery}
- * @implements IGallery
- */
-var Gallery = /** @class */ (function () {
-    /**
-     * creates new gallery instance with custom gallery template
-     * @param {GalleryOptions} options
-     */
-    function Gallery(options) {
-        var _this = this;
-        /**
-         * @param {GalleryOptions} object
-         * @param {string} object.galleryName - gallery name
-         * @param {string} object.selectedImageSrc - selected image's source
-         * @param {boolean} object.navArrows - determines if gallery should have navigation arrows
-         * @param {boolean} object.imagesNumbers - determines if gallery should have images numbers
-         * @param {boolean} object.thumbnails - determines if gallery should have thumbnails
-         * @param {string} object.mode - determines in which mode should gallery render
-         * @param {boolean} object.carousel - determines if main images should changing in a loop
-         */
-        this.options = {
-            // todo: @miguelagol prefix gallery zbedny
-            galleryName: '',
-            // todo: ta nazwa zmiennej do zmiany, bo to wcale nie src wybraego obrazka, a src poczatkowo kliknieto obrazka
-            selectedImageSrc: '',
-            // todo: hasNavArrows
-            navArrows: true,
-            // todo: hasImageNumbers
-            imagesNumbers: true,
-            // todo: hasThumbnails
-            thumbnails: false,
-            mode: 'shortestEdge',
-            // todo: isCarouselEnabled
-            carousel: true
-        };
-        // todo: imageAttributes
-        this.imagesAttributes = [];
-        // todo: imageMarkups
-        this.imagesMarkups = [];
-        this.transform = 0;
-        this.mediaQueries = window.matchMedia("(min-width: " + BREAKPOINT + "px)");
-        this.selectors = {
-            mainImage: '.js__gallery-image',
-            selectedImageNumber: '.js__gallery-selected-image-number',
-            previousButton: '.js__gallery-previous',
-            nextButton: '.js__gallery-next',
-            images: '.js__gallery-images',
-            imagesContainer: '.js__gallery-images-container'
-        };
-        this.transX = 0;
-        this.transY = 0;
-        this.scale = 1;
-        this.updateDimensions = function () {
-            var $mainImages = document.querySelectorAll(_this.selectors.mainImage);
-            var $imageContainers = document.querySelectorAll("." + styles['gallery__main-image-container']);
-            // todo: czasami robisz <HTMLDivElement>document.querySelector(), czasami document.querySelector() as HTMLDivElement, to samo - inny zapis ;)
-            var $galleryBar = document.querySelector("." + styles['gallery-bar_top']);
-            var galleryBarHeight = $galleryBar.clientHeight;
-            $imageContainers.forEach(function ($container) {
-                if (_this.mediaQueries.matches) {
-                    $container.style.height = window.innerHeight - galleryBarHeight + 'px';
-                }
-                else {
-                    $container.style.height = window.innerHeight - 2 * galleryBarHeight + 'px';
-                }
-            });
-            $mainImages.forEach(function ($image) {
-                var attributes = _this.imagesAttributes.filter(function (imageAttributes) { return imageAttributes.source == $image.src; })[0];
-                var shorterEdge = attributes.shorterEdge;
-                var windowWidth = window.innerWidth;
-                var imageWidth = attributes.width;
-                var isImageWider = imageWidth > windowWidth;
-                var isMobileView = windowWidth < BREAKPOINT;
-                if (isMobileView) {
-                    if (!$image.classList.contains(styles['gallery__main-image_mobile'])) {
-                        $image.classList.add(styles['gallery__main-image_mobile']);
-                    }
-                    $image.classList.remove(styles['gallery__main-image_max-width'], styles['gallery__main-image_max-height']);
-                }
-                else {
-                    $image.classList.remove(styles['gallery__main-image_mobile']);
-                    if (shorterEdge == 'width') {
-                        if (isImageWider) {
-                            if (!$image.classList.contains(styles['gallery__main-image_max-width'])) {
-                                $image.classList.add(styles['gallery__main-image_max-width']);
-                            }
-                        }
-                        else {
-                            if ($image.width != imageWidth) {
-                                $image.classList.remove(styles['gallery__main-image_max-width']);
-                            }
-                        }
-                    }
-                    else {
-                        // todo: isMobileView zdefiniowane wyzej potrzebne drugi raz?
-                        var isMobileView_1 = windowWidth < BREAKPOINT;
-                        // todo: jw. z as HTMLDivElement
-                        var $galleryBar_1 = document.querySelector("." + styles['gallery-bar_top']);
-                        var galleryBarHeight_1 = $galleryBar_1.clientHeight;
-                        var windowHeight = isMobileView_1 ? window.innerHeight - 2 * galleryBarHeight_1 : window.innerHeight - galleryBarHeight_1;
-                        var imageHeight = attributes.height;
-                        if (isImageWider) {
-                            windowHeight -= SCROLL_SIZE;
-                        }
-                        var isWindowHigher = windowHeight > imageHeight;
-                        if (isWindowHigher) {
-                            if ($image.height != imageHeight) {
-                                $image.classList.remove(styles['gallery__main-image_max-height']);
-                            }
-                        }
-                        else {
-                            if (!$image.classList.contains(styles['gallery__main-image_max-height'])) {
-                                $image.classList.add(styles['gallery__main-image_max-height']);
-                            }
-                        }
-                    }
-                }
-            });
-        };
-        this.removeGallery = function (ev) {
-            document.body.style.overflow = 'auto';
-            _this.$gallery.remove();
-            window.removeEventListener('resize', _this.updateDimensions);
-            window.removeEventListener('popstate', _this.removeGallery);
-            window.removeEventListener('keydown', _this.keyBindings, true);
-            if (ev.target != window) {
-                history.back();
-            }
-        };
-        this.handleNextImagePreview = function () {
-            if (_this.options.carousel) {
-                _this.selectedImageNumber =
-                    _this.selectedImageNumber === _this.imagesCount
-                        ? (_this.selectedImageNumber = 1)
-                        : (_this.selectedImageNumber = _this.selectedImageNumber + 1);
-                _this.isNextImage = _this.hasNextImage();
-                _this.isPreviousImage = _this.hasPreviousImage();
-                var nextImageIndex = _this.selectedImageNumber === _this.imagesCount ? 0 : _this.selectedImageNumber;
-                var isNextImageMarkupExist = _this.imagesMarkups[nextImageIndex] !== null;
-                if (isNextImageMarkupExist && !_this.isNextImage) {
-                    var imagesMarkupCount = _this.imagesMarkups.filter(function (imageMarkup) { return imageMarkup !== null; }).length;
-                    _this.transform = (imagesMarkupCount - 1) * -100;
-                }
-                else {
-                    var imagesMarkupCount_1 = 0;
-                    _this.imagesMarkups[nextImageIndex] = _this.createImageMarkup(nextImageIndex, _this.imagesAttributes[nextImageIndex].source);
-                    _this.$imagesContainer.innerHTML = '';
-                    _this.imagesMarkups.forEach(function (markup) {
-                        if (markup !== null) {
-                            _this.$imagesContainer.append(markup);
-                            imagesMarkupCount_1 += 1;
-                        }
-                    });
-                    if (!_this.isNextImage) {
-                        _this.transform = -(imagesMarkupCount_1 - 1) * 100;
-                    }
-                }
-                if (_this.isNextImage) {
-                    if (_this.selectedImageNumber !== 1) {
-                        _this.transform -= 100;
-                    }
-                    else {
-                        _this.transform = 0;
-                    }
-                }
-            }
-            else {
-                if (_this.isNextImage) {
-                    var nextButton = _this.$gallery.querySelector(_this.selectors.nextButton);
-                    var previousButton = _this.$gallery.querySelector(_this.selectors.previousButton);
-                    _this.selectedImageNumber += 1;
-                    _this.isNextImage = _this.hasNextImage();
-                    _this.isPreviousImage = _this.hasPreviousImage();
-                    _this.transform -= 100;
-                    if (_this.isPreviousImage) {
-                        previousButton.classList.remove(styles.icon_inactive);
-                    }
-                    if (!_this.isNextImage) {
-                        nextButton.classList.add(styles.icon_inactive);
-                    }
-                    else {
-                        if (_this.imagesMarkups[_this.selectedImageNumber] == null) {
-                            _this.imagesMarkups[_this.selectedImageNumber] = _this.createImageMarkup(_this.selectedImageNumber, _this.imagesAttributes[_this.selectedImageNumber].source);
-                            _this.$imagesContainer.append(_this.imagesMarkups[_this.selectedImageNumber]);
-                        }
-                    }
-                }
-            }
-            _this.$imagesContainer.style.transform = "translateX(" + _this.transform + "%)";
-            _this.changeImageNumber();
-        };
-        this.handlePreviousImagePreview = function () {
-            if (_this.options.carousel) {
-                _this.selectedImageNumber = _this.selectedImageNumber === 1 ? _this.imagesCount : _this.selectedImageNumber - 1;
-                _this.isNextImage = _this.hasNextImage();
-                _this.isPreviousImage = _this.hasPreviousImage();
-                if (_this.isPreviousImage) {
-                    var previousImageIndex_1 = _this.selectedImageNumber - 2;
-                    var isPreviousImageMarkupExist = _this.imagesMarkups[previousImageIndex_1] !== null;
-                    if (isPreviousImageMarkupExist) {
-                        if (_this.selectedImageNumber == _this.imagesCount) {
-                            var imagesMarkupCount = _this.imagesMarkups.filter(function (imageMarkup) { return imageMarkup !== null; }).length;
-                            _this.transform = (imagesMarkupCount - 1) * -100;
-                        }
-                        else {
-                            _this.transform += 100;
-                        }
-                    }
-                    else {
-                        var imagesMarkupCount_2 = 0;
-                        _this.imagesMarkups[previousImageIndex_1] = _this.createImageMarkup(previousImageIndex_1, _this.imagesAttributes[previousImageIndex_1].source);
-                        _this.$imagesContainer.innerHTML = '';
-                        _this.imagesMarkups.forEach(function (markup, index) {
-                            if (markup !== null) {
-                                _this.$imagesContainer.append(markup);
-                                imagesMarkupCount_2 += 1;
-                                if (index == previousImageIndex_1) {
-                                    _this.transform = imagesMarkupCount_2 * -100;
-                                }
-                            }
-                        });
-                    }
-                }
-                else {
-                    var previousImageIndex = _this.imagesCount - 1;
-                    var isPreviousImageMarkupExist = _this.imagesMarkups[previousImageIndex] !== null;
-                    _this.transform = 0;
-                    if (!isPreviousImageMarkupExist) {
-                        _this.imagesMarkups[previousImageIndex] = _this.createImageMarkup(previousImageIndex, _this.imagesAttributes[previousImageIndex].source);
-                        _this.$imagesContainer.append(_this.imagesMarkups[previousImageIndex]);
-                    }
-                }
-                _this.$imagesContainer.style.transform = "translateX(" + _this.transform + "%)";
-                _this.changeImageNumber();
-            }
-            else {
-                if (_this.isPreviousImage) {
-                    _this.selectedImageNumber -= 1;
-                    _this.isNextImage = _this.hasNextImage();
-                    _this.isPreviousImage = _this.hasPreviousImage();
-                    if (_this.isNextImage) {
-                        var nextButton = _this.$gallery.querySelector(_this.selectors.nextButton);
-                        nextButton.classList.remove(styles.icon_inactive);
-                    }
-                    if (!_this.isPreviousImage) {
-                        var previousButton = _this.$gallery.querySelector(_this.selectors.previousButton);
-                        previousButton.classList.add(styles.icon_inactive);
-                        _this.transform = 0;
-                    }
-                    else {
-                        var previousImageIndex = _this.selectedImageNumber - 2;
-                        var isPreviousImageMarkupExist = _this.imagesMarkups[previousImageIndex] !== null;
-                        if (isPreviousImageMarkupExist) {
-                            _this.transform += 100;
-                        }
-                        else {
-                            _this.transform = -100;
-                            _this.imagesMarkups[previousImageIndex] = _this.createImageMarkup(previousImageIndex, _this.imagesAttributes[previousImageIndex].source);
-                            _this.$imagesContainer.prepend(_this.imagesMarkups[previousImageIndex]);
-                        }
-                    }
-                    _this.$imagesContainer.style.transform = "translateX(" + _this.transform + "%)";
-                    _this.changeImageNumber();
-                }
-            }
-        };
-        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.removeGallery(ev);
-                    break;
-                default:
-                    return;
-            }
-            ev.preventDefault();
-        };
-        Object.assign(this.options, options);
-        // todo: @miguelagol to powinna byc osobna metoda ktora moze zwracac length zeby potem moc przypisac this.imagesCount = $images.length;
-        var $images = document.querySelectorAll("[data-gallery-name=" + this.options.galleryName);
-        $images.forEach(function (image) {
-            var shorterEdge = image.naturalHeight < image.naturalWidth ? 'height' : 'width';
-            _this.imagesAttributes.push({
-                source: image.src,
-                width: image.naturalWidth,
-                height: image.naturalHeight,
-                shorterEdge: shorterEdge
-            });
-            if (image.src == options.selectedImageSrc) {
-                _this.selectedImageNumber = _this.imagesAttributes.length;
-            }
-            _this.imagesMarkups.push(null);
-        });
-        // end todo
-        this.$gallery = document.createElement('div');
-        this.$gallery.classList.add('new-gallery');
-        this.imagesCount = $images.length;
-        // todo: to niepotrzebne
-        this.isPreviousImage = this.hasPreviousImage();
-        // todo: to niepotrzebne
-        this.isNextImage = this.hasNextImage();
-        this.createGalleryMarkup();
-        // todo: to powinna byc osobna metoda
-        // mozna to zrobic ladniej: w metodach handleNextImagePreview i hhandlePreviousImagePreview (juz masz/bedziesz miec szukanie poprzedniego/nastepnego indeksu), mozna to wydzielic do osobnej funkcji + zalezne czy masz isCarousel czy nie
-        // metoda zwraca index lub nulla
-        // wtedy robisz const imageRange = [this.getImagePreviousIndex(), this.selectedImageNumber, this.getImageNextIndex()].filter((index) => index);
-        var imagesRange = [];
-        if (this.selectedImageNumber == 1) {
-            imagesRange.push(0, 1);
-        }
-        else if (this.selectedImageNumber == this.imagesCount) {
-            imagesRange.push(this.imagesCount - 2, this.imagesCount - 1);
-        }
-        else {
-            imagesRange.push(this.selectedImageNumber - 2, this.selectedImageNumber - 1, this.selectedImageNumber);
-        }
-        if (this.options.carousel) {
-            if (this.selectedImageNumber == 1) {
-                imagesRange.push(this.imagesCount - 1);
-            }
-            else if (this.selectedImageNumber == this.imagesCount) {
-                imagesRange.push(0);
-            }
-        }
-        imagesRange.forEach(function (index) {
-            _this.imagesMarkups[index] = _this.createImageMarkup(index, _this.imagesAttributes[index].source);
-        });
-        // end todo
-        // todo: to powinna byc osobna metoda
-        this.$imagesContainer = this.$gallery.querySelector(this.selectors.images);
-        this.$imagesContainer.style.gridTemplateColumns = "repeat(" + this.imagesCount + ", 100%)";
-        this.imagesMarkups.forEach(function (markup) {
-            if (markup !== null) {
-                _this.$imagesContainer.append(markup);
-            }
-        });
-        // end todo
-        if (this.isPreviousImage) {
-            if (this.options.carousel && !this.isNextImage) {
-                this.transform = -200;
-            }
-            else {
-                this.transform = -100;
-            }
-        }
-        this.$imagesContainer.style.transform = "translateX(" + this.transform + "%)";
-        this.addEventListeners();
-        document.body.style.overflow = 'hidden';
-        history.pushState({}, 'gallery');
-    }
-    // klasy przeniesc do css_classes.ts
-    Gallery.prototype.createGalleryMarkup = function () {
-        var imagesNumberMarkup = '';
-        if (this.options.imagesNumbers) {
-            // todo: osobna metoda najlepiej prywatna
-            imagesNumberMarkup = "\n                <div class=\"" + styles['gallery-bar__image-numbers'] + "\">\n                    <span class=\"js__gallery-selected-image-number\">\n                        " + this.selectedImageNumber + "\n                    </span> / " + this.imagesCount + "\n                </div>\n            ";
-            // end todo
-        }
-        var navigationMarkup = '';
-        if (this.options.navArrows) {
-            // todo: osobna metoda najlepiej prywatna
-            var previousArrowClasses = styles.icon + " " + styles['icon-arrow'] + " " + styles['icon_rotate-180'] + " js__gallery-previous";
-            if (!this.isPreviousImage && !this.options.carousel) {
-                previousArrowClasses += " " + styles.icon_inactive;
-            }
-            var nextArrowClasses = styles.icon + " " + styles['icon-arrow'] + " js__gallery-next";
-            if (!this.isNextImage && !this.options.carousel) {
-                nextArrowClasses += " " + styles.icon_inactive;
-            }
-            navigationMarkup = "\n                <div class=\"" + styles['gallery-bar__image-navigation'] + "\">\n                    <span class=\"" + previousArrowClasses + "\"></span>\n\n                    <span class=\"" + nextArrowClasses + "\"></span>\n                </div>\n            ";
-            // end todo
-        }
-        var galleryMarkup = "\n            <div class=\"" + styles.gallery + "\">\n                <div class=\"" + styles['gallery-bar_top'] + "\">\n                    " + imagesNumberMarkup + "\n\n                    <div class=\"" + styles['gallery-bar__image-description'] + "\">\n                        description\n                    </div>\n\n                    " + navigationMarkup + "\n\n                    <span class=\"" + styles.icon + " " + styles['icon-close'] + " " + styles['gallery-bar__image-close'] + " js__" + this.options.galleryName + "-close\"></span>\n                </div>\n\n                <div class=\"" + styles['gallery__images-container'] + " js__gallery-images-container\">\n                    <div class=\"" + styles.gallery__images + " js__gallery-images\"></div>\n                </div>\n\n                <div class=\"" + styles['gallery-bar_bottom'] + "\">\n                    <div class=\"" + styles['gallery-bar__image-description'] + "\">\n                        description\n                    </div>\n\n                    " + imagesNumberMarkup + "\n                </div>\n            </div>\n        ";
-        this.$gallery.innerHTML = galleryMarkup;
-        document.body.append(this.$gallery);
-    };
-    Gallery.prototype.createImageMarkup = function (imageIndex, source) {
-        var _this = this;
-        var $imageContainer = document.createElement('div');
-        $imageContainer.classList.add(styles['gallery__main-image-container']);
-        var $galleryBar = document.querySelector("." + styles['gallery-bar_top']);
-        var galleryBarHeight = $galleryBar.clientHeight;
-        if (this.mediaQueries.matches) {
-            $imageContainer.style.height = window.innerHeight - galleryBarHeight + 'px';
-        }
-        else {
-            $imageContainer.style.height = window.innerHeight - 2 * galleryBarHeight + 'px';
-        }
-        var $loader = document.createElement('span');
-        $loader.classList.add(styles.loader__mask);
-        var $mainImage = document.createElement('img');
-        var _a = this.setDimensions(imageIndex), maxWidthClass = _a.maxWidthClass, maxHeightClass = _a.maxHeightClass, mobileClass = _a.mobileClass;
-        $mainImage.classList.add(styles['gallery__main-image'], 'js__gallery-image', styles.hide);
-        $mainImage.setAttribute('src', source);
-        $mainImage.onload = this.toggleMainImageVisibility;
-        if (maxHeightClass) {
-            $mainImage.classList.add(maxHeightClass);
-        }
-        if (maxWidthClass) {
-            $mainImage.classList.add(maxWidthClass);
-        }
-        if (mobileClass) {
-            $mainImage.classList.add(mobileClass);
-        }
-        $imageContainer.append($loader, $mainImage);
-        // todo: przypiecie eventow osobna metoda, same callbacki tez powinny byc osobnymi metodami
-        var imageHammer = new Hammer($mainImage, {
-            inputClass: Hammer.TouchInput
-        });
-        var imageContainerHammer = new Hammer($imageContainer, {
-            inputClass: Hammer.TouchInput
-        });
-        $mainImage.addEventListener('touchend', function (ev) { return ev.preventDefault(); });
-        imageHammer.get('pinch').set({ enable: true });
-        imageHammer.get('pan').set({ enable: false });
-        // todo: ts error
-        imageHammer.on('doubletap', function (ev) {
-            var _a = _this.imagesAttributes[imageIndex], width = _a.width, height = _a.height;
-            var container = $mainImage.closest("." + styles['gallery__main-image-container']);
-            var containerHeight = container.offsetHeight;
-            // todo: zrobic metoda isMoblieView
-            if ($mainImage.classList.contains(styles['gallery__main-image_mobile'])) {
-                imageHammer.get('pinch').set({ enable: false });
-                imageHammer.get('pan').set({ enable: true });
-                imageContainerHammer.get('swipe').set({ enable: false });
-                var _b = ev.center, x_1 = _b.x, y_1 = _b.y;
-                // todo: @miguelagol
-                // const { left, top} = $mainImage.getBoundingClientRect()
-                var centerX = (width * (x_1 - $mainImage.getBoundingClientRect().left)) / $mainImage.width;
-                var centerY = (height * (y_1 - $mainImage.getBoundingClientRect().top)) / $mainImage.height;
-                var translateX = void 0;
-                var translateY = void 0;
-                // todo: osobna metoda
-                if (width > window.innerWidth) {
-                    translateX = centerX - window.innerWidth / 2;
-                    var isTranslateXNeeded = translateX > 0;
-                    if (!isTranslateXNeeded) {
-                        translateX = 0;
-                    }
-                    var maxHorizontalTranslate = width - window.innerWidth;
-                    if (translateX > maxHorizontalTranslate) {
-                        translateX = maxHorizontalTranslate;
-                    }
-                }
-                else {
-                    translateX = 0;
-                }
-                // end todo
-                // todo: osobna metoda
-                if (height > containerHeight) {
-                    translateY = centerY - containerHeight / 2;
-                    var isTranslateYNeeded = translateY > 0;
-                    if (!isTranslateYNeeded) {
-                        translateY = 0;
-                    }
-                    var maxVerticalTranslate = height - containerHeight;
-                    if (translateY > maxVerticalTranslate) {
-                        translateY = maxVerticalTranslate;
-                    }
-                }
-                else {
-                    translateY = 0;
-                }
-                // end todo
-                $mainImage.style.transform = "translate(-" + translateX + "px, -" + translateY + "px)";
-                container.style.overflow = 'hidden';
-                _this.transX = -translateX;
-                _this.transY = -translateY;
-            }
-            else {
-                imageHammer.get('pinch').set({ enable: true });
-                imageHammer.get('pan').set({ enable: false });
-                imageContainerHammer.get('swipe').set({ enable: true });
-                $mainImage.style.transform = "translate(0px, 0px)";
-                _this.transX = 0;
-                _this.transY = 0;
-            }
-            $mainImage.classList.toggle(styles['gallery__main-image_mobile']);
-        });
-        imageHammer.on('panleft panright panup pandown panend', function (ev) {
-            var container = $mainImage.closest("." + styles['gallery__main-image-container']);
-            var containerHeight = container.offsetHeight;
-            var newTranslateX = ev.deltaX + _this.transX;
-            var max_pos_x = $mainImage.width - window.innerWidth;
-            var max_pos_y = $mainImage.height - containerHeight;
-            if (newTranslateX > 0) {
-                newTranslateX = 0;
-            }
-            if (-newTranslateX > max_pos_x) {
-                newTranslateX = -max_pos_x;
-            }
-            var newTranslateY = ev.deltaY + _this.transY;
-            if (newTranslateY > 0) {
-                newTranslateY = 0;
-            }
-            if (-newTranslateY > max_pos_y) {
-                newTranslateY = -max_pos_y;
-            }
-            if (ev.type == 'panend') {
-                _this.transX = newTranslateX;
-                _this.transY = newTranslateY;
-            }
-            $mainImage.style.transform = "translate(" + newTranslateX + "px, " + newTranslateY + "px)";
-        });
-        // todo: w evencie doubletap pobierzsz width i height, jesli to nie zmienne i to samo, to moze warto wyciagnac to wyzej
-        var height = this.imagesAttributes[imageIndex].height;
-        var scale = 1;
-        var x;
-        var y;
-        var mainImageWidth;
-        var mainImageHeight;
-        var mainImageTop;
-        var mainImageLeft;
-        // todo: miguelagol
-        // const { width: mainImageWidth, height: mainImageHeight, top: mainImageTop, left: mainImageLeft} = $mainImage.getBoundingClientRect()
-        imageHammer.on('pinchin pinchout pinchstart pinchend', function (ev) {
-            if (ev.type == 'pinchstart') {
-                // todo: dlaczego w tym miejscu? rozumiem ze ma sie to policzyc tylko raz, nie lepiej to przeniesc tam gdzie i tak juz deklaracje zmmiennych? przyklad wyzej
-                if (!mainImageWidth) {
-                    mainImageWidth = $mainImage.getBoundingClientRect().width;
-                    mainImageHeight = $mainImage.getBoundingClientRect().height;
-                    mainImageTop = $mainImage.getBoundingClientRect().top;
-                    mainImageLeft = $mainImage.getBoundingClientRect().left;
-                }
-                x = ev.center.x;
-                y = ev.center.y;
-            }
-            imageHammer.get('pan').set({ enable: false });
-            imageHammer.get('doubletap').set({ enable: false });
-            imageContainerHammer.get('swipe').set({ enable: false });
-            scale = Math.max(1, Math.min(_this.scale * ev.scale, height / mainImageHeight));
-            $mainImage.style.maxWidth = mainImageWidth * scale + "px";
-            $mainImage.style.maxHeight = mainImageHeight * scale + "px";
-            // todo: @miguelagol konsekwetnie $container
-            var container = $mainImage.closest("." + styles['gallery__main-image-container']);
-            var containerHeight = container.offsetHeight;
-            var containerWidth = container.offsetWidth;
-            var zoomImageX = scale * (x - mainImageLeft);
-            var zoomImageY = scale * (y - mainImageTop);
-            var pinchX = x;
-            var pinchY = y - container.getBoundingClientRect().top;
-            var translateX;
-            if (mainImageWidth * scale < containerWidth) {
-                translateX = zoomImageX - pinchX + (containerWidth - mainImageWidth * scale) / 2;
-            }
-            else {
-                translateX = zoomImageX - pinchX;
-            }
-            var translateY;
-            if (mainImageHeight * scale < containerHeight) {
-                translateY = zoomImageY - pinchY + (containerHeight - mainImageHeight * scale) / 2;
-            }
-            else {
-                translateY = zoomImageY - pinchY;
-            }
-            _this.transX = -translateX;
-            _this.transY = -translateY;
-            if (ev.type == 'pinchend' || $mainImage.height == height) {
-                if (scale == 1) {
-                    imageContainerHammer.get('swipe').set({ enable: true });
-                    imageHammer.get('doubletap').set({ enable: true });
-                    imageHammer.get('pan').set({ enable: false });
-                    $mainImage.style.maxWidth = '';
-                    $mainImage.style.maxHeight = '';
-                }
-                else {
-                    imageHammer.get('pan').set({ enable: true });
-                }
-                _this.scale = scale;
-            }
-            if (scale > 1 && $mainImage.height < height) {
-                $mainImage.style.transform = "translate(" + _this.transX + "px, " + _this.transY + "px)";
-            }
-        });
-        imageContainerHammer.on('swipeleft', function () { return _this.handleNextImagePreview(); });
-        imageContainerHammer.on('swiperight', function () { return _this.handlePreviousImagePreview(); });
-        //
-        return $imageContainer;
-    };
-    Gallery.prototype.addEventListeners = function () {
-        var _this = this;
-        // todo: $closeButton
-        var closeButton = document.querySelector(".js__" + this.options.galleryName + "-close");
-        // todo: nie zadziala, zmieni sie kontekt wywoloania i this nie bedzie pokazywal na instancje galerii w removeGallery
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.addEventListener('click', this.removeGallery);
-        if (this.options.navArrows) {
-            var nextButton = this.$gallery.querySelector(this.selectors.nextButton);
-            var previousButton = this.$gallery.querySelector(this.selectors.previousButton);
-            // todo: '?' niepotrzebne skoro bezpsorednio mowisz ze to <HTMLDivElement> + wczesniej sprawdzasz this.options.navArrowsl
-            nextButton === null || nextButton === void 0 ? void 0 : nextButton.addEventListener('click', this.handleNextImagePreview);
-            previousButton === null || previousButton === void 0 ? void 0 : previousButton.addEventListener('click', this.handlePreviousImagePreview);
-        }
-        // todo: przekazujac metody w ten sposob gubisz this
-        window.addEventListener('keydown', this.keyBindings, true);
-        window.addEventListener('resize', this.updateDimensions);
-        window.addEventListener('popstate', this.removeGallery);
-        var $imagesContainer = document.querySelector(this.selectors.imagesContainer);
-        $imagesContainer === null || $imagesContainer === void 0 ? void 0 : $imagesContainer.addEventListener('click', function (ev) {
-            var $targetElement = ev.target;
-            var isImage = $targetElement.tagName === 'IMG';
-            if (!isImage) {
-                _this.removeGallery(ev);
-            }
-        });
-    };
-    // todo: uzyte w jednym miejscu + tyko na onload, napewno jest to toggle?
-    Gallery.prototype.toggleMainImageVisibility = function (ev) {
-        var _a, _b;
-        var $image = ev.target;
-        $image.classList.remove(styles.hide);
-        (_b = (_a = $image.parentElement) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.classList.add(styles.hide);
-    };
-    // todo: nazwa nie adekwatna do tego co jest zwracane (ustawia wymiary? czy zwraca klasy? )
-    Gallery.prototype.setDimensions = function (imageIndex) {
-        var windowWidth = window.innerWidth;
-        // todo: zrobic z tego metoda, uzywane juz w innym miejscu
-        var isMobileView = windowWidth < BREAKPOINT;
-        // todo: isResizingRequired
-        var resizingRequired = false;
-        // todo: const classes
-        var classes = {
-            maxWidthClass: '',
-            maxHeightClass: '',
-            mobileClass: ''
-        };
-        if (isMobileView) {
-            classes.mobileClass = styles['gallery__main-image_mobile'];
-        }
-        else {
-            var imageWidth = this.imagesAttributes[imageIndex].width;
-            var isImageWider = imageWidth > windowWidth;
-            if (this.imagesAttributes[imageIndex].shorterEdge == 'width') {
-                resizingRequired = isImageWider;
-                if (resizingRequired) {
-                    classes.maxWidthClass = styles['gallery__main-image_max-width'];
-                }
-            }
-            else {
-                var imageHeight = this.imagesAttributes[imageIndex].height;
-                var $galleryBar = document.querySelector("." + styles['gallery-bar_top']);
-                var galleryBarHeight = $galleryBar.clientHeight;
-                var windowHeight = isMobileView ? window.innerHeight - 2 * galleryBarHeight : window.innerHeight - galleryBarHeight;
-                if (isImageWider) {
-                    windowHeight -= SCROLL_SIZE;
-                }
-                resizingRequired = imageHeight > windowHeight;
-                if (resizingRequired) {
-                    classes.maxHeightClass = styles['gallery__main-image_max-height'];
-                }
-            }
-        }
-        return classes;
-    };
-    Gallery.prototype.changeImageNumber = function () {
-        var _this = this;
-        var imageNumbers = document.querySelectorAll(this.selectors.selectedImageNumber);
-        imageNumbers.forEach(function (imageNumber) { return (imageNumber.textContent = "" + _this.selectedImageNumber); });
-    };
-    Gallery.prototype.hasPreviousImage = function () {
-        return this.selectedImageNumber > 1;
-    };
-    Gallery.prototype.hasNextImage = function () {
-        return this.selectedImageNumber < this.imagesCount;
-    };
-    return Gallery;
-}());
-export default Gallery;
-//# sourceMappingURL=index.js.map