diff options
Diffstat (limited to 'plugins/base/frontend/src')
6 files changed, 4 insertions, 280 deletions
diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg b/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg deleted file mode 100644 index ad6a2026..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/clear.svg +++ /dev/null @@ -1,3 +0,0 @@ -<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> diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss deleted file mode 100644 index 1a61e90f..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "src/main/scss/index.scss"; - -$defaultHeight: 40px; - -div#paneSearch { - - width: 248px; - margin: 0 auto; - - input#navigation-pane-search { - background: $white; - border: 1px solid $grey-border; - box-sizing: border-box; - border-radius: 4px; - padding: 8px; - height: $defaultHeight; - } - - .navigation-pane-search { - padding-top: 16px; - width: 100%; - } - - div.paneSearchInputWrapper { - position: relative; - span.paneSearchInputClearIcon { - position: absolute; - top: calc(50% + 2px); //Just to include a border - right: 8px; - cursor: pointer; - } - } -} - -.navigation-pane-popup { - margin-top: 1.2em; -}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx b/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx deleted file mode 100644 index 152e7719..00000000 --- a/plugins/base/frontend/src/main/components/navigationPaneSearch/navigationPaneSearch.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React, { useCallback, useState, useEffect } from 'react'; -import {Select, List } from '@jetbrains/ring-ui'; -import { DokkaFuzzyFilterComponent } from '../search/dokkaFuzzyFilter'; -import { IWindow, Option } from '../search/types'; -import './navigationPaneSearch.scss'; -import ClearIcon from 'react-svg-loader!./clear.svg'; -import { relativizeUrlForRequest } from '../utils/requests'; - -export const NavigationPaneSearch = () => { - const [navigationList, setNavigationList] = useState<Option[]>([]); - const [selected, onSelected] = useState<Option | null>(null); - const [filterValue, setFilterValue] = useState<string>('') - - const onChangeSelected = useCallback( - (element: Option) => { - window.location.replace(`${(window as IWindow).pathToRoot}${element.location}`) - onSelected(element); - }, - [selected] - ); - - const onFilter = (filterValue: string) => { - setFilterValue(filterValue) - } - - const onClearClick = () => { - setFilterValue('') - } - - const shouldShowPopup = (filterState: string): boolean => { - return filterState.trim().length !== 0 - } - - useEffect(() => { - fetch(relativizeUrlForRequest('scripts/navigation-pane.json')) - .then(response => response.json()) - .then((result) => { - setNavigationList(result.map((record: Option, idx: number) => { - return { - ...record, - key: idx, - rgItemType: List.ListProps.Type.CUSTOM - } - })) - }, - (error) => { - console.error('failed to fetch navigationPane data', error) - setNavigationList([]) - }) - }, []) - - - return <div className={"paneSearchInputWrapper"}> - <DokkaFuzzyFilterComponent - id="navigation-pane-search" - className="navigation-pane-search" - inputPlaceholder="Title filter" - clear={true} - type={Select.Type.INPUT_WITHOUT_CONTROLS} - filter={{fuzzy:true, value: filterValue}} - selected={selected} - data={navigationList} - popupClassName={"navigation-pane-popup"} - onSelect={onChangeSelected} - onFilter={onFilter} - shouldShowPopup={shouldShowPopup} - renderOptimization={false} - /> - <span className={"paneSearchInputClearIcon"} onClick={onClearClick}><ClearIcon /></span> - </div> -}
\ No newline at end of file diff --git a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss b/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss deleted file mode 100644 index aaa897a8..00000000 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss +++ /dev/null @@ -1,71 +0,0 @@ -@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; - cursor: pointer; - } - - &.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 deleted file mode 100644 index c5a8344f..00000000 --- a/plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState, useEffect } from "react"; -import './pageSummary.scss' -import _ from "lodash"; -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 = { - location: string, - label: string, - sourceSets: SourceSetFilterKey[] -} - -type SourceSetFilterKey = string - -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 topOffset = getElementHeightFromDom(offsetComponentId) - - 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]) - - 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" - - 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 onClick={() => handleClick(item)}>{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 4161a4c1..9efbfdd0 100644 --- a/plugins/base/frontend/src/main/components/root.tsx +++ b/plugins/base/frontend/src/main/components/root.tsx @@ -1,47 +1,18 @@ import React from 'react'; -import { render } from 'react-dom'; -import _ from "lodash"; +import {render} from 'react-dom'; import App from "./app"; import './app/index.scss'; -import { NavigationPaneSearch } from './navigationPaneSearch/navigationPaneSearch'; -import { PageSummary } from './pageSummary/pageSummary'; -const renderNavigationPane = () => { - render( - <NavigationPaneSearch />, - document.getElementById('paneSearch') - ) -} - -const renderOnThisPage = () => { - 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')); + render(<App/>, document.getElementById('searchBar')); } let renderApp = () => { - renderMainSearch(); - renderNavigationPane(); - renderOnThisPage(); + renderMainSearch(); - document.removeEventListener('DOMContentLoaded', renderApp); + document.removeEventListener('DOMContentLoaded', renderApp); }; document.addEventListener('DOMContentLoaded', renderApp);
\ No newline at end of file |
