{"version":3,"sources":["webpack:///./src/js/modules/clientPortfolio.js"],"names":["Module","this","speed","el","dataset","defaultMargin","breakpoint","breakpoints","640","margin","1024","1280","1600","dom","slider","querySelector","slides","querySelectorAll","cards","handleWindowResize","addEventListener","handleMouseEnter","bind","handleMouseLeave","forEach","card","window","previousBreakpoint","Object","keys","reverse","find","innerWidth","parseInt","kill","calculateSizes","initSlider","pause","play","style","cardHeight","Math","max","map","offsetHeight","slideHeight","slideWidth","offsetWidth","height","totalWidth","length","mod","gsap","utils","wrap","set","x","i","timeline","to","modifiers","parseFloat","duration","ease","repeat","Component"],"mappings":"+vEAGMA,E,iXAEFC,KAAKC,MAAQD,KAAKE,GAAGC,QAAQF,OAAS,GACtCD,KAAKI,cAAgB,GACrBJ,KAAKK,WAAa,KAClBL,KAAKM,YAAc,CACjBC,IAAK,CACHC,OAAQ,IAEVC,KAAM,CACJD,OAAQ,IAEVE,KAAM,CACJF,OAAQ,IAEVG,KAAM,CACJH,OAAQ,KAIZR,KAAKY,IAAM,CACTC,OAAQb,KAAKE,GAAGY,cAAc,mCAC9BC,OAAQf,KAAKE,GAAGc,iBAAiB,4BACjCC,MAAO,EAAIjB,KAAKE,GAAGc,iBAAiB,6BAGtChB,KAAKkB,uB,qCAGQ,WACblB,KAAKY,IAAIC,OAAOM,iBACd,aACAnB,KAAKoB,iBAAiBC,KAAKrB,OAE7BA,KAAKY,IAAIC,OAAOM,iBACd,aACAnB,KAAKsB,iBAAiBD,KAAKrB,OAG7BA,KAAKY,IAAIK,MAAMM,SAAQ,SAAAC,GACrBA,EAAKL,iBAAiB,QAAS,EAAKC,iBAAiBC,KAAK,IAC1DG,EAAKL,iBAAiB,OAAQ,EAAKG,iBAAiBD,KAAK,OAE3DI,OAAON,iBAAiB,SAAUnB,KAAKkB,mBAAmBG,KAAKrB,S,2CAI/DA,KAAKQ,OAASR,KAAKI,cAEnB,IAAMsB,EAAqB1B,KAAKK,WAEhCL,KAAKK,WAAasB,OAAOC,KAAK5B,KAAKM,aAChCuB,UACAC,MAAK,SAAAzB,GAAU,OAAIoB,OAAOM,YAAcC,SAAS3B,MAEhDqB,IAAuB1B,KAAKK,aAC1BL,KAAKa,QACPb,KAAKa,OAAOoB,OACZjC,KAAKkC,iBACLlC,KAAKmC,cAELnC,KAAKmC,gB,yCAMLnC,KAAKa,QACPb,KAAKa,OAAOuB,U,yCAKVpC,KAAKa,QACPb,KAAKa,OAAOwB,S,uCAMdrC,KAAKY,IAAIK,MAAMM,SAAQ,SAAAC,GAAI,OAAKA,EAAKc,MAAQ,QAG7C,IAAMC,EAAaC,KAAKC,IAAL,MAAAD,KAAI,EAClBxC,KAAKY,IAAIK,MAAMyB,KAAI,SAAAlB,GAAI,OAAIA,EAAKmB,kBASrC3C,KAAK4C,YAA2B,EAAbL,EAFJ,GAGfvC,KAAK6C,WAAa7C,KAAKY,IAAIK,MAAM,GAAG6B,YAHrB,GAKf9C,KAAKY,IAAIK,MAAMM,SAAQ,SAAAC,GAAI,OAAKA,EAAKc,MAAMS,OAAX,UAAuBR,EAAvB,SAChCvC,KAAKY,IAAIC,OAAOyB,MAAMS,OAAtB,UAAkC/C,KAAK4C,YAAvC,Q,mCAGW,WACX5C,KAAKkC,iBAEL,IAAMc,EAAahD,KAAK6C,WAAa7C,KAAKY,IAAIG,OAAOkC,OAC/CC,EAAMC,IAAKC,MAAMC,MAAMrD,KAAK6C,WAAYG,EAAahD,KAAK6C,YAEhEM,IAAKG,IAAItD,KAAKY,IAAIG,OAAQ,CAAEwC,EAAG,SAAAC,GAAC,OAAIA,EAAI,EAAKX,cAE7C7C,KAAKa,OAASsC,IAAKM,WAAWC,GAAG1D,KAAKY,IAAIG,OAAQ,CAChDwC,EAAG,KAAF,OAAOP,GACRW,UAAW,CACTJ,EAAG,SAAAA,GAAC,gBAAOL,EAAIU,WAAWL,IAAtB,QAENM,SAAU7D,KAAKC,MACf6D,KAAM,OACNC,QAAS,S,8BAnHMC,aAwHNjE","file":"52.16df896c58033211e788.js","sourcesContent":["import { Component } from '@verndale/core';\r\nimport { gsap } from 'gsap';\r\n\r\nclass Module extends Component {\r\n  setupDefaults() {\r\n    this.speed = this.el.dataset.speed || 30;\r\n    this.defaultMargin = 22;\r\n    this.breakpoint = null;\r\n    this.breakpoints = {\r\n      640: {\r\n        margin: 44\r\n      },\r\n      1024: {\r\n        margin: 22\r\n      },\r\n      1280: {\r\n        margin: 32\r\n      },\r\n      1600: {\r\n        margin: 40\r\n      }\r\n    };\r\n\r\n    this.dom = {\r\n      slider: this.el.querySelector('.client-portfolio__slider-inner'),\r\n      slides: this.el.querySelectorAll('.client-portfolio__slide'),\r\n      cards: [...this.el.querySelectorAll('.client-portfolio__card')]\r\n    };\r\n\r\n    this.handleWindowResize();\r\n  }\r\n\r\n  addListeners() {\r\n    this.dom.slider.addEventListener(\r\n      'mouseenter',\r\n      this.handleMouseEnter.bind(this)\r\n    );\r\n    this.dom.slider.addEventListener(\r\n      'mouseleave',\r\n      this.handleMouseLeave.bind(this)\r\n    );\r\n\r\n    this.dom.cards.forEach(card => {\r\n      card.addEventListener('focus', this.handleMouseEnter.bind(this));\r\n      card.addEventListener('blur', this.handleMouseLeave.bind(this));\r\n    });\r\n    window.addEventListener('resize', this.handleWindowResize.bind(this));\r\n  }\r\n\r\n  handleWindowResize() {\r\n    this.margin = this.defaultMargin;\r\n\r\n    const previousBreakpoint = this.breakpoint;\r\n\r\n    this.breakpoint = Object.keys(this.breakpoints)\r\n      .reverse()\r\n      .find(breakpoint => window.innerWidth >= parseInt(breakpoint));\r\n\r\n    if (previousBreakpoint !== this.breakpoint) {\r\n      if (this.slider) {\r\n        this.slider.kill();\r\n        this.calculateSizes();\r\n        this.initSlider();\r\n      } else {\r\n        this.initSlider();\r\n      }\r\n    }\r\n  }\r\n\r\n  handleMouseEnter() {\r\n    if (this.slider) {\r\n      this.slider.pause();\r\n    }\r\n  }\r\n\r\n  handleMouseLeave() {\r\n    if (this.slider) {\r\n      this.slider.play();\r\n    }\r\n  }\r\n\r\n  calculateSizes() {\r\n    // Reset cards height\r\n    this.dom.cards.forEach(card => (card.style = null));\r\n\r\n    // Get max card height\r\n    const cardHeight = Math.max(\r\n      ...this.dom.cards.map(card => card.offsetHeight)\r\n    );\r\n\r\n    // Set new height values\r\n    // const margin = this.breakpoint\r\n    //   ? this.breakpoints[this.breakpoint].margin\r\n    //   : this.defaultMargin;\r\n    const margin = 24;\r\n\r\n    this.slideHeight = cardHeight * 2 + margin;\r\n    this.slideWidth = this.dom.cards[0].offsetWidth + margin;\r\n\r\n    this.dom.cards.forEach(card => (card.style.height = `${cardHeight}px`));\r\n    this.dom.slider.style.height = `${this.slideHeight}px`;\r\n  }\r\n\r\n  initSlider() {\r\n    this.calculateSizes();\r\n\r\n    const totalWidth = this.slideWidth * this.dom.slides.length;\r\n    const mod = gsap.utils.wrap(-this.slideWidth, totalWidth - this.slideWidth);\r\n\r\n    gsap.set(this.dom.slides, { x: i => i * this.slideWidth });\r\n\r\n    this.slider = gsap.timeline().to(this.dom.slides, {\r\n      x: `-=${totalWidth}`,\r\n      modifiers: {\r\n        x: x => `${mod(parseFloat(x))}px`\r\n      },\r\n      duration: this.speed,\r\n      ease: 'none',\r\n      repeat: -1\r\n    });\r\n  }\r\n}\r\n\r\nexport default Module;\r\n"],"sourceRoot":""}