diff options
Diffstat (limited to 'plugins/base/src')
4 files changed, 59 insertions, 52 deletions
diff --git a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt index 3bafb8f5..8c319f98 100644 --- a/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt +++ b/plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt @@ -725,6 +725,9 @@ open class HtmlRenderer( meta(name = "viewport", content = "width=device-width, initial-scale=1", charset = "UTF-8") title(page.name) link(href = page.root("images/logo-icon.svg"), rel = "icon", type = "image/svg") + templateCommand(PathToRootSubstitutionCommand("###", default = locationProvider.pathToRoot(page))) { + script { unsafe { +"""var pathToRoot = "###";""" } } + } resources.forEach { when { it.substringBefore('?').substringAfterLast('.') == "css" -> link( @@ -741,9 +744,6 @@ open class HtmlRenderer( else -> unsafe { +it } } } - templateCommand(PathToRootSubstitutionCommand("###", default = locationProvider.pathToRoot(page))) { - script { unsafe { +"""var pathToRoot = "###";""" } } - } } body { div { diff --git a/plugins/base/src/main/resources/dokka/scripts/navigation-loader.js b/plugins/base/src/main/resources/dokka/scripts/navigation-loader.js index 0d9948ad..7b6aeb1f 100644 --- a/plugins/base/src/main/resources/dokka/scripts/navigation-loader.js +++ b/plugins/base/src/main/resources/dokka/scripts/navigation-loader.js @@ -1,31 +1,29 @@ -window.addEventListener('load', () => { - fetch(pathToRoot + "navigation.html") - .then(response => response.text()) - .then(data => { - document.getElementById("sideMenu").innerHTML = data; - }).then(() => { +navigationPageText = fetch(pathToRoot + "navigation.html").then(response => response.text()) + +displayNavigationFromPage = () => { + navigationPageText.then(data => { + document.getElementById("sideMenu").innerHTML = data; + }).then(() => { document.querySelectorAll(".overview > a").forEach(link => { link.setAttribute("href", pathToRoot + link.getAttribute("href")); }) }).then(() => { document.querySelectorAll(".sideMenuPart").forEach(nav => { - if (!nav.classList.contains("hidden")) nav.classList.add("hidden") + if (!nav.classList.contains("hidden")) + nav.classList.add("hidden") }) }).then(() => { revealNavigationForCurrentPage() }) - - /* Smooth scrolling support for going to the top of the page */ document.querySelectorAll('.footer a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); - document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); -}) +} revealNavigationForCurrentPage = () => { let pageId = document.getElementById("content").attributes["pageIds"].value.toString(); @@ -35,9 +33,9 @@ revealNavigationForCurrentPage = () => { parts.forEach(part => { if (part.attributes['pageId'].value.indexOf(pageId) !== -1 && found === 0) { found = 1; - if (part.classList.contains("hidden")){ - part.classList.remove("hidden"); - part.setAttribute('data-active',""); + if (part.classList.contains("hidden")) { + part.classList.remove("hidden"); + part.setAttribute('data-active', ""); } revealParents(part) } @@ -45,10 +43,22 @@ revealNavigationForCurrentPage = () => { pageId = pageId.substring(0, pageId.lastIndexOf("/")) } while (pageId.indexOf("/") !== -1 && found === 0) }; - revealParents = (part) => { if (part.classList.contains("sideMenuPart")) { - if (part.classList.contains("hidden")) part.classList.remove("hidden"); + if (part.classList.contains("hidden")) + part.classList.remove("hidden"); revealParents(part.parentNode) } -};
\ No newline at end of file +}; + +/* + This is a work-around for safari being IE of our times. + It doesn't fire a DOMContentLoaded, presumabely because eventListener is added after it wants to do it +*/ +if (document.readyState == 'loading') { + window.addEventListener('DOMContentLoaded', () => { + displayNavigationFromPage() + }) +} else { + displayNavigationFromPage() +}
\ No newline at end of file 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 07a6642b..4595fdec 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 @@ -5,7 +5,6 @@ filteringContext = { } let highlightedAnchor; let topNavbarOffset; -var scrollNavbarBreakPoint = 300 window.addEventListener('load', () => { document.querySelectorAll("div[data-platform-hinted]") @@ -22,9 +21,7 @@ window.addEventListener('load', () => { initHidingLeftNavigation() document.getElementById('main').addEventListener("scroll", (e) => { - const element = document.getElementsByClassName("navigation-wrapper")[0] - const additionalOffset = element.classList.contains("sticky-navigation") ? 14 : 0 - element.classList.toggle("sticky-navigation", e.target.scrollTop + additionalOffset > scrollNavbarBreakPoint) + document.getElementsByClassName("navigation-wrapper")[0].classList.toggle("sticky-navigation", e.target.scrollTop > 0) }) topNavbarOffset = document.getElementById('navigation-wrapper') }) @@ -47,6 +44,27 @@ const initHidingLeftNavigation = () => { // If this is not present user is forced to refresh the site in order to use an anchor window.onhashchange = handleAnchor +function scrollToElementInContent(element){ + const scrollToElement = () => document.getElementById('main').scrollTo({ top: element.offsetTop - topNavbarOffset.offsetHeight, behavior: "smooth"}) + + const waitAndScroll = () => { + setTimeout(() => { + if(topNavbarOffset){ + scrollToElement() + } else { + waitForScroll() + } + }, 50) + } + + if(topNavbarOffset){ + scrollToElement() + } else { + waitAndScroll() + } +} + + function handleAnchor() { if(highlightedAnchor){ highlightedAnchor.classList.remove('anchor-highlight') @@ -74,23 +92,7 @@ function handleAnchor() { highlightedAnchor = content } - const scrollToElement = () => document.getElementById('main').scrollTo({ top: element.offsetTop - topNavbarOffset.offsetHeight, behavior: "smooth"}) - - const waitAndScroll = () => { - setTimeout(() => { - if(topNavbarOffset){ - scrollToElement() - } else { - waitForScroll() - } - }, 100) - } - - if(topNavbarOffset){ - scrollToElement() - } else { - waitAndScroll() - } + scrollToElementInContent(element) } } } @@ -286,4 +288,3 @@ function refreshFilterButtons() { } }) } - diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css index 5390b6d7..339b5415 100644 --- a/plugins/base/src/main/resources/dokka/styles/style.css +++ b/plugins/base/src/main/resources/dokka/styles/style.css @@ -53,13 +53,9 @@ html ::-webkit-scrollbar-thumb { display: flex; padding: 24px 0; flex-wrap: wrap; -} - -.navigation-wrapper.sticky-navigation { position: sticky; top: 0; background-color: #f4f4f4; - border-bottom: 1px solid #DADFE6; padding-top: 19px; padding-bottom: 18px; z-index: 8; @@ -71,6 +67,10 @@ html ::-webkit-scrollbar-thumb { padding-right: var(--horizontal-spacing-for-content); } +.navigation-wrapper.sticky-navigation { + border-bottom: 1px solid #DADFE6; +} + .breadcrumbs { color: var(--breadcrumb-font-color); overflow-wrap: break-word; @@ -264,7 +264,6 @@ code.paragraph { } .overview > .navButton { - height: 100%; align-items: center; display: flex; justify-content: flex-end; @@ -383,7 +382,6 @@ code.paragraph { .sideMenuPart a { display: block; align-items: center; - height: 100%; color: var(--average-color); overflow: hidden; } @@ -424,7 +422,6 @@ code.paragraph { .sideMenuPart > .overview .navButtonContent::before { content: url("../images/arrow_down.svg"); - height: 100%; display: flex; flex-direction: row; align-items: center; @@ -453,8 +450,6 @@ body, table { font-size: 14px; line-height: 24px; margin: 0; - height: 100%; - /*max-width: 1440px; TODO: This results in worse experience on ultrawide, but on 16:9/16:10 looks better.*/ } table { @@ -551,6 +546,7 @@ h3, h4, h5, h6 { .UnderCoverText table { margin: 8px 0 8px 0; + word-break: break-word; } @@ -1212,7 +1208,7 @@ div.runnablesample { margin-right: var(--mobile-horizontal-spacing-for-content); } - .navigation-wrapper.sticky-navigation { + .navigation-wrapper { padding-left: var(--mobile-horizontal-spacing-for-content); padding-right: var(--mobile-horizontal-spacing-for-content); } |