{"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/HomepageMasthead.js"],"names":[],"mappings":"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","file":"scripts/920.0fb6582cc0422e5ed72b.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 { keyCode } from '../helpers/variables';\r\nimport createScrollShapes from '../helpers/createScrollShapes';\r\n\r\nclass HomepageMasthead extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      tabsContainer: this.el.querySelector('.homepage-masthead__tabs'),\r\n      tabs: this.el.querySelectorAll('.homepage-masthead__tab'),\r\n      panelContainer: this.el.querySelector('.homepage-masthead__panels'),\r\n      panels: this.el.querySelectorAll('.homepage-masthead__panel'),\r\n      image: this.el.querySelector('.two-column-content-media__media'),\r\n      scrollBudy: this.el.querySelector(\r\n        '.homepage-masthead__scroll-budy svg line'\r\n      )\r\n    };\r\n\r\n    this.activePanel = 0;\r\n\r\n    this.buildShapes();\r\n    this.animateScrollBudy();\r\n    this.setCurrentPanel();\r\n  }\r\n\r\n  addListeners() {\r\n    this.dom.tabs.forEach(tab => {\r\n      tab.addEventListener('mouseenter', this.handleTabEnter.bind(this));\r\n      tab.addEventListener('focusin', this.handleTabEnter.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    this.dom.shapes = createScrollShapes({\r\n      containerEl: this.el,\r\n      count: 1,\r\n      prefix: 'homepage-masthead__',\r\n      scrollAnimate: false\r\n    });\r\n\r\n    this.dom.shapes = createScrollShapes({\r\n      containerEl: this.dom.image,\r\n      count: 6,\r\n      prefix: 'homepage-masthead__image-',\r\n      scrollAnimate: false\r\n    });\r\n  }\r\n\r\n  animateScrollBudy() {\r\n    const tl = anime.timeline({\r\n      easing: 'linear',\r\n      duration: 200,\r\n      endDelay: 400,\r\n      loop: true\r\n    });\r\n\r\n    tl.add({\r\n      targets: this.dom.scrollBudy,\r\n      strokeWidth: [0, 2]\r\n    });\r\n\r\n    tl.add(\r\n      {\r\n        targets: this.dom.scrollBudy,\r\n        y2: [12, 24]\r\n      },\r\n      '-=200'\r\n    );\r\n\r\n    tl.add({\r\n      targets: this.dom.scrollBudy,\r\n      y1: [12, 24]\r\n    });\r\n\r\n    tl.add(\r\n      {\r\n        targets: this.dom.scrollBudy,\r\n        strokeWidth: [2, 0]\r\n      },\r\n      '-=200'\r\n    );\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\r\n    switch (key) {\r\n      case keyCode.LEFT:\r\n        this.dom.tabs[\r\n          this.activePanel === 1\r\n            ? this.dom.tabs.length - 1\r\n            : this.activePanel - 2\r\n        ].focus();\r\n        break;\r\n      case keyCode.RIGHT:\r\n        this.dom.tabs[\r\n          this.activePanel === this.dom.tabs.length ? 0 : this.activePanel\r\n        ].focus();\r\n        break;\r\n      default:\r\n        break;\r\n    }\r\n  }\r\n\r\n  handleTabEnter(e) {\r\n    if (e.target.getAttribute('aria-selected') === 'true') return;\r\n\r\n    this.dom.tabs.forEach((tab, index) => {\r\n      if (tab === e.target) {\r\n        this.activePanel = index + 1;\r\n        tab.setAttribute('aria-selected', true);\r\n        tab.setAttribute('tabindex', 0);\r\n      } else {\r\n        tab.setAttribute('aria-selected', false);\r\n        tab.setAttribute('tabindex', -1);\r\n      }\r\n    });\r\n    this.setCurrentPanel();\r\n  }\r\n\r\n  setCurrentPanel() {\r\n    const activePannel = this.dom.panels[this.activePanel];\r\n\r\n    this.dom.panelContainer\r\n      .querySelector('.homepage-masthead__panel--active')\r\n      ?.classList.remove('homepage-masthead__panel--active');\r\n\r\n    activePannel.classList.add('homepage-masthead__panel--active');\r\n  }\r\n}\r\n\r\nexport default HomepageMasthead;\r\n"],"sourceRoot":""}