On this page component

plugins/base/frontend/package.json

@@ -30,12 +30,14 @@
     "@types/node": "^12.12.36",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-scrollspy": "^3.3.3",
     "babel-loader": "^8.0.6",
     "lodash": "^4.17.19",
     "postcss-import": "^12.0.1",
     "postcss-preset-env": "^6.7.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-scrollspy": "^3.4.3",
     "redbox-react": "^1.6.0",
     "ts-loader": "^7.0.0",
     "typescript": "^3.8.3",

plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss

@@ -0,0 +1,70 @@
+@import "src/main/scss/index.scss";
+
+.page-summary {
+    background: $white;
+    border: 1px solid $grey-border;
+    position: fixed;
+    top: 25%;
+    max-height: 70vh;
+    right: -2px;
+    width: 250px;
+    z-index: 8;
+    transition: width .2s;
+
+    &.hidden {
+        width: 3em;
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+
+        .content-wrapper {
+            h4 {
+                margin: 0;
+                padding: 8px;
+            }
+        }
+    }
+
+    .content-wrapper {
+        padding: 0.5em 0 1em 0;
+        letter-spacing: 0.2px;
+
+        h4 {
+            margin: 0 2em;
+            font-weight: 600;
+        }
+
+        ul {
+            list-style-type: none;
+            width: 100%;
+            padding: 0;
+            margin: 1em 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+            max-height: 60vh;
+
+            li {
+                width: 100%;
+                padding: 4px 0;
+
+                &:hover {
+                    background: $list-background-hover;
+                }
+
+                &>a {
+                    margin: 0 2em;
+                }
+
+                &.selected {
+                    border-left: 4px solid $hover-link-color;
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: 759px){
+    /* hide it on smaller screens since it looks super weird when displayed with hidden menu */
+    .page-summary {
+        display: none;
+    }
+}

plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx

@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from "react";
+import './pageSummary.scss'
+import _ from "lodash";
+import Scrollspy from 'react-scrollspy'
+
+type PageSummaryProps = {
+    entries: PageSummaryEntry[],
+}
+
+type PageSummaryEntry = {
+    location: string,
+    label: string,
+    sourceSets: SourceSetFilterKey[]
+}
+
+type SourceSetFilterKey = string
+
+export const PageSummary: React.FC<PageSummaryProps> = ({ entries }: PageSummaryProps) => {
+    const [hidden, setHidden] = useState<Boolean>(true);
+    const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries)
+
+    const handleMouseHover = () => {
+        setHidden(!hidden)
+    }
+
+    useEffect(() => {
+        const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => {
+            const displayable = entries.filter((entry) => entry.sourceSets.some((sourceset) => event.detail.includes(sourceset)))
+            setDisplayableEntries(displayable)
+        }
+
+        window.addEventListener('sourceset-filter-change', handeEvent)
+        return () => window.removeEventListener('sourceset-filter-change', handeEvent)
+    }, [entries])
+
+    let classnames = "page-summary"
+    if (hidden) classnames += " hidden"
+
+    return (
+        <div
+            className={classnames}
+            onMouseEnter={handleMouseHover}
+            onMouseLeave={handleMouseHover}
+        >
+            <div className={"content-wrapper"}>
+                <h4>On this page</h4>
+                {!hidden && <Scrollspy items={displayableEntries.map((e) => e.location)} currentClassName="selected">
+                    {displayableEntries.map((item) => <li><a href={'#' + item.location}>{item.label}</a></li>)}
+                </Scrollspy>}
+            </div>
+        </div>
+    )
+}

plugins/base/frontend/src/main/components/root.tsx

@@ -1,39 +1,59 @@
 import React from 'react';
-import {render} from 'react-dom';
+import { render } from 'react-dom';
 import RedBox from 'redbox-react';
+import _ from "lodash";
 
 import App from "./app";
 import './app/index.scss';
 import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch';
+import { PageSummary } from './pageSummary/pageSummary';
 
 const appEl = document.getElementById('searchBar');
 const rootEl = document.createElement('div');
 
 const renderNavigationPane = () => {
-  const element = document.getElementById('paneSearch')
-  if(element){
-    render(
-        <NavigationPaneSearch />,
-        document.getElementById('paneSearch')
-    )
-  }
+  render(
+    <NavigationPaneSearch />,
+    document.getElementById('paneSearch')
+  )
+}
+
+const renderOnThisPage = () => {
+  document.addEventListener('DOMContentLoaded', () => {
+    for (const e of document.querySelectorAll('.tabs-section-body > div[data-togglable]')) {
+      const entries = Array.from(e.querySelectorAll('a[anchor-label]')).map((element: HTMLElement) => {
+        return {
+          location: element.getAttribute('data-name'),
+          label: element.getAttribute('anchor-label'),
+          sourceSets: _.sortBy(element.getAttribute('data-filterable-set').split(' '))
+        }
+      })
+      const unique = _.uniqBy(entries, ({label}) => label)
+      if (unique.length) {
+        const element = document.createElement('div')
+        render(<PageSummary entries={unique} />, element)
+        e.appendChild(element)
+      }
+    }
+  })
 }
 
 let renderApp = () => {
   render(
-      <App/>,
-      rootEl
+    <App />,
+    rootEl
   );
   renderNavigationPane();
+  renderOnThisPage();
 };
 
 // @ts-ignore
 if (module.hot) {
   const renderAppHot = renderApp;
   const renderError = (error: Error) => {
     render(
-        <RedBox error={error}/>,
-        rootEl
+      <RedBox error={error} />,
+      rootEl
     );
   };
 

plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import SearchIcon from 'react-svg-loader!./searchIcon.svg';
+import SearchIcon from 'react-svg-loader!../assets/searchIcon.svg';
 
 export const DokkaSearchAnchor = ({wrapperProps, buttonProps, popup}: any) => {
     return (

plugins/base/frontend/src/main/scss/index.scss

@@ -1,4 +1,6 @@
 @import "~@jetbrains/ring-ui/components/global/variables.css";
 
 $white: #FFFFFF;
-$grey-border: #A6AFBA
+$grey-border: #DADFE6;
+$list-background-hover: rgba(91, 93, 239, 0.15);
+$hover-link-color: #5B5DEF;

plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt

@@ -13,6 +13,7 @@ import org.jetbrains.dokka.base.resolvers.anchors.SymbolAnchorHint
 import org.jetbrains.dokka.base.transformers.pages.sourcelinks.hasTabbedContent
 import org.jetbrains.dokka.base.renderers.isImage
 import org.jetbrains.dokka.links.DRI
+import org.jetbrains.dokka.model.CompositeSourceSetID
 import org.jetbrains.dokka.model.DisplaySourceSet
 import org.jetbrains.dokka.model.properties.PropertyContainer
 import org.jetbrains.dokka.model.sourceSetIDs
@@ -106,7 +107,7 @@ open class HtmlRenderer(
             }
             node.hasStyle(TextStyle.Paragraph) -> p(additionalClasses) { childrenCallback() }
             node.hasStyle(TextStyle.Block) -> div(additionalClasses) { childrenCallback() }
-            node.isAnchorable -> buildAnchor(node.anchor, node.anchorLabel!!) { childrenCallback() }
+            node.isAnchorable -> buildAnchor(node.anchor, node.anchorLabel!!, node.sourceSetsFilters) { childrenCallback() }
             else -> childrenCallback()
         }
     }
@@ -369,15 +370,14 @@ open class HtmlRenderer(
             .filter { sourceSetRestriction == null || it.sourceSets.any { s -> s in sourceSetRestriction } }
             .takeIf { it.isNotEmpty() }
             ?.let {
-                anchorFromNode(node)
+                buildAnchor(node)
                 div(classes = "table-row") {
                     if (!style.contains(MultimoduleTable)) {
-                        attributes["data-filterable-current"] = node.sourceSets.joinToString(" ") {
-                            it.sourceSetIDs.merged.toString()
-                        }
-                        attributes["data-filterable-set"] = node.sourceSets.joinToString(" ") {
+                        val mergedSourceSets = node.sourceSets.joinToString(" ") {
                             it.sourceSetIDs.merged.toString()
                         }
+                        attributes["data-filterable-current"] = mergedSourceSets
+                        attributes["data-filterable-set"] = mergedSourceSets
                     }
 
                     it.filterIsInstance<ContentLink>().takeIf { it.isNotEmpty() }?.let {
@@ -513,19 +513,21 @@ open class HtmlRenderer(
         }
     }
 
-    private fun FlowContent.buildAnchor(anchor: String, anchorLabel: String, content: FlowContent.() -> Unit) {
+    private fun FlowContent.buildAnchor(anchor: String, anchorLabel: String, sourceSets: String, content: FlowContent.() -> Unit) {
         a {
             attributes["data-name"] = anchor
             attributes["anchor-label"] = anchorLabel
+            attributes["id"] = anchor
+            attributes["data-filterable-set"] = sourceSets
         }
         content()
     }
 
-    private fun FlowContent.buildAnchor(anchor: String, anchorLabel: String) =
-        buildAnchor(anchor, anchorLabel) {}
+    private fun FlowContent.buildAnchor(anchor: String, anchorLabel: String, sourceSets: String) =
+        buildAnchor(anchor, anchorLabel, sourceSets) {}
 
-    private fun FlowContent.anchorFromNode(node: ContentNode) {
-        node.anchorLabel?.let { label -> buildAnchor(node.anchor, label) }
+    private fun FlowContent.buildAnchor(node: ContentNode) {
+        node.anchorLabel?.let { label -> buildAnchor(node.anchor, label, node.sourceSetsFilters) }
     }
 
 
@@ -780,3 +782,6 @@ val ContentNode.anchorLabel: String?
 
 val ContentNode.anchor: String
     get() = (dci.dri.first().toString() + "/" + extra[SymbolAnchorHint.SymbolAnchorHintKey]?.contentKind + "/" + sourceSets.joinToString { it.sourceSetIDs.all.joinToString() }).urlEncoded()
+
+val ContentNode.sourceSetsFilters: String
+    get() = sourceSets.sourceSetIDs.joinToString(" ") { it.toString() }

plugins/base/src/main/kotlin/translators/documentables/DefaultPageCreator.kt

@@ -544,7 +544,7 @@ open class DefaultPageCreator(
                                             contentForBrief(it)
                                             contentForSinceKotlin(it)
                                         }
-                                        divergent {
+                                        divergent(extra = PropertyContainer.empty()) {
                                             group {
                                                 +buildSignature(it)
                                             }

plugins/base/src/main/resources/dokka/scripts/navigationLoader.js

@@ -16,7 +16,7 @@ window.addEventListener('load', () => {
     })
 
     /* Smooth scrolling support for going to the top of the page */
-    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    document.querySelectorAll('.footer a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();
 

plugins/base/src/main/resources/dokka/scripts/platformContentHandler.js

@@ -114,6 +114,10 @@ function initializeFiltering() {
     let cached = window.localStorage.getItem('inactive-filters')
     if (cached) {
         let parsed = JSON.parse(cached)
+        //Events are used by react to get values in 'on this page'
+        const event = new CustomEvent('sourceset-filter-change', { detail: parsed });
+        window.dispatchEvent(event);
+
         filteringContext.activeFilters = filteringContext.restrictedDependencies
             .filter(q => parsed.indexOf(q) == -1 )
     } else {
@@ -215,6 +219,9 @@ function refreshFiltering() {
                 elem.setAttribute("data-filterable-current", platformList.join(' '))
             }
         )
+    const event = new CustomEvent('sourceset-filter-change', { detail: sourcesetList });
+    window.dispatchEvent(event);
+
     refreshFilterButtons()
     refreshPlatformTabs()
 }