{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/PageTransition/PageTabs.js","webpack://@verndale/toolkit/./src/js/modules/PageTransition/index.js"],"names":[],"mappings":"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","file":"scripts/988.bundle.js","sourcesContent":["import { Component } from '@verndale/core';\n\nclass PageTabs extends Component {\n  constructor(el, options) {\n    super(el, options);\n\n    this.initTabs();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      scrollbody: document.querySelector('#content'),\n      box: this.el.querySelector('.transtion-left-right-wrap'),\n      tabLinks: [...this.el.querySelectorAll('.tabs-title a')],\n      tabPanels: [...this.el.querySelectorAll('.tabs-panel')],\n      mobileContainer: this.el.querySelector('.mobile-subnav')\n    };\n    this.breakpoint = window.matchMedia('(max-width: 639px)');\n    this.isMobileOpen = false;\n    this.selectedPanel = null;\n\n    this.createMobileDropdown();\n  }\n\n  addListeners() {\n    this.dom.tabLinks.forEach(tab =>\n      tab.addEventListener('click', this.handleTabClick.bind(this))\n    );\n    this.dom.dropdownButton.addEventListener(\n      'click',\n      this.toggleDropdown.bind(this)\n    );\n    this.dom.mobileLinks.forEach(item =>\n      item.addEventListener('click', this.handleDropdownChange.bind(this))\n    );\n    this.breakpoint.addEventListener(\n      'change',\n      this.handleMobilePanel.bind(this)\n    );\n\n    \n    this.dom.scrollbody.addEventListener('scroll', this.lazyload.bind(this));\n  }\n\n  initTabs() {\n    this.selectTab(this.dom.tabLinks[0]);\n    this.selectMobileTab(this.dom.mobileLinks[0]);\n  }\n\n  createMobileDropdown() {\n    if (!this.dom.mobileContainer) return;\n\n    const dropdownTemplate = `\n      <li role=\"tab\">\n        <a class=\"toggle-mobile-subnav\"></a>\n        <ul class=\"menu vertical nested submenu is-active\" role=\"tabpanel\" hidden>\n          ${[...this.dom.tabLinks]\n            .map(\n              tab =>\n                `<li class=\"tabs-title is-submenu-item\">\n                <a href=\"${tab.getAttribute('href')}\">${tab.innerText}</a>\n                </li>`\n            )\n            .join('')}\n        </ul>\n      </li>\n      `;\n    this.dom.mobileContainer.innerHTML = dropdownTemplate;\n    this.dom.dropdownList = this.dom.mobileContainer.querySelector('.submenu');\n    this.dom.dropdownButton = this.dom.mobileContainer.querySelector(\n      '.toggle-mobile-subnav'\n    );\n    this.dom.mobileLinks = [\n      ...this.dom.mobileContainer.querySelectorAll('.is-submenu-item a')\n    ];\n  }\n\n  handleTabClick(e) {\n    e.preventDefault();\n    this.selectTab(e.target, true);\n\n    // Update mobile tabs\n    const selectedTab = this.dom.mobileLinks.find(\n      tab => tab.href === e.target.href\n    );\n    this.selectMobileTab(selectedTab);\n  }\n\n  handleDropdownChange(e) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    const target = e.currentTarget;\n    this.selectMobileTab(target);\n\n    // Update desktop tabs\n    const selectedTab = this.dom.tabLinks.find(tab => tab.href === target.href);\n    this.selectTab(selectedTab);\n  }\n\n  selectTab(link) {\n    this.setActiveTab(link);\n  }\n\n  selectMobileTab(selectedTab) {\n    this.dom.dropdownButton.innerText = selectedTab.innerText.trim();\n\n    this.dom.mobileLinks.forEach(item => {\n      if (item === selectedTab) {\n        item.setAttribute('aria-selected', true);\n        item.style.display = 'none';\n      } else {\n        item.setAttribute('aria-selected', false);\n        item.style.display = 'block';\n      }\n    });\n\n    if (this.isMobileOpen) {\n      this.toggleDropdown();\n    }\n  }\n\n  setActiveTab(selectedTab) {\n    this.dom.tabLinks.forEach(tab => {\n      if (tab === selectedTab) {\n        tab.parentNode.classList.add('is-active');\n      } else {\n        tab.parentNode.classList.remove('is-active');\n      }\n    });\n\n    this.dom.tabPanels.forEach(panel => {\n      if (\n        panel.id === selectedTab.getAttribute('href').replace('#', '').trim()\n      ) {\n        this.selectedPanel = panel;\n        panel.style.display = 'block';\n      } else {\n        panel.style.display = 'none';\n      }\n    });\n\n    this.selectedTabId = selectedTab.getAttribute('href');\n    this.handleMobilePanel();\n\n    this.lazyload();\n  }\n\n  handleMobilePanel() {\n    if (this.breakpoint.matches) {\n      this.el.dispatchEvent(\n        new Event(\n          this.selectedTabId === '#overview' ? 'closePanel' : 'openPanel',\n          {\n            bubbles: true,\n            detail: {\n              selectedTabId: this.selectedTabId\n            }\n          }\n        )\n      );\n    }\n  }\n\n  toggleDropdown() {\n    this.isMobileOpen = !this.isMobileOpen;\n    if (this.isMobileOpen) {\n      this.dom.dropdownList.removeAttribute('hidden');\n    } else {\n      this.dom.dropdownList.setAttribute('hidden', true);\n    }\n  }\n\n  lazyload() {\n    const offset = 150;\n    const lazyload = [\n      ...this.selectedPanel.querySelectorAll('.article-lazyload')\n    ];\n    if (lazyload.length === 0) return;\n\n    lazyload.forEach(item => {\n      if (item.getBoundingClientRect().top < window.innerHeight - offset) {\n        item.classList.add('article-lazyload--revealed');\n      }\n    });\n  }\n}\n\nexport default PageTabs;\n","import { Component } from '@verndale/core';\nimport PageTabs from './PageTabs';\n\nclass PageTransition extends Component {\n  setupDefaults() {\n    this.dom = {\n      box: this.el.querySelector('.transtion-left-right-wrap'),\n      toggleSliderButtons: this.el.querySelectorAll('.slide-button'),\n      leftPane: this.el.querySelector('.left-pane')\n    };\n\n    new PageTabs(this.el);\n  }\n\n  addListeners() {\n    this.dom.toggleSliderButtons.forEach(button =>\n      button.addEventListener('click', this.togglePage.bind(this))\n    );\n    this.dom.leftPane.addEventListener('click', this.close.bind(this));\n    this.el.addEventListener('openPanel', this.open.bind(this));\n    this.el.addEventListener('closePanel', this.close.bind(this));\n  }\n\n  open() {\n    window.scrollTo(0, 0);\n    this.dom.box.classList.add('slide-content');\n    this.dom.toggleSliderButtons.forEach(button =>\n      button.classList.add('slide-content-open')\n    );\n  }\n\n  close() {\n    if (this.dom.box.classList.contains('slide-content')) {\n      window.scrollTo(0, 0);\n      this.dom.box.classList.remove('slide-content');\n      this.dom.toggleSliderButtons.forEach(button =>\n        button.classList.remove('slide-content-open')\n      );\n    }\n  }\n\n  togglePage(e) {\n    e.stopPropagation();\n    if (this.dom.box.classList.contains('slide-content')) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n}\n\nexport default PageTransition;\n"],"sourceRoot":""}