From 07e43676665bdc009e135b767e6d43c536b413fa Mon Sep 17 00:00:00 2001 From: Marcin Aman Date: Tue, 10 Nov 2020 16:54:57 +0100 Subject: New breadcrumbs (#1590) Add top navbar --- .../frontend/src/main/components/app/index.scss | 6 -- .../main/components/pageSummary/pageSummary.scss | 1 + .../main/components/pageSummary/pageSummary.tsx | 24 ++++++-- plugins/base/frontend/src/main/components/root.tsx | 70 +++++++--------------- .../src/main/components/search/search.scss | 1 + 5 files changed, 41 insertions(+), 61 deletions(-) (limited to 'plugins/base/frontend/src') diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss index 601ddfa7..97f91292 100644 --- a/plugins/base/frontend/src/main/components/app/index.scss +++ b/plugins/base/frontend/src/main/components/app/index.scss @@ -17,17 +17,11 @@ html, } .search-content { - padding-top: 24px; - margin: 0 41px; - position: absolute; - top: 0; - right: 0; z-index: 8; background-color: #f4f4f4; } @media screen and (max-width: 759px){ .search-content { - margin: 0 8px; } } diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss index 400631e6..aaa897a8 100644 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss +++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss @@ -52,6 +52,7 @@ &>a { margin: 0 2em; + cursor: pointer; } &.selected { diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx index 1aa65d9b..c5a8344f 100644 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx +++ b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx @@ -5,6 +5,8 @@ import Scrollspy from 'react-scrollspy' type PageSummaryProps = { entries: PageSummaryEntry[], + containerId: string, //Id of a container that has scroll enabled + offsetComponentId: string, //Id of a top navbar component } type PageSummaryEntry = { @@ -15,13 +17,12 @@ type PageSummaryEntry = { type SourceSetFilterKey = string -export const PageSummary: React.FC = ({ entries }: PageSummaryProps) => { +const getElementHeightFromDom = (elementId: string): number => document.getElementById(elementId).offsetHeight + +export const PageSummary: React.FC = ({ entries, containerId, offsetComponentId }: PageSummaryProps) => { const [hidden, setHidden] = useState(true); const [displayableEntries, setDisplayableEntries] = useState(entries) - - const handleMouseHover = () => { - setHidden(!hidden) - } + const topOffset = getElementHeightFromDom(offsetComponentId) useEffect(() => { const handeEvent = (event: CustomEvent) => { @@ -33,6 +34,17 @@ export const PageSummary: React.FC = ({ entries }: PageSummary return () => window.removeEventListener('sourceset-filter-change', handeEvent) }, [entries]) + const handleMouseHover = () => { + setHidden(!hidden) + } + + const handleClick = (entry: PageSummaryEntry) => { + document.getElementById(containerId).scrollTo({ + top: document.getElementById(entry.location).offsetTop - topOffset, + behavior: 'smooth' + }) + } + let classnames = "page-summary" if (hidden) classnames += " hidden" @@ -45,7 +57,7 @@ export const PageSummary: React.FC = ({ entries }: PageSummary

On this page

{!hidden && e.location)} currentClassName="selected"> - {displayableEntries.map((item) =>
  • {item.label}
    • )} + {displayableEntries.map((item) =>
  • handleClick(item)}>{item.label}
    • )}     }
    diff --git a/plugins/base/frontend/src/main/components/root.tsx b/plugins/base/frontend/src/main/components/root.tsx index cb070dfb..4161a4c1 100644 --- a/plugins/base/frontend/src/main/components/root.tsx +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { render } from 'react-dom'; -import RedBox from 'redbox-react'; import _ from "lodash"; import App from "./app"; @@ -8,9 +7,6 @@ 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 = () => { render( , @@ -19,57 +15,33 @@ const renderNavigationPane = () => { } 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(, element) - e.appendChild(element) + 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(, element) + e.appendChild(element) } - }) + } +} + +const renderMainSearch = () => { + render(, document.getElementById('searchBar')); } let renderApp = () => { - render( - , - rootEl - ); + renderMainSearch(); renderNavigationPane(); renderOnThisPage(); -}; -// @ts-ignore -if (module.hot) { - const renderAppHot = renderApp; - const renderError = (error: Error) => { - render( - , - rootEl - ); - }; - - renderApp = () => { - try { - renderAppHot(); - } catch (error) { - renderError(error); - } - }; - - // @ts-ignore - module.hot.accept('./app', () => { - setTimeout(renderApp); - }); -} + document.removeEventListener('DOMContentLoaded', renderApp); +}; -renderApp(); -appEl!.appendChild(rootEl); +document.addEventListener('DOMContentLoaded', renderApp); \ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/search/search.scss b/plugins/base/frontend/src/main/components/search/search.scss index e7e7673d..8965c5ea 100644 --- a/plugins/base/frontend/src/main/components/search/search.scss +++ b/plugins/base/frontend/src/main/components/search/search.scss @@ -4,6 +4,7 @@ fill: #637282; background: #F4F4F4; cursor: pointer; + margin-top: 3px; &:focus { outline: none; -- cgit