{"version":3,"sources":["LazyResponsiveImages.js"],"names":["isScrolling","LazyResponseImages","_classCallCheck","this","_createClass","key","value","_this","loadOutOfViewport","arguments","length","undefined","Array","from","document","querySelectorAll","element","tagName","InView","querySelector","filter","NotLoaded","forEach","ProcessElement","bind","_img$clientWidth","height","dimensions","_element$clientHeight","clientHeight","clientWidth","dataset","autoheight","width","autowidth","ProcessDPI","concat","sizes","actualSource","replace","style","backgroundImage","_img$clientHeight","img","source","src","container","offsetWidth","offsetHeight","documentElement","scrollTop","window","outerHeight","elementTop","getBoundingClientRect","top","ElementIsVisible","windowBottom","isVisisble","Math","ceil","multiplier","matchMedia","matches","devicePixelRatio","addEventListener","clearTimeout","setTimeout","processor","Run","checker","hidden","setInterval","clearInterval","ReRun","once","onresize"],"mappings":"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","file":"LazyResponsiveImages.js","sourcesContent":["let isScrolling;\r\n\r\nconst LazyResponseImages = class {\r\n    constructor() {\r\n    }\r\n\r\n    Run(loadOutOfViewport = false) {\r\n        Array.from(document.querySelectorAll(\"[data-lazyTarget]\"))\r\n            .filter(element => {\r\n                if (loadOutOfViewport) {\r\n                    return true;\r\n                }\r\n\r\n                return element.tagName === \"PICTURE\"\r\n                    ? this.InView(element.querySelector('img'))\r\n                    : this.InView(element);\r\n            })\r\n            .filter(this.NotLoaded)\r\n            .forEach(this.ProcessElement.bind(this));\r\n    }\r\n\r\n    ProcessElement(element) {\r\n\r\n\r\n        if (element.tagName !== \"PICTURE\") {\r\n            let height = element.clientHeight ?? element.height;\r\n            let width = element.clientWidth ?? element.width;\r\n\r\n            height = element.dataset.autoheight ? 0 : height;\r\n            width = element.dataset.autowidth ? 0 : width;\r\n\r\n\r\n            const sizes = this.ProcessDPI(height, width);\r\n            const dimensions = `height=${sizes.height}&width=${sizes.width}`;\r\n\r\n            const actualSource = element.dataset.src.replace(\"{0}\", dimensions);\r\n\r\n            if (element.tagName === \"IMG\") {\r\n                element.src = actualSource;\r\n            } else {\r\n                element.style.backgroundImage = 'url(' + actualSource + ')';\r\n            }\r\n        } else {\r\n            const img = element.querySelector('img');\r\n            let height = img.clientHeight ?? img.height;\r\n            let width = img.clientWidth ?? img.width;\r\n\r\n            height = element.dataset.autoheight ? 0 : height;\r\n            width = element.dataset.autowidth ? 0 : width;\r\n\r\n\r\n            const sizes = this.ProcessDPI(height, width);\r\n            const dimensions = `height=${sizes.height}&width=${sizes.width}`;\r\n\r\n            Array.from(element.querySelectorAll('source'))\r\n                .forEach(source => {\r\n                    const actualSource = source.dataset.src.replace(\"{0}\", dimensions);\r\n                    source.srcset = actualSource;\r\n                });\r\n\r\n            Array.from(element.querySelectorAll('img'))\r\n                .forEach(source => {\r\n                    const actualSource = source.dataset.src.replace(\"{0}\", dimensions);\r\n                    source.src = actualSource;\r\n                });\r\n        }\r\n\r\n        element.dataset[\"loaded\"] = true;\r\n    }\r\n\r\n    NotLoaded(element) {\r\n        return element.dataset[\"loaded\"] === undefined || element.dataset[\"loaded\"] === \"false\";\r\n    }\r\n\r\n    ClearAll(container) {\r\n        container.querySelectorAll(\"[data-lazyTarget]\").forEach(function (element) {\r\n            element.dataset[\"loaded\"] = false;\r\n        });\r\n    }\r\n\r\n    ElementIsVisible(element) {\r\n        return element.offsetWidth !== 0 && element.offsetHeight !== 0\r\n    }\r\n\r\n    InView(element) {\r\n        const windowBottom = document.documentElement.scrollTop + window.outerHeight;\r\n        const elementTop = element.getBoundingClientRect().top + 100;\r\n\r\n        const isVisisble = this.ElementIsVisible(element);\r\n        if (isVisisble) {\r\n            return elementTop <= windowBottom;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    ProcessDPI(height, width) {\r\n        if (this.isRetina()) {\r\n            const multiplier = window.devicePixelRatio ? window.devicePixelRatio : 2;\r\n            height = Math.ceil(height * multiplier);\r\n            width = Math.ceil(width * multiplier);\r\n        }\r\n\r\n        return {height, width};\r\n    }\r\n\r\n    isRetina() {\r\n        return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2));\r\n    }\r\n\r\n    addScrollListener(element) {\r\n        element.addEventListener(\"scroll\",\r\n            function () {\r\n                window.clearTimeout(isScrolling);\r\n\r\n                isScrolling = setTimeout(function () {\r\n                        processor.Run();\r\n                    },\r\n                    100);\r\n            });\r\n    }\r\n\r\n    ReRun(){\r\n        this.ClearAll(document);\r\n        this.Run();\r\n    }\r\n\r\n};\r\n\r\nconst processor = new LazyResponseImages();\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", () => processor.Run());\r\ndocument.addEventListener('visibilitychange', () => {\r\n    if(document.hidden === false) {\r\n        const checker = setInterval(() => {\r\n            if (window.outerHeight > 0) {\r\n                window.clearInterval(checker);\r\n                processor.ReRun();\r\n            }\r\n        }, 10);\r\n    }\r\n}, {once: true});\r\n\r\nwindow.onresize = function () {\r\n    processor.ReRun();\r\n};\r\nprocessor.addScrollListener(window);"]}