{"version":3,"sources":["webpack:///./src/js/modules/eventListingHero.js"],"names":["EventListingHero","this","dom","el","lineDesktop","querySelector","lineMobile","mediaImage","breakpoint","window","matchMedia","breakpoints","tabletLandscape","lineAnimation","addEventListener","throttle","bind","debounce","lineDesktopAnimation","lineMobileAnimation","matches","blockRect","getBoundingClientRect","scrollPos","top","blockHeight","height","scrollPercent","Math","abs","style","innerHeight","Component"],"mappings":"klDAIMA,E,sWACJ,WACEC,KAAKC,IAAM,CACTC,GAAIF,KAAKE,GACTC,YAAaH,KAAKE,GAAGE,cACnB,yCAEFC,WAAYL,KAAKE,GAAGE,cAAc,wCAClCE,WAAYN,KAAKE,GAAGE,cAAc,+BAGpCJ,KAAKO,WAAaC,OAAOC,WAAP,sBACDC,IAAYC,gBADX,QAIlBX,KAAKY,kB,0BAGP,WACEJ,OAAOK,iBACL,SACAC,YAASd,KAAKY,cAAcG,KAAKf,MAAO,IAG1CQ,OAAOK,iBACL,SACAG,YAAShB,KAAKY,cAAcG,KAAKf,MAAO,Q,2BAI5C,WACEA,KAAKiB,uBACLjB,KAAKkB,wB,kCAGP,WACE,GAAKlB,KAAKO,WAAWY,QAArB,CAIA,MAA4BnB,KAAKC,IAAzBE,EAAR,EAAQA,YAAaD,EAArB,EAAqBA,GAErB,GAAKA,GAAOC,EAAZ,CAIA,IAAMiB,EAAYlB,EAAGmB,wBACjBC,EAAYF,EAAUG,IAAM,IAC1BC,EAAcJ,EAAUK,OAE1BH,EAAY,IACdA,EAAY,GAKd,IAAMI,GAFNJ,EAAYK,KAAKC,IAAIN,IAEcE,EAAe,IAMhDrB,EAAY0B,MAAMJ,OAAlB,UADEC,EAHc,IAKPA,EAJO,QAOcA,EAJ9B,S,iCAQJ,WACE,IAAI1B,KAAKO,WAAWY,QAApB,CAIA,MAAuCnB,KAAKC,IAApCI,EAAR,EAAQA,WAAYH,EAApB,EAAoBA,GAEpB,GAFA,EAAwBI,WAEnBJ,GAAOG,EAAZ,CAIA,IAAIiB,EAAYpB,EAAGmB,wBAAwBE,IAEvCD,EAAY,IACdA,EAAY,GAKd,IACMI,GAHNJ,EAAYK,KAAKC,IAAIN,IAEAd,OAAOsB,YACuB,IAKjDzB,EAAWwB,MAAMJ,OAAjB,UADEC,EAAgB,EAHF,EAKPA,EAJO,QAOaA,EAJ7B,Y,8BA/FyBK,aAwGhBhC","file":"58.becfc07c7305a3d2ff55.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { breakpoints } from '../helpers/constants';\nimport { throttle, debounce } from '../helpers';\n\nclass EventListingHero extends Component {\n  setupDefaults() {\n    this.dom = {\n      el: this.el,\n      lineDesktop: this.el.querySelector(\n        '.event-listing-hero__red-line-desktop'\n      ),\n      lineMobile: this.el.querySelector('.event-listing-hero__red-line-mobile'),\n      mediaImage: this.el.querySelector('.event-listing-hero__image')\n    };\n\n    this.breakpoint = window.matchMedia(\n      `(min-width: ${breakpoints.tabletLandscape}px)`\n    );\n\n    this.lineAnimation();\n  } // setupDefaults\n\n  addListeners() {\n    window.addEventListener(\n      'scroll',\n      throttle(this.lineAnimation.bind(this), 5)\n    );\n\n    window.addEventListener(\n      'resize',\n      debounce(this.lineAnimation.bind(this), 200)\n    );\n  } // addListeners\n\n  lineAnimation() {\n    this.lineDesktopAnimation();\n    this.lineMobileAnimation();\n  }\n\n  lineDesktopAnimation() {\n    if (!this.breakpoint.matches) {\n      return;\n    }\n\n    const { lineDesktop, el } = this.dom;\n\n    if (!el || !lineDesktop) {\n      return;\n    }\n\n    const blockRect = el.getBoundingClientRect();\n    let scrollPos = blockRect.top - 100;\n    const blockHeight = blockRect.height;\n\n    if (scrollPos > 0) {\n      scrollPos = 0;\n    }\n\n    scrollPos = Math.abs(scrollPos);\n\n    const scrollPercent = (scrollPos / blockHeight) * 150;\n\n    const minHeight = 0;\n    const maxHeight = 100;\n\n    if (scrollPercent < minHeight) {\n      lineDesktop.style.height = `${minHeight}%`;\n    } else if (scrollPercent > maxHeight) {\n      lineDesktop.style.height = `${maxHeight}%`;\n    } else {\n      lineDesktop.style.height = `${scrollPercent}%`;\n    }\n  } // lineDesktopAnimation\n\n  lineMobileAnimation() {\n    if (this.breakpoint.matches) {\n      return;\n    }\n\n    const { lineMobile, el, mediaImage } = this.dom;\n\n    if (!el || !lineMobile) {\n      return;\n    }\n\n    let scrollPos = el.getBoundingClientRect().top;\n\n    if (scrollPos > 0) {\n      scrollPos = 0;\n    }\n\n    scrollPos = Math.abs(scrollPos);\n\n    const windowHeight = window.innerHeight;\n    const scrollPercent = (scrollPos / windowHeight) * 175;\n    const minHeight = 0;\n    const maxHeight = 110;\n\n    if (scrollPercent < 0) {\n      lineMobile.style.height = `${minHeight}%`;\n    } else if (scrollPercent > maxHeight) {\n      lineMobile.style.height = `${maxHeight}%`;\n    } else {\n      lineMobile.style.height = `${scrollPercent}%`;\n    }\n  } // lineMobileAnimation\n} // EventListingHero\n\nexport default EventListingHero;\n"],"sourceRoot":""}