{"version":3,"file":"js/explanation.38b0e43b68b0ce320096.js","mappings":"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","sources":["webpack://netzkern.am/./src/Feature/Lightbox/Code/Scripts/Lightbox/explanation.js"],"sourcesContent":["import '../../Lightbox/Styles/_explanation.scss'\r\n\r\nwindow.am = window.am || {};\r\n\r\nwindow.am.explanation = new function () {\r\n    const that = this;\r\n    const tabletWidth = 768;\r\n    const desktopWidth = 1024;\r\n\r\n    const KeyCodes = {\r\n        ENTER: 13,\r\n        ESC: 27,\r\n        SPACE: 32\r\n    };\r\n\r\n    function setOverlayPosition(linkElement, overlayElement) {\r\n\r\n        const bodyRect = document.body.getBoundingClientRect(),\r\n            elemRect = linkElement.getBoundingClientRect(),\r\n            offsetTop = elemRect.top - bodyRect.top;\r\n\r\n        overlayElement.style.top = `${offsetTop + elemRect.height - 1}px`;\r\n\r\n        if (window.innerWidth < tabletWidth) {\r\n            overlayElement.style.left = 0;\r\n        }\r\n        else {\r\n            const overlayElemRect = overlayElement.getBoundingClientRect();\r\n            let linkOffsetLeft = elemRect.left - bodyRect.left;\r\n\r\n            const totalWidthPosition = linkOffsetLeft + overlayElemRect.width;\r\n            let paddingRightBorder = 32;\r\n\r\n            if (window.innerWidth < desktopWidth) {\r\n                paddingRightBorder = 16;\r\n            }\r\n\r\n            if (totalWidthPosition + paddingRightBorder >= bodyRect.width) {\r\n                const overflowValue = totalWidthPosition - bodyRect.width;\r\n                linkOffsetLeft -= overflowValue;\r\n\r\n                // adding some padding\r\n                linkOffsetLeft -= paddingRightBorder;\r\n            }\r\n\r\n            overlayElement.style.left = `${linkOffsetLeft}px`;\r\n        }\r\n\r\n        const y = elemRect.top + window.scrollY;\r\n\r\n        window.scrollTo({\r\n            top: y,\r\n            behavior: 'smooth'\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Open explanation function\r\n     * @param {any} e\r\n     * @param {any} overlayElement\r\n     * @returns void\r\n     */\r\n    function openExplanation(e, overlayElement) {\r\n\r\n        e.target.blur();\r\n        /* we need to set all this otherwise the newly opened explaination would be closed again by the global close listener */\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n        e.stopImmediatePropagation();\r\n\r\n        const closeButton = overlayElement.querySelector(\".close-button\");\r\n\r\n        closeButton.setAttribute(\"tabindex\", \"0\");\r\n\r\n        /* Show the element to get the correct with for position calculation */\r\n        overlayElement.classList.add('show');\r\n\r\n        const element = e.target;\r\n\r\n        setOverlayPosition(element, overlayElement);\r\n\r\n        if (window.innerWidth >= desktopWidth) {\r\n            closeButton.focus();\r\n        }\r\n    };\r\n\r\n    function initResize() {\r\n\r\n        window.addEventListener(\r\n            'resize',\r\n            function () {\r\n\r\n                const overlayElement = document.querySelector('.explanation-overlay-container.show');\r\n\r\n                if (!overlayElement) {\r\n                    return;\r\n                }\r\n\r\n                const id = overlayElement.getAttribute('data-id');\r\n                const linkElement = document.querySelector(`[data-lightbox-id=\"${id}\"]`);\r\n\r\n                setOverlayPosition(linkElement, overlayElement);\r\n            }\r\n        );\r\n    }\r\n\r\n    function initExplanations(aTags) {\r\n\r\n        aTags.forEach(function (aTag) {\r\n            let boxId = aTag.getAttribute('data-lightbox-id');\r\n\r\n            if (!boxId) {\r\n                return;\r\n            }\r\n\r\n            let overlayElement = document.querySelector('.explanation-overlay-container[data-id=\"' + boxId + '\"]');\r\n\r\n            if (!overlayElement) {\r\n                return;\r\n            }\r\n\r\n            const closeButton = overlayElement.querySelector(\".close-button\");\r\n\r\n            /* Close button event setup */\r\n            closeButton.addEventListener(\"click\", function (e) {\r\n                that.closeExplanation(e, this, overlayElement, aTag);\r\n            });\r\n\r\n            closeButton.addEventListener(\"touch\", function (e) {\r\n                closeButton.click();\r\n            });\r\n\r\n            closeButton.addEventListener(\"keydown\", function (e) {\r\n                /* Enter, ESC, Space */\r\n                if (e.keyCode == KeyCodes.ENTER || e.keyCode == KeyCodes.ESC || e.keyCode == KeyCodes.SPACE) {\r\n                    /* Only prevent scroll page if space if pressed - on keyup box will be closed */\r\n                    e.preventDefault();\r\n                    e.stopImmediatePropagation();\r\n                    e.stopPropagation();\r\n                }\r\n            });\r\n            \r\n            closeButton.addEventListener(\"keyup\", function (e) {\r\n                /* Enter, ESC, Space */\r\n                if (e.keyCode == KeyCodes.ENTER || e.keyCode == KeyCodes.ESC || e.keyCode == KeyCodes.SPACE) {\r\n                    closeButton.click();\r\n                }\r\n            });\r\n\r\n            /* Link event setup */\r\n            aTag.addEventListener(\"click\", function (e) {\r\n                /* Ensure previous openend */\r\n                closeExplanationInternal(null, false);\r\n                openExplanation(e, overlayElement);\r\n            });\r\n\r\n            aTag.addEventListener(\"keydown\", function (e) {\r\n                /* Prevent open modal while enter is pressed (should only be opened if released) */\r\n                if (e.keyCode == KeyCodes.ENTER) {\r\n                    e.preventDefault();\r\n                }\r\n            }, false);\r\n\r\n            aTag.addEventListener(\"keyup\", function (e) {\r\n                /* Open modal if enter or space is released */\r\n                if (e.keyCode == KeyCodes.ENTER || e.keyCode == KeyCodes.SPACE) {\r\n                    aTag.click();\r\n                }\r\n            }, false);\r\n        });\r\n    }\r\n\r\n    function initGlobalCloseExplanationListener() {\r\n        document.addEventListener('click', function (e) {\r\n\r\n            const currentElement = e.target;\r\n\r\n            closeExplanationInternal(currentElement, currentElement);\r\n        });\r\n    }\r\n\r\n    function closeExplanationInternal(currentElement, setFocusOnClickedLink) {\r\n        const overlayElement = document.querySelector('.explanation-overlay-container.show');\r\n\r\n        if (!overlayElement) {\r\n            return;\r\n        }\r\n\r\n        if (currentElement && overlayElement.contains(currentElement)) {\r\n            return;\r\n        }\r\n\r\n        const closeButton = overlayElement.querySelector('.close-button');\r\n\r\n        if (overlayElement.classList.contains('show')) {\r\n            overlayElement.classList.remove('show');\r\n        }\r\n\r\n        closeButton.setAttribute(\"tabindex\", -1);\r\n\r\n        if (window.innerWidth >= tabletWidth && setFocusOnClickedLink) {\r\n\r\n            const id = overlayElement.getAttribute('data-id');\r\n            const element = document.querySelector(`[data-lightbox-id=\"${id}\"]`);\r\n            element.focus();\r\n        }\r\n    }\r\n\r\n    that.init = function () {\r\n        that.moveExplanationContainersToBody();\r\n        const aTags = document.querySelectorAll('a[target=\"_explanation\"]');\r\n\r\n        if (aTags == null) {\r\n            return;\r\n        }\r\n\r\n        initResize();\r\n        initExplanations(aTags);\r\n        initGlobalCloseExplanationListener();\r\n    };\r\n\r\n    that.closeExplanation = function (e, closeButton, explanationContainer, opener) {\r\n\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n        e.stopPropagation();\r\n\r\n        if (explanationContainer.classList.contains('show')) {\r\n            explanationContainer.classList.remove('show');\r\n        }\r\n\r\n        closeButton.setAttribute(\"tabindex\", -1);\r\n\r\n        if (window.innerWidth >= tabletWidth && opener) {\r\n            opener.focus();\r\n        }\r\n    };\r\n\r\n    that.moveExplanationContainersToBody = function () {\r\n        const overlayElements = document.querySelectorAll(\".explanation-overlay-container\");\r\n\r\n        if (!overlayElements) {\r\n            return;\r\n        }\r\n\r\n        const body = document.querySelector('body');\r\n        const explanationIds = [];\r\n\r\n        overlayElements.forEach(function (overlayElement) {\r\n            const dataId = overlayElement.getAttribute(\"data-id\");\r\n\r\n            if (explanationIds.includes(dataId)) {\r\n                // It can be possible that we have more then one explanation container\r\n                // with the same id. Based on cacheable renderings vs not cacheable renderings.\r\n                // Therefore we need to remove the doubled explanation content container\r\n                overlayElement.remove();\r\n                return;\r\n            }\r\n\r\n            explanationIds.push(dataId);\r\n            body.append(overlayElement);\r\n        });\r\n    };\r\n};\r\n\r\nwindow.addEventListener('load', window.am.explanation.init);"],"names":["window","am","explanation","that","this","KeyCodes","setOverlayPosition","linkElement","overlayElement","bodyRect","document","body","getBoundingClientRect","elemRect","offsetTop","top","style","height","innerWidth","left","overlayElemRect","linkOffsetLeft","totalWidthPosition","width","paddingRightBorder","y","scrollY","scrollTo","behavior","initExplanations","aTags","forEach","aTag","boxId","getAttribute","querySelector","closeButton","addEventListener","e","closeExplanation","click","keyCode","preventDefault","stopImmediatePropagation","stopPropagation","closeExplanationInternal","target","blur","setAttribute","classList","add","focus","openExplanation","currentElement","setFocusOnClickedLink","contains","remove","id","init","moveExplanationContainersToBody","querySelectorAll","explanationContainer","opener","overlayElements","explanationIds","dataId","includes","push","append"],"sourceRoot":""}