2 files changed, 125 insertions, 3 deletions

diff --git a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
index 72c8daae..cd993587 100644
--- a/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
+++ b/plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js
@@ -1,13 +1,71 @@
+filteringContext = {
+    dependencies: {},
+    restrictedDependencies: [],
+    activeFilters: []
+}
 window.addEventListener('load', () => {
+    initializeFiltering()
     document.querySelectorAll("div[data-platform-hinted]")
         .forEach(elem => elem.addEventListener('click', (event) => togglePlatformDependent(event,elem)))
     document.querySelectorAll("div[tabs-section]")
-    .forEach(elem => elem.addEventListener('click', (event) => toggleSections(event)))
+        .forEach(elem => elem.addEventListener('click', (event) => toggleSections(event)))
+    document.getElementById('filter-section').addEventListener('click', (event) => filterButtonHandler(event))
     document.querySelector(".tabs-section-body")
         .querySelector("div[data-togglable]")
         .setAttribute("data-active", "")
 })
 
+function filterButtonHandler(event) {
+        if(event.target.tagName == "BUTTON" && event.target.hasAttribute("data-filter")) {
+            let sourceset = event.target.getAttribute("data-filter")
+            if(filteringContext.activeFilters.indexOf(sourceset) != -1) {
+                filterSourceset(sourceset)
+            } else {
+                unfilterSourceset(sourceset)
+            }
+        }
+        refreshFilterButtons();
+        refreshPlatformTabs()
+}
+
+function initializeFiltering() {
+    filteringContext.dependencies = JSON.parse(sourceset_dependencies)
+    document.querySelectorAll("#filter-section > button")
+        .forEach(p => filteringContext.restrictedDependencies.push(p.getAttribute("data-filter")))
+    Object.keys(filteringContext.dependencies).forEach(p => {
+        filteringContext.dependencies[p] = filteringContext.dependencies[p]
+            .filter(q => -1 !== filteringContext.restrictedDependencies.indexOf(q))
+    })
+    filteringContext.activeFilters = filteringContext.restrictedDependencies
+}
+
+function refreshFilterButtons() {
+    document.querySelectorAll("#filter-section > button")
+        .forEach(f => {
+            if(filteringContext.activeFilters.indexOf(f.getAttribute("data-filter")) != -1){
+                f.setAttribute("data-active","")
+            } else {
+                f.removeAttribute("data-active")
+            }
+        })
+}
+
+function filterSourceset(sourceset) {
+    filteringContext.activeFilters = filteringContext.activeFilters.filter(p => p != sourceset)
+    refreshFiltering()
+}
+
+function unfilterSourceset(sourceset) {
+    if(filteringContext.activeFilters.length == 0) {
+        filteringContext.activeFilters = filteringContext.dependencies[sourceset].concat([sourceset])
+        refreshFiltering()
+    } else {
+        filteringContext.activeFilters.push(sourceset)
+        refreshFiltering()
+    }
+}
+
+
 function toggleSections(evt){
     if(!evt.target.getAttribute("data-togglable")) return
 
@@ -50,3 +108,38 @@ function togglePlatformDependent(e, container) {
         }
     }
 }
+
+function refreshFiltering() {
+    let sourcesetList = filteringContext.activeFilters
+    document.querySelectorAll("[data-filterable-set]")
+        .forEach(
+            elem => {
+                let platformList = elem.getAttribute("data-filterable-set").split(' ').filter(v => -1 !== sourcesetList.indexOf(v))
+                elem.setAttribute("data-filterable-current", platformList.join(' '))
+            }
+        )
+}
+
+function refreshPlatformTabs() {
+    document.querySelectorAll(".platform-hinted > .platform-bookmarks-row").forEach(
+        p => {
+            let active = false;
+            let firstAvailable = null
+            p.childNodes.forEach(
+                element => {
+                    if(element.getAttribute("data-filterable-current") != ''){
+                        if( firstAvailable == null) {
+                            firstAvailable = element
+                        }
+                        if(element.hasAttribute("data-active")) {
+                            active = true;
+                        }
+                    }
+                }
+            )
+            if( active == false && firstAvailable !== null ) {
+                firstAvailable.click()
+            }
+        }
+    )
+}
diff --git a/plugins/base/src/main/resources/dokka/styles/style.css b/plugins/base/src/main/resources/dokka/styles/style.css
index 671dfe8a..d9927046 100644
--- a/plugins/base/src/main/resources/dokka/styles/style.css
+++ b/plugins/base/src/main/resources/dokka/styles/style.css
@@ -62,6 +62,11 @@
     padding: 24px 0
 }
 
+.cover {
+    display: flex;
+    flex-direction: column;
+}
+
 .tabbedcontent {
     padding: 24px 0;
 }
@@ -483,9 +488,11 @@ footer {
     display: flex;
     flex-direction: row;
     padding: 4px 8px;
-    height: 16px;
+    height: 24px;
     border-radius: 100px;
-
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    margin: 2px;
     font-family: Inter, Arial, sans-serif;
     font-size: 12px;
     font-weight: 400;
@@ -494,6 +501,7 @@ footer {
     line-height: normal;
     letter-spacing: normal;
     text-align: center;
+    outline: none;
 
     color: #fff
 
@@ -528,6 +536,27 @@ footer {
     color: white;
 }
 
+.filter-section {
+    display: flex;
+    display: flex;
+    flex-direction: row;
+    align-self: flex-end;
+    min-height: 30px;
+}
+
+.platform-selector:hover {
+    border: 1px solid #A6AFBA !important;
+}
+
+[data-filterable-current=''] {
+    display: none !important;
+}
+.platform-selector:not([data-active]) {
+    border: 1px solid #DADFE6;
+    background-color: white;
+    color: #637282;
+}
+
 td.content {
     padding-left: 24px;
     padding-top: 16px;