Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix active-tab selection for different page contexts #3212

Merged
merged 3 commits into from
Oct 18, 2023
+27 −21
Merged

Fix active-tab selection for different page contexts #3212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a1eec3
Fix active-tab selection for different page contexts
whyoleg Oct 16, 2023
011b09d
Use .main-content[data-page-type] instead of adding data type to ever…
whyoleg Oct 17, 2023
d86f7fa
Add test for data-page-type attribute
whyoleg Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 24 additions & 21 deletions plugins/base/src/main/resources/dokka/scripts/platform-content-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]")
Copy link
Contributor Author

@whyoleg whyoleg Oct 16, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the code was removed here because it duplicates the same code that was already in initTabs function, which is called later

.forEach(elem => elem.addEventListener('click', (event) => toggleSectionsEventHandler(event)))
const filterSection = document.getElementById('filter-section')
if (filterSection) {
filterSection.addEventListener('click', (event) => filterButtonHandler(event))
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions plugins/base/src/test/kotlin/renderers/html/TabbedContentTest.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`() {
Expand Down Expand Up @@ -64,13 +65,15 @@ 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)
assertEquals(1, packagePage.getTabbedTable("PROPERTY").size)
assertEquals(1, packagePage.getTabbedTable("FUNCTION").size)
assertEquals(3, packagePage.getTabbedRow("EXTENSION_FUNCTION").size)
assertEquals(2, packagePage.getTabbedRow("EXTENSION_PROPERTY").size)
assertEquals("package", packagePage.getMainContentDataType())
}
}
}
Expand Down
Loading