Fix active-tab selection for different page contexts (#3212)

2 files changed, 27 insertions, 21 deletions

diff --git a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
index 8c4ca538..811c4788 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
@@ -18,8 +18,6 @@ const samplesLightThemeName = 'idea'
 window.addEventListener('load', () => {
     document.querySelectorAll("div[data-platform-hinted]")
         .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event, elem)))
-    document.querySelectorAll("div[tabs-section]")
-        .forEach(elem => elem.addEventListener('click', (event) => toggleSectionsEventHandler(event)))
     const filterSection = document.getElementById('filter-section')
     if (filterSection) {
         filterSection.addEventListener('click', (event) => filterButtonHandler(event))
@@ -177,19 +175,30 @@ function handleAnchor() {
 }
 
 function initTabs() {
-    document.querySelectorAll("div[tabs-section]")
-        .forEach(element => {
-            showCorrespondingTabBody(element)
-            element.addEventListener('click', (event) => toggleSectionsEventHandler(event))
-        })
-    let cached = localStorage.getItem("active-tab")
-    if (cached) {
-        let parsed = JSON.parse(cached)
-        let tab = document.querySelector('div[tabs-section] > button[data-togglable="' + parsed + '"]')
-        if (tab) {
-            toggleSections(tab)
-        }
-    }
+    // we could have only a single type of data - classlike or package
+    const mainContent = document.querySelector('.main-content');
+    const type = mainContent ? mainContent.getAttribute("data-page-type") : null;
+    const localStorageKey = "active-tab-" + type;
+    document.querySelectorAll('div[tabs-section]').forEach(element => {
+        showCorrespondingTabBody(element);
+        element.addEventListener('click', ({target}) => {
+            const togglable = target ? target.getAttribute("data-togglable") : null;
+            if (!togglable) return;
+
+            localStorage.setItem(localStorageKey, JSON.stringify(togglable));
+            toggleSections(target);
+        });
+    });
+
+    const cached = localStorage.getItem(localStorageKey);
+    if (!cached) return;
+
+    const tab = document.querySelector(
+        'div[tabs-section] > button[data-togglable="' + JSON.parse(cached) + '"]'
+    );
+    if (!tab) return;
+
+    toggleSections(tab);
 }
 
 function showCorrespondingTabBody(element) {
@@ -293,12 +302,6 @@ function toggleSections(target) {
     activateTabsBody("tabs-section-body")
 }
 
-function toggleSectionsEventHandler(evt) {
-    if (!evt.target.getAttribute("data-togglable")) return
-    localStorage.setItem('active-tab', JSON.stringify(evt.target.getAttribute("data-togglable")))
-    toggleSections(evt.target)
-}
-
 function togglePlatformDependent(e, container) {
     let target = e.target
     if (target.tagName != 'BUTTON') return;
diff --git a/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt b/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt
index 0a748580..090127fd 100644
--- a/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt
+++ b/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt
@@ -25,6 +25,7 @@ class TabbedContentTest : BaseAbstractTest() {
 
     private fun Element.getTabbedRow(type: String) = select(".table-row[data-togglable=$type]")
     private fun Element.getTabbedTable(type: String) = select("div[data-togglable=$type] .table")
+    private fun Element.getMainContentDataType() = selectFirst(".main-content")?.attr("data-page-type")
 
     @Test
     fun `should have correct tabbed content type`() {
@@ -64,6 +65,7 @@ class TabbedContentTest : BaseAbstractTest() {
                 assertEquals(1, classContent.getTabbedTable("TYPE").size)
                 assertEquals(3, classContent.getTabbedRow("EXTENSION_FUNCTION").size)
                 assertEquals(2, classContent.getTabbedRow("EXTENSION_PROPERTY").size)
+                assertEquals("classlike", classContent.getMainContentDataType())
 
                 val packagePage = writerPlugin.writer.renderedContent("root/example/index.html")
                 assertEquals(1, packagePage.getTabbedTable("TYPE").size)
@@ -71,6 +73,7 @@ class TabbedContentTest : BaseAbstractTest() {
                 assertEquals(1, packagePage.getTabbedTable("FUNCTION").size)
                 assertEquals(3, packagePage.getTabbedRow("EXTENSION_FUNCTION").size)
                 assertEquals(2, packagePage.getTabbedRow("EXTENSION_PROPERTY").size)
+                assertEquals("package", packagePage.getMainContentDataType())
             }
         }
     }