aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/utilities
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/utilities')
-rw-r--r--FrontEnd/src/utilities/url.ts9
-rw-r--r--FrontEnd/src/utilities/useReverseScrollPositionRemember.ts56
2 files changed, 64 insertions, 1 deletions
diff --git a/FrontEnd/src/utilities/url.ts b/FrontEnd/src/utilities/url.ts
index 4f2a6ecd..45ad0ab7 100644
--- a/FrontEnd/src/utilities/url.ts
+++ b/FrontEnd/src/utilities/url.ts
@@ -13,5 +13,12 @@ export function applyQueryParameters<T>(url: string, query: T): string {
console.error("Unknown query parameter type. Param: ", value);
}
}
- return url + "?" + params.toString();
+
+ const p = params.toString();
+
+ if (p == "") {
+ return url;
+ }
+
+ return url + "?" + p;
}
diff --git a/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts b/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
new file mode 100644
index 00000000..6fdd4b43
--- /dev/null
+++ b/FrontEnd/src/utilities/useReverseScrollPositionRemember.ts
@@ -0,0 +1,56 @@
+import React from "react";
+
+let on = false;
+
+let rememberedReversePosition = getReverseScrollPosition();
+
+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;
+
+ window.scrollTo(0, newPosition);
+
+ document.documentElement.style.scrollBehavior = old;
+}
+
+const scrollListener = (): void => {
+ rememberedReversePosition = getReverseScrollPosition();
+};
+
+const resizeObserver = new ResizeObserver(() => {
+ scrollToReverseScrollPosition(rememberedReversePosition);
+});
+
+export default function useReverseScrollPositionRemember(): void {
+ React.useEffect(() => {
+ if (on) return;
+ on = true;
+ window.addEventListener("scroll", scrollListener);
+ resizeObserver.observe(document.documentElement);
+
+ return () => {
+ resizeObserver.disconnect();
+ window.removeEventListener("scroll", scrollListener);
+ on = false;
+ };
+ }, []);
+}