From 2a1eec37efdeacda1015003690e8bc2771985aa8 Mon Sep 17 00:00:00 2001 From: Oleg Yukhnevich Date: Mon, 16 Oct 2023 20:00:43 +0300 Subject: [PATCH 1/3] Fix active-tab selection for different page contexts --- .../kotlin/renderers/html/HtmlRenderer.kt | 1 + .../dokka/scripts/platform-content-handler.js | 46 +++++++++++-------- 2 files changed, 29 insertions(+), 18 deletions(-) diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 083876d5cc..6ab72b47d3 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -163,6 +163,7 @@ public open class HtmlRenderer( contentTabs.forEachIndexed { index, contentTab -> button(classes = "section-tab") { if (index == 0) attributes["data-active"] = "" + attributes["data-type"] = pageContext.getDocumentableType() ?: "" attributes[TOGGLEABLE_CONTENT_TYPE_ATTR] = contentTab.tabbedContentTypes.joinToString(",") { it.toHtmlAttribute() } text(contentTab.text) 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 8c4ca53830..7fabb33d55 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,26 @@ 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) - } - } + document.querySelectorAll("div[tabs-section]").forEach(element => { + showCorrespondingTabBody(element) + element.addEventListener('click', (event) => toggleSectionsEventHandler(event)) + }); + + initTabsForType("classlike"); + initTabsForType("package"); +} + +function initTabsForType(type) { + const cached = localStorage.getItem("active-tab-" + type); + if (!cached) return; + + const parsed = JSON.parse(cached); + const tab = document.querySelector( + 'div[tabs-section] > button[data-togglable="' + parsed + '"][data-type="' + type + '"]' + ); + if (!tab) return; + + toggleSections(tab); } function showCorrespondingTabBody(element) { @@ -294,9 +299,14 @@ function toggleSections(target) { } function toggleSectionsEventHandler(evt) { - if (!evt.target.getAttribute("data-togglable")) return - localStorage.setItem('active-tab', JSON.stringify(evt.target.getAttribute("data-togglable"))) - toggleSections(evt.target) + const togglable = evt.target.getAttribute("data-togglable"); + if (!togglable) return; + + const type = evt.target.getAttribute("data-type"); + if (!type) return; + + localStorage.setItem('active-tab-' + type, JSON.stringify(togglable)); + toggleSections(evt.target); } function togglePlatformDependent(e, container) { From 011b09d872f02cee1ca8646b42b600c21cbe7563 Mon Sep 17 00:00:00 2001 From: Oleg Yukhnevich Date: Tue, 17 Oct 2023 16:43:35 +0300 Subject: [PATCH 2/3] Use .main-content[data-page-type] instead of adding data type to every tab --- .../kotlin/renderers/html/HtmlRenderer.kt | 1 - .../dokka/scripts/platform-content-handler.js | 37 ++++++++----------- 2 files changed, 15 insertions(+), 23 deletions(-) diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 6ab72b47d3..083876d5cc 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -163,7 +163,6 @@ public open class HtmlRenderer( contentTabs.forEachIndexed { index, contentTab -> button(classes = "section-tab") { if (index == 0) attributes["data-active"] = "" - attributes["data-type"] = pageContext.getDocumentableType() ?: "" attributes[TOGGLEABLE_CONTENT_TYPE_ATTR] = contentTab.tabbedContentTypes.joinToString(",") { it.toHtmlAttribute() } text(contentTab.text) 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 7fabb33d55..811c478883 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 @@ -175,22 +175,26 @@ function handleAnchor() { } function initTabs() { - document.querySelectorAll("div[tabs-section]").forEach(element => { - showCorrespondingTabBody(element) - element.addEventListener('click', (event) => toggleSectionsEventHandler(event)) + // 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); + }); }); - initTabsForType("classlike"); - initTabsForType("package"); -} - -function initTabsForType(type) { - const cached = localStorage.getItem("active-tab-" + type); + const cached = localStorage.getItem(localStorageKey); if (!cached) return; - const parsed = JSON.parse(cached); const tab = document.querySelector( - 'div[tabs-section] > button[data-togglable="' + parsed + '"][data-type="' + type + '"]' + 'div[tabs-section] > button[data-togglable="' + JSON.parse(cached) + '"]' ); if (!tab) return; @@ -298,17 +302,6 @@ function toggleSections(target) { activateTabsBody("tabs-section-body") } -function toggleSectionsEventHandler(evt) { - const togglable = evt.target.getAttribute("data-togglable"); - if (!togglable) return; - - const type = evt.target.getAttribute("data-type"); - if (!type) return; - - localStorage.setItem('active-tab-' + type, JSON.stringify(togglable)); - toggleSections(evt.target); -} - function togglePlatformDependent(e, container) { let target = e.target if (target.tagName != 'BUTTON') return; From d86f7fad3e04a81b5091620e30e09ff0d2f9f2a7 Mon Sep 17 00:00:00 2001 From: Oleg Yukhnevich Date: Tue, 17 Oct 2023 18:28:41 +0300 Subject: [PATCH 3/3] Add test for data-page-type attribute --- .../base/src/test/kotlin/renderers/html/TabbedContentTest.kt | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt b/plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt index 0a748580a6..090127fd39 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()) } } }