{"version":3,"sources":["webpack:///./src/js/modules/logoRow.js"],"names":["gsap","registerPlugin","ScrollTrigger","agent","ua","navigator","userAgent","LogoRow","this","dom","line","el","querySelector","triggerContainer","logo","infoContainer","container","isMobileSafari","browser","name","classList","add","initScroll","window","addEventListener","refresh","update","matchMedia","breakpoints","tablet","style","top","height","timeline","scrollTrigger","trigger","start","end","pin","scrub","to","y","offsetHeight","fromTabletNavigation","tabletLandscape","desktop","wide","lineHeight","setLogoPosition","bottomOffset","pinSpacing","infoPaddingTop","getComputedStyle","getPropertyValue","replace","offsetTop","Component"],"mappings":"4oDAMAA,IAAKC,eAAeC,KAEpB,IAAMC,EAAQC,IAAGC,UAAUC,WACrBC,E,sWACJ,WACEC,KAAKC,IAAM,CACTC,KAAMF,KAAKG,GAAGC,cAAc,mBAC5BC,iBAAkBL,KAAKG,GAAGC,cAAc,gCACxCE,KAAMN,KAAKG,GAAGC,cAAc,6BAC5BG,cAAeP,KAAKG,GAAGC,cAAc,mBACrCI,UAAWR,KAAKG,GAAGC,cAAc,qBAGnCJ,KAAKS,eAAwC,kBAAvBd,EAAMe,QAAQC,KAE/BX,KAAKS,eAGRT,KAAKG,GAAGS,UAAUC,IAAI,2BAFtBb,KAAKc,e,2BAMT,WAAgB,WACdC,OAAOC,iBAAiB,UAAU,WAC3B,EAAKP,iBACRf,IAAcuB,UACdvB,IAAcwB,e,wBAKpB,WAAa,aACXxB,IAAcyB,YAAd,6BACkBC,IAAYC,OAAS,EADvC,QACgD,WAC5C,EAAKpB,IAAIK,KAAKgB,MAAMC,IAAM,EAC1B,EAAKtB,IAAIO,UAAUc,MAAME,OAAS,OACVhC,IAAKiC,SAAS,CACpCC,cAAe,CACbC,QAAS,EAAK1B,IAAII,iBAClBuB,MAAO,UACPC,IAAK,gBACLC,IAAK,EAAK7B,IAAII,iBACd0B,OAAO,KAGKC,GAAG,EAAK/B,IAAIC,KAAM,CAAEsB,OAAQ,QAAU,SAASQ,GAC7D,EAAK/B,IAAIK,KACT,CACE2B,EAAG,GAAF,OACC,EAAKhC,IAAII,iBAAiB6B,aAC1B,EAAKjC,IAAIK,KAAK4B,aAFf,OAKH,YArBN,0BAwBkBd,IAAYC,OAxB9B,QAwB4C,WACxC,EAAKc,qBAAqB,QAzB9B,0BA2BkBf,IAAYgB,gBA3B9B,QA2BqD,WACjD,EAAKD,qBAAqB,QA5B9B,0BA8BkBf,IAAYiB,QA9B9B,QA8B6C,WACzC,EAAKF,qBAAqB,QA/B9B,0BAiCkBf,IAAYkB,KAjC9B,QAiC0C,WACtC,EAAKH,qBAAqB,QAlC9B,M,kCAuCF,SAAqBI,GACnBvC,KAAKC,IAAIO,UAAUc,MAAME,OAAzB,UACExB,KAAKC,IAAIM,cAAc2B,aAAeK,EADxC,MAGAvC,KAAKC,IAAIC,KAAKoB,MAAME,OAApB,UAAgCe,EAAa,EAA7C,MACAvC,KAAKwC,kBACL,IAAMC,EAAezC,KAAKC,IAAIM,cAAc2B,aAE5C1C,IAAKiC,SAAS,CACZC,cAAe,CACbC,QAAS3B,KAAKC,IAAIO,UAClBoB,MAAO,UACPC,IAAK,UAAF,OAAYY,EAAZ,MACHX,IAAK9B,KAAKC,IAAIM,cACdmC,YAAY,EACZX,OAAO,O,6BAKb,WAAkB,MACVY,EAAc,UAAG5B,OACpB6B,iBAAiB5C,KAAKC,IAAIM,eAC1BsC,iBAAiB,sBAFA,aAAG,EAGnBC,QAAQ,KAAM,IAClB9C,KAAKC,IAAIK,KAAKgB,MAAMC,IAApB,WACEvB,KAAKC,IAAII,iBAAiB0C,UAAYJ,EADxC,W,8BA7FkBK,aAmGPjD","file":"64.3f1650191cf0a3da58b0.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport ua from 'ua-parser-js';\nimport { breakpoints } from '../helpers/constants';\n\ngsap.registerPlugin(ScrollTrigger);\n\nconst agent = ua(navigator.userAgent);\nclass LogoRow extends Component {\n  setupDefaults() {\n    this.dom = {\n      line: this.el.querySelector('.logo-row__line'),\n      triggerContainer: this.el.querySelector('.logo-row__trigger-container'),\n      logo: this.el.querySelector('.logo-row__logo-container'),\n      infoContainer: this.el.querySelector('.logo-row__info'),\n      container: this.el.querySelector('.logo-row__inner')\n    };\n\n    this.isMobileSafari = agent.browser.name === 'Mobile Safari';\n\n    if (!this.isMobileSafari) {\n      this.initScroll();\n    } else {\n      this.el.classList.add('logo-row--mobile-safari');\n    }\n  }\n\n  addListerners() {\n    window.addEventListener('resize', () => {\n      if (!this.isMobileSafari) {\n        ScrollTrigger.refresh();\n        ScrollTrigger.update();\n      }\n    });\n  }\n\n  initScroll() {\n    ScrollTrigger.matchMedia({\n      [`(max-width: ${breakpoints.tablet - 1}px)`]: () => {\n        this.dom.logo.style.top = 0;\n        this.dom.container.style.height = 'auto';\n        const mobileAnimation = gsap.timeline({\n          scrollTrigger: {\n            trigger: this.dom.triggerContainer,\n            start: 'top top',\n            end: 'bottom center',\n            pin: this.dom.triggerContainer,\n            scrub: true\n          }\n        });\n        mobileAnimation.to(this.dom.line, { height: '100%' }, '<-0.5').to(\n          this.dom.logo,\n          {\n            y: `${\n              this.dom.triggerContainer.offsetHeight -\n              this.dom.logo.offsetHeight\n            }px`\n          },\n          '>-0.5'\n        );\n      },\n      [`(min-width: ${breakpoints.tablet}px)`]: () => {\n        this.fromTabletNavigation(525);\n      },\n      [`(min-width: ${breakpoints.tabletLandscape}px)`]: () => {\n        this.fromTabletNavigation(525);\n      },\n      [`(min-width: ${breakpoints.desktop}px)`]: () => {\n        this.fromTabletNavigation(601);\n      },\n      [`(min-width: ${breakpoints.wide}px)`]: () => {\n        this.fromTabletNavigation(731);\n      }\n    });\n  }\n\n  fromTabletNavigation(lineHeight) {\n    this.dom.container.style.height = `${\n      this.dom.infoContainer.offsetHeight + lineHeight\n    }px`;\n    this.dom.line.style.height = `${lineHeight - 5}px`;\n    this.setLogoPosition();\n    const bottomOffset = this.dom.infoContainer.offsetHeight;\n\n    gsap.timeline({\n      scrollTrigger: {\n        trigger: this.dom.container,\n        start: 'top top',\n        end: `bottom ${bottomOffset}px`,\n        pin: this.dom.infoContainer,\n        pinSpacing: false,\n        scrub: true\n      }\n    });\n  }\n\n  setLogoPosition() {\n    const infoPaddingTop = window\n      .getComputedStyle(this.dom.infoContainer)\n      .getPropertyValue('padding-top')\n      ?.replace('px', '');\n    this.dom.logo.style.top = `-${\n      this.dom.triggerContainer.offsetTop - infoPaddingTop\n    }px`;\n  }\n}\n\nexport default LogoRow;\n"],"sourceRoot":""}