diff --git a/doxygen-awesome-tabs.js b/doxygen-awesome-tabs.js index 06dfd3d..6e8ad29 100644 --- a/doxygen-awesome-tabs.js +++ b/doxygen-awesome-tabs.js @@ -29,61 +29,66 @@ SOFTWARE. class DoxygenAwesomeTabs { - static init() { - window.addEventListener("load", () => { - document.querySelectorAll(".tabbed:not(:empty)").forEach((tabbed, tabbedIndex) => { - let tabLinkList = [] - tabbed.querySelectorAll(":scope > ul > li").forEach((tab, tabIndex) => { - tab.id = "tab_" + tabbedIndex + "_" + tabIndex - let header = tab.querySelector(".tab-title") - let tabLink = document.createElement("button") - tabLink.classList.add("tab-button") - tabLink.appendChild(header) - header.title = header.textContent - tabLink.addEventListener("click", () => { - tabbed.querySelectorAll(":scope > ul > li").forEach((tab) => { - tab.classList.remove("selected") - }) - tabLinkList.forEach((tabLink) => { - tabLink.classList.remove("active") - }) - tab.classList.add("selected") - tabLink.classList.add("active") - }) - tabLinkList.push(tabLink) - if(tabIndex == 0) { - tab.classList.add("selected") - tabLink.classList.add("active") - } - }) - let tabsOverview = document.createElement("div") - tabsOverview.classList.add("tabs-overview") - let tabsOverviewContainer = document.createElement("div") - tabsOverviewContainer.classList.add("tabs-overview-container") - tabLinkList.forEach((tabLink) => { - tabsOverview.appendChild(tabLink) - }) - tabsOverviewContainer.appendChild(tabsOverview) - tabbed.before(tabsOverviewContainer) - - function resize() { - let maxTabHeight = 0 - tabbed.querySelectorAll(":scope > ul > li").forEach((tab, tabIndex) => { - let visibility = tab.style.display - tab.style.display = "block" - maxTabHeight = Math.max(tab.offsetHeight, maxTabHeight) - tab.style.display = visibility - }) - tabbed.style.height = `${maxTabHeight + 10}px` + static init() { + window.addEventListener("load", () => { + document.querySelectorAll(".tabbed:not(:empty)").forEach((tabbed, tabbedIndex) => { + let tabLinkList = []; + tabbed.querySelectorAll(":scope > .tab-title").forEach((tab, tabIndex) => { + let tabContainer = document.createElement("li"); + tabContainer.id = "tab_" + tabbedIndex + "_" + tabIndex; + tab.title = tab.textContent; + + let tabLink = document.createElement("button"); + tabLink.classList.add("tab-button"); + tabLink.appendChild(tab); + + tabLink.addEventListener("click", () => { + tabbed.querySelectorAll(":scope > .tab-title").forEach((tab) => { + tab.parentElement.classList.remove("selected"); + }); + tabLinkList.forEach((tabLink) => { + tabLink.classList.remove("active"); + }); + tabContainer.classList.add("selected"); + tabLink.classList.add("active"); + }); + + tabLinkList.push(tabLink); + if (tabIndex === 0) { + tabContainer.classList.add("selected"); + tabLink.classList.add("active"); } - resize() - new ResizeObserver(resize).observe(tabbed) - }) - }) - - } + tabbed.insertBefore(tabContainer, tabbed.querySelector(":scope > ul")); + tabContainer.appendChild(tabLink); + }); + + let tabsOverview = document.createElement("div"); + tabsOverview.classList.add("tabs-overview"); + let tabsOverviewContainer = document.createElement("div"); + tabsOverviewContainer.classList.add("tabs-overview-container"); + tabLinkList.forEach((tabLink) => { + tabsOverview.appendChild(tabLink); + }); + tabsOverviewContainer.appendChild(tabsOverview); + tabbed.before(tabsOverviewContainer); + + function resize() { + let maxTabHeight = 0; + tabbed.querySelectorAll(":scope > .tab-title").forEach((tab, tabIndex) => { + let visibility = tab.style.display; + tab.style.display = "block"; + maxTabHeight = Math.max(tab.offsetHeight, maxTabHeight); + tab.style.display = visibility; + }); + tabbed.style.height = `${maxTabHeight + 10}px`; + } + resize(); + new ResizeObserver(resize).observe(tabbed); + }); + }); +} static resize(tabbed) { }