{"version":3,"file":"imageGrid.js","sources":["../../../../s/BiNo.ReactApps/apps/scripts/src/image-grid.ts"],"sourcesContent":["import { Swiper } from 'swiper/core';\r\nimport type { SwiperOptions } from 'swiper/types';\r\nimport { Pagination } from 'swiper/modules';\r\nimport { onReady } from './util/onReady';\r\n\r\nfunction imageGrid() {\r\n    const containers = document.querySelectorAll<HTMLElement>('[data-swiper-container]');\r\n    containers.forEach((container) => {\r\n        const isMobile = window.screen.width < 768;\r\n        const itemsPerPage = isMobile ? 4 : 6;\r\n\r\n        // Split the images into groups that can be slided / toggled\r\n        const slides: Array<Array<HTMLElement>> = [];\r\n        let slideItems: Array<HTMLElement> = [];\r\n\r\n        let i = 0;\r\n        while (container.firstElementChild) {\r\n            if (i % itemsPerPage === 0) {\r\n                slideItems = [];\r\n                slides.push(slideItems);\r\n            }\r\n\r\n            const element = container.firstElementChild as HTMLElement;\r\n            container.removeChild(element);\r\n            slideItems.push(element);\r\n            i++;\r\n        }\r\n\r\n        const wrapper = getDivWithClass('swiper-wrapper');\r\n        container.appendChild(wrapper);\r\n        slides.forEach((group) => {\r\n            const slide = getDivWithClass('swiper-slide');\r\n            wrapper.appendChild(slide);\r\n\r\n            group.forEach((element) => {\r\n                slide.appendChild(element);\r\n            });\r\n        });\r\n\r\n        // Add pagination container\r\n        container.appendChild(getDivWithClass('swiper-pagination'));\r\n        container.classList.add('swiper-container');\r\n\r\n        const swiperParams: SwiperOptions = {\r\n            modules: [Pagination],\r\n            slidesPerView: 1,\r\n            watchOverflow: true,\r\n            pagination: { el: '.swiper-pagination', clickable: true },\r\n        };\r\n\r\n        new Swiper(container, swiperParams);\r\n    });\r\n}\r\n\r\nfunction getDivWithClass(className: string) {\r\n    const element = document.createElement('div');\r\n    element.className = className;\r\n    return element;\r\n}\r\n\r\nonReady(() => {\r\n    imageGrid();\r\n});\r\n"],"names":["imageGrid","container","itemsPerPage","slides","slideItems","i","element","wrapper","getDivWithClass","group","slide","swiperParams","Pagination","Swiper","className","onReady"],"mappings":"8FAKA,SAASA,GAAY,CACE,SAAS,iBAA8B,yBAAyB,EACxE,QAASC,GAAc,CAExB,MAAAC,EADW,OAAO,OAAO,MAAQ,IACP,EAAI,EAG9BC,EAAoC,CAAC,EAC3C,IAAIC,EAAiC,CAAC,EAElCC,EAAI,EACR,KAAOJ,EAAU,mBAAmB,CAC5BI,EAAIH,IAAiB,IACrBE,EAAa,CAAC,EACdD,EAAO,KAAKC,CAAU,GAG1B,MAAME,EAAUL,EAAU,kBAC1BA,EAAU,YAAYK,CAAO,EAC7BF,EAAW,KAAKE,CAAO,EACvBD,GAAA,CAGE,MAAAE,EAAUC,EAAgB,gBAAgB,EAChDP,EAAU,YAAYM,CAAO,EACtBJ,EAAA,QAASM,GAAU,CAChB,MAAAC,EAAQF,EAAgB,cAAc,EAC5CD,EAAQ,YAAYG,CAAK,EAEnBD,EAAA,QAASH,GAAY,CACvBI,EAAM,YAAYJ,CAAO,CAAA,CAC5B,CAAA,CACJ,EAGSL,EAAA,YAAYO,EAAgB,mBAAmB,CAAC,EAChDP,EAAA,UAAU,IAAI,kBAAkB,EAE1C,MAAMU,EAA8B,CAChC,QAAS,CAACC,CAAU,EACpB,cAAe,EACf,cAAe,GACf,WAAY,CAAE,GAAI,qBAAsB,UAAW,EAAK,CAC5D,EAEI,IAAAC,EAAOZ,EAAWU,CAAY,CAAA,CACrC,CACL,CAEA,SAASH,EAAgBM,EAAmB,CAClC,MAAAR,EAAU,SAAS,cAAc,KAAK,EAC5C,OAAAA,EAAQ,UAAYQ,EACbR,CACX,CAEAS,EAAQ,IAAM,CACAf,EAAA,CACd,CAAC"}