{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/helpers/createScrollShapes.js","webpack://@verndale/toolkit/./src/js/helpers/variables.js","webpack://@verndale/toolkit/./src/js/modules/FeaturedContentTabsRow.js"],"names":[],"mappings":"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","file":"scripts/506.16aacd925cbb248a2cc4.js","sourcesContent":["import anime from 'animejs/lib/anime.es';\r\nimport ScrollMagic from 'scrollmagic';\r\nimport { breakpoints } from './variables';\r\n\r\nconst _scrollAnimateShapes = ({\r\n  containerEl,\r\n  shapeContainer,\r\n  offset = 0,\r\n  count\r\n}) => {\r\n  // Create animation timeline\r\n  const timeline = anime.timeline({\r\n    easing: 'easeOutExpo',\r\n    duration: 1000,\r\n    autoplay: false\r\n  });\r\n\r\n  [...shapeContainer.childNodes].forEach((shape, index) => {\r\n    timeline.add(\r\n      {\r\n        targets: shape,\r\n        translateY: [80, 0],\r\n        opacity: [0, 1]\r\n      },\r\n      (1000 / count) * index\r\n    );\r\n  });\r\n\r\n  // Add scrollmagic scene\r\n  const controller = new ScrollMagic.Controller();\r\n  new ScrollMagic.Scene({\r\n    triggerElement: containerEl,\r\n    duration: window.innerHeight * 0.7,\r\n    offset,\r\n    triggerHook: 1 // 0 = onLeave, 1 = onEnter\r\n  })\r\n    .on('progress', event => {\r\n      timeline.seek(timeline.duration * event.progress);\r\n    })\r\n    .addTo(controller);\r\n};\r\n\r\nconst _animateShapes = ({ shapeContainer, count }) => {\r\n  // Create animation timeline\r\n  const timeline = anime.timeline({\r\n    easing: 'easeOutExpo',\r\n    duration: 600\r\n  });\r\n\r\n  [...shapeContainer.childNodes].forEach((shape, index) => {\r\n    timeline.add(\r\n      {\r\n        targets: shape,\r\n        translateY: [80, 0],\r\n        opacity: [0, 1]\r\n      },\r\n      (600 / count) * index\r\n    );\r\n  });\r\n};\r\n\r\nconst createScrollShapes = ({\r\n  containerEl,\r\n  count,\r\n  prefix = '',\r\n  scrollAnimate = true,\r\n  offset = 0\r\n}) => {\r\n  const breakpoint = window.matchMedia(`(min-width: ${breakpoints.desktop}px)`);\r\n  const shapeContainer = document.createElement('div');\r\n  shapeContainer.classList.add(`${prefix}shapes-container`);\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    const shape = document.createElement('span');\r\n    shape.classList.add(`shape-${i + 1}`);\r\n    shapeContainer.append(shape);\r\n  }\r\n\r\n  containerEl.append(shapeContainer);\r\n\r\n  if (!breakpoint.matches) return;\r\n\r\n  if (scrollAnimate) {\r\n    _scrollAnimateShapes({ containerEl, shapeContainer, offset, count });\r\n  } else {\r\n    _animateShapes({ shapeContainer, count });\r\n  }\r\n};\r\n\r\nexport default createScrollShapes;\r\n","// /**\r\n// * Key code list object\r\n// */\r\nexport const keyCode = {\r\n  TAB: 9,\r\n  RETURN: 13,\r\n  ESC: 27,\r\n  SPACE: 32,\r\n  PAGEUP: 33,\r\n  PAGEDOWN: 34,\r\n  END: 35,\r\n  HOME: 36,\r\n  LEFT: 37,\r\n  UP: 38,\r\n  RIGHT: 39,\r\n  DOWN: 40\r\n};\r\n\r\n// /**\r\n// * Key code list object\r\n// */\r\nexport const breakpoints = {\r\n  mobile: 360,\r\n  tablet: 768,\r\n  tabletLandscape: 1024,\r\n  desktop: 1280,\r\n  wide: 1600\r\n};\r\n","import { Component } from '@verndale/core';\r\nimport anime from 'animejs/lib/anime.es';\r\nimport createScrollShapes from '../helpers/createScrollShapes';\r\nimport { keyCode } from '../helpers/variables';\r\n\r\nclass FeaturedContentTabsRow extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      tabs: this.el.querySelectorAll('.featured-content-tabs-row__tab'),\r\n      panels: [...this.el.querySelectorAll('.featured-content-tabs-row__panel')]\r\n    };\r\n\r\n    this.buildShapes();\r\n    this.setSelectedTab(0);\r\n  }\r\n\r\n  addListeners() {\r\n    this.dom.tabs.forEach((tab, index) => {\r\n      tab.index = index;\r\n      tab.addEventListener('click', this.handleTabClick.bind(this));\r\n      tab.addEventListener('keydown', this.handleKeyDown.bind(this));\r\n      tab.addEventListener('keyup', this.handleKeyUp.bind(this));\r\n    });\r\n  }\r\n\r\n  buildShapes() {\r\n    const { offsetHeight } = this.el;\r\n\r\n    this.dom.shapes = createScrollShapes({\r\n      containerEl: this.el,\r\n      count: 2,\r\n      prefix: 'featured-content-tabs-row__',\r\n      offset: offsetHeight * 0.2\r\n    });\r\n  }\r\n\r\n  setSelectedTab(selectedIndex) {\r\n    this.dom.tabs.forEach((tab, index) => {\r\n      tab.setAttribute('aria-selected', index === selectedIndex);\r\n\r\n      if (index === selectedIndex) {\r\n        tab.removeAttribute('tabindex');\r\n      } else {\r\n        tab.setAttribute('tabindex', -1);\r\n      }\r\n    });\r\n\r\n    const activePanel = this.dom.panels.find(panel =>\r\n      panel.classList.contains('featured-content-tabs-row__panel--active')\r\n    );\r\n    const selectedPanel = this.dom.panels[selectedIndex];\r\n\r\n    if (activePanel) {\r\n      this.hidePanel(activePanel, () => {\r\n        this.showPanel(selectedPanel);\r\n      });\r\n    } else {\r\n      this.showPanel(selectedPanel);\r\n    }\r\n  }\r\n\r\n  hidePanel(panel, callback) {\r\n    anime({\r\n      targets: panel,\r\n      opacity: [1, 0],\r\n      easing: 'linear',\r\n      duration: 200,\r\n      complete: () => {\r\n        panel.classList.remove('featured-content-tabs-row__panel--active');\r\n        callback();\r\n      }\r\n    });\r\n  }\r\n\r\n  showPanel(panel) {\r\n    panel.classList.add('featured-content-tabs-row__panel--active');\r\n    anime({\r\n      targets: panel,\r\n      opacity: [0, 1],\r\n      easing: 'linear',\r\n      duration: 200\r\n    });\r\n  }\r\n\r\n  handleTabClick(e) {\r\n    this.setSelectedTab(e.target.index);\r\n  }\r\n\r\n  handleKeyDown(e) {\r\n    const key = e.keyCode;\r\n\r\n    switch (key) {\r\n      case keyCode.END:\r\n        e.preventDefault();\r\n        // Activate last tab\r\n        this.dom.tabs[this.dom.tabs.length - 1].focus();\r\n        break;\r\n      case keyCode.HOME:\r\n        e.preventDefault();\r\n        // Activate first tab\r\n        this.dom.tabs[0].focus();\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleKeyUp(e) {\r\n    const key = e.keyCode;\r\n    const { target } = e;\r\n\r\n    switch (key) {\r\n      case keyCode.LEFT:\r\n        if (target.index === 0) {\r\n          this.dom.tabs[this.dom.tabs.length - 1].focus();\r\n        } else {\r\n          this.dom.tabs[target.index - 1].focus();\r\n        }\r\n        break;\r\n      case keyCode.RIGHT:\r\n        if (target.index === this.dom.tabs.length - 1) {\r\n          this.dom.tabs[0].focus();\r\n        } else {\r\n          this.dom.tabs[target.index + 1].focus();\r\n        }\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n}\r\n\r\nexport default FeaturedContentTabsRow;\r\n"],"sourceRoot":""}