diff options
Diffstat (limited to 'plugins/base/frontend')
5 files changed, 41 insertions, 61 deletions
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<PageSummaryProps> = ({ entries }: PageSummaryProps) => { +const getElementHeightFromDom = (elementId: string): number => document.getElementById(elementId).offsetHeight + +export const PageSummary: React.FC<PageSummaryProps> = ({ entries, containerId, offsetComponentId }: PageSummaryProps) => { const [hidden, setHidden] = useState<Boolean>(true); const [displayableEntries, setDisplayableEntries] = useState<PageSummaryEntry[]>(entries) - - const handleMouseHover = () => { - setHidden(!hidden) - } + const topOffset = getElementHeightFromDom(offsetComponentId) useEffect(() => { const handeEvent = (event: CustomEvent<SourceSetFilterKey[]>) => { @@ -33,6 +34,17 @@ export const PageSummary: React.FC<PageSummaryProps> = ({ 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<PageSummaryProps> = ({ entries }: PageSummary <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>)} + {displayableEntries.map((item) => <li><a onClick={() => handleClick(item)}>{item.label}</a></li>)} </Scrollspy>} </div> </div> 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( <NavigationPaneSearch />, @@ -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(<PageSummary entries={unique} />, 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(<PageSummary entries={unique} containerId={'main'} offsetComponentId={'navigation-wrapper'}/>, element) + e.appendChild(element) } - }) + } +} + +const renderMainSearch = () => { + render(<App />, document.getElementById('searchBar')); } let renderApp = () => { - render( - <App />, - rootEl - ); + renderMainSearch(); renderNavigationPane(); renderOnThisPage(); -}; -// @ts-ignore -if (module.hot) { - const renderAppHot = renderApp; - const renderError = (error: Error) => { - render( - <RedBox error={error} />, - 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; |