jqtree 1.7.4 → 1.8.0

package/src/scrollHandler.ts

@@ -1,276 +1,64 @@
-import { JqTreeWidget } from "./tree.jquery";
-import { HitArea, PositionInfo } from "./types";
+import { PositionInfo } from "./mouseWidgetTypes";
+import { ScrollParent } from "./scrollHandler/types";
+import createScrollParent from "./scrollHandler/createScrollParent";
 
-export default class ScrollHandler {
-    private treeWidget: JqTreeWidget;
-    private previousTop: number;
-    private isInitialized: boolean;
-    private $scrollParent: JQuery | null;
-    private scrollParentTop: number;
+interface ScrollHandlerParams {
+    refreshHitAreas: () => void;
+    $treeElement: JQuery<HTMLElement>;
+}
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
-        this.previousTop = -1;
-        this.isInitialized = false;
+export default class ScrollHandler {
+    private refreshHitAreas: () => void;
+    private scrollParent?: ScrollParent;
+    private $treeElement: JQuery<HTMLElement>;
+
+    constructor({ refreshHitAreas, $treeElement }: ScrollHandlerParams) {
+        this.refreshHitAreas = refreshHitAreas;
+        this.scrollParent = undefined;
+        this.$treeElement = $treeElement;
     }
 
-    public checkScrolling(): void {
-        this.ensureInit();
-        this.checkVerticalScrolling();
-        this.checkHorizontalScrolling();
+    public checkScrolling(positionInfo: PositionInfo): void {
+        this.checkVerticalScrolling(positionInfo);
+        this.checkHorizontalScrolling(positionInfo);
     }
 
-    public scrollToY(top: number): void {
-        this.ensureInit();
-
-        if (this.$scrollParent && this.$scrollParent[0]) {
-            this.$scrollParent[0].scrollTop = top;
-        } else {
-            const offset = this.treeWidget.$el.offset();
-            const treeTop = offset ? offset.top : 0;
-
-            jQuery(document).scrollTop(top + treeTop);
-        }
+    public stopScrolling() {
+        this.getScrollParent().stopScrolling();
     }
 
-    public isScrolledIntoView($element: JQuery): boolean {
-        this.ensureInit();
-
-        let elementBottom: number;
-        let viewBottom: number;
-        let elementTop: number;
-        let viewTop: number;
-
-        const elHeight = $element.height() || 0;
-
-        if (this.$scrollParent) {
-            viewTop = 0;
-            viewBottom = this.$scrollParent.height() || 0;
-
-            const offset = $element.offset();
-            const originalTop = offset ? offset.top : 0;
-
-            elementTop = originalTop - this.scrollParentTop;
-            elementBottom = elementTop + elHeight;
-        } else {
-            viewTop = jQuery(window).scrollTop() || 0;
-
-            const windowHeight = jQuery(window).height() || 0;
-            viewBottom = viewTop + windowHeight;
-
-            const offset = $element.offset();
-
-            elementTop = offset ? offset.top : 0;
-            elementBottom = elementTop + elHeight;
-        }
-
-        return elementBottom <= viewBottom && elementTop >= viewTop;
+    public scrollToY(top: number): void {
+        this.getScrollParent().scrollToY(top);
     }
 
     public getScrollLeft(): number {
-        if (!this.$scrollParent) {
-            return 0;
-        } else {
-            return this.$scrollParent.scrollLeft() || 0;
-        }
-    }
-
-    private initScrollParent(): void {
-        const getParentWithOverflow = (): JQuery | null => {
-            const cssAttributes = ["overflow", "overflow-y"];
-
-            const hasOverFlow = ($el: JQuery): boolean => {
-                for (const attr of cssAttributes) {
-                    const overflowValue = $el.css(attr);
-                    if (
-                        overflowValue === "auto" ||
-                        overflowValue === "scroll"
-                    ) {
-                        return true;
-                    }
-                }
-
-                return false;
-            };
-
-            if (hasOverFlow(this.treeWidget.$el)) {
-                return this.treeWidget.$el;
-            }
-
-            for (const el of this.treeWidget.$el.parents().get()) {
-                const $el = jQuery(el);
-                if (hasOverFlow($el)) {
-                    return $el;
-                }
-            }
-
-            return null;
-        };
-
-        const setDocumentAsScrollParent = (): void => {
-            this.scrollParentTop = 0;
-            this.$scrollParent = null;
-        };
-
-        if (this.treeWidget.$el.css("position") === "fixed") {
-            setDocumentAsScrollParent();
-        }
-
-        const $scrollParent = getParentWithOverflow();
-
-        if (
-            $scrollParent &&
-            $scrollParent.length &&
-            $scrollParent[0]?.tagName !== "HTML"
-        ) {
-            this.$scrollParent = $scrollParent;
-
-            const offset = this.$scrollParent.offset();
-            this.scrollParentTop = offset ? offset.top : 0;
-        } else {
-            setDocumentAsScrollParent();
-        }
-
-        this.isInitialized = true;
-    }
-
-    private ensureInit(): void {
-        if (!this.isInitialized) {
-            this.initScrollParent();
-        }
+        return this.getScrollParent().getScrollLeft();
     }
 
-    private handleVerticalScrollingWithScrollParent(area: HitArea): void {
-        const scrollParent = this.$scrollParent && this.$scrollParent[0];
-
-        if (!scrollParent) {
+    private checkVerticalScrolling(positionInfo: PositionInfo): void {
+        if (positionInfo.pageY == null) {
             return;
         }
 
-        const distanceBottom =
-            this.scrollParentTop + scrollParent.offsetHeight - area.bottom;
-
-        if (distanceBottom < 20) {
-            scrollParent.scrollTop += 20;
-            this.treeWidget.refreshHitAreas();
-            this.previousTop = -1;
-        } else if (area.top - this.scrollParentTop < 20) {
-            scrollParent.scrollTop -= 20;
-            this.treeWidget.refreshHitAreas();
-            this.previousTop = -1;
-        }
-    }
-
-    private handleVerticalScrollingWithDocument(area: HitArea): void {
-        const scrollTop = jQuery(document).scrollTop() || 0;
-        const distanceTop = area.top - scrollTop;
-
-        if (distanceTop < 20) {
-            jQuery(document).scrollTop(scrollTop - 20);
-        } else {
-            const windowHeight = jQuery(window).height() || 0;
-
-            if (windowHeight - (area.bottom - scrollTop) < 20) {
-                jQuery(document).scrollTop(scrollTop + 20);
-            }
-        }
+        this.getScrollParent().checkVerticalScrolling(positionInfo.pageY);
     }
 
-    private checkVerticalScrolling(): void {
-        const hoveredArea = this.treeWidget.dndHandler.hoveredArea;
-
-        if (hoveredArea && hoveredArea.top !== this.previousTop) {
-            this.previousTop = hoveredArea.top;
-
-            if (this.$scrollParent) {
-                this.handleVerticalScrollingWithScrollParent(hoveredArea);
-            } else {
-                this.handleVerticalScrollingWithDocument(hoveredArea);
-            }
-        }
-    }
-
-    private checkHorizontalScrolling(): void {
-        const positionInfo = this.treeWidget.dndHandler.positionInfo;
-
-        if (!positionInfo) {
+    private checkHorizontalScrolling(positionInfo: PositionInfo): void {
+        if (positionInfo.pageX == null) {
             return;
         }
 
-        if (this.$scrollParent) {
-            this.handleHorizontalScrollingWithParent(positionInfo);
-        } else {
-            this.handleHorizontalScrollingWithDocument(positionInfo);
-        }
+        this.getScrollParent().checkHorizontalScrolling(positionInfo.pageX);
     }
 
-    private handleHorizontalScrollingWithParent(
-        positionInfo: PositionInfo
-    ): void {
-        if (
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
-            return;
-        }
-
-        const $scrollParent = this.$scrollParent;
-        const scrollParentOffset = $scrollParent && $scrollParent.offset();
-
-        if (!($scrollParent && scrollParentOffset)) {
-            return;
-        }
-
-        const scrollParent = $scrollParent[0];
-
-        if (!scrollParent) {
-            return;
-        }
-
-        const canScrollRight =
-            scrollParent.scrollLeft + scrollParent.clientWidth <
-            scrollParent.scrollWidth;
-        const canScrollLeft = scrollParent.scrollLeft > 0;
-
-        const rightEdge = scrollParentOffset.left + scrollParent.clientWidth;
-        const leftEdge = scrollParentOffset.left;
-        const isNearRightEdge = positionInfo.pageX > rightEdge - 20;
-        const isNearLeftEdge = positionInfo.pageX < leftEdge + 20;
-
-        if (isNearRightEdge && canScrollRight) {
-            scrollParent.scrollLeft = Math.min(
-                scrollParent.scrollLeft + 20,
-                scrollParent.scrollWidth
+    private getScrollParent(): ScrollParent {
+        if (!this.scrollParent) {
+            this.scrollParent = createScrollParent(
+                this.$treeElement,
+                this.refreshHitAreas,
             );
-        } else if (isNearLeftEdge && canScrollLeft) {
-            scrollParent.scrollLeft = Math.max(scrollParent.scrollLeft - 20, 0);
         }
-    }
-
-    private handleHorizontalScrollingWithDocument(
-        positionInfo: PositionInfo
-    ): void {
-        if (
-            positionInfo.pageX === undefined ||
-            positionInfo.pageY === undefined
-        ) {
-            return;
-        }
-
-        const $document = jQuery(document);
 
-        const scrollLeft = $document.scrollLeft() || 0;
-        const windowWidth = jQuery(window).width() || 0;
-
-        const canScrollLeft = scrollLeft > 0;
-
-        const isNearRightEdge = positionInfo.pageX > windowWidth - 20;
-        const isNearLeftEdge = positionInfo.pageX - scrollLeft < 20;
-
-        if (isNearRightEdge) {
-            $document.scrollLeft(scrollLeft + 20);
-        } else if (isNearLeftEdge && canScrollLeft) {
-            $document.scrollLeft(Math.max(scrollLeft - 20, 0));
-        }
+        return this.scrollParent;
     }
 }

package/src/selectNodeHandler.ts

@@ -1,13 +1,17 @@
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
+import { GetNodeById } from "./jqtreeMethodTypes";
+
+interface SelectNodeHandlerParameters {
+    getNodeById: GetNodeById;
+}
 
 export default class SelectNodeHandler {
-    private treeWidget: JqTreeWidget;
+    private getNodeById: GetNodeById;
     private selectedNodes: Set<NodeId>;
     private selectedSingleNode: Node | null;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({ getNodeById }: SelectNodeHandlerParameters) {
+        this.getNodeById = getNodeById;
         this.selectedNodes = new Set<NodeId>();
         this.clear();
     }
@@ -29,7 +33,7 @@ export default class SelectNodeHandler {
             const selectedNodes: Node[] = [];
 
             this.selectedNodes.forEach((id) => {
-                const node = this.treeWidget.getNodeById(id);
+                const node = this.getNodeById(id);
                 if (node) {
                     selectedNodes.push(node);
                 }
@@ -53,7 +57,7 @@ export default class SelectNodeHandler {
                 if (
                     Object.prototype.hasOwnProperty.call(this.selectedNodes, id)
                 ) {
-                    const node = this.treeWidget.getNodeById(id);
+                    const node = this.getNodeById(id);
                     if (node && parent.isParentOf(node)) {
                         selectedNodes.push(node);
                     }
@@ -108,14 +112,4 @@ export default class SelectNodeHandler {
             this.selectedSingleNode = node;
         }
     }
-
-    public isFocusOnTree(): boolean {
-        const activeElement = document.activeElement;
-
-        return Boolean(
-            activeElement &&
-                activeElement.tagName === "SPAN" &&
-                this.treeWidget._containsElement(activeElement as HTMLElement)
-        );
-    }
 }

package/src/test/jqTree/keyboard.test.ts

@@ -1,4 +1,5 @@
 import getGiven from "givens";
+import { userEvent } from "@testing-library/user-event";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
 
@@ -18,22 +19,16 @@ describe("keyboard support", () => {
     interface Vars {
         autoOpen: boolean;
         initialSelectedNode: INode | null;
-        pressedKey: number;
+        pressedKey: string;
         $tree: JQuery<HTMLElement>;
     }
 
-    const KEY_DOWN = 40;
-    const KEY_LEFT = 37;
-    const KEY_RIGHT = 39;
-    const KEY_UP = 38;
-    const KEY_PAGE_UP = 33;
-
     const given = getGiven<Vars>();
     given("autoOpen", () => false);
     given("initialSelectedNode", () => null);
     given("$tree", () => $("#tree1"));
 
-    beforeEach(() => {
+    beforeEach(async () => {
         given.$tree.tree({
             animationSpeed: 0,
             autoOpen: given.autoOpen,
@@ -44,15 +39,15 @@ describe("keyboard support", () => {
             given.$tree.tree("selectNode", given.initialSelectedNode);
         }
 
-        given.$tree.trigger($.Event("keydown", { which: given.pressedKey }));
+        await userEvent.keyboard(`{${given.pressedKey}}`);
     });
 
     context("with key down", () => {
-        given("pressedKey", () => KEY_DOWN);
+        given("pressedKey", () => "ArrowDown");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the next node", () => {
@@ -71,7 +66,7 @@ describe("keyboard support", () => {
 
         context("when the last node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("keeps the node selected", () => {
@@ -83,11 +78,11 @@ describe("keyboard support", () => {
     });
 
     context("with key up", () => {
-        given("pressedKey", () => KEY_UP);
+        given("pressedKey", () => "ArrowUp");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("selects the next node", () => {
@@ -106,11 +101,11 @@ describe("keyboard support", () => {
     });
 
     context("with key right", () => {
-        given("pressedKey", () => KEY_RIGHT);
+        given("pressedKey", () => "ArrowRight");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("opens the folder", () => {
@@ -132,7 +127,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the first child", () => {
@@ -168,7 +163,7 @@ describe("keyboard support", () => {
 
         context("when a child is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "child1")
+                given.$tree.tree("getNodeByNameMustExist", "child1"),
             );
 
             it("does nothing", () => {
@@ -179,11 +174,11 @@ describe("keyboard support", () => {
         });
     });
     context("with key left", () => {
-        given("pressedKey", () => KEY_LEFT);
+        given("pressedKey", () => "ArrowLeft");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node3")
+                given.$tree.tree("getNodeByNameMustExist", "node3"),
             );
 
             it("selects the previous node", () => {
@@ -210,7 +205,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("closes the folder", () => {
@@ -237,10 +232,10 @@ describe("keyboard support", () => {
     });
 
     context("with page up key", () => {
-        given("pressedKey", () => KEY_PAGE_UP);
+        given("pressedKey", () => "PageUp");
 
         given("initialSelectedNode", () =>
-            given.$tree.tree("getNodeByNameMustExist", "child1")
+            given.$tree.tree("getNodeByNameMustExist", "child1"),
         );
 
         it("does nothing", () => {

package/src/test/jqTree/loadOnDemand.test.ts

@@ -136,9 +136,8 @@ context("when a node has load_on_demand in the data", () => {
 
         context("when the node is selected and doesn't have the focus", () => {
             beforeEach(() => {
-                given.$tree.tree("selectNode", given.node, {
-                    mustSetFocus: false,
-                });
+                given.$tree.tree("selectNode", given.node);
+                (document.activeElement as HTMLElement).blur(); // eslint-disable-line testing-library/no-node-access
             });
 
             it("keeps the node selected and not focused", async () => {

package/src/test/jqTree/methods.test.ts

@@ -134,7 +134,7 @@ describe("addToSelection", () => {
     given("child1", () => given.$tree.tree("getNodeByNameMustExist", "child1"));
     given("child2", () => given.$tree.tree("getNodeByNameMustExist", "child2"));
 
-    beforeEach(() => {
+    it("selects the nodes", () => {
         given.$tree.tree({
             autoOpen: true,
             data: exampleData,
@@ -142,15 +142,21 @@ describe("addToSelection", () => {
 
         given.$tree.tree("addToSelection", given.child1);
         given.$tree.tree("addToSelection", given.child2);
-    });
 
-    it("selects the nodes", () => {
         expect(given.$tree.tree("getSelectedNodes")).toEqual(
             expect.arrayContaining([given.child1, given.child2]),
         );
     });
 
     it("renders the nodes correctly", () => {
+        given.$tree.tree({
+            autoOpen: true,
+            data: exampleData,
+        });
+
+        given.$tree.tree("addToSelection", given.child1);
+        given.$tree.tree("addToSelection", given.child2);
+
         expect(given.$tree).toHaveTreeStructure([
             expect.objectContaining({
                 name: "node1",
@@ -172,6 +178,20 @@ describe("addToSelection", () => {
             }),
         ]);
     });
+
+    it("opens the parent node when it's closed", () => {
+        given.$tree.tree({
+            autoOpen: false,
+            data: exampleData,
+        });
+
+        const node1 = given.$tree.tree("getNodeByNameMustExist", "node1");
+        expect(node1.is_open).toBeFalsy();
+
+        given.$tree.tree("addToSelection", given.child1);
+
+        expect(node1.is_open).toBe(true);
+    });
 });
 
 describe("appendNode", () => {
@@ -984,7 +1004,7 @@ describe("refresh", () => {
 
     it("rerenders the tree", () => {
         const tree = given.$tree.tree("getTree");
-        (tree.children[0] as INode).name = "node1a";
+        (tree.children[0] as INode).name = "node1a"; // eslint-disable-line testing-library/no-node-access
 
         expect(given.$tree).toHaveTreeStructure([
             expect.objectContaining({ name: "node1" }),
@@ -1207,6 +1227,15 @@ describe("selectNode", () => {
             expect(given.$tree.tree("getSelectedNode")).toBeFalse();
         });
     });
+
+    it("opens the parent node when it's closed", () => {
+        expect(given.node1.is_open).toBeFalsy();
+
+        const child1 = given.$tree.tree("getNodeByNameMustExist", "child1");
+        given.$tree.tree("selectNode", child1);
+
+        expect(given.node1.is_open).toBe(true);
+    });
 });
 
 describe("setOption", () => {

package/src/test/jqTree/options.test.ts

@@ -199,19 +199,30 @@ describe("closedIcon", () => {
     });
 
     it("renders a html element", () => {
-        const closedIcon = document.createElement("span");
-        closedIcon.className = "abc";
-        closedIcon.textContent = "test";
+        const icon = document.createElement("span");
+        icon.className = "abc";
+        icon.textContent = "test";
 
         const $tree = $("#tree1");
         $tree.tree({
-            closedIcon,
+            closedIcon: icon,
             data: exampleData,
         });
 
         const $span = $tree.find("a.jqtree-toggler:first span.abc");
         expect($span.text()).toBe("test");
     });
+
+    it("renders a default when the option is empty", () => {
+        const $tree = $("#tree1");
+        $tree.tree({
+            closedIcon: undefined,
+            data: exampleData,
+        });
+
+        const $span = $tree.find("a.jqtree-toggler:first");
+        expect($span.text()).toBe("►");
+    });
 });
 
 describe("dataUrl", () => {