jqtree 1.8.5 → 1.8.7

package/src/elementsRenderer.ts

@@ -1,14 +1,14 @@
-import { getBoolString } from "./util";
-import { Node } from "./node";
-import { IconElement, OnCreateLi } from "./jqtreeOptions";
 import { GetTree, IsNodeSelected } from "./jqtreeMethodTypes";
+import { IconElement, OnCreateLi } from "./jqtreeOptions";
+import { Node } from "./node";
+import { getBoolString } from "./util";
 
 interface ElementsRendererParams {
+    $element: JQuery;
     autoEscape: boolean;
     buttonLeft: boolean;
     closedIcon?: IconElement;
     dragAndDrop: boolean;
-    $element: JQuery<HTMLElement>;
     getTree: GetTree;
     isNodeSelected: IsNodeSelected;
     onCreateLi?: OnCreateLi;
@@ -19,12 +19,10 @@ interface ElementsRendererParams {
 }
 
 export default class ElementsRenderer {
-    public openedIconElement?: HTMLElement | Text;
-    public closedIconElement?: HTMLElement | Text;
+    private $element: JQuery;
     private autoEscape: boolean;
     private buttonLeft: boolean;
     private dragAndDrop: boolean;
-    private $element: JQuery<HTMLElement>;
     private getTree: GetTree;
     private isNodeSelected: IsNodeSelected;
     private onCreateLi?: OnCreateLi;
@@ -32,15 +30,18 @@ export default class ElementsRenderer {
     private showEmptyFolder: boolean;
     private tabIndex?: number;
 
+    public closedIconElement?: HTMLElement | Text;
+    public openedIconElement?: HTMLElement | Text;
+
     constructor({
+        $element,
         autoEscape,
         buttonLeft,
         closedIcon,
-        onCreateLi,
         dragAndDrop,
-        $element,
         getTree,
         isNodeSelected,
+        onCreateLi,
         openedIcon,
         rtl,
         showEmptyFolder,
@@ -56,50 +57,28 @@ export default class ElementsRenderer {
         this.rtl = rtl;
         this.showEmptyFolder = showEmptyFolder;
         this.tabIndex = tabIndex;
-        this.openedIconElement = this.createButtonElement(openedIcon || "+");
-        this.closedIconElement = this.createButtonElement(closedIcon || "-");
-    }
-
-    public render(fromNode: Node | null): void {
-        if (fromNode && fromNode.parent) {
-            this.renderFromNode(fromNode);
-        } else {
-            this.renderFromRoot();
-        }
+        this.openedIconElement = this.createButtonElement(openedIcon ?? "+");
+        this.closedIconElement = this.createButtonElement(closedIcon ?? "-");
     }
 
-    public renderFromRoot(): void {
-        this.$element.empty();
-
-        const tree = this.getTree();
-
-        if (this.$element[0] && tree) {
-            this.createDomElements(this.$element[0], tree.children, true, 1);
-        }
+    private attachNodeData(node: Node, li: HTMLElement): void {
+        node.element = li;
+        jQuery(li).data("node", node);
     }
 
-    public renderFromNode(node: Node): void {
-        // remember current li
-        const $previousLi = jQuery(node.element);
-
-        // create element
-        const li = this.createLi(node, node.getLevel());
-        this.attachNodeData(node, li);
-
-        // add element to dom
-        $previousLi.after(li);
-
-        // remove previous li
-        $previousLi.remove();
+    private createButtonElement(
+        value: IconElement,
+    ): HTMLElement | Text | undefined {
+        if (typeof value === "string") {
+            // convert value to html
+            const div = document.createElement("div");
+            div.innerHTML = value;
 
-        // create children
-        if (node.children) {
-            this.createDomElements(
-                li,
-                node.children,
-                false,
-                node.getLevel() + 1,
-            );
+            return document.createTextNode(div.innerHTML);
+        } else if ((value as HTMLElement).nodeType) {
+            return value as HTMLElement;
+        } else {
+            return jQuery(value)[0];
         }
     }
 
@@ -116,76 +95,12 @@ export default class ElementsRenderer {
             const li = this.createLi(child, level);
             ul.appendChild(li);
 
-            this.attachNodeData(child, li);
-
             if (child.hasChildren()) {
                 this.createDomElements(li, child.children, false, level + 1);
             }
         }
     }
 
-    private attachNodeData(node: Node, li: HTMLElement): void {
-        node.element = li;
-        jQuery(li).data("node", node);
-    }
-
-    private createUl(isRootNode: boolean): HTMLUListElement {
-        let classString;
-        let role;
-
-        if (!isRootNode) {
-            classString = "";
-            role = "group";
-        } else {
-            classString = "jqtree-tree";
-            role = "tree";
-
-            if (this.rtl) {
-                classString += " jqtree-rtl";
-            }
-        }
-
-        if (this.dragAndDrop) {
-            classString += " jqtree-dnd";
-        }
-
-        const ul = document.createElement("ul");
-        ul.className = `jqtree_common ${classString}`;
-
-        ul.setAttribute("role", role);
-
-        return ul;
-    }
-
-    private createLi(node: Node, level: number): HTMLLIElement {
-        const isSelected = Boolean(this.isNodeSelected(node));
-
-        const mustShowFolder =
-            node.isFolder() || (node.isEmptyFolder && this.showEmptyFolder);
-
-        const li = mustShowFolder
-            ? this.createFolderLi(node, level, isSelected)
-            : this.createNodeLi(node, level, isSelected);
-
-        if (this.onCreateLi) {
-            this.onCreateLi(node, jQuery(li), isSelected);
-        }
-
-        return li;
-    }
-
-    private setTreeItemAriaAttributes(
-        element: HTMLElement,
-        name: string,
-        level: number,
-        isSelected: boolean,
-    ) {
-        element.setAttribute("aria-label", name);
-        element.setAttribute("aria-level", `${level}`);
-        element.setAttribute("aria-selected", getBoolString(isSelected));
-        element.setAttribute("role", "treeitem");
-    }
-
     private createFolderLi(
         node: Node,
         level: number,
@@ -239,6 +154,29 @@ export default class ElementsRenderer {
         return li;
     }
 
+    /* Create the <li> element
+     * Attach it to node.element.
+     * Call onCreateLi
+     */
+    private createLi(node: Node, level: number): HTMLLIElement {
+        const isSelected = Boolean(this.isNodeSelected(node));
+
+        const mustShowFolder =
+            node.isFolder() || (node.isEmptyFolder && this.showEmptyFolder);
+
+        const li = mustShowFolder
+            ? this.createFolderLi(node, level, isSelected)
+            : this.createNodeLi(node, level, isSelected);
+
+        this.attachNodeData(node, li);
+
+        if (this.onCreateLi) {
+            this.onCreateLi(node, jQuery(li), isSelected);
+        }
+
+        return li;
+    }
+
     private createNodeLi(
         node: Node,
         level: number,
@@ -313,6 +251,34 @@ export default class ElementsRenderer {
         return titleSpan;
     }
 
+    private createUl(isRootNode: boolean): HTMLUListElement {
+        let classString;
+        let role;
+
+        if (!isRootNode) {
+            classString = "";
+            role = "group";
+        } else {
+            classString = "jqtree-tree";
+            role = "tree";
+
+            if (this.rtl) {
+                classString += " jqtree-rtl";
+            }
+        }
+
+        if (this.dragAndDrop) {
+            classString += " jqtree-dnd";
+        }
+
+        const ul = document.createElement("ul");
+        ul.className = `jqtree_common ${classString}`;
+
+        ul.setAttribute("role", role);
+
+        return ul;
+    }
+
     private getButtonClasses(node: Node): string {
         const classes = ["jqtree-toggler", "jqtree_common"];
 
@@ -347,21 +313,54 @@ export default class ElementsRenderer {
         return classes.join(" ");
     }
 
-    private createButtonElement(
-        value: IconElement,
-    ): HTMLElement | Text | undefined {
-        if (typeof value === "string") {
-            // convert value to html
-            const div = document.createElement("div");
-            div.innerHTML = value;
+    private setTreeItemAriaAttributes(
+        element: HTMLElement,
+        name: string,
+        level: number,
+        isSelected: boolean,
+    ) {
+        element.setAttribute("aria-label", name);
+        element.setAttribute("aria-level", `${level}`);
+        element.setAttribute("aria-selected", getBoolString(isSelected));
+        element.setAttribute("role", "treeitem");
+    }
 
-            return document.createTextNode(div.innerHTML);
-        } else if (value == null) {
-            return undefined;
-        } else if ((value as HTMLElement).nodeType) {
-            return value as HTMLElement;
+    public render(fromNode: Node | null): void {
+        if (fromNode?.parent) {
+            this.renderFromNode(fromNode);
         } else {
-            return jQuery(value)[0];
+            this.renderFromRoot();
+        }
+    }
+
+    public renderFromNode(node: Node): void {
+        if (!node.element) {
+            return;
+        }
+
+        // remember current li
+        const $previousLi = jQuery(node.element);
+
+        // create element
+        const li = this.createLi(node, node.getLevel());
+
+        // add element to dom
+        $previousLi.after(li);
+
+        // remove previous li
+        $previousLi.remove();
+
+        // create children
+        this.createDomElements(li, node.children, false, node.getLevel() + 1);
+    }
+
+    public renderFromRoot(): void {
+        this.$element.empty();
+
+        const tree = this.getTree();
+
+        if (this.$element[0] && tree) {
+            this.createDomElements(this.$element[0], tree.children, true, 1);
         }
     }
 }

package/src/jqtreeMethodTypes.ts

@@ -8,7 +8,7 @@ export type GetNodeById = (nodeId: NodeId) => Node | null;
 
 export type GetScrollLeft = () => number;
 
-export type GetSelectedNode = () => Node | false;
+export type GetSelectedNode = () => false | Node;
 
 export type GetSelectedNodes = () => Node[];
 

package/src/jqtreeOptions.ts

@@ -4,7 +4,7 @@ export type OnCanMove = ((node: Node) => boolean) | undefined;
 
 type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;
 
-export type DataUrl = string | JQuery.AjaxSettings | DataUrlFunction;
+export type DataUrl = DataUrlFunction | JQuery.AjaxSettings | string;
 
 export type DragMethod = (node: Node, event: Event | Touch) => void;
 
@@ -24,7 +24,7 @@ export type OnSetStateFromStorage = ((data: string) => void) | undefined;
 
 export type DataFilter = (data: unknown) => NodeData[];
 
-export type IconElement = string | HTMLElement | JQuery<HTMLElement>;
+export type IconElement = HTMLElement | JQuery | string;
 
 export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
 
@@ -58,13 +58,13 @@ export interface JQTreeOptions {
     onLoading?: OnLoading;
     onSetStateFromStorage?: OnSetStateFromStorage;
     openedIcon?: IconElement;
-    openFolderDelay: number | false;
+    openFolderDelay: false | number;
     rtl?: boolean;
-    selectable: boolean;
     saveState: boolean | string;
+    selectable: boolean;
     showEmptyFolder: boolean;
     slide: boolean;
-    startDndDelay: number;
+    startDndDelay?: number;
     tabIndex?: number;
     useContextMenu: boolean;
 }

package/src/keyHandler.ts

@@ -1,4 +1,3 @@
-import { Node } from "./node";
 import {
     CloseNode,
     GetSelectedNode,
@@ -6,6 +5,7 @@ import {
     OpenNode,
     SelectNode,
 } from "./jqtreeMethodTypes";
+import { Node } from "./node";
 
 type KeyboardEventHandler = (event: KeyboardEvent) => boolean;
 
@@ -21,6 +21,40 @@ interface KeyHandlerParams {
 export default class KeyHandler {
     private closeNode: CloseNode;
     private getSelectedNode: GetSelectedNode;
+
+    private handleKeyDown = (e: KeyboardEvent): void => {
+        if (!this.canHandleKeyboard()) {
+            return;
+        }
+
+        let isKeyHandled = false;
+
+        const selectedNode = this.getSelectedNode();
+        if (selectedNode) {
+            switch (e.key) {
+                case "ArrowDown":
+                    isKeyHandled = this.moveDown(selectedNode);
+                    break;
+
+                case "ArrowUp":
+                    isKeyHandled = this.moveUp(selectedNode);
+                    break;
+
+                case "ArrowRight":
+                    isKeyHandled = this.moveRight(selectedNode);
+                    break;
+
+                case "ArrowLeft":
+                    isKeyHandled = this.moveLeft(selectedNode);
+                    break;
+            }
+        }
+
+        if (isKeyHandled) {
+            e.preventDefault();
+        }
+    };
+
     private handleKeyDownHandler?: KeyboardEventHandler;
     private isFocusOnTree: IsFocusOnTree;
     private keyboardSupport: boolean;
@@ -43,29 +77,28 @@ export default class KeyHandler {
         this.originalSelectNode = selectNode;
 
         if (keyboardSupport) {
-            this.handleKeyDownHandler = this.handleKeyDown.bind(this);
-
-            document.addEventListener("keydown", this.handleKeyDownHandler);
-        }
-    }
-
-    public deinit(): void {
-        if (this.handleKeyDownHandler) {
-            document.removeEventListener("keydown", this.handleKeyDownHandler);
+            document.addEventListener("keydown", this.handleKeyDown);
         }
     }
 
-    public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
+    private canHandleKeyboard(): boolean {
+        return this.keyboardSupport && this.isFocusOnTree();
     }
 
-    public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
+    private moveLeft(selectedNode: Node): boolean {
+        if (selectedNode.isFolder() && selectedNode.is_open) {
+            // Left on an open node closes the node
+            this.closeNode(selectedNode);
+            return true;
+        } else {
+            // Left on a closed or end node moves focus to the node's parent
+            return this.selectNode(selectedNode.getParent());
+        }
     }
 
-    public moveRight(selectedNode: Node): boolean {
+    private moveRight(selectedNode: Node): boolean {
         if (!selectedNode.isFolder()) {
-            return true;
+            return false;
         } else {
             // folder node
             if (selectedNode.is_open) {
@@ -74,61 +107,36 @@ export default class KeyHandler {
             } else {
                 // Right expands a closed node
                 this.openNode(selectedNode);
-                return false;
+                return true;
             }
         }
     }
 
-    public moveLeft(selectedNode: Node): boolean {
-        if (selectedNode.isFolder() && selectedNode.is_open) {
-            // Left on an open node closes the node
-            this.closeNode(selectedNode);
-            return false;
-        } else {
-            // Left on a closed or end node moves focus to the node's parent
-            return this.selectNode(selectedNode.getParent());
-        }
-    }
-
-    public selectNode(node: Node | null): boolean {
+    /* Select the node.
+     * Don't do anything if the node is null.
+     * Result: a different node was selected.
+     */
+    private selectNode(node: Node | null): boolean {
         if (!node) {
-            return true;
+            return false;
         } else {
             this.originalSelectNode(node);
 
-            return false;
-        }
-    }
-
-    private handleKeyDown = (e: KeyboardEvent): boolean => {
-        if (!this.canHandleKeyboard()) {
             return true;
         }
+    }
 
-        const selectedNode = this.getSelectedNode();
-        if (!selectedNode) {
-            return true;
+    public deinit(): void {
+        if (this.handleKeyDownHandler) {
+            document.removeEventListener("keydown", this.handleKeyDownHandler);
         }
+    }
 
-        switch (e.key) {
-            case "ArrowDown":
-                return this.moveDown(selectedNode);
-
-            case "ArrowUp":
-                return this.moveUp(selectedNode);
-
-            case "ArrowRight":
-                return this.moveRight(selectedNode);
-
-            case "ArrowLeft":
-                return this.moveLeft(selectedNode);
-
-            default:
-                return true;
-        }
-    };
+    public moveDown(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getNextVisibleNode());
+    }
 
-    private canHandleKeyboard(): boolean {
-        return this.keyboardSupport && this.isFocusOnTree();
+    public moveUp(selectedNode: Node): boolean {
+        return this.selectNode(selectedNode.getPreviousVisibleNode());
     }
 }