fix: fix toc interactivity

Kotlin · Oct 23, 2024 · bf9126a · bf9126a
1 parent b91388f
commit bf9126a
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 70 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_tokens/colors.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/_tokens/colors.scss
@@ -5,7 +5,7 @@
 :root {
   // Interface
   --color-key-blue: rgb(48, 127, 255); //#307FFF;
-  --color-key-blue-05: rgb(48, 127, 255, 0.5);
+  --color-key-blue-50: rgb(48, 127, 255, 0.5);
   --color-background-nav: rgb(39, 40, 44);
   --color-background-nav-dt: rgb(50, 50, 55);
   --color-background-page: rgb(255, 255, 255);
@@ -21,6 +21,7 @@
 
   // Generic monochrome
   --color-w05: rgba(255, 255, 255, 0.05);
+  --color-w08: rgba(255, 255, 255, 0.08);
   --color-w10: rgba(255, 255, 255, 0.1);
   --color-w16: rgba(255, 255, 255, 0.16);
   --color-w50: rgba(255, 255, 255, 0.5);

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/global.scss
@@ -5,7 +5,7 @@
 
 :root {
   --color-background: var(--color-background-page);
-  --focus-outline: 4px solid var(--color-key-blue-05);
+  --focus-outline: 4px solid var(--color-key-blue-50);
 }
 
 .theme-dark {

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/toc-tree/styles.scss
@@ -5,7 +5,7 @@
 
 :root {
   --toc-hover-color: var(--color-b08);
-  --toc-font: 400 13px/20px var(--font-family-default);
+  --toc-font: 400 13px/24px var(--font-family-default);
   --toc-color: var(--color-text);
 }
 
@@ -87,13 +87,11 @@
 
     &:focus-visible {
       outline: var(--focus-outline);
+      outline-offset: -4px;
     }
   }
 
   &--link {
-    display: inline-flex;
-    align-items: center;
-
     box-sizing: border-box;
 
     width: 100%;
@@ -110,6 +108,7 @@
 
     &:focus-visible {
       outline: var(--focus-outline);
+      outline-offset: -4px;
     }
   }
 
@@ -136,14 +135,6 @@
     display: none;
   }
 
-  &--part[data-active] > &--row::before {
-    background: var(--sidemenu-section-active-color);
-  }
-
-  &--part[data-active] > &--row > a {
-    color: var(--default-white);
-  }
-
   #nav-submenu {
     padding-left: 24px;
   }
@@ -229,3 +220,19 @@
     content: url('../_assets/nav-icons/field-variable.svg');
   }
 }
+
+.toc--part[data-active] > .toc--row {
+  & .toc--link,
+  & .toc--button {
+    color: var(--color-text-dt);
+    background-color: var(--color-key-blue);
+
+    &:hover {
+      background-color: #578af7;
+    }
+
+    &::after {
+      filter: invert(0);
+    }
+  }
+}
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/scripts/navigation-loader.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/scripts/navigation-loader.js
@@ -8,13 +8,13 @@ displayNavigationFromPage = () => {
     navigationPageText.then(data => {
         document.getElementById("sideMenu").innerHTML = data;
     }).then(() => {
-        document.querySelectorAll(".overview > a").forEach(link => {
+        document.querySelectorAll(".toc--row > 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")
+        document.querySelectorAll(".toc--part").forEach(nav => {
+            if (!nav.classList.contains("toc--part_hidden"))
+                nav.classList.add("toc--part_hidden")
         })
     }).then(() => {
         revealNavigationForCurrentPage()
@@ -33,14 +33,14 @@ displayNavigationFromPage = () => {
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
-    let parts = document.querySelectorAll(".sideMenuPart");
+    let parts = document.querySelectorAll(".toc--part");
     let found = 0;
     do {
         parts.forEach(part => {
             if (part.attributes['pageId'].value.indexOf(pageId) !== -1 && found === 0) {
                 found = 1;
-                if (part.classList.contains("hidden")) {
-                    part.classList.remove("hidden");
+                if (part.classList.contains("toc--part_hidden")) {
+                    part.classList.remove("toc--part_hidden");
                     part.setAttribute('data-active', "");
                 }
                 revealParents(part)
@@ -50,25 +50,25 @@ revealNavigationForCurrentPage = () => {
     } 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("toc--part")) {
+        if (part.classList.contains("toc--part_hidden"))
+            part.classList.remove("toc--part_hidden");
         revealParents(part.parentNode)
     }
 };
 
 scrollNavigationToSelectedElement = () => {
-    let selectedElement = document.querySelector('div.sideMenuPart[data-active]')
+    let selectedElement = document.querySelector('div.toc--part[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
+    let hasIcon = selectedElement.querySelectorAll(":scope > div.toc--row span.toc--icon").length > 0
 
-    // for instance enums also have children and are expandable, but are not package/module elements
+    // for an 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
+        // if a 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 {
@@ -84,9 +84,9 @@ scrollNavigationToSelectedElement = () => {
 
 /*
     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
+    It doesn't fire a DOMContentLoaded, presumably because eventListener is added after it wants to do it
 */
-if (document.readyState == 'loading') {
+if (document.readyState === 'loading') {
     window.addEventListener('DOMContentLoaded', () => {
         displayNavigationFromPage()
     })