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 1 commit
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
1 change: 1 addition & 0 deletions plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() ?: ""
Copy link
Member

Choose a reason for hiding this comment

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

Oh btw, it might be worth adding a test that verifies that this attribute exists on the pages, and adding a comment to these tests that the value is used in js tab-handling scripts wouldn't hurt. Should be a simple and quick intro into writing html tests as well

We don't have any UI tests, so if this gets lost during refactoring or someone thinks it's not needed, it might lead to regression.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we reuse .main-content[data-page-type] for the purpose? Currently, the attribute is created for every tab. We are trying to decrease the size of the generated HTML.

Also, it seems to make no sense to have an empty attribute if getDocumentableType() returns null.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@vmishenev thanks! You are right, I was thinking, that it will be harder to reusing it, but in the end it simplified code a lot :)
Pushed changes with usage of it.

So I will now add test for checking that just data-page-type attribute is present on page

attributes[TOGGLEABLE_CONTENT_TYPE_ATTR] =
contentTab.tabbedContentTypes.joinToString(",") { it.toHtmlAttribute() }
text(contentTab.text)
Expand Down
46 changes: 28 additions & 18 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,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) {
Expand Down Expand Up @@ -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) {
Expand Down
Loading