{"version":3,"file":"scroll-image-grid-Bi3gf88n.js","sources":["../../../../src/scripts/modules/scroll-image-grid.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper from 'swiper';\nimport { Navigation, Pagination, A11y, Keyboard } from 'swiper/modules';\nimport '../../scss/modules/full-height-carousel.scss';\nimport 'swiper/css';\nimport { BREAKPOINTS } from '../helpers/helpers';\nimport { eventBus, initialBreakpoint } from '../helpers/resize';\n\nclass ScrollImageGrid extends Component {\n  private swiper: Swiper | null = null;\n  private isMobile = false;\n\n  constructor(el: HTMLElement) {\n    super(el);\n\n    this.handleBreakpointChange(initialBreakpoint());\n  }\n\n  setupDefaults() {\n    this.dom = {\n      swiper: this.el.querySelector<HTMLDivElement>('.swiper'),\n      slides: this.el.querySelectorAll<HTMLDivElement>('.swiper-slide'),\n      pagination: this.el.querySelector<HTMLDivElement>('.swiper-pagination'),\n      next: this.el.querySelector<HTMLDivElement>('.swiper-button-next'),\n      prev: this.el.querySelector<HTMLDivElement>('.swiper-button-prev'),\n      stickyContainer: this.el.querySelector<HTMLElement>('.scroll-image-grid__static-card'),\n      stickyCard: this.el.querySelector<HTMLElement>('.scroll-image-grid__static-card .card')\n    };\n  }\n\n  addListeners(): void {\n    eventBus.subscribe('breakpointChange', this.handleBreakpointChange.bind(this));\n    window.addEventListener('scroll', this.handleScroll.bind(this));\n  }\n\n  handleScroll() {\n    const tabletLandscapeBreakpoint = 1024; // Define the breakpoint for tablet landscape\n\n    // If the window's width is less than or equal to the breakpoint, return immediately\n    if (window.innerWidth <= tabletLandscapeBreakpoint) {\n      this.stickyCardCleanup();\n      return;\n    }\n\n    const stickyCard = this.dom.stickyCard as HTMLElement;\n    const parentContainer = this.dom.stickyContainer as HTMLElement;\n\n    stickyCard.style.width = `${parentContainer.offsetWidth}px`;\n\n    // Calculate the initial top position of the sticky card relative to the document\n    let offsetParent = stickyCard.offsetParent as HTMLElement;\n    while (offsetParent != null) {\n      offsetParent = offsetParent.offsetParent as HTMLElement;\n    }\n\n    // Calculate the top and bottom boundaries of the parent container relative to the document\n    let parentContainerTop = parentContainer.offsetTop;\n    let parentContainerBottom = parentContainerTop + parentContainer.offsetHeight;\n    offsetParent = parentContainer.offsetParent as HTMLElement;\n    while (offsetParent != null) {\n      parentContainerTop += offsetParent.offsetTop;\n      parentContainerBottom += offsetParent.offsetTop;\n      offsetParent = offsetParent.offsetParent as HTMLElement;\n    }\n\n    const scrollY = window.scrollY;\n    const bottomParent = parentContainerBottom - stickyCard.offsetHeight;\n\n    if (scrollY > parentContainerTop && scrollY < bottomParent) {\n      stickyCard.style.position = 'fixed';\n      stickyCard.style.top = '100px'; // Stick to the top of the viewport\n    } else if (scrollY >= bottomParent) {\n      stickyCard.style.position = 'absolute';\n      stickyCard.style.top = 'auto'; // Reset to the initial position\n      stickyCard.style.bottom = '0'; // Stick to the bottom of the parent container\n    } else if (scrollY < parentContainerTop) {\n      stickyCard.style.position = 'relative';\n      stickyCard.style.top = 'auto'; // Reset to the initial position\n    }\n  }\n\n  initSwiper() {\n    this.stickyCardCleanup();\n    if (\n      (this.isMobile && (this.dom.slides as NodeList).length < 2) ||\n      (!this.isMobile && (this.dom.slides as NodeList).length < 3)\n    ) {\n      this.el.classList.add('scroll-image-grid--single-slide');\n      return;\n    } else {\n      this.el.classList.remove('scroll-image-grid--single-slide');\n    }\n\n    if (!this.swiper) {\n      this.swiper = new Swiper(this.dom.swiper as HTMLElement, {\n        modules: [Navigation, Pagination, A11y, Keyboard],\n        slidesPerView: 1,\n        spaceBetween: 16,\n        loop: true,\n        breakpoints: {\n          [BREAKPOINTS.tablet]: {\n            slidesPerView: 2,\n            spaceBetween: 16\n          },\n          [BREAKPOINTS.tabletLandscape]: {\n            slidesPerView: 2,\n            spaceBetween: 16\n          }\n        },\n        pagination: {\n          el: this.dom.pagination as HTMLElement,\n          type: 'fraction',\n          renderFraction: (currentClass: string, totalClass: string) => {\n            return `<span class=\"swiper-pagination-current\">${currentClass}</span>/<span class=\"swiper-pagination-total\">${totalClass}</span>`;\n          }\n        },\n        keyboard: {\n          enabled: true,\n          onlyInViewport: true\n        },\n        navigation: {\n          nextEl: this.dom.next as HTMLElement,\n          prevEl: this.dom.prev as HTMLElement\n        }\n      });\n    }\n  }\n\n  stickyCardCleanup() {\n    const stickyCard = this.dom.stickyCard as HTMLElement;\n    stickyCard.style.position = 'relative';\n    stickyCard.style.top = 'auto';\n    stickyCard.style.bottom = 'auto';\n    stickyCard.style.width = '100%';\n  }\n\n  handleBreakpointChange(breakpoint: string) {\n    if (breakpoint === 'mobile' || breakpoint === 'tablet') {\n      this.isMobile = breakpoint === 'mobile';\n      if (this.swiper) {\n        this.swiper.destroy(true, true);\n        this.swiper = null;\n      }\n      this.initSwiper();\n    } else {\n      if (this.swiper) {\n        this.swiper.destroy(true, true);\n        this.swiper = null;\n      }\n    }\n  }\n}\n\nexport default ScrollImageGrid;\n"],"names":["ScrollImageGrid","Component","el","__publicField","initialBreakpoint","eventBus","stickyCard","parentContainer","offsetParent","parentContainerTop","parentContainerBottom","scrollY","bottomParent","Swiper","Navigation","Pagination","A11y","Keyboard","BREAKPOINTS","currentClass","totalClass","breakpoint"],"mappings":"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"}