Change PlatformHintedContent rendering, js and css to match Figma style

2 files changed, 31 insertions, 2 deletions

diff --git a/core/src/main/resources/dokka/scripts/navigationLoader.js b/core/src/main/resources/dokka/scripts/navigationLoader.js
index 5fe52ade..ecbabb4c 100644
--- a/core/src/main/resources/dokka/scripts/navigationLoader.js
+++ b/core/src/main/resources/dokka/scripts/navigationLoader.js
@@ -1,4 +1,4 @@
-onload = () => {
+window.addEventListener('load', () => {
     fetch(pathToRoot + "navigation.html")
         .then(response => response.text())
         .then(data => {
@@ -15,7 +15,7 @@ onload = () => {
     }).then(() => {
         revealNavigationForCurrentPage()
     })
-};
+})
 
 revealNavigationForCurrentPage = () => {
     let pageId = document.getElementById("content").attributes["pageIds"].value.toString();
diff --git a/core/src/main/resources/dokka/scripts/platformContentHandler.js b/core/src/main/resources/dokka/scripts/platformContentHandler.js
new file mode 100644
index 00000000..b4a9e7c9
--- /dev/null
+++ b/core/src/main/resources/dokka/scripts/platformContentHandler.js
@@ -0,0 +1,29 @@
+window.addEventListener('load', () => {
+    document.querySelectorAll("div[data-platform-hinted]")
+        .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
+    }
+)
+
+function togglePlatformDependent(e, container) {
+    let target = e.target
+    if (target.tagName != 'BUTTON') return;
+    let index = target.getAttribute('data-toggle')
+
+    for(let child of container.children){
+        if(child.hasAttribute('data-toggle-list')){
+            for(let bm of child.children){
+                if(bm == target){
+                    bm.setAttribute('data-active',"")
+                } else if(bm != target) {
+                    bm.removeAttribute('data-active')
+                }
+            }
+        }
+        else if(child.getAttribute('data-togglable') == index) {
+           child.setAttribute('data-active',"")
+        }
+        else {
+            child.removeAttribute('data-active')
+        }
+    }
+}