Make navigation loading faster, improve experience on safari (#1633)

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);
     }