Change PlatformHintedContent rendering, js and css to match Figma style

3 files changed, 81 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')
+        }
+    }
+}
diff --git a/core/src/main/resources/dokka/styles/style.css b/core/src/main/resources/dokka/styles/style.css
index 5c347128..720998ad 100644
--- a/core/src/main/resources/dokka/styles/style.css
+++ b/core/src/main/resources/dokka/styles/style.css
@@ -487,6 +487,56 @@ td.content {
     color: #5B5DEF;
 }
 
+.platform-hinted {
+    display: block;
+}
+
+.platform-hinted > .platform-bookmarks-row {
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark {
+    min-width: 64px;
+    height: 36px;
+    border: 2px solid white;
+    background: white;
+    outline: none;
+    flex: none;
+    order: 5;
+    align-self: flex-start;
+    margin: 0;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(1):hover {
+    border-top: 2px solid gray;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(2):hover {
+    border-top: 2px solid orange;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(3):hover {
+    border-top: 2px solid crimson;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark:nth-child(4):hover {
+    border-top: 2px solid blue;
+}
+
+.platform-hinted > .platform-bookmarks-row > .platform-bookmark[data-active=''] {
+    border: 2px solid #F4F4F4;
+    border-top: 2px solid #4DBB5F;
+
+    background: #F4F4F4;
+}
+
+.platform-hinted > .content:not([data-active]) {
+    display: none
+}
+
+
 @media print, screen and (max-width: 960px) {
 
     div.wrapper {