{"version":3,"file":"content-grid-88ef622d.js","sources":["../../../../src/scripts/modules/content-grid.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { ExtendedWindowType, DataLayerObject } from '..';\n\nclass ContentGrid extends Component {\n  private swiper: { destroy?: () => void | undefined };\n  private galleryItems: HTMLElement[] = [];\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.swiper = {};\n  }\n\n  setupDefaults() {\n    this.dom = {\n      $el: this.el,\n      $swiper: this.el.querySelector<HTMLElement>(\n        '.content-grid__bottom-container'\n      ),\n      $slides: this.el.querySelectorAll('.swiper-slide'),\n      $slideNext: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      $slidePrev: this.el.querySelector<HTMLElement>('.swiper-button-prev'),\n      $linkTexts: this.el.querySelectorAll('.content-grid__link-text')\n    };\n    this.checkBreakpoint();\n    this.setGalleryItems();\n  }\n\n  addListeners() {\n    window.addEventListener('resize', this.handleResize.bind(this));\n    this.galleryItems.forEach(galleryItem => {\n      // Get the link text element within the gallery item\n      const linkText = galleryItem.querySelector('.content-grid__link-text');\n      if (!linkText) return;\n\n      // Add mouseover event listener\n      linkText.addEventListener(\n        'mouseover',\n        this.handleTextMouseOver.bind(this)\n      );\n\n      // Add mouseout event listener\n      linkText.addEventListener('mouseout', this.handleTextMouseOut.bind(this));\n    });\n  }\n\n  handleResize() {\n    if (this.swiper.destroy) {\n      this.swiper.destroy();\n    }\n    this.checkBreakpoint();\n  }\n\n  checkBreakpoint() {\n    // Destroy Swiper on breakpoint change\n    const breakpoint = window.matchMedia('(min-width: 1024px)');\n    const destroySwiperOnBreakpoint = (breakpoint: MediaQueryList) => {\n      if (breakpoint.matches) {\n        if (this.swiper) {\n          if (this.swiper.destroy) {\n            this.swiper.destroy();\n          }\n        }\n      } else {\n        this.initSwiper();\n      }\n    };\n    destroySwiperOnBreakpoint(breakpoint);\n  }\n\n  swiperLayerEvent(swiper: Swiper) {\n    const interactLayer = this.el.dataset.interactLayer?.replace(\n      '{index}',\n      (swiper.activeIndex + 1).toString()\n    );\n    if (interactLayer) {\n      (window as ExtendedWindowType).dataLayer.push(\n        JSON.parse(interactLayer) as DataLayerObject\n      );\n    }\n  }\n\n  handleVisibleSlides(swiper: Swiper) {\n    // detect if visible slides are fully in view\n    const visibleSlides = swiper.slides.filter((slide: HTMLElement) =>\n      slide.classList.contains('swiper-slide-visible')\n    );\n    const firstVisibleSlide = visibleSlides[0];\n    const lastVisibleSlide = visibleSlides[visibleSlides.length - 1];\n    const firstVisibleSlideRect = firstVisibleSlide?.getBoundingClientRect();\n    const lastVisibleSlideRect = lastVisibleSlide?.getBoundingClientRect();\n    const isFirstSlideFullyInView = firstVisibleSlideRect.left >= 0;\n    const isLastSlideFullyInView =\n      lastVisibleSlideRect.right <= window.innerWidth;\n\n    swiper.slides.forEach((slide: HTMLElement) => {\n      const anchor = slide.querySelector('a');\n\n      anchor?.removeAttribute('tabindex');\n\n      if (slide === firstVisibleSlide && !isFirstSlideFullyInView) {\n        anchor?.setAttribute('tabindex', '-1');\n      }\n\n      if (slide === lastVisibleSlide && !isLastSlideFullyInView) {\n        anchor?.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  initSwiper() {\n    Swiper.use([Navigation, Keyboard]);\n    this.swiper = new Swiper(this.dom.$swiper as HTMLElement, {\n      loop: false,\n      spaceBetween: 20,\n      slidesPerView: 'auto',\n      grabCursor: true,\n      watchSlidesProgress: true,\n      navigation: {\n        prevEl: this.dom.$slidePrev as HTMLElement,\n        nextEl: this.dom.$slideNext as HTMLElement\n      },\n      breakpoints: {\n        // when window width is >= 320px\n        320: {\n          centeredSlides: true\n        },\n        // when window width is >= 640px\n        640: {\n          slidesOffsetAfter: 65,\n          slidesOffsetBefore: 65\n        }\n      },\n      on: {\n        afterInit: swiper => this.handleVisibleSlides(swiper),\n        slideChangeTransitionEnd: swiper => this.handleVisibleSlides(swiper),\n        slideChange: swiper => this.swiperLayerEvent(swiper)\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  handleTextMouseOver(event: Event) {\n    const target = event.target as HTMLElement;\n    const galleryItem = target.closest('.content-grid__card') as HTMLElement;\n    const imageWrapper = galleryItem.querySelector(\n      '.content-grid__image-wrapper'\n    );\n    const hoverImage = (imageWrapper as HTMLElement).style.getPropertyValue(\n      '--hover-image'\n    );\n    const cleanedHoverImage = hoverImage.replace(\"url('\", '').replace(\"')\", '');\n    const image = (imageWrapper as HTMLElement).querySelector('img');\n    if (image && cleanedHoverImage !== '') {\n      const originalImageSrc = image.src;\n      image.src = cleanedHoverImage;\n      // Add mouseout event listener\n      target.addEventListener('mouseout', () => {\n        // Restore the original image source\n        image.src = originalImageSrc;\n      });\n    }\n  }\n\n  handleTextMouseOut(event: Event) {\n    const target = event.target as HTMLElement;\n    const galleryItem = target.closest('.content-grid__card') as HTMLElement;\n    const imageWrapper = galleryItem.querySelector(\n      '.content-grid__image-wrapper'\n    );\n    const hoverImage = (imageWrapper as HTMLElement).style.getPropertyValue(\n      '--hover-image'\n    );\n    const cleanedHoverImage = hoverImage.replace(\"url('\", '').replace(\"')\", '');\n    const image = (imageWrapper as HTMLElement).querySelector('img');\n    if (image && cleanedHoverImage !== '') {\n      const originalImageSrc = image.src;\n      image.src = originalImageSrc;\n    }\n  }\n\n  setGalleryItems() {\n    this.galleryItems = [];\n    const cards = document.querySelectorAll('.content-grid__card');\n    cards.forEach(card => {\n      this.galleryItems.push(card as HTMLElement);\n    });\n  }\n}\n\nexport default ContentGrid;\n"],"names":["ContentGrid","Component","el","__publicField","galleryItem","linkText","breakpoint","swiper","interactLayer","_a","visibleSlides","slide","firstVisibleSlide","lastVisibleSlide","firstVisibleSlideRect","lastVisibleSlideRect","isFirstSlideFullyInView","isLastSlideFullyInView","anchor","Swiper","Navigation","Keyboard","event","target","imageWrapper","cleanedHoverImage","image","originalImageSrc","card"],"mappings":"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"}