jqtree 1.7.5 → 1.8.0

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", () => {
@@ -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", () => {

package/src/test/node.test.ts

@@ -349,7 +349,7 @@ describe("constructor", () => {
                 children: [],
                 parent: null,
             });
-            expect(given.node).not.toHaveProperty("id");
+            expect(given.node.id).toBeUndefined();
         });
 
         it("sets isEmptyFolder to false", () => {

package/src/tree.jquery.ts

@@ -4,14 +4,16 @@ import ElementsRenderer from "./elementsRenderer";
 import DataLoader, { HandleFinishedLoading } from "./dataLoader";
 import KeyHandler from "./keyHandler";
 import MouseWidget from "./mouse.widget";
-import { PositionInfo } from "./types";
+import { PositionInfo } from "./mouseWidgetTypes";
 import SaveStateHandler, { SavedState } from "./saveStateHandler";
 import ScrollHandler from "./scrollHandler";
 import SelectNodeHandler from "./selectNodeHandler";
 import SimpleWidget from "./simple.widget";
 import { Node, getPosition } from "./node";
 import { isFunction } from "./util";
-import { FolderElement, NodeElement, OnFinishOpenNode } from "./nodeElement";
+import NodeElement from "./nodeElement";
+import FolderElement from "./nodeElement/folderElement";
+import { OnFinishOpenNode } from "./jqtreeMethodTypes";
 import { JQTreeOptions } from "./jqtreeOptions";
 
 interface ClickTarget {
@@ -185,9 +187,18 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     public getNodeByHtmlElement(
-        element: HTMLElement | JQuery<HTMLElement>,
+        inputElement: HTMLElement | JQuery<HTMLElement>,
     ): Node | null {
-        return this.getNode(jQuery(element));
+        const element =
+            inputElement instanceof HTMLElement
+                ? inputElement
+                : inputElement[0];
+
+        if (!element) {
+            return null;
+        }
+
+        return this.getNode(element);
     }
 
     public getNodeByCallback(callback: (node: Node) => boolean): Node | null {
@@ -203,12 +214,12 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const parseParams = (): [boolean, OnFinishOpenNode | null] => {
+        const parseParams = (): [boolean, OnFinishOpenNode | undefined] => {
             let onFinished: OnFinishOpenNode | null;
             let slide: boolean | null;
 
             if (isFunction(param1)) {
-                onFinished = param1 as OnFinishOpenNode | null;
+                onFinished = param1 as OnFinishOpenNode;
                 slide = null;
             } else {
                 slide = param1 as boolean;
@@ -236,7 +247,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         const slide = slideParam ?? this.options.slide;
 
         if (node.isFolder() || node.isEmptyFolder) {
-            new FolderElement(node, this).close(
+            this.createFolderElement(node).close(
                 slide,
                 this.options.animationSpeed,
             );
@@ -415,6 +426,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
 
         this.selectNodeHandler.addToSelection(node);
+        this.openParents(node);
 
         this._getNodeElementForNode(node).select(
             mustSetFocus === undefined ? true : mustSetFocus,
@@ -514,14 +526,14 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     public _openNode(
         node: Node,
         slide = true,
-        onFinished: OnFinishOpenNode | null,
+        onFinished?: OnFinishOpenNode,
     ): void {
         const doOpenNode = (
             _node: Node,
             _slide: boolean,
-            _onFinished: OnFinishOpenNode | null,
+            _onFinished?: OnFinishOpenNode,
         ): void => {
-            const folderElement = new FolderElement(_node, this);
+            const folderElement = this.createFolderElement(_node);
             folderElement.open(
                 _onFinished,
                 _slide,
@@ -538,7 +550,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 while (parent) {
                     // nb: do not open root element
                     if (parent.parent) {
-                        doOpenNode(parent, false, null);
+                        doOpenNode(parent, false);
                     }
                     parent = parent.parent;
                 }
@@ -554,7 +566,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
      from_node: redraw this subtree
     */
     public _refreshElements(fromNode: Node | null): void {
-        const mustSetFocus = this.selectNodeHandler.isFocusOnTree();
+        const mustSetFocus = this.isFocusOnTree();
         const mustSelect = fromNode
             ? this.isSelectedNodeInSubtree(fromNode)
             : false;
@@ -570,14 +582,14 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public _getNodeElementForNode(node: Node): NodeElement {
         if (node.isFolder()) {
-            return new FolderElement(node, this);
+            return this.createFolderElement(node);
         } else {
-            return new NodeElement(node, this);
+            return this.createNodeElement(node);
         }
     }
 
-    public _getNodeElement($element: JQuery<HTMLElement>): NodeElement | null {
-        const node = this.getNode($element);
+    public _getNodeElement(element: HTMLElement): NodeElement | null {
+        const node = this.getNode(element);
         if (node) {
             return this._getNodeElementForNode(node);
         } else {
@@ -585,12 +597,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     }
 
-    public _containsElement(element: HTMLElement): boolean {
-        const node = this.getNode(jQuery(element));
-
-        return node != null && node.tree === this.tree;
-    }
-
     public _getScrollLeft(): number {
         return this.scrollHandler.getScrollLeft();
     }
@@ -607,13 +613,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             this.options.closedIcon = this.getDefaultClosedIcon();
         }
 
-        this.renderer = new ElementsRenderer(this);
-        this.dataLoader = new DataLoader(this);
-        this.saveStateHandler = new SaveStateHandler(this);
-        this.selectNodeHandler = new SelectNodeHandler(this);
-        this.dndHandler = new DragAndDropHandler(this);
-        this.scrollHandler = new ScrollHandler(this);
-        this.keyHandler = new KeyHandler(this);
+        this.connectHandlers();
 
         this.initData();
 
@@ -869,7 +869,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
                         return false;
                     } else {
-                        this._openNode(node, false, null);
+                        this._openNode(node, false);
 
                         return level !== maxLevel;
                     }
@@ -938,13 +938,11 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
     };
 
-    private getClickTarget(element: EventTarget): ClickTarget | null {
-        const $target = jQuery(element);
-
-        const $button = $target.closest(".jqtree-toggler");
+    private getClickTarget(element: HTMLElement): ClickTarget | null {
+        const button = element.closest(".jqtree-toggler");
 
-        if ($button.length) {
-            const node = this.getNode($button as JQuery<HTMLElement>);
+        if (button) {
+            const node = this.getNode(button as HTMLElement);
 
             if (node) {
                 return {
@@ -953,9 +951,10 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 };
             }
         } else {
-            const $el = $target.closest(".jqtree-element");
-            if ($el.length) {
-                const node = this.getNode($el as JQuery<HTMLElement>);
+            const jqTreeElement = element.closest(".jqtree-element");
+
+            if (jqTreeElement) {
+                const node = this.getNode(jqTreeElement as HTMLElement);
                 if (node) {
                     return {
                         type: "label",
@@ -968,21 +967,23 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         return null;
     }
 
-    private getNode($element: JQuery<HTMLElement>): null | Node {
-        const $li = $element.closest("li.jqtree_common");
-        if ($li.length === 0) {
-            return null;
+    private getNode(element: HTMLElement): null | Node {
+        const liElement = element.closest("li.jqtree_common");
+
+        if (liElement) {
+            return jQuery(liElement).data("node") as Node;
         } else {
-            return $li.data("node") as Node;
+            return null;
         }
     }
 
     private handleContextmenu = (
         e: JQuery.ContextMenuEvent<HTMLElement, any, HTMLElement, HTMLElement>,
     ) => {
-        const $div = jQuery(e.target).closest("ul.jqtree-tree .jqtree-element");
-        if ($div.length) {
-            const node = this.getNode($div);
+        const div = e.target.closest("ul.jqtree-tree .jqtree-element");
+
+        if (div) {
+            const node = this.getNode(div as HTMLElement);
             if (node) {
                 e.preventDefault();
                 e.stopPropagation();
@@ -1079,14 +1080,6 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             }
         };
 
-        const openParents = (): void => {
-            const parent = node.parent;
-
-            if (parent && parent.parent && !parent.is_open) {
-                this.openNode(parent, false);
-            }
-        };
-
         if (!canSelect()) {
             return;
         }
@@ -1108,7 +1101,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 node,
                 deselected_node: deselectedNode,
             });
-            openParents();
+            this.openParents(node);
         }
 
         saveState();
@@ -1164,7 +1157,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     private loadFolderOnDemand(
         node: Node,
         slide = true,
-        onFinished: OnFinishOpenNode | null,
+        onFinished?: OnFinishOpenNode,
     ): void {
         node.is_loading = true;
 
@@ -1172,6 +1165,195 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             this._openNode(node, slide, onFinished);
         });
     }
+
+    private containsElement(element: HTMLElement): boolean {
+        const node = this.getNode(element);
+
+        return node != null && node.tree === this.tree;
+    }
+
+    private isFocusOnTree(): boolean {
+        const activeElement = document.activeElement;
+
+        return Boolean(
+            activeElement &&
+                activeElement.tagName === "SPAN" &&
+                this.containsElement(activeElement as HTMLElement),
+        );
+    }
+
+    private connectHandlers() {
+        const {
+            autoEscape,
+            buttonLeft,
+            closedIcon,
+            dataFilter,
+            dragAndDrop,
+            keyboardSupport,
+            onCanMove,
+            onCreateLi,
+            onDragMove,
+            onDragStop,
+            onGetStateFromStorage,
+            onIsMoveHandle,
+            onLoadFailed,
+            onLoading,
+            onSetStateFromStorage,
+            openedIcon,
+            openFolderDelay,
+            rtl,
+            saveState,
+            showEmptyFolder,
+            slide,
+            tabIndex,
+        } = this.options;
+
+        const closeNode = this.closeNode.bind(this);
+        const getNodeElement = this._getNodeElement.bind(this);
+        const getNodeElementForNode = this._getNodeElementForNode.bind(this);
+        const getNodeById = this.getNodeById.bind(this);
+        const getScrollLeft = this._getScrollLeft.bind(this);
+        const getSelectedNode = this.getSelectedNode.bind(this);
+        const getTree = this.getTree.bind(this);
+        const isFocusOnTree = this.isFocusOnTree.bind(this);
+        const loadData = this.loadData.bind(this);
+        const openNode = this._openNode.bind(this);
+        const refreshElements = this._refreshElements.bind(this);
+        const refreshHitAreas = this.refreshHitAreas.bind(this);
+        const selectNode = this.selectNode.bind(this);
+        const $treeElement = this.element;
+        const triggerEvent = this._triggerEvent.bind(this);
+
+        const selectNodeHandler = new SelectNodeHandler({
+            getNodeById,
+        });
+
+        const addToSelection =
+            selectNodeHandler.addToSelection.bind(selectNodeHandler);
+        const getSelectedNodes =
+            selectNodeHandler.getSelectedNodes.bind(selectNodeHandler);
+        const isNodeSelected =
+            selectNodeHandler.isNodeSelected.bind(selectNodeHandler);
+        const removeFromSelection =
+            selectNodeHandler.removeFromSelection.bind(selectNodeHandler);
+
+        const dataLoader = new DataLoader({
+            dataFilter,
+            loadData,
+            onLoadFailed,
+            onLoading,
+            $treeElement,
+            triggerEvent,
+        });
+
+        const saveStateHandler = new SaveStateHandler({
+            addToSelection,
+            getNodeById,
+            getSelectedNodes,
+            getTree,
+            onGetStateFromStorage,
+            onSetStateFromStorage,
+            openNode,
+            refreshElements,
+            removeFromSelection,
+            saveState,
+        });
+
+        const dndHandler = new DragAndDropHandler({
+            autoEscape,
+            getNodeElement,
+            getNodeElementForNode,
+            getScrollLeft,
+            getTree,
+            onCanMove,
+            onDragMove,
+            onDragStop,
+            onIsMoveHandle,
+            openFolderDelay,
+            openNode,
+            refreshElements,
+            slide,
+            $treeElement,
+            triggerEvent,
+        });
+
+        const scrollHandler = new ScrollHandler({
+            refreshHitAreas,
+            $treeElement,
+        });
+
+        const keyHandler = new KeyHandler({
+            closeNode,
+            getSelectedNode,
+            isFocusOnTree,
+            keyboardSupport,
+            openNode,
+            selectNode,
+        });
+
+        const renderer = new ElementsRenderer({
+            autoEscape,
+            buttonLeft,
+            closedIcon,
+            dragAndDrop,
+            $element: $treeElement,
+            getTree,
+            isNodeSelected,
+            onCreateLi,
+            openedIcon,
+            rtl,
+            showEmptyFolder,
+            tabIndex,
+        });
+
+        this.dataLoader = dataLoader;
+        this.dndHandler = dndHandler;
+        this.keyHandler = keyHandler;
+        this.renderer = renderer;
+        this.saveStateHandler = saveStateHandler;
+        this.scrollHandler = scrollHandler;
+        this.selectNodeHandler = selectNodeHandler;
+    }
+
+    private createFolderElement(node: Node) {
+        const closedIconElement = this.renderer.closedIconElement;
+        const getScrollLeft = this._getScrollLeft.bind(this);
+        const openedIconElement = this.renderer.openedIconElement;
+        const tabIndex = this.options.tabIndex;
+        const $treeElement = this.element;
+        const triggerEvent = this._triggerEvent.bind(this);
+
+        return new FolderElement({
+            closedIconElement,
+            getScrollLeft,
+            node,
+            openedIconElement,
+            tabIndex,
+            $treeElement,
+            triggerEvent,
+        });
+    }
+
+    private createNodeElement(node: Node) {
+        const getScrollLeft = this._getScrollLeft.bind(this);
+        const tabIndex = this.options.tabIndex;
+        const $treeElement = this.element;
+
+        return new NodeElement({
+            getScrollLeft,
+            node,
+            tabIndex,
+            $treeElement,
+        });
+    }
+
+    private openParents(node: Node) {
+        const parent = node.parent;
+
+        if (parent && parent.parent && !parent.is_open) {
+            this.openNode(parent, false);
+        }
+    }
 }
 
 SimpleWidget.register(JqTreeWidget, "tree");

package/src/util.ts

@@ -5,3 +5,6 @@ export const isFunction = (v: unknown): boolean => typeof v === "function";
 
 export const getBoolString = (value: unknown): string =>
     value ? "true" : "false";
+
+export const getOffsetTop = (element: HTMLElement) =>
+    element.getBoundingClientRect().y + window.scrollY;

package/src/version.ts

@@ -1,3 +1,3 @@
-const version = "1.7.5";
+const version = "1.8.0";
 
 export default version;