{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/HomeHero.js"],"names":[],"mappings":"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","file":"scripts/404.bundle.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { from, zip, interval, delay, timeInterval } from 'rxjs';\n\nclass HomeHero extends Component {\n  setupDefaults() {\n    this.dom = {\n      slides: this.el.querySelectorAll('.home-hero__slide'),\n      previousButtons: this.el.querySelectorAll(\n        '[data-module-role=\"hero_previous\"]'\n      ),\n      nextButtons: this.el.querySelectorAll('[data-module-role=\"hero_next\"]'),\n      pauseButtons: this.el.querySelectorAll('[data-module-role=\"hero_pause\"]'),\n      paginations: this.el.querySelectorAll('.home-hero__indicator'),\n      timeScaleData: this.el.dataset.moduleTimescale,\n      timeInterval: this.el.dataset.timeInterval\n    };\n\n    this.timeScale = parseFloat(this.dom.timeScaleData || '1'); // The global time scale. Modifiable to make the entire animation faster/slower. For example, 0.5 would speed up the animation by half. 2 would make the animation twice as slow.\n    this.nextSlideInterval = parseInt(this.dom.timeInterval || '5000', 10); // Time between slides. Note that this is not affected by the global time scale.\n    this.lineDrawDelay = 30; // Delay between the letters animating in and the underlineline animating across.\n    this.paused = false; // Is the animation paused?\n    this.timeout = null; // Will contain the setTimeout that controls the nextSlideInterval.\n    this.currentSlide = 0; // Which slide are we on? (0-based index)\n    this.initSlider();\n  }\n\n  setListeners(elementsArray, action) {\n    Array.from(elementsArray).map(element =>\n      element.addEventListener('click', action)\n    );\n  }\n\n  addListeners() {\n    const { nextButtons, previousButtons, pauseButtons } = this.dom;\n    this.setListeners(nextButtons, this.nextSlide.bind(this));\n    this.setListeners(previousButtons, this.previousSlide.bind(this));\n    this.setListeners(pauseButtons, this.pauseSlide.bind(this));\n  }\n\n  createSliderArray() {\n    const { slides } = this.dom;\n\n    this.slidesArray = Array.from(slides).map(slide => {\n      const textElements = slide.querySelectorAll(\n        '[data-module-role=\"hero_animation\"]'\n      );\n      const slideObject = {\n        element: slide,\n        animations: Array.from(textElements).map(element => {\n          const animationObject = {\n            element,\n            letters: (element.textContent || element.innerText || '').split(''),\n            duration: parseInt(\n              element.getAttribute('data-module-duration') || '250',\n              10\n            ),\n            delay: parseInt(\n              element.getAttribute('data-module-delay') || '25',\n              10\n            )\n          };\n          return animationObject;\n        })\n      };\n      return slideObject;\n    });\n  }\n\n  initSlider() {\n    this.createSliderArray();\n    this.goToSlide(this.currentSlide);\n  }\n\n  setIndicator() {\n    const currentPage = this.currentSlide + 1;\n    Array.from(this.dom.paginations).map(pagination => {\n      pagination.innerHTML = `${currentPage} / ${this.dom.slides.length}`;\n      return pagination;\n    });\n  }\n\n  showSlide(slideToShow) {\n    // Show the slide we're about to animate and hide all other slides.\n    this.slidesArray.forEach(slideArray => {\n      slideArray.element.style.display = 'none';\n      slideArray.animations.forEach(animation => {\n        animation.element.style.visibility = 'hidden';\n      });\n    });\n    slideToShow.element.style.display = 'flex';\n\n    return slideToShow; // Return the shown slide for easy object chaining (seen below).\n  }\n\n  goToSlide(index) {\n    if (typeof index !== 'number' || !this.dom.slides[index]) return; // Don't do anything if paused, if a number wasn't supplied, or if the number supplied doesn't map to a slide\n    clearTimeout(this.timeout); // Kill the 'next slide' timer.\n    this.setIndicator(index);\n    this.showSlide(this.slidesArray[index]).animations.forEach(animation => {\n      animation.element.style.width =\n        animation.element.offsetWidth || animation.element.clientWidth || 0; // Set an explicit width so that the underline knows how big to be\n      animation.element.style.visibility = 'hidden'; // Set to visibility: hidden until it's time to animate\n      animation.element.style.transitionDelay = `${\n        this.lineDrawDelay * this.timeScale\n      }ms`; // Set transition delay for the underline\n      animation.element.style.transitionDuration = `${\n        (animation.duration - this.lineDrawDelay * 2) * this.timeScale\n      }ms`; // Set the transition duration for the underline\n      animation.element.innerHTML = '&nbsp;'; // Empty the element so we can start animating in the letters\n      const observables = from(animation.letters); // Use responsive extensions observable, docs here: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/observable.md // Create an observable from an array (of letters, like so: ['W','h','y',' ','D','a','v','i','e','s'])\n      const lettersDelay = delay(animation.delay * this.timeScale);\n      const intervalForAnimation = interval(\n        (animation.duration / animation.letters.length) * this.timeScale\n      ).pipe(timeInterval(), lettersDelay);\n\n      const zippedObservables = zip(\n        // Zip merges two observables to use the functionality from both (sort of). Here I'm asking it to push a new letter at time based intervals, with a delay.\n        observables,\n        intervalForAnimation\n      );\n\n      zippedObservables.subscribe(result => {\n        // When a new letter is pushed, add it to the innerHTML of the animation element (creates a 'typing' animation).\n        const iteration = result[1].value || 0;\n        if (!iteration) {\n          // If this is the first letter, set visibility to true and add a class to start the underline animation.\n          // eslint-disable-next-line prefer-destructuring\n          animation.element.innerHTML = result[0];\n          animation.element.style.visibility = 'visible';\n          animation.element.classList.remove('js-animating-out');\n          window.requestAnimationFrame(() => {\n            animation.element.classList.add('js-animating-in');\n          });\n        } else animation.element.innerHTML += result[0];\n        if (iteration >= animation.letters.length - 1) {\n          // If it's the last letter, reset the CSS values and remove the underline animation class.\n          animation.element.style.width = '';\n          animation.element.style.transitionDuration = `${\n            (animation.duration + this.lineDrawDelay) * this.timeScale\n          }ms`;\n          window.requestAnimationFrame(() => {\n            animation.element.classList.add('js-animating-out');\n            window.requestAnimationFrame(() => {\n              animation.element.classList.remove('js-animating-in');\n            });\n          });\n        }\n      });\n    });\n\n    if (!this.paused)\n      this.timeout = setTimeout(\n        this.nextSlide.bind(this),\n        this.nextSlideInterval\n      ); // If the animation is not paused, start the timer for the next slide.\n  }\n\n  nextSlide() {\n    // Go to the next slide (or wrap around to first)\n    if (this.currentSlide >= this.dom.slides.length - 1) {\n      this.currentSlide = 0;\n    } else {\n      this.currentSlide += 1;\n    }\n    this.goToSlide(this.currentSlide);\n  }\n\n  previousSlide() {\n    // Go to the previous slide (or wrap around to last)\n    if (this.currentSlide < 0) {\n      this.currentSlide = this.dom.slides.length - 1;\n    } else {\n      this.currentSlide -= 1;\n    }\n    this.goToSlide(this.currentSlide);\n  }\n\n  pauseSlide() {\n    this.paused = !this.paused;\n    if (this.paused) {\n      Array.from(this.dom.pauseButtons).map(button =>\n        button.classList.add('js-paused')\n      );\n      clearTimeout(this.timeout);\n    } else {\n      Array.from(this.dom.pauseButtons).map(button =>\n        button.classList.remove('js-paused')\n      );\n      this.nextSlide();\n    }\n  }\n}\n\nexport default HomeHero;\n"],"sourceRoot":""}