aboutsummaryrefslogtreecommitdiff
path: root/plugins/base/frontend/src/main/components/pageSummary
diff options
context:
space:
mode:
Diffstat (limited to 'plugins/base/frontend/src/main/components/pageSummary')
-rw-r--r--plugins/base/frontend/src/main/components/pageSummary/pageSummary.scss71
-rw-r--r--plugins/base/frontend/src/main/components/pageSummary/pageSummary.tsx65
2 files changed, 0 insertions, 136 deletions
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