{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/bicentennial/ClockAnimation.js"],"names":[],"mappings":"8JAGA,SAAW,CAAC,KAAY,KAAY,OAEpC,eAA6B,KAAU,CACrC,eAAgB,CACd,KAAK,IAAM,CACT,GAAI,KAAK,IAGX,KAAK,gBAAkB,CACrB,WAAY,MACZ,UAAW,IAGb,KAAK,aAAe,KAAK,IAAI,GAAG,QAAQ,MACxC,KAAK,cAAgB,KAAK,IAAI,GAAG,QAAQ,OACzC,KAAK,aAAe,KAAK,IAAI,GAAG,QAAQ,MAExC,KAAK,eAGP,iBAAiB,EAAS,EAAU,CAClC,EAAQ,QAAQ,GAAW,CACzB,EAAU,gBACR,MAAK,gBACL,EAAS,UAAU,EAAM,WAK/B,cAAe,CACb,KAAK,SAAW,GAAI,sBAAqB,KAAK,iBAAiB,KAAK,MAAO,KAAK,iBAChF,KAAK,SAAS,QAAQ,KAAK,IAAI,IAGjC,+BAA+B,EAAG,CAChC,KAAM,CAAE,SAAQ,gBAAiB,EAEjC,GAAI,EAAO,UAAU,SAAS,2CAA6C,IAAiB,KAAK,aAAc,CAC7G,EAAO,UAAU,OAAO,0CACxB,EAAO,UAAU,IAAI,sCACrB,OAGF,EAAW,UAAU,SAAS,uCAAyC,IAAiB,KAAK,cAC3F,GAAO,UAAU,OAAO,sCACxB,EAAO,UAAU,IAAI,2CAIzB,gCAAgC,EAAG,CACjC,KAAM,CAAE,SAAQ,gBAAiB,EAE3B,EAAU,EAAO,UAAU,SAAS,sCAAwC,KAAK,aAAe,KAAK,cAE3G,GAAI,EAAO,UAAU,SAAS,2CAA6C,IAAiB,EAAS,CACnG,EAAO,UAAU,OAAO,0CACxB,EAAO,UAAU,IAAI,sCACrB,OAGF,EAAW,UAAU,SAAS,uCAAyC,IAAiB,KAAK,cAC3F,GAAO,UAAU,OAAO,sCACxB,EAAO,UAAU,OAAO,uCACxB,EAAO,UAAU,IAAI,sCACrB,EAAO,UAAU,IAAI,2CAIzB,eAAgB,CAEd,GAAI,KAAK,IAAI,GAAG,UAAU,SAAS,kBAEjC,KADqB,IAAI,GAAG,cAAc,4BAClC,UAAU,IAAI,yCACjB,CACL,KAAM,GAAe,KAAK,IAAI,GAAG,cAAc,uCACzC,EAAgB,KAAK,IAAI,GAAG,cAAc,wCAEhD,EAAa,iBAAiB,gBAAiB,KAAK,+BAA+B,KAAK,OACxF,EAAc,iBAAiB,gBAAiB,KAAK,gCAAgC,KAAK,OAC1F,EAAa,UAAU,IAAI,0CAC3B,EAAc,UAAU,IAAI,4CAKlC,UAAe","file":"scripts/4197.77e445e2de649caf1bb2.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Pagination, A11y } from 'swiper';\n\nSwiper.use([Navigation, Pagination, A11y]);\n\nclass ClockAnimation extends Component {\n  setupDefaults() {\n    this.dom = {\n      el: this.el\n    };\n\n    this.observerOptions = {\n      rootMargin: '0px',\n      threshold: 0.3\n    };\n\n    this.firstTrigger = this.dom.el.dataset.first;\n    this.secondTrigger = this.dom.el.dataset.second;\n    this.resetTrigger = this.dom.el.dataset.reset;\n\n    this.initObserver();\n  }\n\n  observerCallback(entries, observer) {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        this.initAnimation();\n        observer.unobserve(entry.target);\n      }\n    });\n  }\n\n  initObserver() {\n    this.observer = new IntersectionObserver(this.observerCallback.bind(this), this.observerOptions);\n    this.observer.observe(this.dom.el);\n  }\n\n  handleFirstDiamondAnimationEnd(e) {\n    const { target, propertyName } = e;\n\n    if (target.classList.contains('clock-animation__decoration--animating') && propertyName === this.firstTrigger) {\n      target.classList.remove('clock-animation__decoration--animating');\n      target.classList.add('clock-animation__decoration--reset');\n      return;\n    }\n\n    if (target.classList.contains('clock-animation__decoration--reset') && propertyName === this.resetTrigger) {\n      target.classList.remove('clock-animation__decoration--reset');\n      target.classList.add('clock-animation__decoration--animating');\n    }\n  }\n\n  handleSecondDiamondAnimationEnd(e) {\n    const { target, propertyName } = e;\n\n    const trigger = target.classList.contains('clock-animation__decoration--first') ? this.firstTrigger : this.secondTrigger;\n\n    if (target.classList.contains('clock-animation__decoration--animating') && propertyName === trigger) {\n      target.classList.remove('clock-animation__decoration--animating');\n      target.classList.add('clock-animation__decoration--reset');\n      return;\n    }\n\n    if (target.classList.contains('clock-animation__decoration--reset') && propertyName === this.resetTrigger) {\n      target.classList.remove('clock-animation__decoration--reset');\n      target.classList.remove('clock-animation__decoration--second');\n      target.classList.add('clock-animation__decoration--first');\n      target.classList.add('clock-animation__decoration--animating');\n    }\n  }\n\n  initAnimation() {\n\n    if (this.dom.el.classList.contains('line-animation')) {\n      const diamond = this.dom.el.querySelector('.line-animation__diamond');\n      diamond.classList.add('line-animation__diamond--animated');\n    } else {\n      const firstDiamond = this.dom.el.querySelector('.clock-animation__decoration--first');\n      const secondDiamond = this.dom.el.querySelector('.clock-animation__decoration--second');\n\n      firstDiamond.addEventListener('transitionend', this.handleFirstDiamondAnimationEnd.bind(this));\n      secondDiamond.addEventListener('transitionend', this.handleSecondDiamondAnimationEnd.bind(this));\n      firstDiamond.classList.add('clock-animation__decoration--animating');\n      secondDiamond.classList.add('clock-animation__decoration--animating');\n    }\n  }\n}\n\nexport default ClockAnimation;\n"],"sourceRoot":""}