Highlight anchor

2 files changed, 19 insertions, 0 deletions

diff --git a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
index f0e08f48..78d65333 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
@@ -3,6 +3,8 @@ filteringContext = {
     restrictedDependencies: [],
     activeFilters: []
 }
+let highlightedAnchor;
+
 window.addEventListener('load', () => {
     document.querySelectorAll("div[data-platform-hinted]")
         .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
@@ -22,6 +24,11 @@ window.addEventListener('load', () => {
 window.onhashchange = handleAnchor
 
 function handleAnchor() {
+    if(highlightedAnchor){
+        highlightedAnchor.classList.remove('anchor-highlight')
+        highlightedAnchor = null;
+    }
+
     let searchForTab = function(element) {
         if(element && element.hasAttribute) {
             if(element.hasAttribute("data-togglable")) return element;
@@ -37,6 +44,11 @@ function handleAnchor() {
             if (tab) {
                 let found = document.querySelector('.tabs-section > .section-tab[data-togglable="' + tab.getAttribute("data-togglable") + '"]')
                 toggleSections(tab)
+                const content = element.nextElementSibling
+                if(content){
+                    content.classList.add('anchor-highlight')
+                    highlightedAnchor = content
+                }
                 element.scrollIntoView({behavior: "smooth"})
             }
         }
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index b0bf8141..f40aa33d 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -1053,4 +1053,11 @@ td.content {
 
 div.runnablesample {
     height: fit-content;
+}
+
+.anchor-highlight {
+    border: 1px solid var(--hover-link-color) !important;
+    box-shadow: 0 0 0 0.2em #c8e1ff;
+    margin-top: 0.2em;
+    margin-bottom: 0.2em;
 }
\ No newline at end of file