{"version":3,"file":"BackgroundSwitcher-CJL4GgJj.js","sources":["../../../../../front/src/js/BackgroundSwitcher.ts"],"sourcesContent":["type DivWithListener = {\n div: HTMLElement;\n controller: AbortController;\n preloaded: boolean;\n};\n\nexport class BackgroundSwitcher {\n private imageDivs: DivWithListener[] = [];\n\n constructor() {\n this.init();\n }\n\n init() {\n this.bindEvents();\n // this.handlePreloadImages();\n }\n\n bindEvents() {\n document.querySelectorAll<HTMLElement>('[data-bg-img]').forEach(el => {\n const controller = new AbortController();\n this.imageDivs.push({\n div: el,\n controller,\n preloaded: false,\n });\n\n el.addEventListener('mouseenter', this.handleMouseEnter.bind(this));\n el.addEventListener('mouseleave', this.handleMouseLeave.bind(this));\n });\n }\n\n handleMouseEnter(e: MouseEvent) {\n const el = e.currentTarget as HTMLElement;\n const target = el.parentNode?.parentNode?.querySelector<HTMLElement>('[data-bg-target]');\n if (!target) return;\n if (!el?.dataset?.index) return;\n const index = +el.dataset.index;\n target.querySelectorAll('img').forEach((img, idx) => {\n if(idx === index) {\n img.classList.add('img-visible');\n } else {\n img.classList.remove('img-visible');\n }\n });\n }\n\n handleMouseLeave(e: MouseEvent) {\n const el = e.currentTarget as HTMLElement;\n const target = el.parentNode?.parentNode?.querySelector<HTMLElement>('[data-bg-target]');\n if (!target) return;\n target.querySelectorAll('img').forEach((img, idx) => {\n if(idx === 0) {\n img.classList.add('img-visible');\n } else {\n img.classList.remove('img-visible');\n }\n });\n }\n\n handlePreloadImages() {\n const offset = 100;\n this.imageDivs.forEach(el => {\n window.addEventListener(\n 'mousemove',\n (event: MouseEvent) => {\n const rect = el.div.getBoundingClientRect();\n const mouseX = event.clientX;\n const mouseY = event.clientY;\n if (mouseX > rect.left - offset && mouseX < rect.right + offset && mouseY > rect.top - offset && mouseY < rect.bottom + offset) {\n this.preloadImages(el);\n el.preloaded = true;\n }\n },\n { signal: el.controller.signal }\n );\n });\n }\n\n preloadImages(wrapper: DivWithListener) {\n if(wrapper.preloaded) return;\n\n const uri = wrapper.div.dataset.bgImg;\n if (!uri) return;\n\n const img = new Image();\n img.src = uri;\n img.onload = () => {\n wrapper.preloaded = true;\n wrapper.controller.abort();\n };\n }\n}\n"],"names":["BackgroundSwitcher","__publicField","el","controller","_a","_b","_c","target","index","img","idx","event","rect","mouseX","mouseY","wrapper","uri"],"mappings":"oKAMO,MAAMA,CAAmB,CAG9B,aAAc,CAFNC,EAAA,iBAA+B,CAAC,GAGtC,KAAK,KAAK,CAAA,CAGZ,MAAO,CACL,KAAK,WAAW,CAAA,CAIlB,YAAa,CACX,SAAS,iBAA8B,eAAe,EAAE,QAAcC,GAAA,CAC9D,MAAAC,EAAa,IAAI,gBACvB,KAAK,UAAU,KAAK,CAClB,IAAKD,EACL,WAAAC,EACA,UAAW,EAAA,CACZ,EAEDD,EAAG,iBAAiB,aAAc,KAAK,iBAAiB,KAAK,IAAI,CAAC,EAClEA,EAAG,iBAAiB,aAAc,KAAK,iBAAiB,KAAK,IAAI,CAAC,CAAA,CACnE,CAAA,CAGH,iBAAiB,EAAe,CA1B3B,IAAAE,EAAAC,EAAAC,EA2BH,MAAMJ,EAAK,EAAE,cACPK,GAASF,GAAAD,EAAAF,EAAG,aAAH,YAAAE,EAAe,aAAf,YAAAC,EAA2B,cAA2B,oBAEjE,GADA,CAACE,GACD,GAACD,EAAAJ,GAAA,YAAAA,EAAI,UAAJ,MAAAI,EAAa,OAAO,OACnB,MAAAE,EAAQ,CAACN,EAAG,QAAQ,MAC1BK,EAAO,iBAAiB,KAAK,EAAE,QAAQ,CAACE,EAAKC,IAAQ,CAChDA,IAAQF,EACLC,EAAA,UAAU,IAAI,aAAa,EAE3BA,EAAA,UAAU,OAAO,aAAa,CACpC,CACD,CAAA,CAGH,iBAAiB,EAAe,CAzC3B,IAAAL,EAAAC,EA2CH,MAAME,GAASF,GAAAD,EADJ,EAAE,cACK,aAAH,YAAAA,EAAe,aAAf,YAAAC,EAA2B,cAA2B,oBAChEE,GACLA,EAAO,iBAAiB,KAAK,EAAE,QAAQ,CAACE,EAAKC,IAAQ,CAChDA,IAAQ,EACLD,EAAA,UAAU,IAAI,aAAa,EAE3BA,EAAA,UAAU,OAAO,aAAa,CACpC,CACD,CAAA,CAGH,qBAAsB,CAEf,KAAA,UAAU,QAAcP,GAAA,CACpB,OAAA,iBACL,YACCS,GAAsB,CACf,MAAAC,EAAOV,EAAG,IAAI,sBAAsB,EACpCW,EAASF,EAAM,QACfG,EAASH,EAAM,QACjBE,EAASD,EAAK,KAAO,KAAUC,EAASD,EAAK,MAAQ,KAAUE,EAASF,EAAK,IAAM,KAAUE,EAASF,EAAK,OAAS,MACtH,KAAK,cAAcV,CAAE,EACrBA,EAAG,UAAY,GAEnB,EACA,CAAE,OAAQA,EAAG,WAAW,MAAO,CACjC,CAAA,CACD,CAAA,CAGH,cAAca,EAA0B,CACtC,GAAGA,EAAQ,UAAW,OAEhB,MAAAC,EAAMD,EAAQ,IAAI,QAAQ,MAChC,GAAI,CAACC,EAAK,OAEJ,MAAAP,EAAM,IAAI,MAChBA,EAAI,IAAMO,EACVP,EAAI,OAAS,IAAM,CACjBM,EAAQ,UAAY,GACpBA,EAAQ,WAAW,MAAM,CAC3B,CAAA,CAEJ"}