{"version":3,"file":"logoContainer-94ymXusT.js","sources":["../../src/scripts/modules/logoContainer.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { animate } from 'framer-motion';\n\nclass LogoContainer extends Component {\n  visibleLogos: HTMLElement[] | undefined;\n  hiddenLogos: HTMLElement[] | undefined;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    if ((this.dom.logos as NodeListOf<HTMLElement>).length <= 6) return;\n    this.visibleLogos = [];\n    this.hiddenLogos = [];\n    this.setupAnimation();\n    setTimeout(() => {\n      this.animateLogos();\n    }, 3000);\n  }\n\n  setupDefaults() {\n    this.dom = {\n      logosContainer: this.el.querySelector('.logo-container__logos') as HTMLElement,\n      logos: this.el.querySelectorAll('.logo-container__logo') as NodeListOf<HTMLElement>,\n      logoWrappers: this.el.querySelectorAll(\n        '.logo-container__logo-wrapper'\n      ) as NodeListOf<HTMLElement>\n    };\n  }\n\n  setupAnimation() {\n    // move logos greater than 6 to a separate container\n    (this.dom.logos as NodeListOf<HTMLElement>).forEach((logo, index) => {\n      if (index < 6) {\n        this.visibleLogos?.push(logo as HTMLElement);\n      } else {\n        this.hiddenLogos?.push(logo as HTMLElement);\n      }\n    });\n\n    const newDiv = document.createElement('div');\n    newDiv.classList.add('logo-container__hidden-logos');\n    this.hiddenLogos?.forEach(logo => {\n      newDiv.appendChild(logo as HTMLElement);\n    });\n    this.dom.hiddenLogoContainer = newDiv as HTMLElement;\n    (this.el as HTMLElement).appendChild(newDiv);\n  }\n\n  animateLogos() {\n    const randomVisibleIndex = Math.floor(Math.random() * this.visibleLogos!.length);\n    const randomHiddenIndex = Math.floor(Math.random() * this.hiddenLogos!.length);\n    const visibleLogo = this.visibleLogos![randomVisibleIndex];\n    const hiddenLogo = this.hiddenLogos![randomHiddenIndex];\n\n    this.visibleLogos!.splice(randomVisibleIndex, 1, hiddenLogo);\n    this.hiddenLogos!.splice(randomHiddenIndex, 1, visibleLogo);\n\n    const logoWrapper = visibleLogo.parentElement as HTMLElement;\n    logoWrapper.appendChild(hiddenLogo);\n    hiddenLogo.style.opacity = '0';\n\n    requestAnimationFrame(async () => {\n      //animate visible logo to fade out\n      await animate(visibleLogo, { opacity: 0 }, { duration: 1 });\n      //animate hidden logo to fade in\n      await animate(hiddenLogo, { opacity: 1 }, { duration: 0.75 });\n    });\n\n    //set to repeat every 1 seconds\n    setTimeout(() => {\n      this.animateLogos();\n    }, 3000);\n  }\n\n  addListeners() {}\n}\n\nexport default LogoContainer;\n"],"names":["LogoContainer","Component","el","__publicField","logo","index","_a","_b","newDiv","randomVisibleIndex","randomHiddenIndex","visibleLogo","hiddenLogo","animate"],"mappings":"+RAGA,MAAMA,UAAsBC,CAAU,CAIpC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAJVC,EAAA,qBACAA,EAAA,oBAIO,OAAK,IAAI,MAAkC,QAAU,KAC1D,KAAK,aAAe,GACpB,KAAK,YAAc,GACnB,KAAK,eAAe,EACpB,WAAW,IAAM,CACf,KAAK,aAAa,GACjB,GAAI,EACT,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,eAAgB,KAAK,GAAG,cAAc,wBAAwB,EAC9D,MAAO,KAAK,GAAG,iBAAiB,uBAAuB,EACvD,aAAc,KAAK,GAAG,iBACpB,+BACF,CAAA,CAEJ,CAEA,gBAAiB,OAEd,KAAK,IAAI,MAAkC,QAAQ,CAACC,EAAMC,IAAU,SAC/DA,EAAQ,GACLC,EAAA,KAAA,eAAA,MAAAA,EAAc,KAAKF,IAEnBG,EAAA,KAAA,cAAA,MAAAA,EAAa,KAAKH,EACzB,CACD,EAEK,MAAAI,EAAS,SAAS,cAAc,KAAK,EACpCA,EAAA,UAAU,IAAI,8BAA8B,GAC9CF,EAAA,KAAA,cAAA,MAAAA,EAAa,QAAgBF,GAAA,CAChCI,EAAO,YAAYJ,CAAmB,CAAA,GAExC,KAAK,IAAI,oBAAsBI,EAC9B,KAAK,GAAmB,YAAYA,CAAM,CAC7C,CAEA,cAAe,CACP,MAAAC,EAAqB,KAAK,MAAM,KAAK,SAAW,KAAK,aAAc,MAAM,EACzEC,EAAoB,KAAK,MAAM,KAAK,SAAW,KAAK,YAAa,MAAM,EACvEC,EAAc,KAAK,aAAcF,CAAkB,EACnDG,EAAa,KAAK,YAAaF,CAAiB,EAEtD,KAAK,aAAc,OAAOD,EAAoB,EAAGG,CAAU,EAC3D,KAAK,YAAa,OAAOF,EAAmB,EAAGC,CAAW,EAEtCA,EAAY,cACpB,YAAYC,CAAU,EAClCA,EAAW,MAAM,QAAU,IAE3B,sBAAsB,SAAY,CAE1B,MAAAC,EAAQF,EAAa,CAAE,QAAS,GAAK,CAAE,SAAU,CAAA,CAAG,EAEpD,MAAAE,EAAQD,EAAY,CAAE,QAAS,GAAK,CAAE,SAAU,GAAA,CAAM,CAAA,CAC7D,EAGD,WAAW,IAAM,CACf,KAAK,aAAa,GACjB,GAAI,CACT,CAEA,cAAe,CAAC,CAClB"}