{"version":3,"sources":["webpack:///./aan/node_modules/ui-theme/widgets/cover-image/index.ts"],"names":["visible","btnViewCover","coverImageWrapper","coverImage","popupView","popupCover","movingCover","hoverOverlay","closePopup","coverImageCaptionWrapper","selectors","setWrapper","wrapper","this","initElements","initElementsFromWapperByLoop","isPopupOpened","isViewable","initialize","dataset","elements","coverSrc","style","backgroundImage","addEventListeners","addEventListener","showPopup","bind","handleHoverOverlayKeydown","forEach","btn","e","stopPropagation","document","handlePopupKeydown","preventDefault","body","overflow","animateCover","classList","add","remove","from","to","fromRect","getBoundingClientRect","toRect","width","height","top","left","x","y","transform","setTimeout","opacity","keyCode","ESC","RETURN","CoverImage","Selectors","Elements","ClassList","Texts","HTMLElement"],"mappings":"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","file":"js/coverImage-04e1f2c0181b239a3d80.js","sourcesContent":["import { BaseElements, BaseObject, BaseService, BaseInjector } from '../../js/base';\nimport { querySelector, KeyCodes } from '../../utility/utils';\nimport { EmptyNodeList } from '../../utility/utils/index';\n\nclass Texts extends BaseObject { }\n\nclass ClassList extends BaseObject {\n    visible = 'visible';\n}\n\nclass Selectors extends BaseObject {\n    btnViewCover = '.cover-image__view-cover';\n    coverImageWrapper = '.cover-image__image';\n    coverImage = '.cover-image__image img';\n    popupView = '.cover-image__popup-view';\n    popupCover = '.cover-image__popup-view__cover img';\n    movingCover = '.cover-image__popup-moving-cover';\n    hoverOverlay = '.cover-image__image__hover-overlay';\n    closePopup = '.cover-image__popup-view__close-popup button';\n    coverImageCaptionWrapper = '.cover-image__popup-view__caption-wrapper';\n}\n\nclass Elements extends BaseElements<Selectors> {\n    btnViewCover: NodeListOf<HTMLElement> = new EmptyNodeList();\n    popupView: HTMLElement;\n    popupCover: HTMLElement;\n    movingCover: HTMLElement;\n    coverImageWrapper: HTMLElement;\n    coverImage: HTMLElement;\n    hoverOverlay: HTMLElement;\n    closePopup: HTMLElement;\n    wrapper: HTMLElement;\n    coverImageCaptionWrapper: HTMLElement;\n\n\n    constructor(selectors: Selectors) {\n        super(selectors, false);\n    }\n\n    setWrapper(wrapper: HTMLElement) {\n        this.wrapper = wrapper;\n        this.initElements();\n    }\n    initElements() {\n        this.initElementsFromWapperByLoop();\n    }\n}\n\ninterface CoverImage extends BaseService<Selectors, Elements, ClassList, Texts> { }\n\n@BaseInjector(Selectors, Elements, ClassList, Texts)\nclass CoverImage {\n    isPopupOpened: boolean = false;\n    isViewable: boolean = false;\n    coverSrc: string;\n\n    constructor(readonly wrapper: HTMLElement) { }\n\n    initialize(): void {\n        this.isViewable = querySelector(this.selectors.coverImageWrapper, this.wrapper)?.dataset.isViewable === 'true';\n        if (!this.isViewable) {\n            return;\n        }\n        this.elements.setWrapper(this.wrapper);\n        if (this.elements.movingCover) {\n            this.coverSrc = this.elements.movingCover.dataset?.coverSrc;\n            this.elements.movingCover.style.backgroundImage = `url('${this.coverSrc}')`\n        }\n        this.addEventListeners();\n    }\n    addEventListeners(): void {\n        if (this.elements.hoverOverlay) {\n            this.elements.coverImageWrapper?.addEventListener('click', this.showPopup.bind(this));\n            this.elements.coverImageWrapper?.addEventListener('keydown', this.handleHoverOverlayKeydown.bind(this));\n        } else {\n            this.elements.btnViewCover?.forEach(btn => btn.addEventListener('click', this.showPopup.bind(this)));\n        }\n        this.elements.popupView?.addEventListener('click', this.closePopup.bind(this));\n        this.elements.closePopup?.addEventListener('click', this.closePopup.bind(this));\n        this.elements.coverImageCaptionWrapper?.addEventListener('click', e => e.stopPropagation());\n        document.addEventListener('keydown', this.handlePopupKeydown.bind(this));\n    }\n\n    showPopup(e: Event) {\n        e.preventDefault();\n        if (this.isPopupOpened) {\n            return;\n        }\n        this.isPopupOpened = true;\n        document.body.style.overflow = 'hidden';\n        this.animateCover(this.elements.coverImage, this.elements.popupCover);\n        this.elements.popupView.classList.add(this.classList.visible);\n    }\n\n    closePopup(e: Event) {\n        e.preventDefault();\n        this.isPopupOpened = false;\n        document.body.style.overflow = 'visible';\n        this.animateCover(this.elements.popupCover, this.elements.coverImage);\n        this.elements.popupView.classList.remove(this.classList.visible)\n    }\n\n    animateCover(from: HTMLElement, to: HTMLElement) {\n        const fromRect = from.getBoundingClientRect();\n        const toRect = to.getBoundingClientRect();\n        this.elements.movingCover.style.width = fromRect.width + 'px';\n        this.elements.movingCover.style.height = fromRect.height + 'px';\n        this.elements.movingCover.style.top = fromRect.top + 'px';\n        this.elements.movingCover.style.left = fromRect.left + 'px';\n        const x = toRect.left - fromRect.left;\n        const y = toRect.top - fromRect.top;\n        this.elements.movingCover.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${toRect.width / fromRect.width})`;\n\n        setTimeout(() => {\n            this.elements.movingCover.style.opacity = '0';\n            setTimeout(() => {\n                this.elements.movingCover.style.opacity = '1';\n                this.elements.movingCover.style.transform = 'unset';\n                this.elements.movingCover.style.width = '0px';\n                this.elements.movingCover.style.height = '0px';\n                this.elements.movingCover.style.top = '0px';\n                this.elements.movingCover.style.left = '0px';\n            }, 200)\n        }, 450)\n    }\n\n    handlePopupKeydown(e: KeyboardEvent) {\n        if (e.keyCode === KeyCodes.ESC) {\n            if (this.isPopupOpened) {\n                this.closePopup(e);\n            }\n        }\n    }\n\n    handleHoverOverlayKeydown(e: KeyboardEvent) {\n        if (e.keyCode === KeyCodes.RETURN) {\n            this.showPopup(e);\n        }\n    }\n\n}\n\nexport default CoverImage;\n\nexport {\n    Elements as CoverImageElements,\n    Selectors as CoverImageSelectors,\n    ClassList as CoverImageClassList,\n    Texts as CoverImageTexts\n}"],"sourceRoot":""}