{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/components/LogoCarousel.js","webpack://@verndale/toolkit/./src/js/helpers/variables.js"],"names":[],"mappings":"6JAGA,eAA2B,KAAU,CACnC,eAAgB,CACd,KAAK,IAAM,CACT,MAAO,KAAK,GAAG,iBAAiB,QAElC,KAAK,WAAa,OAAO,WAAW,eAAe,iBAEnD,KAAK,aAGP,cAAe,CACb,OAAO,iBAAiB,SAAU,KAAK,aAAa,KAAK,OACzD,KAAK,WAAW,YAAY,KAAK,cAAc,KAAK,OAGtD,YAAa,CACX,GAAI,KAAK,IAAI,OAAS,KAAK,IAAI,MAAM,OAAS,EAAG,CAI/C,GAHA,KAAK,UAAY,KAAK,IAAI,MAAM,GAAG,YACnC,KAAK,WAAa,KAAK,UAAY,KAAK,IAAI,MAAM,OAE9C,KAAK,GAAG,YAAc,KAAK,WAAY,OAE3C,KAAK,GAAG,UAAU,IAAI,eACtB,KAAK,UAAY,OAAO,sBACtB,KAAK,aAAa,KAAK,QAK7B,YAAa,CACX,KAAK,GAAG,UAAU,OAAO,eAEzB,KAAK,IAAI,OAAO,QAAQ,GAAQ,CAC9B,EAAK,MAAQ,KACb,OAAO,qBAAqB,KAAK,aAIrC,eAAgB,CACd,KAAK,aACL,KAAK,aAGP,cAAe,CACb,KAAK,IAAI,OAAO,QAAQ,CAAC,EAAM,IAAU,CACvC,GAAI,GAAc,EAAK,MAAM,UACzB,KAAK,cAAc,GACnB,EAAQ,KAAK,UAEjB,EAAkB,CAAC,KAAK,WACtB,GAAc,KAAK,WAAa,KAAK,WAEvC,EAAK,MAAM,UAAY,cAAc,EAAc,UAGrD,KAAK,UAAY,OAAO,sBAAsB,KAAK,aAAa,KAAK,OAGvE,cAAc,EAAM,CAClB,KAAM,GAAQ,OAAO,iBAAiB,GAEtC,MAAO,IADY,iBAAgB,EAAM,WAC3B,IAGhB,cAAe,CACb,GAAI,KAAK,IAAI,MAAO,CAElB,KAAM,GAAa,KADI,IAAI,MAAM,GAAG,YACL,KAAK,IAAI,MAAM,OAE9C,KACO,GAAG,YAAc,GACtB,KAAK,GAAG,UAAU,SAAS,eAE3B,KAAK,aAEL,EAAa,KAAK,GAAG,aACrB,CAAC,KAAK,GAAG,UAAU,SAAS,gBAE5B,KAAK,eAMb,UAAe,G,6ECpFR,KAAM,GAAU,CACrB,IAAK,EACL,OAAQ,GACR,IAAK,GACL,MAAO,GACP,OAAQ,GACR,SAAU,GACV,IAAK,GACL,KAAM,GACN,KAAM,GACN,GAAI,GACJ,MAAO,GACP,KAAM,IAMK,EAAc,CACzB,OAAQ,IACR,OAAQ,IACR,gBAAiB,KACjB,QAAS,KACT,KAAM","file":"scripts/471.1a7bf55b8a8eb0dba176.js","sourcesContent":["import { Component } from '@verndale/core';\r\nimport { breakpoints } from '../helpers/variables';\r\n\r\nclass LogoCarousel extends Component {\r\n  setupDefaults() {\r\n    this.dom = {\r\n      logos: this.el.querySelectorAll('img')\r\n    };\r\n    this.breakpoint = window.matchMedia(`(min-width: ${breakpoints.tablet}px)`);\r\n\r\n    this.initSlider();\r\n  }\r\n\r\n  addListeners() {\r\n    window.addEventListener('resize', this.handleResize.bind(this));\r\n    this.breakpoint.addListener(this.restartSlider.bind(this));\r\n  }\r\n\r\n  initSlider() {\r\n    if (this.dom.logos && this.dom.logos.length > 1) {\r\n      this.logoWidth = this.dom.logos[0].offsetWidth;\r\n      this.totalWidth = this.logoWidth * this.dom.logos.length;\r\n\r\n      if (this.el.offsetWidth > this.totalWidth) return;\r\n\r\n      this.el.classList.add('initialized');\r\n      this.animation = window.requestAnimationFrame(\r\n        this.animateLogos.bind(this)\r\n      );\r\n    }\r\n  }\r\n\r\n  stopSlider() {\r\n    this.el.classList.remove('initialized');\r\n\r\n    this.dom.logos?.forEach(logo => {\r\n      logo.style = null;\r\n      window.cancelAnimationFrame(this.animation);\r\n    });\r\n  }\r\n\r\n  restartSlider() {\r\n    this.stopSlider();\r\n    this.initSlider();\r\n  }\r\n\r\n  animateLogos() {\r\n    this.dom.logos?.forEach((logo, index) => {\r\n      let newPosition = logo.style.transform\r\n        ? this.getTranslateX(logo)\r\n        : index * this.logoWidth;\r\n\r\n      if (newPosition < -this.logoWidth) {\r\n        newPosition = this.totalWidth - this.logoWidth;\r\n      }\r\n      logo.style.transform = `translateX(${newPosition - 0.8}px)`;\r\n    });\r\n\r\n    this.animation = window.requestAnimationFrame(this.animateLogos.bind(this));\r\n  }\r\n\r\n  getTranslateX(logo) {\r\n    const style = window.getComputedStyle(logo);\r\n    const matrix = new WebKitCSSMatrix(style.transform);\r\n    return matrix.m41;\r\n  }\r\n\r\n  handleResize() {\r\n    if (this.dom.logos) {\r\n      const logoWidth = this.dom.logos[0].offsetWidth;\r\n      const totalWidth = logoWidth * this.dom.logos.length;\r\n\r\n      if (\r\n        this.el.offsetWidth > totalWidth &&\r\n        this.el.classList.contains('initialized')\r\n      ) {\r\n        this.stopSlider();\r\n      } else if (\r\n        totalWidth > this.el.offsetWidth &&\r\n        !this.el.classList.contains('initialized')\r\n      ) {\r\n        this.initSlider();\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nexport default LogoCarousel;\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"],"sourceRoot":""}