diff options
Diffstat (limited to 'FrontEnd/src/app/utilities')
-rw-r--r-- | FrontEnd/src/app/utilities/mediaQuery.ts | 5 | ||||
-rw-r--r-- | FrontEnd/src/app/utilities/url.ts | 17 | ||||
-rw-r--r-- | FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts | 77 | ||||
-rw-r--r-- | FrontEnd/src/app/utilities/useScrollToTop.ts | 43 |
4 files changed, 0 insertions, 142 deletions
diff --git a/FrontEnd/src/app/utilities/mediaQuery.ts b/FrontEnd/src/app/utilities/mediaQuery.ts deleted file mode 100644 index ad55c3c0..00000000 --- a/FrontEnd/src/app/utilities/mediaQuery.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { useMediaQuery } from "react-responsive"; - -export function useIsSmallScreen(): boolean { - return useMediaQuery({ maxWidth: 576 }); -} diff --git a/FrontEnd/src/app/utilities/url.ts b/FrontEnd/src/app/utilities/url.ts deleted file mode 100644 index 4f2a6ecd..00000000 --- a/FrontEnd/src/app/utilities/url.ts +++ /dev/null @@ -1,17 +0,0 @@ -export function applyQueryParameters<T>(url: string, query: T): string { - if (query == null) return url; - - const params = new URLSearchParams(); - - for (const [key, value] of Object.entries(query)) { - if (value == null) void 0; - else if (typeof value === "string") params.set(key, value); - else if (typeof value === "number") params.set(key, String(value)); - else if (typeof value === "boolean") params.set(key, String(value)); - else if (value instanceof Date) params.set(key, value.toISOString()); - else { - console.error("Unknown query parameter type. Param: ", value); - } - } - return url + "?" + params.toString(); -} diff --git a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts deleted file mode 100644 index a5812808..00000000 --- a/FrontEnd/src/app/utilities/useReverseScrollPositionRemember.ts +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; - -let on = false; - -let reverseScrollPosition = getReverseScrollPosition(); -let reverseScrollToPosition: number | null = null; -let lastScrollPosition = window.scrollY; - -export function getReverseScrollPosition(): number { - if (document.documentElement.scrollHeight <= window.innerHeight) { - return 0; - } else { - return ( - document.documentElement.scrollHeight - - document.documentElement.scrollTop - - window.innerHeight - ); - } -} - -export function scrollToReverseScrollPosition(reversePosition: number): void { - if (document.documentElement.scrollHeight <= window.innerHeight) return; - - const old = document.documentElement.style.scrollBehavior; - document.documentElement.style.scrollBehavior = "auto"; - - const newPosition = - document.documentElement.scrollHeight - - window.innerHeight - - reversePosition; - - reverseScrollToPosition = newPosition; - - window.scrollTo(0, newPosition); - - document.documentElement.style.scrollBehavior = old; -} - -const scrollListener = (): void => { - if ( - reverseScrollToPosition != null && - Math.abs(window.scrollY - reverseScrollToPosition) > 50 - ) { - scrollToReverseScrollPosition(reverseScrollPosition); - return; - } - if ( - reverseScrollToPosition == null && - Math.abs(window.scrollY - lastScrollPosition) > 1000 - ) { - scrollToReverseScrollPosition(reverseScrollPosition); - return; - } - - reverseScrollToPosition = null; - lastScrollPosition = window.scrollY; - reverseScrollPosition = getReverseScrollPosition(); -}; - -const resizeObserver = new ResizeObserver(() => { - scrollToReverseScrollPosition(reverseScrollPosition); -}); - -export default function useReverseScrollPositionRemember(): void { - React.useEffect(() => { - if (on) return; - on = true; - window.addEventListener("scroll", scrollListener); - resizeObserver.observe(document.documentElement); - - return () => { - window.removeEventListener("scroll", scrollListener); - resizeObserver.disconnect(); - on = false; - }; - }, []); -} diff --git a/FrontEnd/src/app/utilities/useScrollToTop.ts b/FrontEnd/src/app/utilities/useScrollToTop.ts deleted file mode 100644 index 892e3545..00000000 --- a/FrontEnd/src/app/utilities/useScrollToTop.ts +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import { fromEvent } from "rxjs"; -import { filter, throttleTime } from "rxjs/operators"; - -function useScrollToTop( - handler: () => void, - enable = true, - option = { - maxOffset: 50, - throttle: 1000, - } -): void { - const handlerRef = React.useRef<(() => void) | null>(null); - - React.useEffect(() => { - handlerRef.current = handler; - - return () => { - handlerRef.current = null; - }; - }, [handler]); - - React.useEffect(() => { - const subscription = fromEvent(window, "scroll") - .pipe( - filter(() => { - return window.scrollY <= option.maxOffset; - }), - throttleTime(option.throttle) - ) - .subscribe(() => { - if (enable) { - handlerRef.current?.(); - } - }); - - return () => { - subscription.unsubscribe(); - }; - }, [enable, option.maxOffset, option.throttle]); -} - -export default useScrollToTop; |