{"version":3,"sources":["webpack:///./src/js/modules/genericContent.js"],"names":["gsap","registerPlugin","ScrollTrigger","Module","this","breakpoint","matchMedia","dom","heroSidebar","document","querySelector","inner","el","decorator","supportingCard","supportingCardContent","checkContentHeight","showMoreLabel","dataset","showLessLabel","button","createElement","classList","innerHTML","checkCollapseText","initShapeAnimation","window","addEventListener","debounce","bind","handleShowMoreLess","rotation","scale","contains","from","scrollTrigger","trigger","end","scrub","opacity","matches","offsetHeight","scrollHeight","add","append","remove","style","height","e","stopPropagation","collapse","expand","textHeight","set","ease","Expo","duration","onComplete","to","Component"],"mappings":"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","file":"54.72272a4012a954891442.js","sourcesContent":["import { Component } from '@verndale/core';\r\nimport { gsap, Expo } from 'gsap';\r\nimport ScrollTrigger from 'gsap/ScrollTrigger';\r\nimport { debounce } from '../helpers';\r\n\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\nclass Module extends Component {\r\n  setupDefaults() {\r\n    this.breakpoint = matchMedia('(max-width: 740px)');\r\n\r\n    this.dom = {\r\n      heroSidebar: document.querySelector('.generic-hero__sidebar-inner'),\r\n      inner: this.el.querySelector('.generic-content__inner'),\r\n      decorator: this.el.querySelector('.generic-content__decorator img'),\r\n      supportingCard: document.querySelector(\r\n        '.generic-content__supporting-card'\r\n      ),\r\n      supportingCardContent: document.querySelector(\r\n        '.generic-content__supporting-card-content'\r\n      )\r\n    };\r\n\r\n    this.checkContentHeight();\r\n\r\n    if (this.dom.supportingCard) {\r\n      this.showMoreLabel = this.dom.supportingCard.dataset.showMoreLabel;\r\n      this.showLessLabel = this.dom.supportingCard.dataset.showLessLabel;\r\n\r\n      this.dom.button = document.createElement('button');\r\n      this.dom.button.classList = 'btn-v2 btn--primary';\r\n      this.dom.button.innerHTML = `<div class='btn-content'><span>${  this.showMoreLabel  }</span><svg viewBox='0 0 60 60' class='primary'><use xlink:href='#show-more-icon-rebrand'></use></svg>`;\r\n\r\n      this.checkCollapseText();\r\n    }\r\n\r\n    if (this.dom.decorator) {\r\n      this.initShapeAnimation();\r\n    }\r\n  }\r\n\r\n  addListeners() {\r\n    window.addEventListener(\r\n      'resize',\r\n      debounce(this.checkContentHeight.bind(this), 300)\r\n    );\r\n\r\n    if (this.dom.supportingCard) {\r\n      window.addEventListener(\r\n        'resize',\r\n        debounce(this.checkCollapseText.bind(this), 300)\r\n      );\r\n      this.dom.button.addEventListener(\r\n        'click',\r\n        this.handleShowMoreLess.bind(this)\r\n      );\r\n    }\r\n  }\r\n\r\n  initShapeAnimation() {\r\n    let rotation = 0,\r\n      scale = 0.55;\r\n\r\n    if (\r\n      this.dom.decorator.classList.contains(\r\n        'generic-content__decorator--sphere'\r\n      )\r\n    ) {\r\n      rotation = -20;\r\n      scale = 0.65;\r\n    }\r\n\r\n    gsap.from(this.dom.decorator, {\r\n      scrollTrigger: {\r\n        trigger: this.el,\r\n        end: 'center 25%',\r\n        scrub: true\r\n      },\r\n      opacity: 0,\r\n      scale,\r\n      rotation\r\n    });\r\n  }\r\n\r\n  checkCollapseText() {\r\n    if (this.breakpoint.matches) {\r\n      if (\r\n        this.dom.supportingCardContent.offsetHeight <\r\n        this.dom.supportingCardContent.scrollHeight\r\n      ) {\r\n        this.dom.supportingCardContent.classList.add(\r\n          'generic-content__supporting-card--overflow'\r\n        );\r\n        this.dom.supportingCard.append(this.dom.button);\r\n      } else {\r\n        this.dom.supportingCardContent.classList.remove(\r\n          'generic-content__supporting-card--overflow'\r\n        );\r\n        this.dom.button.remove();\r\n      }\r\n    } else {\r\n      this.dom.supportingCardContent.style.height = null;\r\n      this.dom.supportingCardContent.classList.remove(\r\n        'generic-content__supporting-card--overflow'\r\n      );\r\n      this.dom.supportingCardContent.classList.remove(\r\n        'generic-content__supporting-card-content--expanded'\r\n      );\r\n      this.dom.button.remove();\r\n    }\r\n  }\r\n\r\n  checkContentHeight() {\r\n    if (!this.breakpoint.matches && this.dom.heroSidebar) {\r\n      this.dom.inner.style['min-height'] = `${\r\n        this.dom.heroSidebar.offsetHeight - 200\r\n      }px`;\r\n    } else {\r\n      this.dom.inner.style['min-height'] = null;\r\n    }\r\n  }\r\n\r\n  handleShowMoreLess(e) {\r\n    e.stopPropagation();\r\n\r\n    if (\r\n      this.dom.supportingCardContent.classList.contains(\r\n        'generic-content__supporting-card-content--expanded'\r\n      )\r\n    ) {\r\n      this.collapse();\r\n      this.dom.button.innerHTML = `<div class='btn-content'><span>${  this.showMoreLabel  }</span><svg viewBox='0 0 60 60' class='primary'><use xlink:href='#show-more-icon-rebrand'></use></svg>`;\r\n\r\n    } else {\r\n      this.expand();\r\n      this.dom.button.innerHTML = `<div class='btn-content'><span>${  this.showLessLabel  }</span><svg viewBox='0 0 60 60' class='primary'><use xlink:href='#minus-icon-rebrand'></use></svg>`;\r\n    }\r\n  }\r\n\r\n  expand() {\r\n    this.textHeight = this.dom.supportingCardContent.offsetHeight;\r\n    this.dom.supportingCardContent.classList.add(\r\n      'generic-content__supporting-card-content--expanded'\r\n    );\r\n    gsap.set(this.dom.supportingCardContent, { height: 'auto' });\r\n    gsap.from(this.dom.supportingCardContent, {\r\n      height: this.textHeight,\r\n      ease: Expo['easeOut'],\r\n      duration: 0.4,\r\n      onComplete: () => {\r\n        this.dom.supportingCardContent.style.height = null;\r\n        this.dom.supportingCardContent.classList.remove(\r\n          'generic-content__supporting-card--overflow'\r\n        );\r\n      }\r\n    });\r\n  }\r\n\r\n  collapse() {\r\n    this.dom.supportingCardContent.classList.add(\r\n      'generic-content__supporting-card--overflow'\r\n    );\r\n    gsap.set(this.dom.supportingCardContent, {\r\n      height: this.dom.supportingCardContent.offsetHeight\r\n    });\r\n    gsap.to(this.dom.supportingCardContent, {\r\n      height: this.textHeight,\r\n      ease: Expo['easeOut'],\r\n      duration: 0.4,\r\n      onComplete: () => {\r\n        this.dom.supportingCardContent.classList.remove(\r\n          'generic-content__supporting-card-content--expanded'\r\n        );\r\n        this.dom.supportingCardContent.style.height = null;\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\nexport default Module;\r\n"],"sourceRoot":""}