{"version":3,"file":"project-masthead-carousel-090de16d.js","sources":["../../../../src/scripts/modules/project-masthead-carousel.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Pagination, Keyboard } from 'swiper';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\nimport 'swiper/css/bundle';\nimport { ExtendedWindowType } from '../coveo/engine';\n\nclass ProjectMastheadCarousel extends Component {\n  private swiper: { slideTo?: (index: number) => void | undefined };\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.swiper = {};\n    this.init();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      carousel: this.el.querySelector<HTMLElement>(\n        '.project-masthead-carousel__carousel'\n      ),\n      thumbsContainer: this.el.querySelector<HTMLElement>(\n        '.project-masthead-carousel__thumbs-container'\n      ),\n      thumbs: this.el.querySelectorAll<HTMLElement>(\n        '.project-masthead-carousel__thumb'\n      ),\n      pagination: this.el.querySelector<HTMLElement>('.swiper-pagination'),\n      nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev')\n    };\n  }\n\n  addListeners() {\n    (this.dom.thumbs as NodeListOf<HTMLButtonElement>).forEach(thumb => {\n      thumb.addEventListener('click', this.handleThumbClick.bind(this));\n    });\n  }\n\n  init() {\n    Swiper.use([Navigation, Pagination, Keyboard]);\n    const { pagination, nextArrow, prevArrow, carousel, thumbs } = this.dom;\n\n    this.swiper = new Swiper(carousel as HTMLElement, {\n      effect: 'fade',\n      fadeEffect: {\n        crossFade: true\n      },\n      spaceBetween: 20,\n      slidesPerView: 1,\n      pagination: {\n        el: pagination as HTMLElement\n      },\n      navigation: {\n        prevEl: prevArrow as HTMLElement,\n        nextEl: nextArrow as HTMLElement\n      },\n      breakpoints: {\n        [BREAKPOINTS.tablet]: {\n          spaceBetween: 40\n        },\n        [BREAKPOINTS.desktop]: {\n          spaceBetween: 160\n        }\n      },\n      on: {\n        activeIndexChange: swiper => {\n          const cards = thumbs as NodeListOf<HTMLElement>;\n\n          cards.item(swiper.previousIndex).classList.remove('active');\n          cards.item(swiper.activeIndex).classList.add('active');\n        },\n        slideChange: swiper => this.swiperLayerEvent(swiper)\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  swiperLayerEvent(swiper: Swiper) {\n    const interactLayer = `{\"event\":\"carousel_interaction\",\"event_category\":\"content_interaction\",\"event_label\":\"${(\n      swiper.activeIndex + 1\n    ).toString()} of ${swiper.slides.length}\"}`;\n\n    if (interactLayer) {\n      (window as ExtendedWindowType).dataLayer.push(\n        JSON.parse(interactLayer) as object\n      );\n    }\n  }\n\n  handleThumbClick(event: Event) {\n    const target = event.currentTarget as HTMLElement;\n    const index = Array.from(\n      this.dom.thumbs as NodeListOf<HTMLElement>\n    ).indexOf(target);\n\n    if (this.swiper.slideTo && index > -1) {\n      this.swiper.slideTo(index);\n    }\n\n    if (!this.el.classList.contains('blog-landing-masthead')) {\n      const global = window as ExtendedWindowType;\n\n      global.dataLayer?.push({\n        event: 'project_profiles_thumbnail_click',\n        event_category: 'project profiles',\n        event_action: 'carousel thumbnail click',\n        event_label: `${index + 1} of ${(this.dom.thumbs as NodeList)?.length}`\n      });\n    }\n  }\n}\n\nexport default ProjectMastheadCarousel;\n"],"names":["ProjectMastheadCarousel","Component","el","__publicField","thumb","Swiper","Navigation","Pagination","Keyboard","pagination","nextArrow","prevArrow","carousel","thumbs","BREAKPOINTS","swiper","cards","interactLayer","event","target","index","_b","_a"],"mappings":"uhBAMA,MAAMA,UAAgCC,CAAU,CAG9C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAHFC,EAAA,eAIN,KAAK,OAAS,GACd,KAAK,KAAK,CACZ,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,SAAU,KAAK,GAAG,cAChB,sCACF,EACA,gBAAiB,KAAK,GAAG,cACvB,8CACF,EACA,OAAQ,KAAK,GAAG,iBACd,mCACF,EACA,WAAY,KAAK,GAAG,cAA2B,oBAAoB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,CAAA,CAEvE,CAEA,cAAe,CACZ,KAAK,IAAI,OAAyC,QAAiBC,GAAA,CAClEA,EAAM,iBAAiB,QAAS,KAAK,iBAAiB,KAAK,IAAI,CAAC,CAAA,CACjE,CACH,CAEA,MAAO,CACLC,EAAO,IAAI,CAACC,EAAYC,EAAYC,CAAQ,CAAC,EAC7C,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,OAAAC,GAAW,KAAK,IAE/D,KAAA,OAAS,IAAIR,EAAOO,EAAyB,CAChD,OAAQ,OACR,WAAY,CACV,UAAW,EACb,EACA,aAAc,GACd,cAAe,EACf,WAAY,CACV,GAAIH,CACN,EACA,WAAY,CACV,OAAQE,EACR,OAAQD,CACV,EACA,YAAa,CACX,CAACI,EAAY,MAAM,EAAG,CACpB,aAAc,EAChB,EACA,CAACA,EAAY,OAAO,EAAG,CACrB,aAAc,GAChB,CACF,EACA,GAAI,CACF,kBAA6BC,GAAA,CAC3B,MAAMC,EAAQH,EAEdG,EAAM,KAAKD,EAAO,aAAa,EAAE,UAAU,OAAO,QAAQ,EAC1DC,EAAM,KAAKD,EAAO,WAAW,EAAE,UAAU,IAAI,QAAQ,CACvD,EACA,YAAaA,GAAU,KAAK,iBAAiBA,CAAM,CACrD,EACA,SAAU,CACR,QAAS,GACT,eAAgB,EAClB,CAAA,CACD,CACH,CAEA,iBAAiBA,EAAgB,CACzB,MAAAE,EAAgB,0FACpBF,EAAO,YAAc,GACrB,SAAS,QAAQA,EAAO,OAAO,WAE7BE,GACD,OAA8B,UAAU,KACvC,KAAK,MAAMA,CAAa,CAAA,CAG9B,CAEA,iBAAiBC,EAAc,SAC7B,MAAMC,EAASD,EAAM,cACfE,EAAQ,MAAM,KAClB,KAAK,IAAI,MAAA,EACT,QAAQD,CAAM,EAEZ,KAAK,OAAO,SAAWC,EAAQ,IAC5B,KAAA,OAAO,QAAQA,CAAK,EAGtB,KAAK,GAAG,UAAU,SAAS,uBAAuB,IAGrDC,EAFe,OAER,YAAP,MAAAA,EAAkB,KAAK,CACrB,MAAO,mCACP,eAAgB,mBAChB,aAAc,2BACd,YAAa,GAAGD,EAAQ,SAASE,EAAA,KAAK,IAAI,SAAT,YAAAA,EAA8B,QAAA,EAGrE,CACF"}