{"version":3,"file":"elements-whats-happening.js","mappings":"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","sources":["webpack://silverstripe-base/./themes/app/src/elements/whats-happening.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-whatshappening\").forEach((el) => {\n  const asHover = el.classList.contains(\"as-hover\");\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  new Swiper(container, {\n    modules: [A11y, Autoplay, Pagination],\n    autoplay: {\n      delay: 4000,\n      pauseOnMouseEnter: true,\n    },\n    slidesPerView: \"auto\",\n    spaceBetween: 8,\n    loop: true,\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        enabled: !asHover,\n        spaceBetween: asHover ? 0 : 16,\n      },\n    },\n  });\n\n  if (asHover && 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 title = slide.querySelector(\".item-title\");\n      const screen = slide.querySelector(\".item-screen\");\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(title, { opacity: 0, duration: 0 }, \"<\");\n      timeline.to(slide, { width: `${parseFloat(slide.offsetWidth) * expandFactor}px`, duration: 0.5 }, \"<\");\n      timeline.fromTo(\n        screen,\n        { opacity: 0, visibility: \"invisible\" },\n        { opacity: 1, visibility: \"visible\", pointerEvents: \"auto\", duration: 0.2 },\n        \"<80%\",\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-whatshappening .swiper-slide\").forEach((slide) => {\n    slide.setAttribute(\"data-height\", slide.offsetHeight);\n  });\n};\n\nwindow.addEventListener(\"resize\", init);\n\ninit();\n\nlet ticking = false;\n\nconst parallaxImages = document.querySelectorAll(\".element-whatshappening .swiper-slide .item-image\");\n\nconst handleParallax = () => {\n  const viewportHeight = window.innerHeight;\n\n  parallaxImages.forEach((el) => {\n    const elementRect = el.getBoundingClientRect();\n    const elementHeight = elementRect.height;\n\n    const elementCenter = elementRect.top + elementHeight / 2;\n    const viewportCenter = viewportHeight / 2;\n\n    const distanceFromMiddle = (elementCenter - viewportCenter) / viewportHeight;\n\n    const parallaxSpeed = 20;\n    const translateY = distanceFromMiddle * parallaxSpeed;\n\n    el.querySelector(\"img\").style.transform = `translateY(${-translateY}%) scale(1.25)`;\n  });\n};\n\nwindow.addEventListener(\"scroll\", () => {\n  if (!ticking) {\n    window.requestAnimationFrame(() => {\n      handleParallax();\n\n      ticking = false;\n    });\n\n    ticking = true;\n  }\n});\n\nif (\n  document.querySelectorAll(\".element-whatshappening.as-hover\").length &&\n  window.matchMedia(\"(min-width: 1024px)\").matches &&\n  !isTouchDevice\n) {\n  window.addEventListener(\"resize\", handleParallax);\n\n  handleParallax();\n}\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","asHover","classList","contains","container","querySelector","slides","activeSlide","Swiper","modules","A11y","Autoplay","Pagination","autoplay","delay","pauseOnMouseEnter","slidesPerView","spaceBetween","loop","speed","slideToClickedSlide","pagination","clickable","breakpoints","enabled","window","matchMedia","matches","isTouchDevice","settleContainer","gsap","to","x","rect","getBoundingClientRect","offset","width","innerWidth","duration","slide","title","screen","timeline","paused","onComplete","onReverseComplete","style","height","opacity","parseFloat","offsetWidth","fromTo","visibility","pointerEvents","Array","from","children","y","stagger","addEventListener","dataset","play","async","timeScale","reverse","init","setAttribute","offsetHeight","ticking","parallaxImages","handleParallax","viewportHeight","innerHeight","elementRect","elementHeight","translateY","top","transform","requestAnimationFrame","length","documentElement","generateQueryString","data","params","FormData","value","key","URLSearchParams","trackGoogleAnalytics","event","dataLayer","push"],"sourceRoot":""}