sitespeed.io/lib/plugins/html/templates/url/includes/tabScripts.js

63 lines
1.9 KiB
JavaScript

/* eslint-disable no-undef */
window.addEventListener('DOMContentLoaded', function () {
let tabsRoot = document.querySelector('#tabs');
let navigationLinks = document.querySelectorAll('#pageNavigation a');
for (const navigationLink of navigationLinks) {
navigationLink.addEventListener('click', event => {
if (!location.hash) return;
event.preventDefault();
location.href = `${event.target.href}${location.hash}_ref`;
});
}
let currentTab;
if (location.hash.endsWith('_ref')) {
const targetHash = location.hash.slice(0, -4);
currentTab = tabsRoot.querySelector(targetHash);
setTimeout(() => history.replaceState({}, location.hash, targetHash));
} else {
currentTab = tabsRoot.querySelector(location.hash || 'a');
}
if (!currentTab) currentTab = tabsRoot.querySelector('a');
let sections = document.querySelectorAll('#tabSections section');
for (const section of sections) {
section.style.display = 'none';
}
selectTab(currentTab, false);
});
function selectTab(newSelection, updateUrlFragment) {
let tabsRoot = document.querySelector('#tabs');
let sectionRoot = document.querySelector('#tabSections');
let previousSelection = tabsRoot.querySelector('[selected]');
if (previousSelection) {
previousSelection.removeAttribute('selected');
let section = sectionRoot.querySelector(
'#' + previousSelection.id + '-panel'
);
section.style.display = 'none';
}
newSelection.setAttribute('selected', '');
let section = sectionRoot.querySelector('#' + newSelection.id + '-panel');
section.style.display = 'block';
let charts = section.querySelectorAll('.ct-chart');
for (const chart of charts) {
if (chart.__chartist__) {
chart.__chartist__.update();
}
}
if (updateUrlFragment && history.replaceState) {
history.replaceState(undefined, undefined, '#' + newSelection.id);
}
return false;
}