{"version":3,"sources":["webpack:///./src/js/modules/featuredContentRow.js"],"names":["Module","this","breakpoint","window","matchMedia","breakpoints","tablet","selectedHeader","runningRolloverAnimation","dom","slider","el","querySelector","innerContainer","tabs","Array","from","querySelectorAll","headers","images","removeActiveState","classList","add","setAttribute","matches","swiper","initSlider","destroySlider","initImageViewer","forEach","header","index","addEventListener","handleTabHeaderClick","e","handleTabHeaderKeydown","setupDefaults","focus","slideTo","console","log","tab","tabParent","parentElement","updateImageViewer","selectTab","keyMapper","ArrowLeft","ArrowRight","key","nextTabIndex","lastTabIndex","length","remove","imageViewer","document","createElement","append","image","clonedImage","cloneNode","toggle","newImageIndex","imageViewerImages","currentImageIndex","findIndex","contains","newImageInView","newImageInViewCaption","direction","currentImageInView","anime","targets","translateX","easing","duration","complete","removeAttribute","translateY","opacity","delay","Swiper","slidesPerView","spaceBetween","threshold","watchOverflow","watchSlidesVisibility","slidesOffsetAfter","laptop","detachEvents","destroy","Component"],"mappings":"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","file":"60.58ffa4437632f0a5c0ba.js","sourcesContent":["import { Component } from '@verndale/core';\nimport anime from 'animejs/lib/anime.es.js';\nimport Swiper from 'swiper';\nimport { breakpoints } from '../helpers/constants';\n\nclass Module extends Component {\n  setupDefaults() {\n    this.breakpoint = window.matchMedia(\n      `(max-width: ${breakpoints.tablet - 1}px)`\n    );\n    this.selectedHeader = 0;\n    this.runningRolloverAnimation = false;\n    this.dom = {\n      slider: this.el.querySelector('.featured-content-row__tabs-container'),\n      innerContainer: this.el.querySelector('.featured-content-row__inner'),\n      tabs: Array.from(this.el.querySelectorAll('.featured-content-row__tab')),\n      headers: Array.from(\n        this.el.querySelectorAll('.featured-content-row__tab-header')\n      ),\n      images: Array.from(\n        this.el.querySelectorAll('.featured-content-row__tab-info')\n      )\n    };\n    this.removeActiveState();\n    this.dom.tabs[0].classList.add('featured-content-row__tab--active');\n    this.dom.headers[0].setAttribute('aria-selected', 'true');\n    if (this.breakpoint.matches) {\n      if (!this.swiper) {\n        this.initSlider();\n      }\n    } else {\n      this.destroySlider();\n      this.initImageViewer();\n    }\n  }\n\n  addListeners() {\n    this.dom.headers.forEach((header, index) => {\n      header.addEventListener('click', () => this.handleTabHeaderClick(index));\n      header.addEventListener('keydown', e => this.handleTabHeaderKeydown(e));\n    });\n    window.addEventListener('resize', () => {\n      this.setupDefaults();\n    });\n  }\n\n  selectTab(index, focus = false) {\n    if (this.breakpoint.matches) {\n      this.swiper.slideTo(index);\n    }\n    if (!this.breakpoint.matches && this.selectedHeader !== index) {\n      console.log('if');\n      this.selectedHeader = index;\n      const tab = this.dom.headers[index];\n      if (focus) tab.focus();\n      this.removeActiveState(this.dom.tabs);\n      const tabParent = tab.parentElement;\n      tabParent.classList.add('featured-content-row__tab--active');\n      tab.setAttribute('aria-selected', 'true');\n      this.updateImageViewer(index);\n    }\n  }\n\n  handleTabHeaderClick(index) {\n    this.selectTab(index);\n  }\n\n  handleTabHeaderKeydown(e) {\n    const keyMapper = { ArrowLeft: -1, ArrowRight: 1 };\n    // Return if theres no action for a key\n    if (!keyMapper[e.key]) return;\n    const nextTabIndex = keyMapper[e.key];\n    const lastTabIndex = this.dom.headers.length - 1;\n\n    if (this.selectedHeader + nextTabIndex === -1) {\n      this.selectTab(lastTabIndex, true);\n    } else if (this.selectedHeader + nextTabIndex > lastTabIndex) {\n      this.selectTab(0, true);\n    } else {\n      this.selectTab(this.selectedHeader + nextTabIndex, true);\n    }\n  }\n\n  removeActiveState() {\n    this.dom.tabs.forEach(tab => {\n      tab.classList.remove('featured-content-row__tab--active');\n    });\n    this.dom.headers.forEach(header => {\n      header.setAttribute('aria-selected', 'false');\n    });\n  }\n\n  initImageViewer() {\n    if (!this.el.querySelector('.featured-content-row__image-viewer')) {\n      const imageViewer = document.createElement('div');\n      imageViewer.classList.add('featured-content-row__image-viewer');\n      this.dom.innerContainer.append(imageViewer);\n      this.dom.images.forEach((image, index) => {\n        const clonedImage = image.cloneNode(true);\n        clonedImage.classList.toggle('active', !index);\n        clonedImage.classList.toggle('hidden', index);\n        imageViewer.append(clonedImage);\n      });\n    }\n  }\n\n  updateImageViewer(newImageIndex) {\n    if (this.runningRolloverAnimation) return;\n    this.runningRolloverAnimation = true;\n    const imageViewer = this.el.querySelector(\n      '.featured-content-row__image-viewer'\n    );\n    const imageViewerImages = Array.from(\n      imageViewer.querySelectorAll('.featured-content-row__tab-info')\n    );\n    const currentImageIndex = imageViewerImages.findIndex(image =>\n      image.classList.contains('active')\n    );\n    const newImageInView = imageViewerImages[newImageIndex];\n    const newImageInViewCaption = newImageInView.querySelector(\n      '.featured-content-row__tab-note'\n    );\n    const direction = newImageIndex > currentImageIndex ? '-100%' : '100%';\n    const currentImageInView = imageViewerImages[currentImageIndex];\n    newImageInView.classList.remove('hidden');\n    anime({\n      targets: currentImageInView,\n      translateX: ['0%', direction],\n      easing: 'easeInOutQuad',\n      duration: 400,\n      complete: () => {\n        this.runningRolloverAnimation = false;\n        newImageInView.classList.add('active');\n        currentImageInView.classList.add('hidden');\n        currentImageInView.classList.remove('active');\n        currentImageInView.removeAttribute('style');\n      }\n    });\n    if (newImageInViewCaption) {\n      anime({\n        targets: newImageInViewCaption,\n        translateY: ['20%', '0%'],\n        opacity: ['0%', '100%'],\n        easing: 'easeInOutQuad',\n        duration: 200,\n        delay: 200\n      });\n    }\n  }\n\n  initSlider() {\n    this.swiper = new Swiper(this.dom.slider, {\n      slidesPerView: 1.3,\n      spaceBetween: 33,\n      threshold: 8,\n      watchOverflow: true,\n      watchSlidesVisibility: true,\n      slidesOffsetAfter: 200, //Offset makes last card selectable\n      breakpoints: {\n        [breakpoints.tablet]: {\n          slidesOffsetAfter: 500,\n          slidesPerView: 4\n        },\n        [breakpoints.laptop]: {\n          slidesOffsetAfter: 0,\n          spaceBetween: 0\n        }\n      }\n    });\n  }\n\n  destroySlider() {\n    if (this.swiper) {\n      this.swiper.detachEvents();\n      this.swiper.destroy(true, true);\n      this.swiper = null;\n    }\n  }\n}\n\nexport default Module;\n"],"sourceRoot":""}