{"version":3,"file":"blogNewsBar-BJjuUm_T.js","sources":["../../src/scripts/modules/blogNewsBar.ts"],"sourcesContent":["import { Component } from '@verndale/core';\r\n\r\nclass BlogNewsBar extends Component {\r\n  constructor(el: HTMLElement) {\r\n    super(el);\r\n  }\r\n\r\n  setupDefaults() {\r\n    this.dom = {\r\n      el: this.el,\r\n      blogBarHeading: this.el.querySelector('.blog-and-news-bar__heading') as HTMLElement,\r\n      mediaMastheadHeadline: document.querySelector('.media-masthead-text-headline') as HTMLElement,\r\n      backToTopBtn: this.el.querySelector('.blog-and-news-bar__btn--top') as HTMLButtonElement,\r\n      shareBtn: this.el.querySelector('.blog-and-news-bar__btn--share') as HTMLButtonElement,\r\n      scrollBar: document.querySelector('.blog-and-news-bar__scroll-bar') as HTMLElement,\r\n      shareModuleModal: document.querySelector('.share-module--modal') as HTMLElement,\r\n      masthead: document.querySelector('.media-masthead') as HTMLElement\r\n    };\r\n\r\n    (this.dom.shareModuleModal as HTMLElement)?.setAttribute('aria-hidden', 'true');\r\n\r\n    // we replace the heading with the media masthead headline\r\n    if (this.dom.blogBarHeading && this.dom.mediaMastheadHeadline) {\r\n      (this.dom.blogBarHeading as HTMLElement).innerHTML =\r\n        (this.dom.mediaMastheadHeadline as HTMLElement).textContent ?? '';\r\n    }\r\n  }\r\n\r\n  addListeners() {\r\n    (this.dom.backToTopBtn as HTMLButtonElement)?.addEventListener('click', () => {\r\n      window.scrollTo({\r\n        top: 0,\r\n        behavior: 'smooth'\r\n      });\r\n    });\r\n\r\n    // we close the share modal when the user clicks outside of it,\r\n    // or when the user clicks on the share button again\r\n    window.addEventListener('click', e => {\r\n      const isSharedModalOpened =\r\n        this.dom.shareModuleModal &&\r\n        (this.dom.shareModuleModal as HTMLElement).getAttribute('aria-hidden') === 'false';\r\n\r\n      if (\r\n        isSharedModalOpened &&\r\n        (e.target !== this.dom.shareBtn || e.target === this.dom.shareBtn)\r\n      ) {\r\n        this.closeShareModal();\r\n      } else if (e.target === this.dom.shareBtn) {\r\n        this.openModal();\r\n      }\r\n    });\r\n\r\n    window.addEventListener('scroll', () => {\r\n      this.initStickyHeader();\r\n      this.updateIndicator();\r\n    });\r\n  }\r\n\r\n  initStickyHeader() {\r\n    if (\r\n      'IntersectionObserver' in window &&\r\n      'IntersectionObserverEntry' in window &&\r\n      'intersectionRatio' in window.IntersectionObserverEntry.prototype\r\n    ) {\r\n      const target = this.dom.masthead;\r\n      const targetRect = (target as HTMLElement).getBoundingClientRect();\r\n\r\n      if (targetRect.top < 0 && targetRect.bottom < 0) {\r\n        this.el.classList.add('visible');\r\n      } else {\r\n        this.el.classList.remove('visible');\r\n      }\r\n    }\r\n  }\r\n\r\n  updateIndicator = () => {\r\n    // 1) Get current position of the scroll in pixels\r\n    const winScroll = document.documentElement.scrollTop;\r\n\r\n    // scrollHeight - The total height of our document\r\n    // clientHeight - The viewable height of the element (in pixels) including padding\r\n    // 2) Get total height of scrollable part minus visible area\r\n    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;\r\n\r\n    // 3. Calculate progress in percentage\r\n    const scrolled = (winScroll / height) * 100;\r\n\r\n    // 4. Change CSS property width of the indicator bar based on scroll\r\n    if (this.dom.scrollBar) {\r\n      (this.dom.scrollBar as HTMLElement).style.width = scrolled + '%';\r\n    }\r\n  };\r\n\r\n  openModal = () => {\r\n    if (this.dom.shareModuleModal) {\r\n      (this.dom.shareModuleModal as HTMLElement).setAttribute('aria-hidden', 'false');\r\n    }\r\n  };\r\n\r\n  closeShareModal = () => {\r\n    if (this.dom.shareModuleModal) {\r\n      (this.dom.shareModuleModal as HTMLElement).setAttribute('aria-hidden', 'true');\r\n    }\r\n  };\r\n}\r\n\r\nexport default BlogNewsBar;\r\n"],"names":["BlogNewsBar","Component","el","__publicField","winScroll","height","scrolled","_a","e","targetRect"],"mappings":"iNAEA,MAAMA,UAAoBC,CAAU,CAClC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAwEVC,EAAA,uBAAkB,IAAM,CAEhB,MAAAC,EAAY,SAAS,gBAAgB,UAKrCC,EAAS,SAAS,gBAAgB,aAAe,SAAS,gBAAgB,aAG1EC,EAAYF,EAAYC,EAAU,IAGpC,KAAK,IAAI,YACV,KAAK,IAAI,UAA0B,MAAM,MAAQC,EAAW,IAEjE,GAEAH,EAAA,iBAAY,IAAM,CACZ,KAAK,IAAI,kBACV,KAAK,IAAI,iBAAiC,aAAa,cAAe,OAAO,CAElF,GAEAA,EAAA,uBAAkB,IAAM,CAClB,KAAK,IAAI,kBACV,KAAK,IAAI,iBAAiC,aAAa,cAAe,MAAM,CAEjF,EApGU,CAGV,eAAgB,OACd,KAAK,IAAM,CACT,GAAI,KAAK,GACT,eAAgB,KAAK,GAAG,cAAc,6BAA6B,EACnE,sBAAuB,SAAS,cAAc,+BAA+B,EAC7E,aAAc,KAAK,GAAG,cAAc,8BAA8B,EAClE,SAAU,KAAK,GAAG,cAAc,gCAAgC,EAChE,UAAW,SAAS,cAAc,gCAAgC,EAClE,iBAAkB,SAAS,cAAc,sBAAsB,EAC/D,SAAU,SAAS,cAAc,iBAAiB,CACpD,GAECI,EAAA,KAAK,IAAI,mBAAT,MAAAA,EAA2C,aAAa,cAAe,QAGpE,KAAK,IAAI,gBAAkB,KAAK,IAAI,wBACrC,KAAK,IAAI,eAA+B,UACtC,KAAK,IAAI,sBAAsC,aAAe,GACnE,CAGF,cAAe,QACZA,EAAA,KAAK,IAAI,eAAT,MAAAA,EAA6C,iBAAiB,QAAS,IAAM,CAC5E,OAAO,SAAS,CACd,IAAK,EACL,SAAU,QAAA,CACX,CAAA,GAKI,OAAA,iBAAiB,QAAcC,GAAA,CAElC,KAAK,IAAI,kBACR,KAAK,IAAI,iBAAiC,aAAa,aAAa,IAAM,UAI1EA,EAAE,SAAW,KAAK,IAAI,UAAYA,EAAE,SAAW,KAAK,IAAI,UAEzD,KAAK,gBAAgB,EACZA,EAAE,SAAW,KAAK,IAAI,UAC/B,KAAK,UAAU,CACjB,CACD,EAEM,OAAA,iBAAiB,SAAU,IAAM,CACtC,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,CAAA,CACtB,CAAA,CAGH,kBAAmB,CACjB,GACE,yBAA0B,QAC1B,8BAA+B,QAC/B,sBAAuB,OAAO,0BAA0B,UACxD,CAEM,MAAAC,EADS,KAAK,IAAI,SACmB,sBAAsB,EAE7DA,EAAW,IAAM,GAAKA,EAAW,OAAS,EACvC,KAAA,GAAG,UAAU,IAAI,SAAS,EAE1B,KAAA,GAAG,UAAU,OAAO,SAAS,CACpC,CACF,CAgCJ"}