deploy: 3240b63f21

scripts/navigation-loader.js

@@ -14,6 +14,8 @@ displayNavigationFromPage = () => {
         })
     }).then(() => {
         revealNavigationForCurrentPage()
+    }).then(() => {
+        scrollNavigationToSelectedElement()
     })
     document.querySelectorAll('.footer a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
@@ -51,6 +53,31 @@ revealParents = (part) => {
     }
 };
 
+scrollNavigationToSelectedElement = () => {
+    let selectedElement = document.querySelector('div.sideMenuPart[data-active]')
+    if (selectedElement == null) { // nothing selected, probably just the main page opened
+        return
+    }
+
+    let hasIcon = selectedElement.querySelectorAll(":scope > div.overview span.nav-icon").length > 0
+
+    // for instance enums also have children and are expandable, but are not package/module elements
+    let isPackageElement = selectedElement.children.length > 1 && !hasIcon
+    if (isPackageElement) {
+        // if package is selected or linked, it makes sense to align it to top
+        // so that you can see all the members it contains
+        selectedElement.scrollIntoView(true)
+    } else {
+        // if a member within a package is linked, it makes sense to center it since it,
+        // this should make it easier to look at surrounding members
+        selectedElement.scrollIntoView({
+            behavior: 'auto',
+            block: 'center',
+            inline: 'center'
+        })
+    }
+}
+
 /*
     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
@@ -61,4 +88,4 @@ if (document.readyState == 'loading') {
     })
 } else {
     displayNavigationFromPage()
-}
+}

scripts/platform-content-handler.js

@@ -31,9 +31,10 @@ window.addEventListener('load', () => {
 const darkModeSwitch = () => {
     const localStorageKey = "dokka-dark-mode"
     const storage = localStorage.getItem(localStorageKey)
-    const savedDarkMode = storage ? JSON.parse(storage) : false
+    const osDarkSchemePreferred = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    const darkModeEnabled = storage ? JSON.parse(storage) : osDarkSchemePreferred
     const element = document.getElementById("theme-toggle-button")
-    initPlayground(savedDarkMode ? samplesDarkThemeName : samplesLightThemeName)
+    initPlayground(darkModeEnabled ? samplesDarkThemeName : samplesLightThemeName)
 
     element.addEventListener('click', () => {
         const enabledClasses = document.getElementsByTagName("html")[0].classList
@@ -128,22 +129,39 @@ function handleAnchor() {
         highlightedAnchor = null;
     }
 
-    let searchForTab = function (element) {
+    let searchForContentTarget = function (element) {
         if (element && element.hasAttribute) {
-            if (element.hasAttribute("data-togglable")) return element;
-            else return searchForTab(element.parentNode)
+            if (element.hasAttribute("data-togglable")) return element.getAttribute("data-togglable");
+            else return searchForContentTarget(element.parentNode)
         } else return null
     }
+
+    let findAnyTab = function (target) {
+    	let result = null
+        document.querySelectorAll('div[tabs-section] > button[data-togglable]')
+        .forEach(node => {
+            if(node.getAttribute("data-togglable").split(",").includes(target)) {
+            	result = node
+            }
+        })
+        return result
+    }
+
     let anchor = window.location.hash
     if (anchor != "") {
         anchor = anchor.substring(1)
         let element = document.querySelector('a[data-name="' + anchor + '"]')
+
         if (element) {
-            let tab = searchForTab(element)
-            if (tab) {
-                toggleSections(tab)
-            }
             const content = element.nextElementSibling
+            const contentStyle = window.getComputedStyle(content)
+            if(contentStyle.display == 'none') {
+		 let tab = findAnyTab(searchForContentTarget(content))
+		 if (tab) {
+		     toggleSections(tab)
+		 }
+            }
+
             if (content) {
                 content.classList.add('anchor-highlight')
                 highlightedAnchor = content
@@ -173,10 +191,7 @@ function initTabs() {
 function showCorrespondingTabBody(element) {
     const buttonWithKey = element.querySelector("button[data-active]")
     if (buttonWithKey) {
-        const key = buttonWithKey.getAttribute("data-togglable")
-        document.querySelector(".tabs-section-body")
-            .querySelector("div[data-togglable='" + key + "']")
-            .setAttribute("data-active", "")
+        toggleSections(buttonWithKey)
     }
 }
 
@@ -248,7 +263,6 @@ function removeSourcesetFilterFromCache(sourceset) {
 }
 
 function toggleSections(target) {
-    localStorage.setItem('active-tab', JSON.stringify(target.getAttribute("data-togglable")))
     const activateTabs = (containerClass) => {
         for (const element of document.getElementsByClassName(containerClass)) {
             for (const child of element.children) {
@@ -260,13 +274,24 @@ function toggleSections(target) {
             }
         }
     }
-
+    const toggleTargets = target.getAttribute("data-togglable").split(",")
+    const activateTabsBody = (containerClass) => {
+        document.querySelectorAll("." + containerClass + " *[data-togglable]")
+            .forEach(child => {
+                    if (toggleTargets.includes(child.getAttribute("data-togglable"))) {
+                        child.setAttribute("data-active", "")
+                    } else if(!child.classList.contains("sourceset-dependent-content")) { // data-togglable is used to switch source set as well, ignore it
+                        child.removeAttribute("data-active")
+                    }
+            })
+    }
     activateTabs("tabs-section")
-    activateTabs("tabs-section-body")
+    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)
 }
 

scripts/sourceset_dependencies.js

@@ -1 +1 @@
-sourceset_dependencies='{":dokkaHtml/androidAndroidTestRelease":[],":dokkaHtml/androidDebug":[],":dokkaHtml/androidMain":[":dokkaHtml/commonMain"],":dokkaHtml/androidRelease":[],":dokkaHtml/androidTestFixtures":[],":dokkaHtml/androidTestFixturesDebug":[],":dokkaHtml/androidTestFixturesRelease":[],":dokkaHtml/commonMain":[],":dokkaHtml/jsMain":[":dokkaHtml/commonMain"],":dokkaHtml/jvmMain":[":dokkaHtml/commonMain"]}'
+sourceset_dependencies='{":dokkaHtml/androidAndroidTestRelease":[],":dokkaHtml/androidDebug":[],":dokkaHtml/androidMain":[":dokkaHtml/commonMain"],":dokkaHtml/androidRelease":[],":dokkaHtml/androidTestFixtures":[],":dokkaHtml/androidTestFixturesDebug":[],":dokkaHtml/androidTestFixturesRelease":[],":dokkaHtml/commonMain":[],":dokkaHtml/jsMain":[":dokkaHtml/commonMain"],":dokkaHtml/jvmMain":[":dokkaHtml/commonMain"],":dokkaHtml/linuxArm32HfpMain":[":dokkaHtml/commonMain"],":dokkaHtml/linuxArm64Main":[":dokkaHtml/commonMain"],":dokkaHtml/linuxX64Main":[":dokkaHtml/commonMain"],":dokkaHtml/mingwX64Main":[":dokkaHtml/commonMain"],":dokkaHtml/mingwX86Main":[":dokkaHtml/commonMain"],":dokkaHtml/wasm32Main":[":dokkaHtml/commonMain"]}'

scripts/symbol-parameters-wrapper_deferred.js

@@ -0,0 +1,83 @@
+// helps with some corner cases where <wbr> starts working already,
+// but the signature is not yet long enough to be wrapped
+const leftPaddingPx = 60
+
+const symbolResizeObserver = new ResizeObserver(entries => {
+    entries.forEach(entry => {
+        const symbolElement = entry.target
+        symbolResizeObserver.unobserve(symbolElement) // only need it once, otherwise will be executed multiple times
+        wrapSymbolParameters(symbolElement);
+    })
+});
+
+const wrapAllSymbolParameters = () => {
+    document.querySelectorAll("div.symbol").forEach(symbol => wrapSymbolParameters(symbol))
+}
+
+const wrapSymbolParameters = (symbol) => {
+    let parametersBlock = symbol.querySelector("span.parameters")
+    if (parametersBlock == null) {
+        return // nothing to wrap
+    }
+
+    let symbolBlockWidth = symbol.clientWidth
+
+    // Even though the script is marked as `defer` and we wait for `DOMContentLoaded` event,
+    // it can happen that `symbolBlockWidth` is 0, indicating that something hasn't been loaded.
+    // In this case, just retry once all styles have been applied and it has been resized correctly.
+    if (symbolBlockWidth === 0) {
+        symbolResizeObserver.observe(symbol)
+        return
+    }
+
+    let innerTextWidth = Array.from(symbol.children)
+        .filter(it => !it.classList.contains("block")) // blocks are usually on their own (like annotations), so ignore it
+        .map(it => it.getBoundingClientRect().width).reduce((a, b) => a + b, 0)
+
+    // if signature text takes up more than a single line, wrap params for readability
+    let shouldWrapParams = innerTextWidth > (symbolBlockWidth - leftPaddingPx)
+    if (shouldWrapParams) {
+        parametersBlock.classList.add("wrapped")
+        parametersBlock.querySelectorAll("span.parameter").forEach(param => {
+            // has to be a physical indent so that it can be copied. styles like
+            // paddings and `::before { content: "    " }` do not work for that
+            param.prepend(createNbspIndent())
+        })
+    }
+}
+
+const createNbspIndent = () => {
+    let indent = document.createElement("span")
+    indent.append(document.createTextNode("\u00A0\u00A0\u00A0\u00A0"))
+    indent.classList.add("nbsp-indent")
+    return indent
+}
+
+const resetAllSymbolParametersWrapping = () => {
+    document.querySelectorAll("div.symbol").forEach(symbol => resetSymbolParametersWrapping(symbol))
+}
+
+const resetSymbolParametersWrapping = (symbol) => {
+    let parameters = symbol.querySelector("span.parameters")
+    if (parameters != null) {
+        parameters.classList.remove("wrapped")
+        parameters.querySelectorAll("span.parameter").forEach(param => {
+            let indent = param.querySelector("span.nbsp-indent")
+            if (indent != null) indent.remove()
+        })
+    }
+}
+
+if (document.readyState === 'loading') {
+    window.addEventListener('DOMContentLoaded', () => {
+        wrapAllSymbolParameters()
+    })
+} else {
+    wrapAllSymbolParameters()
+}
+
+window.onresize = event => {
+    // need to re-calculate if params need to be wrapped after resize
+    resetAllSymbolParametersWrapping()
+    wrapAllSymbolParameters()
+}