{"version":3,"sources":["identity.infinity-slider.js"],"names":["InfinitySlider","HTMLElement","tagName","selectors","container","child","image","cssVariables","animationDuration","maxHeight","imageWidth","aspectRatio","modifiers","loaded","constructor","super","this","animationDiration","getAttribute","marqueeContainers","querySelectorAll","marqueeChildren","forEach","classList","add","addStyle","updateMaxHeight","setAnimationDuration","window","addEventListener","handleEvent","event","type","style","document","createElement","textContent","append","viewportWidth","clientWidth","Math","max","setProperty","parseInt","getComputedStyle","documentElement","getPropertyValue","gcd","a","b","ratio","img","querySelector","ceil","naturalWidth","naturalHeight","floor","customElements","define"],"mappings":"MAAAA,uBAAAC,YAEAC,eAAA,kBAEAC,iBAAA,CACAC,UAAA,oCACAC,MAAA,gCACAC,MAAA,KACA,EAEAC,oBAAA,CACAC,kBAAA,8CACAC,UAAA,sCACAC,WAAA,uCACAC,YAAA,uCACA,EAEAC,iBAAA,CACAC,OAAA,QACA,EAEAC,cACAC,MAAA,EAEAC,KAAAC,kBAAAD,KAAAE,aAAA,oBAAA,EACAF,KAAAP,UAAAO,KAAAE,aAAA,YAAA,EACAF,KAAAN,WAAAM,KAAAE,aAAA,aAAA,EACAF,KAAAL,YAAAK,KAAAE,aAAA,cAAA,EAEAF,KAAAG,kBAAAH,KAAAI,iBAAApB,eAAAG,UAAAC,SAAA,EACAY,KAAAK,gBAAAL,KAAAI,iBAAApB,eAAAG,UAAAE,KAAA,EAEAW,KAAAG,kBAAAG,QAAAlB,GAAAA,EAAAmB,UAAAC,IAAAxB,eAAAY,UAAAC,MAAA,CAAA,EAEAG,KAAAS,SAAA,EACAT,KAAAU,gBAAA,EACAV,KAAAW,qBAAA,EAEAC,OAAAC,iBAAA,SAAAb,KAAA,CAAA,CAAA,CAEA,CAEAc,YAAAC,GAEA,WADAA,EAAAC,OAEAhB,KAAAU,gBAAA,EACAV,KAAAW,qBAAA,EAGA,CAEAF,WACA,IAAAQ,EAAAC,SAAAC,cAAA,OAAA,EAEAF,EAAAG;;UAEApC,eAAAO,aAAAC,sBAAAQ,KAAAC;UACAjB,eAAAO,aAAAE,cAAAO,KAAAP;UACAT,eAAAO,aAAAG,eAAAM,KAAAN;UACAV,eAAAO,aAAAI,gBAAAK,KAAAL;SAEAK,KAAAqB,OAAAJ,CAAA,CACA,CAEAN,uBACAX,KAAAG,kBAAAG,QAAAlB,IACA,IAAAkC,EAAAlC,EAAAmC,YACA/B,EAAAgC,KAAAC,IAAA,GAAAH,EAAA,EAAA,EAAA,IACAlC,EAAA6B,MAAAS,YAAA1C,eAAAO,aAAAC,kBAAAA,CAAA,CACA,CAAA,CACA,CAEAkB,kBACA,IAAAjB,EAAAkC,SAAAC,iBAAAV,SAAAW,eAAA,EAAAC,iBAAA9C,eAAAO,aAAAE,SAAA,EAAA,EAAA,EACAsC,EAAA,CAAAC,EAAAC,IAAAA,EAAAF,EAAAE,EAAAD,EAAAC,CAAA,EAAAD,EAEAhC,KAAAK,gBAAAC,QAAAjB,IACA,IAEAK,EACAwC,EAHAC,EAAA9C,EAAA+C,cAAApD,eAAAG,UAAAG,KAAA,EACA,OAAA6C,IACAzC,EAAA8B,KAAAa,KAAA5C,GAAA0C,EAAAG,aAAAH,EAAAI,cAAA,EAAA,KACAL,EAAAH,EAAAI,EAAAG,aAAAH,EAAAI,aAAA,EACA5C,EAAA6B,KAAAgB,MAAAL,EAAAG,aAAAJ,CAAA,EAAA,IAAAV,KAAAgB,MAAAL,EAAAI,cAAAL,CAAA,EAEA7C,EAAA4B,MAAAS,YAAA1C,eAAAO,aAAAG,WAAAA,CAAA,EACAL,EAAA4B,MAAAS,YAAA1C,eAAAO,aAAAI,YAAAA,CAAA,EAEA,CAAA,CACA,CACA,CAEAuB,SAAAL,iBAAA,mBAAA,KACA4B,eAAAC,OAAA1D,eAAAE,QAAAF,cAAA,CACA,CAAA","file":"identity.infinity-slider.js","sourcesContent":["class InfinitySlider extends HTMLElement {\r\n\r\n  static tagName = 'infinity-slider';\r\n\r\n  static selectors = {\r\n    container: '.custom-marquee-slider--container',\r\n    child: '.custom-marquee-slider--child',\r\n    image: 'img',\r\n  };\r\n\r\n  static cssVariables = {\r\n    animationDuration: '--custom-marquee-slider--animation-duration',\r\n    maxHeight: '--custom-marquee-slider--max-height',\r\n    imageWidth: '--custom-marquee-slider--image-width',\r\n    aspectRatio: '--custom-marquee-slider--aspect-ratio',\r\n  };\r\n  \r\n  static modifiers = {\r\n    loaded: 'loaded'\r\n  }\r\n\r\n  constructor() {\r\n    super();\r\n\r\n    this.animationDiration = this.getAttribute('animation-duration');\r\n    this.maxHeight = this.getAttribute('max-height');\r\n    this.imageWidth = this.getAttribute('image-width');\r\n    this.aspectRatio = this.getAttribute('aspect-ratio');\r\n\r\n    this.marqueeContainers = this.querySelectorAll( InfinitySlider.selectors.container );\r\n    this.marqueeChildren = this.querySelectorAll( InfinitySlider.selectors.child );\r\n    \r\n    this.marqueeContainers.forEach( container => container.classList.add( InfinitySlider.modifiers.loaded ) );\r\n    \r\n    this.addStyle();\r\n    this.updateMaxHeight();\r\n    this.setAnimationDuration();\r\n\r\n    window.addEventListener( 'resize', this, false );\r\n\r\n  }\r\n\r\n  handleEvent( event ) {\r\n    switch ( event.type ) {\r\n      case 'resize':\r\n        this.updateMaxHeight();\r\n        this.setAnimationDuration();\r\n        break;\r\n    }\r\n  }\r\n\r\n  addStyle() {\r\n    const style = document.createElement( 'style' );\r\n\r\n    style.textContent = `\r\n      :root {\r\n        ${InfinitySlider.cssVariables.animationDuration}: ${this.animationDiration}s;\r\n        ${InfinitySlider.cssVariables.maxHeight}: ${this.maxHeight};\r\n        ${InfinitySlider.cssVariables.imageWidth}: ${this.imageWidth};\r\n        ${InfinitySlider.cssVariables.aspectRatio}: ${this.aspectRatio};\r\n      }`;\r\n    this.append( style );\r\n  }\r\n\r\n  setAnimationDuration() {\r\n    this.marqueeContainers.forEach( container => {\r\n      const viewportWidth = container.clientWidth;\r\n      const animationDuration = `${ Math.max( 15, viewportWidth / 50 ) }s`;\r\n      container.style.setProperty( InfinitySlider.cssVariables.animationDuration, animationDuration );\r\n    } );\r\n  }\r\n\r\n  updateMaxHeight() {\r\n    const maxHeight = parseInt( getComputedStyle( document.documentElement ).getPropertyValue( InfinitySlider.cssVariables.maxHeight ), 10 );\r\n    const gcd = ( a, b ) => (b ? gcd( b, a % b ) : a);\r\n\r\n    this.marqueeChildren.forEach( child => {\r\n      const img = child.querySelector( InfinitySlider.selectors.image );\r\n      if ( img !== null ) {\r\n        const imageWidth = `${ Math.ceil( maxHeight * (img.naturalWidth / img.naturalHeight) ) }px`;\r\n        const ratio = gcd( img.naturalWidth, img.naturalHeight );\r\n        const aspectRatio = `${ Math.floor( img.naturalWidth / ratio ) }/${ Math.floor( img.naturalHeight / ratio ) }`;\r\n\r\n        child.style.setProperty( InfinitySlider.cssVariables.imageWidth, imageWidth );\r\n        child.style.setProperty( InfinitySlider.cssVariables.aspectRatio, aspectRatio );\r\n      }\r\n    } );\r\n  }\r\n}\r\n\r\ndocument.addEventListener( 'DOMContentLoaded', () => {\r\n  customElements.define( InfinitySlider.tagName, InfinitySlider );\r\n} );"]}