{"version":3,"file":"home-custom-animated-banner-t59wJ7N8.js","sources":["../../../../../../HFC.Optimizely.FrontEnd/src/scripts/modules/home-custom-animated-banner.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\ntype AnimationConfig = {\n  duration: number;\n  type: string;\n  loop: number;\n};\nclass HomeCustomAnimatedBanner extends Component {\n  setupDefaults() {\n    this.dom = {\n      heart: this.el.querySelector('.heart') as HTMLElement,\n      home: this.el.querySelector('.home') as HTMLElement,\n      heartImages: this.el.querySelectorAll('.heart img'),\n      houseImages: this.el.querySelectorAll('.home img'),\n      hElement: this.el.querySelector('.h-letter') as HTMLElement,\n      eElement: this.el.querySelector('.e-letter') as HTMLElement,\n      title: this.el.querySelector('.home-custom-animated-banner__title') as HTMLElement,\n      outroTitle: this.el.querySelector('.home-custom-animated-banner__outro') as HTMLElement\n    };\n\n    setTimeout(() => {\n      const loopCounter = Number(this.el.dataset.loop) || 3;\n\n      if (this.el.dataset.bypass && this.el.dataset.bypass === 'true') return;\n\n      this.initBanner(loopCounter);\n    }, 25);\n  }\n\n  addListeners() {}\n\n  resetBanner() {\n    (this.dom.heart as HTMLElement).classList.remove('shade');\n    (this.dom.home as HTMLElement).classList.remove('shade');\n\n    const heartImages = this.dom.heartImages as NodeList;\n    const houseImages = this.dom.houseImages as NodeList;\n\n    (heartImages[heartImages.length - 1] as HTMLImageElement).classList.remove('active');\n    (houseImages[houseImages.length - 1] as HTMLImageElement).classList.remove('active');\n\n    (heartImages[0] as HTMLImageElement).classList.add('active');\n    (houseImages[0] as HTMLImageElement).classList.add('active');\n\n    (this.dom.hElement as HTMLElement).classList.remove('hide');\n    (this.dom.eElement as HTMLElement).classList.remove('hide');\n    (this.dom.title as HTMLElement).classList.remove('hide');\n    (this.dom.outroTitle as HTMLElement).style.display = 'none';\n    (this.dom.outroTitle as HTMLElement).classList.remove('slide', 'show');\n  }\n\n  fadeTransition(\n    config: AnimationConfig,\n    heartImagesCount: number,\n    heartImages: NodeList,\n    houseImages: NodeList\n  ) {\n    // we want to set the active class on the second image in the array\n    // by default the first image will already have the active class\n    let counter = 1;\n    const animationInterval = setInterval(() => {\n      if (counter > heartImagesCount - 1) {\n        (this.dom.outroTitle as HTMLElement).style.display = 'flex';\n        clearInterval(animationInterval);\n        (heartImages[counter - 1] as HTMLImageElement).classList.remove('active');\n        (houseImages[counter - 1] as HTMLImageElement).classList.remove('active');\n        (this.dom.heart as HTMLElement).classList.add('shade');\n        (this.dom.home as HTMLElement).classList.add('shade');\n        this.finalAnimation(config.loop, config.duration);\n      } else {\n        (heartImages[counter - 1] as HTMLImageElement).classList.remove('active');\n        (heartImages[counter] as HTMLImageElement).classList.add('active');\n        (houseImages[counter - 1] as HTMLImageElement).classList.remove('active');\n        (houseImages[counter] as HTMLImageElement).classList.add('active');\n        counter++;\n      }\n    }, config.duration as number);\n  }\n\n  alternatingFadeTransition(\n    config: AnimationConfig,\n    heartImagesCount: number,\n    heartImages: NodeList,\n    houseImages: NodeList,\n    houseImagesCount: number\n  ) {\n    // we want to set the active class on the second image in the array\n    // by default the first image will already have the active class\n    let heartCounter = 1;\n    let houseCounter = 1;\n    const animationInterval = setInterval(() => {\n      if (heartCounter > heartImagesCount - 1 && houseCounter > houseImagesCount - 1) {\n        (this.dom.outroTitle as HTMLElement).style.display = 'flex';\n        clearInterval(animationInterval);\n        (heartImages[heartCounter - 1] as HTMLImageElement).classList.remove('active');\n        (houseImages[houseCounter - 1] as HTMLImageElement).classList.remove('active');\n        (this.dom.heart as HTMLElement).classList.add('shade');\n        (this.dom.home as HTMLElement).classList.add('shade');\n        this.finalAnimation(config.loop, config.duration);\n      } else {\n        (heartImages[heartCounter - 1] as HTMLImageElement).classList.remove('active');\n        (heartImages[heartCounter] as HTMLImageElement).classList.add('active');\n        nextHouseImage(houseCounter);\n        heartCounter++;\n      }\n    }, config.duration as number);\n\n    function nextHouseImage(counter: number) {\n      setTimeout(() => {\n        (houseImages[counter - 1] as HTMLImageElement).classList.remove('active');\n        (houseImages[counter] as HTMLImageElement).classList.add('active');\n        houseCounter++;\n      }, 1000);\n    }\n  }\n\n  initBanner(numberOfLoops: number) {\n    this.resetBanner();\n    const config: AnimationConfig = {\n      duration: Number(this.el.dataset.transitionTime) || (3000 as number),\n      type: this.el.dataset.transitionType || 'fade',\n      loop: numberOfLoops\n    };\n    const heartImagesCount = (this.dom.heartImages as NodeList).length;\n    const houseImagesCount = (this.dom.houseImages as NodeList).length;\n    const heartImages = this.dom.heartImages as NodeList;\n    const houseImages = this.dom.houseImages as NodeList;\n\n    if (heartImagesCount != houseImagesCount) {\n      console.error('home page animation banner does not have equal sets of images set');\n      return;\n    }\n\n    if (config.type === 'alternate') {\n      this.alternatingFadeTransition(\n        config,\n        heartImagesCount,\n        heartImages,\n        houseImages,\n        houseImagesCount\n      );\n    } else if (config.type === 'fade') {\n      this.fadeTransition(config, heartImagesCount, heartImages, houseImages);\n    }\n  }\n\n  finalAnimation(loop: number, duration: number) {\n    (this.dom.hElement as HTMLElement).classList.add('hide');\n    (this.dom.eElement as HTMLElement).classList.add('hide');\n    (this.dom.title as HTMLElement).classList.add('hide');\n    setTimeout(() => {\n      (this.dom.outroTitle as HTMLElement).classList.add('show');\n    }, 500);\n\n    loop--;\n\n    if (loop > 0) {\n      setTimeout(() => {\n        (this.dom.outroTitle as HTMLElement).classList.add('slide');\n      }, duration);\n      setTimeout(() => {\n        this.initBanner(loop);\n      }, duration + 2000);\n    }\n  }\n}\n\nexport default HomeCustomAnimatedBanner;\n"],"names":["HomeCustomAnimatedBanner","Component","loopCounter","heartImages","houseImages","config","heartImagesCount","counter","animationInterval","houseImagesCount","heartCounter","houseCounter","nextHouseImage","numberOfLoops","loop","duration"],"mappings":"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"}