{"version":3,"file":"elements-our-stories.js","mappings":"4KAMAA,SAASC,iBAAiB,uBAAuBC,SAASC,IACxD,MAAMC,EAAYD,EAAGE,cAAc,WAC7BC,EAASH,EAAGF,iBAAiB,iBAGnC,IAAIM,EAAc,KAElB,MA0BMC,EAAW,IAAIC,sBACnB,EAAEC,MACIA,EAAEC,iBA3BR,IAAIC,EAAAA,EAAOR,EAAW,CACpBS,QAAS,CAACC,EAAAA,GAAMC,EAAAA,GAAUC,EAAAA,IAC1BC,SAAU,CACRC,MAAO,IACPC,mBAAmB,GAErBC,cAAe,OACfC,aAAc,GACdC,MAAO,IACPC,qBAAqB,EACrBC,WAAY,CACVrB,GAAIA,EAAGE,cAAc,sBACrBoB,WAAW,GAEbC,YAAa,CACX,IAAK,CACHL,aAAc,IAEhB,KAAM,CACJA,aAAc,MAUhBb,EAASmB,aACX,GAEF,CACEC,UAAW,CAAC,MAMhB,GAFApB,EAASqB,QAAQ1B,GAEb2B,OAAOC,WAAW,uBAAuBC,UAAYC,EAAAA,GAAe,CACtE,MAAMC,EAAmB3B,IACvB4B,EAAAA,GAAKC,GAAGhC,EAAW,CACjBiC,EAAGA,KACD,GAAoB,OAAhB9B,EACF,OAAO,EAGT,MAAM+B,EAAO/B,EAAYgC,wBACnBC,EAASF,EAAKG,MArDP,IAuDb,OAAIH,EAAKD,EAAIC,EAAKG,MAAQX,OAAOY,YACd,EAAVF,EAGLF,EAAKD,EAAI,KAAOC,EAAKG,MAAQX,OAAOY,WAC/BF,GAAU,EAGZ,CAAC,EAEVG,SAAU,GACV,EAGJrC,EAAOJ,SAAS0C,IACd,MAAMC,EAAUD,EAAMvC,cAAc,iBAC9ByC,EAASF,EAAMvC,cAAc,gBAC7B0C,EAAQH,EAAMvC,cAAc,eAE5B2C,EAAWb,EAAAA,GAAKa,SAAS,CAC7BC,QAAQ,EACRC,WAAYA,KACVhB,EAAgB3B,EAAY,EAE9B4C,kBAAmBA,KACjBP,EAAMQ,MAAMC,OAAS,KACrBnB,EAAgB3B,EAAY,IAIhCyC,EAASZ,GAAGS,EAAS,CAAES,QAAS,EAAGX,SAAU,GAAK,KAClDK,EAASZ,GAAGQ,EAAO,CAAEH,MAtFJ,IAsFcc,WAAWX,EAAMY,aAApB,KAAqDb,SAAU,IAAO,KAClGK,EAASZ,GACPW,EACA,CACEN,MAAO,MACPgB,MAAO,EACPC,OAAQ,IACRf,SAAU,GAEZ,KAEFK,EAASW,OACPb,EACA,CAAEQ,QAAS,EAAGM,WAAY,aAC1B,CACEN,QAAS,EACTM,WAAY,UACZC,cAAe,OACflB,SAAU,KAGdK,EAASW,OACPG,MAAMC,KAAKjB,EAAOkB,UAClB,CAAEV,QAAS,EAAGW,EAAG,OACjB,CAAEX,QAAS,EAAGX,SAAU,GAAKsB,EAAG,EAAGC,QAAS,IAC5C,KAGFtB,EAAMuB,iBAAiB,cAAc,KACnC5D,EAAcqC,EACdA,EAAMQ,MAAMC,OAAS,GAAGT,EAAMwB,QAAQf,WACtCL,EAASqB,MAAM,IAGjBzB,EAAMuB,iBAAiB,cAAcG,UACnC/D,EAAc,KACdyC,EAASuB,UAAU,MAAMC,SAAS,GAClC,GAEN,KAGF,MAAMC,EAAOA,KACXzE,SAASC,iBAAiB,qCAAqCC,SAAS0C,IACtEA,EAAM8B,aAAa,cAAe9B,EAAM+B,aAAa,GACrD,EAGJ7C,OAAOqC,iBAAiB,SAAUM,GAElCA,G,qDCjJO,MAAMxC,EAAgB,iBAAkBjC,SAAS4E,gBAE3CC,EAAsBA,CAACC,EAAO,CAAC,KAC1C,IAAIC,EAASD,EAETA,aAAgBE,UAAa,IAC/BD,EAAS,CAAC,EAEVD,EAAK5E,SAAQ,CAAC+E,EAAOC,IAASH,EAAOG,GAAOD,KAG9C,IAAK,MAAMC,KAAOH,EACI,KAAhBA,EAAOG,WACFH,EAAOG,GAIlB,OAAO,IAAIC,gBAAgBJ,EAAO,EAGvBK,EAAwBC,IAC/BvD,OAAOwD,WACTxD,OAAOwD,UAAUC,KAAKF,EACxB,C","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":""}