Adds scroll & resize helper

Author: JWittmeyer

resizeHelper.tsx

@@ -0,0 +1,46 @@
+type ResizeHelper = {
+    elementId?: string; // if not set, the window is used
+    onResizeX?: () => void;
+    onResizeY?: () => void;
+    onResize?: () => void;
+}
+
+class ResizeLookup {
+    public static active: { [lookupKey: string]: ResizeObserver } = {};
+}
+
+export function onResize(info: ResizeHelper, timeout?: number): ResizeObserver {
+    if (timeout) {
+        setTimeout(() => onResize(info), timeout);
+        return;
+    }
+    const element = info.elementId ? document.getElementById(info.elementId) : document.documentElement;
+    let lastWidth = element.clientWidth;
+    let lastHeight = element.clientHeight;
+    function f() {
+        if (info.onResizeX && lastWidth !== element.clientWidth) info.onResizeX();
+        if (info.onResizeY && lastHeight !== element.clientHeight) info.onResizeY();
+
+        if (info.onResize) info.onResize();
+        lastWidth = element.clientWidth;
+        lastHeight = element.clientHeight;
+    }
+
+    const resizeObserver = new ResizeObserver(f);
+
+
+    resizeObserver.observe(element);
+    const lookupKey = info.elementId || "@@window@@";
+    if (lookupKey in ResizeLookup.active) {
+        ResizeLookup.active[lookupKey].disconnect();
+    }
+    ResizeLookup.active[lookupKey] = resizeObserver;
+    return resizeObserver;
+}
+
+export function removeResizeObserver(elementId?: string): ResizeObserver {
+    const lookupKey = elementId || "@@window@@";
+    if (!(lookupKey in ResizeLookup.active)) return;
+    ResizeLookup.active[lookupKey].disconnect();
+    delete ResizeLookup.active[lookupKey];
+}

scrollHelper.tsx

@@ -0,0 +1,103 @@
+
+type ScrollHelper = {
+    elementId?: string // if elementId is not provided, then the window is used
+    onReachingBottom?: () => void
+    onReachingTop?: () => void
+    onLeavingBottom?: () => void
+    onLeavingTop?: () => void
+    onScroll?: () => void
+}
+
+class ScrollLookup {
+    public static active: { [elementId: string]: ScrollHelper } = {};
+    public static lookup: {
+        [elementId: string]: {
+            scrollFunction?: () => void
+            isTop: boolean
+            isBottom: boolean
+        }
+    } = {};
+}
+
+
+export function addScroll(scrollInfo: ScrollHelper, timeout?: number) {
+    //overwrites if same id is given
+    if (!scrollInfo) return;
+    if (timeout) {
+        setTimeout(() => addScroll(scrollInfo), timeout);
+        return;
+    }
+
+    const lookupKey = scrollInfo.elementId || "@@window@@";
+    const newElement = !(lookupKey in ScrollLookup.active);
+
+    ScrollLookup.active[lookupKey] = {};
+    ScrollLookup.lookup[lookupKey] = { isBottom: false, isTop: true };
+    if (scrollInfo.onReachingBottom) ScrollLookup.active[lookupKey].onReachingBottom = scrollInfo.onReachingBottom;
+    if (scrollInfo.onReachingTop) ScrollLookup.active[lookupKey].onReachingTop = scrollInfo.onReachingTop;
+    if (scrollInfo.onLeavingBottom) ScrollLookup.active[lookupKey].onLeavingBottom = scrollInfo.onLeavingBottom;
+    if (scrollInfo.onLeavingTop) ScrollLookup.active[lookupKey].onLeavingTop = scrollInfo.onLeavingTop;
+    if (scrollInfo.onScroll) ScrollLookup.active[lookupKey].onScroll = scrollInfo.onScroll;
+
+    if (Object.keys(ScrollLookup.active[lookupKey]).length === 0) {
+        delete ScrollLookup.active[lookupKey];
+        delete ScrollLookup.lookup[lookupKey];
+        return;
+    }
+
+    if (!newElement) return;
+
+    const [listenerTarget, element] = getScrollElementAndTarget(scrollInfo.elementId);
+
+    const scrollFunction = () => {
+        const active = ScrollLookup.active[lookupKey];
+
+        if (Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 1) {
+            ScrollLookup.lookup[lookupKey].isBottom = true;
+            if (active.onReachingBottom) active.onReachingBottom();
+        } else if (ScrollLookup.lookup[lookupKey].isBottom) {
+            ScrollLookup.lookup[lookupKey].isBottom = false;
+            if (active.onLeavingBottom) active.onLeavingBottom();
+        }
+        if (element.scrollTop < 1) {
+            ScrollLookup.lookup[lookupKey].isTop = true;
+            if (active.onReachingTop) active.onReachingTop();
+        } else if (ScrollLookup.lookup[lookupKey].isTop) {
+            ScrollLookup.lookup[lookupKey].isTop = false;
+            if (active.onLeavingTop) active.onLeavingTop();
+        }
+        if (active.onScroll) active.onScroll();
+    }
+    ScrollLookup.lookup[lookupKey].scrollFunction = scrollFunction;
+
+    listenerTarget.addEventListener("scroll", scrollFunction, false);
+}
+
+function getScrollElementAndTarget(elementId?: string): [HTMLElement | Window, HTMLElement] {
+    if (!elementId) return [window, document.documentElement];
+    const element = document.getElementById(elementId);
+    return [element, element];
+}
+
+export function removeScroll(elementId?: string) {
+    const lookupKey = elementId || "@@window@@";
+    if (!(lookupKey in ScrollLookup.active)) return;
+    const [listenerTarget, element] = getScrollElementAndTarget(elementId);
+    if (listenerTarget) listenerTarget.removeEventListener("scroll", ScrollLookup.lookup[lookupKey].scrollFunction, false);
+    delete ScrollLookup.active[lookupKey];
+    delete ScrollLookup.lookup[lookupKey];
+
+}
+
+export function scrollElementIntoView(elementId: string, timeout?: number) {
+    if (timeout) {
+        setTimeout(() => scrollElementIntoView(elementId), timeout);
+        return;
+    }
+
+    const element = document.getElementById(elementId);
+    if (!element) {
+        throw new Error("scrollElementIntoView elementId not found");
+    }
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+}