{"version":3,"file":"elements-our-stories.js","mappings":"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","sources":["webpack://silverstripe-base/./themes/app/src/elements/our-stories.js","webpack://silverstripe-base/./themes/app/src/scripts/common/util.js"],"sourcesContent":["import Swiper from \"swiper\";\nimport { A11y, Autoplay, Pagination } from \"swiper/modules\";\nimport \"@styles/components/slider.css\";\nimport { isTouchDevice } from \"@common/util\";\nimport { gsap } from \"gsap\";\n\ndocument.querySelectorAll(\".element-ourstories\").forEach((el) => {\n const container = el.querySelector(\".swiper\");\n const slides = el.querySelectorAll(\".swiper-slide\");\n const expandFactor = 2.5;\n\n let activeSlide = null;\n\n const start = () => {\n new Swiper(container, {\n modules: [A11y, Autoplay, Pagination],\n autoplay: {\n delay: 4000,\n pauseOnMouseEnter: true,\n },\n slidesPerView: \"auto\",\n spaceBetween: 16,\n speed: 500,\n slideToClickedSlide: true,\n pagination: {\n el: el.querySelector(\".slider-pagination\"),\n clickable: true,\n },\n breakpoints: {\n 768: {\n spaceBetween: 16,\n },\n 1024: {\n spaceBetween: 0,\n },\n },\n });\n };\n\n const observer = new IntersectionObserver(\n ([e]) => {\n if (e.isIntersecting) {\n start();\n observer.disconnect();\n }\n },\n {\n threshold: [0.7],\n },\n );\n\n observer.observe(el);\n\n if (window.matchMedia(\"(min-width: 1024px)\").matches && !isTouchDevice) {\n const settleContainer = (activeSlide) => {\n gsap.to(container, {\n x: () => {\n if (activeSlide === null) {\n return 0;\n }\n\n const rect = activeSlide.getBoundingClientRect();\n const offset = rect.width / expandFactor;\n\n if (rect.x + rect.width > window.innerWidth) {\n return offset * -1;\n }\n\n if (rect.x + 1.25 * rect.width > window.innerWidth) {\n return offset / -3;\n }\n\n return 0;\n },\n duration: 2,\n });\n };\n\n slides.forEach((slide) => {\n const overlay = slide.querySelector(\".item-overlay\");\n const screen = slide.querySelector(\".item-screen\");\n const image = slide.querySelector(\".item-image\");\n\n const timeline = gsap.timeline({\n paused: true,\n onComplete: () => {\n settleContainer(activeSlide);\n },\n onReverseComplete: () => {\n slide.style.height = null;\n settleContainer(activeSlide);\n },\n });\n\n timeline.to(overlay, { opacity: 0, duration: 0 }, \"<\");\n timeline.to(slide, { width: `${parseFloat(slide.offsetWidth) * expandFactor}px`, duration: 0.5 }, \"<\");\n timeline.to(\n image,\n {\n width: \"60%\",\n scale: 1,\n zIndex: 100,\n duration: 0,\n },\n \"<\",\n );\n timeline.fromTo(\n screen,\n { opacity: 0, visibility: \"invisible\" },\n {\n opacity: 1,\n visibility: \"visible\",\n pointerEvents: \"auto\",\n duration: 0.3,\n },\n );\n timeline.fromTo(\n Array.from(screen.children),\n { opacity: 0, y: \"20%\" },\n { opacity: 1, duration: 0.4, y: 0, stagger: 0.2 },\n \"<\",\n );\n\n slide.addEventListener(\"mouseenter\", () => {\n activeSlide = slide;\n slide.style.height = `${slide.dataset.height}px`;\n timeline.play();\n });\n\n slide.addEventListener(\"mouseleave\", async () => {\n activeSlide = null;\n timeline.timeScale(1.25).reverse();\n });\n });\n }\n});\n\nconst init = () => {\n document.querySelectorAll(\".element-ourstories .swiper-slide\").forEach((slide) => {\n slide.setAttribute(\"data-height\", slide.offsetHeight);\n });\n};\n\nwindow.addEventListener(\"resize\", init);\n\ninit();\n","export const isTouchDevice = \"ontouchstart\" in document.documentElement;\n\nexport const generateQueryString = (data = {}) => {\n let params = data;\n\n if (data instanceof FormData === true) {\n params = {};\n\n data.forEach((value, key) => (params[key] = value));\n }\n\n for (const key in params) {\n if (params[key] === \"\") {\n delete params[key];\n }\n }\n\n return new URLSearchParams(params);\n};\n\nexport const trackGoogleAnalytics = (event) => {\n if (window.dataLayer) {\n window.dataLayer.push(event);\n }\n};\n"],"names":["document","querySelectorAll","forEach","el","container","querySelector","slides","activeSlide","observer","IntersectionObserver","e","isIntersecting","Swiper","modules","A11y","Autoplay","Pagination","autoplay","delay","pauseOnMouseEnter","slidesPerView","spaceBetween","speed","slideToClickedSlide","pagination","clickable","breakpoints","disconnect","threshold","observe","window","matchMedia","matches","isTouchDevice","settleContainer","gsap","to","x","rect","getBoundingClientRect","offset","width","innerWidth","duration","slide","overlay","screen","image","timeline","paused","onComplete","onReverseComplete","style","height","opacity","parseFloat","offsetWidth","scale","zIndex","fromTo","visibility","pointerEvents","Array","from","children","y","stagger","addEventListener","dataset","play","async","timeScale","reverse","init","setAttribute","offsetHeight","documentElement","generateQueryString","data","params","FormData","value","key","URLSearchParams","trackGoogleAnalytics","event","dataLayer","push"],"sourceRoot":""}