On this page component (#1504)

7 files changed, 162 insertions, 14 deletions

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;