Sha256: 0b0120226ff8b48c1bd5f8ac44a103e80c6bd42fc56db9478eb7d2b6f2fb0af0

Contents?: true

Size: 1.47 KB

Versions: 59

Compression:

Stored size: 1.47 KB

Contents

const ACCORDION_ID = 'accordion';
const TABS_SELECTOR = '.navTabs';

function addHistoryState(target, hashTarget) {
  let url = new URL(window.location);
  let state = {
    page: document.title,
    accordion: target.innerText.trim() // .trim() is needed b/c of the accordion's HTML--each accordion button's text is proceeded by a space
  };
  const title = ''; // Pass empty string as pushState() title parameter

  url.search = ''; // Remove any searchParams/queries from the URL (e.g. /?id=heading#page)
  url.hash = hashTarget;
  window.history.pushState(state, title, url);
}

function accordionHandler(e) {
  if ( !e.target.matches('.accordion__button') )
    return;
  
  const accordionIsOpening = !Boolean(JSON.parse(e.target.getAttribute('aria-expanded')));

  accordionIsOpening ? addHistoryState(e.target, e.target.dataset.target) : null;
}

function tabHandler(e) {
  let target = e.target;
  let targetHref = target.hash;

  addHistoryState(e.target, targetHref)
}

function watchElementForEvent(el, event, handler) {
  el.addEventListener(event, handler);
}

function addAccordionOrTabHistoryStates() {
  if (document.getElementById('accordion')) {
    const accordion = document.getElementById(ACCORDION_ID);

    watchElementForEvent(accordion, 'click', accordionHandler);
  }
  if (document.querySelector('.navTabs')) {
    const tabs = document.querySelector(TABS_SELECTOR);
  
    watchElementForEvent(tabs, 'click', tabHandler);
  }
}

export default addAccordionOrTabHistoryStates;

Version data entries

59 entries across 59 versions & 2 rubygems

Version Path
kcc-gem-theme-2.37.1 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.37.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.36.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.5 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.4 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.3 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.2 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.1 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.35.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.34.2 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.34.1 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.34.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.33.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.32.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.31.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.30.1 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.30.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.29.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.28.0 assets/js/alerts/addAccordionOrTabHistoryStates.js
kcc-gem-theme-2.27.0 assets/js/alerts/addAccordionOrTabHistoryStates.js