{"version":3,"file":"modal-open-BjRQoPQS.js","sources":["../../Frontend/js/modules/modal-open.js"],"sourcesContent":["import gsap from 'gsap';\r\n\r\nconst module = 'modal',\r\n    selector = {\r\n        base: `.${module}`,\r\n        body: `.${module}__body`,\r\n        bg: `.${module}-bg`\r\n    };\r\n\r\nexport default class ModalOpen {\r\n\r\n    constructor(modal) {\r\n        this.modal = modal;\r\n        this.modalHash = this.modal.getAttribute('data-modal-hash');\r\n        this.id = this.modal.id;\r\n        this.modalBody = this.modal.querySelector(selector.body);\r\n        this.openers = document.querySelectorAll('.js-modal-open[data-modal-id=\"' + this.id + '\"]');\r\n        this.closers = this.modal.querySelectorAll('.js-modal-close');\r\n        this.modalBg = document.querySelector(selector.bg);\r\n        this.form = this.modal.querySelector('.form');\r\n\r\n        this.init();\r\n    }\r\n\r\n    _populate(content) {\r\n        // Loop over each key/value pair in json data\r\n        if (content) {\r\n            this.data = JSON.parse(content);\r\n\r\n            Object.entries(this.data).forEach(([key, value]) => {\r\n                // Get corresponding field in modal\r\n                let fields = this.modal.querySelectorAll(`.js-modal-${key}`);\r\n\r\n                // Fill field with data value\r\n                for (let a = 0; a < fields.length; a += 1) {\r\n                    if (typeof value === \"object\") {\r\n                        for (let b = 0; b < value.length; b += 1) {\r\n                            let template = fields[a].parentNode.appendChild(fields[a].cloneNode(true));\r\n\r\n                            Object.entries(value[b]).forEach(([subkey, subvalue]) => {\r\n                                let subfield = template.querySelector(`.js-modal-${subkey}`);\r\n\r\n                                if (subfield.tagName === 'INPUT') {\r\n                                    subfield.value = subvalue;\r\n                                } else {\r\n                                    subfield.innerHTML = subvalue;\r\n                                }\r\n                            });\r\n                        }\r\n\r\n                        fields[a].style.display = \"none\";\r\n                    } else if (fields[a].tagName === 'INPUT') {\r\n                        fields[a].value = value;\r\n                    } else {\r\n                        fields[a].innerHTML = value;\r\n                    }\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    _watch() {\r\n        if (this.modalBg) {\r\n            this.modalBg.addEventListener('click', event => {\r\n                this.close(event);\r\n            });\r\n        }\r\n\r\n        if (this.openers) {\r\n            var root = this;\r\n\r\n            for (let a = 0; a < this.openers.length; a += 1) {\r\n                this.openers[a].addEventListener('click', event => {\r\n                    event.preventDefault();\r\n\r\n                    if (this.openers[a].hasAttribute('data-modal-customEvent')) return;\r\n\r\n                    // if (root.form) {\r\n                    //     $(root.form).validate().resetForm();\r\n                    // }\r\n\r\n                    let content = this.openers[a].getAttribute('data-modal-content');\r\n                    if (content) {\r\n                        this._populate(content);\r\n                    }\r\n\r\n                    if (this.openers[a].classList.contains('js-modal-close')) {\r\n                        // Wait for close animation, otherwise we won't have a background\r\n                        setTimeout(function () {\r\n                            root.open();\r\n                        }, 400);\r\n                    } else {\r\n                        root.open();\r\n                    }\r\n                })\r\n            }\r\n        }\r\n\r\n        if (this.closers) {\r\n            for (let b = 0; b < this.closers.length; b += 1) {\r\n                let keepBackground = this.closers[b].hasAttribute('data-modal-keepBackground');\r\n\r\n                this.closers[b].addEventListener('click', event => {\r\n                    this.close(event, keepBackground);\r\n                });\r\n            }\r\n        }\r\n    }\r\n\r\n    _showContent() {\r\n        if (!this.modalBody) return;\r\n\r\n        let tl = gsap.timeline();\r\n\r\n        tl.to(this.modalBody, .3, { autoAlpha: 1 });\r\n    }\r\n\r\n    _switchOverflow(enableModalScroll) {\r\n        if (enableModalScroll) {\r\n            this.modal.style.overflowY = 'scroll';\r\n            document.body.style.overflowY = 'hidden';\r\n        } else {\r\n            this.modal.style.overflowY = 'hidden';\r\n            document.body.style.overflowY = 'auto';\r\n        }\r\n    }\r\n\r\n    open() {\r\n        let tl = gsap.timeline();\r\n\r\n        // Defaults\r\n        tl.timeScale(3);\r\n        gsap.defaults({ ease: 'quart' });\r\n\r\n        this._switchOverflow(true);\r\n\r\n        // Create modal background\r\n        if (document.querySelector('.modal-bg')) {\r\n            this.modalBg = document.querySelector('.modal-bg');\r\n        } else {\r\n            this.modalBg = document.body.appendChild(document.createElement('div'));\r\n            this.modalBg.classList.add('modal-bg');\r\n        }\r\n\r\n        this.modalBg.addEventListener('click', event => {\r\n            this.close(event);\r\n        });\r\n\r\n        // Animate\r\n        if (this.modal.classList.contains('modal--center')) {\r\n            tl.set(this.modal, { display: 'block' })\r\n                .set(this.modalBg, { display: 'block' })\r\n                .to(this.modal, 1, { autoAlpha: 1, y: '-50%' })\r\n                .to(this.modalBg, 0.5, { ease: 'out', autoAlpha: 1, onComplete: this._showContent() }, 0);\r\n        } else {\r\n            tl.set(this.modal, { display: 'block' })\r\n                .set(this.modalBg, { display: 'block' })\r\n                .to(this.modal, 1, { autoAlpha: 1, x: '0%' })\r\n                .to(this.modalBg, 1, { autoAlpha: 1, onComplete: this._showContent() }, '-=.8');\r\n        }\r\n    }\r\n\r\n    close(event, keepBackground) {\r\n        event.preventDefault();\r\n\r\n        let tl = gsap.timeline();\r\n\r\n        const destroyModalBg = () => {\r\n            if (!keepBackground) this.modalBg.remove();\r\n        }\r\n\r\n        this._switchOverflow(false);\r\n\r\n        tl.timeScale(3);\r\n        gsap.defaults({ ease: 'quart' });\r\n\r\n        if (this.modal.classList.contains('modal--center')) {\r\n            tl.to(this.modalBody, 1, { autoAlpha: 0 })\r\n                .to(this.modalBg, 1, { autoAlpha: (keepBackground) ? 1 : 0 }, '-=1')\r\n                .to(this.modal, 1, { autoAlpha: 0, y: '100%' }, '-=1')\r\n                .set(this.modalBg, { display: (keepBackground) ? 'block' : 'none' })\r\n                .set(this.modal, { display: 'none', onComplete: destroyModalBg });\r\n        } else {\r\n            tl.to(this.modalBody, 1, { autoAlpha: 0 })\r\n                .to(this.modalBg, 1, { autoAlpha: 0 }, '-=1')\r\n                .to(this.modal, 1, { autoAlpha: 0, x: '100%' }, '-=1')\r\n                .set(this.modalBg, { display: (keepBackground) ? 'none' : 'block' })\r\n                .set(this.modal, { display: 'none', onComplete: destroyModalBg });\r\n        }\r\n    }\r\n\r\n    init() {\r\n        this._populate();\r\n        this._watch();\r\n\r\n        const sHash = location.hash;\r\n\r\n        if (this.modalHash && sHash === '#' + this.modalHash) {\r\n            this.modal.open();\r\n\r\n            location.hash = '';\r\n        }\r\n    }\r\n}\r\n\r\nconst initModal = () => {\r\n    document.querySelectorAll(selector.base).forEach((selectionElement) => {\r\n        new ModalOpen(selectionElement);\r\n    });\r\n};\r\n\r\ninitModal();"],"names":["module","selector","ModalOpen","modal","content","key","value","fields","a","b","template","subkey","subvalue","subfield","event","root","keepBackground","gsap","enableModalScroll","tl","destroyModalBg","sHash","initModal","selectionElement"],"mappings":"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"}