On this page component (#1504)

9 files changed, 182 insertions, 14 deletions

diff --git a/plugins/base/frontend/package-lock.json b/plugins/base/frontend/package-lock.json
index ed81a875..ef4bd987 100644
--- a/plugins/base/frontend/package-lock.json
+++ b/plugins/base/frontend/package-lock.json
@@ -1582,6 +1582,14 @@
         "@types/react": "*"
       }
     },
+    "@types/react-scrollspy": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-scrollspy/-/react-scrollspy-3.3.3.tgz",
+      "integrity": "sha512-HLaQStNl141NngJoczBNAK71GRmmbO25p+JiJyEI0bUvH9MKO8B52SI3kVb1PU48S/n1SiNbabDn3D1p37/1bA==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/unist": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
@@ -10570,6 +10578,16 @@
         "xtend": "^4.0.1"
       }
     },
+    "react-scrollspy": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/react-scrollspy/-/react-scrollspy-3.4.3.tgz",
+      "integrity": "sha512-c2QZpMPWxm1HF71h1EqaxBldx2zLYO0aZ24Bcuo2mUWF79T+F6qOtr7XJCzUDm99NOwhVKQD01a7A8VC6c90CQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-sortable-hoc": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/react-sortable-hoc/-/react-sortable-hoc-1.11.0.tgz",
diff --git a/plugins/base/frontend/package.json b/plugins/base/frontend/package.json
index c86d324d..90e9d49c 100644
--- a/plugins/base/frontend/package.json
+++ b/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",
diff --git a/plugins/base/frontend/src/main/components/assets/clear.svg b/plugins/base/frontend/src/main/components/assets/clear.svg
new file mode 100644
index 00000000..ddb8450f
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/assets/clear.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1374 1.80464L6.94205 5.99996L11.1374 10.1953L10.1947 11.138L5.99935 6.94267L1.80403 11.138L0.861328 10.1953L5.05664 5.99996L0.861328 1.80464L1.80403 0.861938L5.99935 5.05725L10.1947 0.861938L11.1374 1.80464Z" fill="#637282"/>
+</svg>
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/search/searchIcon.svg b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
index 391b1cab..391b1cab 100644
--- a/plugins/base/frontend/src/main/components/search/searchIcon.svg
+++ b/plugins/base/frontend/src/main/components/assets/searchIcon.svg
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss
new file mode 100644
index 00000000..400631e6
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx
new file mode 100644
index 00000000..1aa65d9b
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx
index ad93d731..cb070dfb 100644
--- a/plugins/base/frontend/src/main/components/root.tsx
+++ b/plugins/base/frontend/src/main/components/root.tsx
@@ -1,30 +1,50 @@
 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
@@ -32,8 +52,8 @@ if (module.hot) {
   const renderAppHot = renderApp;
   const renderError = (error: Error) => {
     render(
-        <RedBox error={error}/>,
-        rootEl
+      <RedBox error={error} />,
+      rootEl
     );
   };
 
diff --git a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx b/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
index ad0b5f8f..a502f589 100644
--- a/plugins/base/frontend/src/main/components/search/dokkaSearchAnchor.tsx
+++ b/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 (
diff --git a/plugins/base/frontend/src/main/scss/index.scss b/plugins/base/frontend/src/main/scss/index.scss
index 18e2861b..4f5a498b 100644
--- a/plugins/base/frontend/src/main/scss/index.scss
+++ b/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;