{"version":3,"file":"video-open-DPjKLTPk.js","sources":["../../Frontend/js/modules/video-open.js"],"sourcesContent":["import gsap from 'gsap';\r\n\r\nexport default function fVideo () {\r\n    function offset(el) {\r\n        let rect = el.getBoundingClientRect();\r\n        let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;\r\n        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\r\n\r\n        return { top: rect.top + scrollTop, left: rect.left + scrollLeft }\r\n    }\r\n\r\n    function fAnimateModalIn (oModal, oBackdrop, oSourceDimensions) {\r\n        let oTimeline = new gsap.timeline();\r\n        let iVideoWidth = (window.innerWidth * 80) / 100;\r\n        let iVideoHeight = (iVideoWidth * 9) / 16;\r\n\r\n        if (iVideoHeight > window.innerHeight) {\r\n            iVideoHeight = (window.innerHeight * 80) / 100;\r\n            iVideoWidth = (iVideoHeight * 16) / 9;\r\n        }\r\n\r\n        gsap.defaults({ease: 'quart.InOut'});\r\n        oTimeline.timeScale(2);\r\n\r\n        function fFixModal () {\r\n            oModal.style.position = 'fixed';\r\n            oModal.style.top = `${(window.innerHeight - (iVideoHeight)) / 2}px`;\r\n        }\r\n\r\n        oTimeline\r\n        .set(oModal, {\r\n            display: 'block',\r\n            top: oSourceDimensions.y,\r\n            left: oSourceDimensions.x,\r\n            width: oSourceDimensions.width,\r\n            height: oSourceDimensions.height,\r\n        })\r\n        .to(oModal, 1, {\r\n            autoAlpha: 1,\r\n            ease: 'quart.Linear'\r\n        })\r\n        .to(oModal, 1.2, {\r\n            top: `${((window.innerHeight - (iVideoHeight)) / 2) + window.pageYOffset}px`,\r\n            height: `${iVideoHeight}px`,\r\n            left: '0',\r\n            right: '0',\r\n            margin: 'auto',\r\n            width: `${iVideoWidth}px`,\r\n            onComplete: fFixModal\r\n        }, '-=0.5')\r\n        .to(oBackdrop, 1, {\r\n            autoAlpha: 1\r\n        }, '-=1');\r\n    }\r\n\r\n    function fAnimateModalOut (oModal, oBackdrop) {\r\n        let oTimeline = gsap.timeline();\r\n        let oIframe = oModal.querySelector('iframe');\r\n\r\n        gsap.defaults({ease: 'quart.InOut'});\r\n        oTimeline.timeScale(2);\r\n\r\n        function fDestroyModal () {\r\n            oModal.remove();\r\n            oBackdrop.remove();\r\n        }\r\n\r\n        oTimeline\r\n        .to(oIframe, 0.8, {\r\n            autoAlpha: 0\r\n        })\r\n        .to(oBackdrop, 1, {\r\n            autoAlpha: 0\r\n        })\r\n        .to(oModal, .7, {\r\n            scaleX: .8\r\n        }, '-=0.8')\r\n        .to(oModal, .7, {\r\n            y: '150%',\r\n            onComplete: fDestroyModal\r\n        }, '-=0.4');\r\n    }\r\n\r\n    function fCreatePlayer (sYoutubeId) {\r\n        let oPlayer = new YT.Player(sYoutubeId, {\r\n            videoId: sYoutubeId,\r\n            playerVars: {\r\n                rel: 0,\r\n                controls: 0,\r\n                modestbranding: 1,\r\n                autoplay: 1,\r\n                showinfo: 0,\r\n                start: 0\r\n            }\r\n        });\r\n    }\r\n\r\n    function fCreateModal (oButton) {\r\n        // Get source and its dimensions and offset\r\n        let oSource = oButton.parentNode.querySelector('.js-video-source');\r\n        let sVideoUrl = oButton.getAttribute('data-video-url');\r\n\r\n        if (!oSource || !sVideoUrl) return;\r\n\r\n        let oSourceDimensions = {\r\n            width: oSource.offsetWidth,\r\n            height: oSource.offsetHeight,\r\n            x: offset(oSource).left,\r\n            y: offset(oSource).top\r\n        }\r\n\r\n        // Create a modal and backdrop\r\n        let oModal = document.createElement('div');\r\n        let oModalClose = document.createElement('button');\r\n        let oVideoFrame = document.createElement('iframe');\r\n        let oBackdrop = document.createElement('div');\r\n\r\n        // Add modal to body\r\n        oModal.setAttribute('class', 'modal modal--video');\r\n        document.body.appendChild(oModal);\r\n\r\n        // Add closer button to modal\r\n        oModalClose.classList.add('modal__close');\r\n        oModalClose.innerHTML = '<svg class=\"modal__close__icon\"><use xlink:href=\"#close\"></use></svg>';\r\n        oModal.appendChild(oModalClose);\r\n\r\n        // Add video frame to modal\r\n        oVideoFrame.src = sVideoUrl;\r\n        oModal.appendChild(oVideoFrame);\r\n\r\n        // Add backdrop to body\r\n        oBackdrop.classList.add('backdrop');\r\n        document.body.appendChild(oBackdrop);\r\n\r\n        // Animate them\r\n        fAnimateModalIn(oModal, oBackdrop, oSourceDimensions);\r\n\r\n        // Add event listeners to backdrop & closer to close modal\r\n        window.addEventListener('click', function(event) {\r\n            if (event.target.closest('.backdrop') || event.target.closest('.modal__close')) {\r\n                fAnimateModalOut(oModal, oBackdrop);\r\n            }\r\n        });\r\n    }\r\n\r\n    window.addEventListener('click', function (event) {\r\n        if (event.target.closest('.js-video-open')) {\r\n            fCreateModal(event.target.closest('.js-video-open'));\r\n        }\r\n    });\r\n}\r\n"],"names":["fVideo","offset","el","rect","scrollLeft","scrollTop","fAnimateModalIn","oModal","oBackdrop","oSourceDimensions","oTimeline","gsap","iVideoWidth","iVideoHeight","fFixModal","fAnimateModalOut","oIframe","fDestroyModal","fCreateModal","oButton","oSource","sVideoUrl","oModalClose","oVideoFrame","event"],"mappings":"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"}