{"version":3,"names":["ImageLoader","constructor","options","this","queue","backgroundQueue","lazyImageObserver","lazyBgObserver","webpSupported","supportsWebp","initialize","getImagesToLazyLoad","window","abort","onContentLoaded","setGenericPlaceholder","forEach","lazyImage","observe","lazyBg","document","querySelectorAll","genericImagePlaceholder","img","setAttribute","genericBgPlaceholder","bg","style","backgroundColor","IntersectionObserver","entries","entry","isIntersecting","target","classList","contains","dataset","src","srcset","remove","unobserve","webP","getAttribute","i","length","elem","createElement","getContext","toDataURL","indexOf","AspectRatio","ratioX","ratio","ratioY","element","type","maintain","setAspectRatio","addEventListener","currentWidth","clientWidth","heightPctByRatio","computedHeight","minHeight","height"],"sources":["src/global/image-loader.ts"],"sourcesContent":["/**\r\n * Lazy loads images that are set up properly. Aslo handled webp fallbacks\r\n * For img tags: \r\n *      <picture>\r\n            <source class=\"img-load-lazy\" data-srcset=\"/img.webp\" type=\"image/webp\" />\r\n            <source class=\"img-load-lazy\" data-srcset=\"/img.jpg\" type=\"image/jpeg\" /> \r\n            <img class=\"img-load-lazy\" data-src=\"/img.jpg\" alt=\"Image Alt\" />\r\n          </picture>\r\n            \r\n    For BG Images: <div class=\"lazy-load-bg\" style=\"background-image: url('/my-image.jpeg')\"></div> \r\n\r\n    For BG Images with webp: <div class=\"lazy-load-bg\" style=\"background-image: url('/my-image.jpeg')\" data-webp=\"/path-to-img.webp\"></div> \r\n\r\n    more info: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video\r\n */\r\n\r\nexport class ImageLoader {\r\n    public queue;\r\n    public backgroundQueue;\r\n    public lazyImageObserver;\r\n    public lazyBgObserver;\r\n    public options;\r\n    public webpSupported;\r\n\r\n    constructor(options = {}) {\r\n        this.queue = [];\r\n        this.backgroundQueue = [];\r\n        this.lazyImageObserver = null;\r\n        this.lazyBgObserver = null;\r\n        this.options = options;\r\n        this.webpSupported = ImageLoader.supportsWebp();\r\n    }\r\n\r\n    public initialize() {\r\n        this.queue = [];\r\n        this.backgroundQueue = [];\r\n        this.lazyImageObserver = null;\r\n        this.lazyBgObserver = null;\r\n\r\n        this.getImagesToLazyLoad();\r\n\r\n        if (!(\"IntersectionObserver\" in window)) {\r\n            this.abort();\r\n            return;\r\n        }\r\n\r\n        this.onContentLoaded();\r\n        this.setGenericPlaceholder();\r\n\r\n        this.queue.forEach((lazyImage) => {\r\n            this.lazyImageObserver.observe(lazyImage);\r\n        });\r\n\r\n        this.backgroundQueue.forEach((lazyBg) => {\r\n            this.lazyBgObserver.observe(lazyBg);\r\n        });\r\n    }\r\n\r\n    getImagesToLazyLoad() {\r\n        this.queue = document.querySelectorAll('.img-load-lazy');\r\n        this.backgroundQueue = document.querySelectorAll('.lazy-load-bg');\r\n    }\r\n\r\n    setGenericPlaceholder() {\r\n        if (this.options.genericImagePlaceholder) {\r\n            this.queue.forEach((img) => {\r\n                img.setAttribute('src', this.options.genericImagePlaceholder);\r\n            });\r\n        }\r\n\r\n        if (this.options.genericBgPlaceholder) {\r\n            this.backgroundQueue.forEach((bg) => {\r\n                bg.style.backgroundColor = this.options.genericBgPlaceholder;\r\n            });\r\n        }\r\n    }\r\n\r\n    onContentLoaded() {\r\n        this.lazyImageObserver = new IntersectionObserver((entries) => {\r\n            entries.forEach((entry) => {\r\n                if (entry.isIntersecting) {\r\n                    let lazyImage: any = entry.target;\r\n\r\n                    if (lazyImage.classList.contains('img-load-lazy')) {\r\n                        if (lazyImage.dataset.src) {\r\n                            lazyImage.src = lazyImage.dataset.src;\r\n                        }\r\n                        if (lazyImage.dataset.srcset) {\r\n                            lazyImage.srcset = lazyImage.dataset.srcset;\r\n                        }\r\n                        lazyImage.classList.remove('img-load-lazy');\r\n                        this.lazyImageObserver.unobserve(lazyImage);\r\n                    }\r\n                }\r\n            });\r\n        });\r\n\r\n        this.lazyBgObserver = new IntersectionObserver((entries) => {\r\n            entries.forEach((entry) => {\r\n                if (entry.isIntersecting && entry.target.classList.contains('lazy-load-bg')) {\r\n                    const webP = entry.target.getAttribute('data-webp');\r\n                    if (this.webpSupported && webP && webP != '') {\r\n                        entry.target.setAttribute('style', `background-image: url(${webP})`);\r\n                    }\r\n\r\n                    entry.target.classList.remove('lazy-load-bg');\r\n                    this.lazyBgObserver.unobserve(entry.target);\r\n                }\r\n            });\r\n        });\r\n    }\r\n\r\n    abort() {\r\n        for (let i = 0; i < this.queue.length; i++) {\r\n            this.queue[i].setAttribute('src', this.queue[i].getAttribute('data-src'));\r\n            this.queue[i].classList.remove('img-load-lazy');\r\n        }\r\n\r\n        for (let i = 0; i < this.backgroundQueue.length; i++) {\r\n            this.backgroundQueue[i].classList.remove('lazy-load-bg');\r\n        }\r\n    }\r\n\r\n    static supportsWebp() {\r\n        var elem = document.createElement('canvas');\r\n\r\n        if (!!(elem.getContext && elem.getContext('2d'))) {\r\n            // was able or not to get WebP representation\r\n            return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;\r\n        }\r\n        else {\r\n            // very old browser like IE 8, canvas not supported\r\n            return false;\r\n        }\r\n    }\r\n\r\n}\r\n\r\ninterface AspectRatioInterface {\r\n    ratio: Array<number>,\r\n    element: HTMLElement,\r\n    type?: string;\r\n};\r\n\r\nexport class AspectRatio {\r\n\r\n    public ratioX: number;\r\n    public ratioY: number;\r\n    public element: HTMLElement;\r\n    public type: string;\r\n\r\n    constructor(options: AspectRatioInterface) {\r\n        this.ratioX = options.ratio[0];\r\n        this.ratioY = options.ratio[1];\r\n        this.element = options.element;\r\n        this.type = options.type;\r\n    }\r\n\r\n    maintain() {\r\n        this.setAspectRatio();\r\n\r\n        window.addEventListener('resize', () => {\r\n            this.setAspectRatio();\r\n        });\r\n    }\r\n\r\n    setAspectRatio() {\r\n        const currentWidth = this.element.clientWidth;\r\n        const heightPctByRatio = this.ratioY / this.ratioX;\r\n        const computedHeight = currentWidth * heightPctByRatio;\r\n\r\n        if (this.type && this.type == 'min-height') {\r\n            this.element.style.minHeight = computedHeight + 'px';\r\n        } else {\r\n            this.element.style.height = computedHeight + 'px';\r\n        }\r\n    }\r\n\r\n}"],"mappings":"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"}