unicorn-utterances/public/scripts/tabs.js

/* AFTER CHANGING THIS FILE, PLEASE MANUALLY MINIFY IT AND PUT INTO tabs.min.js */

const LOCAL_STORAGE_KEY = "tabs-selection";

window.addEventListener("DOMContentLoaded", () => {
	const tabLists = document.querySelectorAll('[role="tablist"]');

	tabLists.forEach((tabList) => {
		/**
		 * @type {NodeListOf<HTMLElement>}
		 */
		const tabs = tabList.querySelectorAll('[role="tab"]');

		// Add a click event handler to each tab
		tabs.forEach((tab) => {
			tab.addEventListener("click", (e) => {
				/**
				 * @type {HTMLElement}
				 */
				const target = e.target;
				// Scroll onto screen in order to avoid jumping page locations
				setTimeout(() => {
					target.scrollIntoView({
						behavior: "auto",
						block: "center",
						inline: "center",
					});
				}, 0);
				changeTabs({ target });
			});
		});

		// Enable arrow navigation between tabs in the tab list
		let tabFocus = 0;

		tabList.addEventListener("keydown", (_e) => {
			/**
			 * @type {KeyboardEvent}
			 */
			const e = _e;
			// Move right
			if (e.keyCode === 39 || e.keyCode === 37) {
				tabs[tabFocus].setAttribute("tabindex", `-1`);
				if (e.keyCode === 39) {
					tabFocus++;
					// If we're at the end, go to the start
					if (tabFocus >= tabs.length) {
						tabFocus = 0;
					}
					// Move left
				} else if (e.keyCode === 37) {
					tabFocus--;
					// If we're at the start, move to the end
					if (tabFocus < 0) {
						tabFocus = tabs.length - 1;
					}
				}

				tabs[tabFocus].setAttribute("tabindex", `0`);
				tabs[tabFocus].focus();
				tabs[tabFocus].click();
			}
		});
	});

	const currentTab = localStorage.getItem(LOCAL_STORAGE_KEY);
	if (currentTab) {
		/**
		 * @type {HTMLElement}
		 */
		const el = document.querySelector(`[data-tabname="${currentTab}"]`);
		if (el) changeTabs({ target: el });
	}

	function changeTabs(_e) {
		/**
		 * @type {{ target: HTMLElement }}
		 */
		const e = _e;
		const target = e.target;
		const parent = target.parentNode;
		const grandparent = parent.parentNode;

		// Remove all current selected tabs
		parent
			.querySelectorAll('[aria-selected="true"]')
			.forEach((t) => t.setAttribute("aria-selected", `false`));

		// Set this tab as selected
		target.setAttribute("aria-selected", `true`);

		const tabName = target.dataset.tabname;
		/**
		 * @type {NodeListOf<HTMLElement>}
		 */
		const relatedTabs = document.querySelectorAll(
			`[role="tab"][data-tabname="${target.dataset.tabname}"]`
		);

		localStorage.setItem(LOCAL_STORAGE_KEY, tabName);

		for (let relatedTab of relatedTabs) {
			if (relatedTab === target) continue;
			changeTabs({ target: relatedTab });
		}

		// Hide all tab panels
		grandparent
			.querySelectorAll('[role="tabpanel"]')
			.forEach((p) => p.setAttribute("hidden", `true`));

		// Show the selected panel
		grandparent.parentNode
			.querySelector(`#${target.getAttribute("aria-controls")}`)
			.removeAttribute("hidden");
	}

	/* -------------------- */

	/**
	 *
	 * @param {HTMLElement} el
	 * @param {(el: HTMLElement) => boolean} check
	 * @returns {boolean}
	 */
	function checkElementsParents(el, check) {
		if (el.parentElement) {
			if (!check(el.parentElement)) {
				return checkElementsParents(el.parentElement, check);
			} else {
				return true;
			}
		} else {
			return false;
		}
	}

	(() => {
		// If user has linked to a heading that's inside of a tab
		const hash = window.location.hash;
		if (!hash) return;
		const heading = document.querySelector < HTMLElement > hash;
		if (!heading) return;
		const isHidden = checkElementsParents(
			heading,
			(el) => el.hasAttribute("hidden") && el.getAttribute("hidden") !== "false"
		);
		// If it's not hidden, then we can assume that the browser will auto-scroll to it
		if (!isHidden) return;
		const partialHash = hash.slice(1);
		try {
			const matchingTab =
				document.querySelector <
				HTMLElement >
				`[data-headers*="${partialHash}"`;
			if (!matchingTab) return;
			// If header is not in a tab
			const tabName = matchingTab.getAttribute("data-tabname");
			if (!tabName) return;
			matchingTab.click();
			setTimeout(() => {
				const el = document.querySelector(hash);
				if (!el) return;
				el.scrollIntoView(true);
			}, 0);
		} catch (e) {
			console.error("Error finding matching tab", e);
		}
	})();
});