jqtree 1.7.4 → 1.8.0

package/src/dragAndDropHandler/visibleNodeIterator.ts

@@ -0,0 +1,97 @@
+import { Node } from "../node";
+
+abstract class VisibleNodeIterator {
+    private tree: Node;
+
+    constructor(tree: Node) {
+        this.tree = tree;
+    }
+
+    protected iterate(): void {
+        let isFirstNode = true;
+
+        const _iterateNode = (node: Node, nextNode: Node | null): void => {
+            let mustIterateInside =
+                (node.is_open || !node.element) && node.hasChildren();
+
+            let element: HTMLElement | null = null;
+
+            // Is the element visible?
+            if (node.element?.offsetParent) {
+                element = node.element;
+
+                if (isFirstNode) {
+                    this.handleFirstNode(node);
+                    isFirstNode = false;
+                }
+
+                if (!node.hasChildren()) {
+                    this.handleNode(node, nextNode, node.element);
+                } else if (node.is_open) {
+                    if (!this.handleOpenFolder(node, node.element)) {
+                        mustIterateInside = false;
+                    }
+                } else {
+                    this.handleClosedFolder(node, nextNode, element);
+                }
+            }
+
+            if (mustIterateInside) {
+                const childrenLength = node.children.length;
+                node.children.forEach((_, i) => {
+                    const child = node.children[i];
+
+                    if (child) {
+                        if (i === childrenLength - 1) {
+                            _iterateNode(child, null);
+                        } else {
+                            const nextChild = node.children[i + 1];
+
+                            if (nextChild) {
+                                _iterateNode(child, nextChild);
+                            }
+                        }
+                    }
+                });
+
+                if (node.is_open && element) {
+                    this.handleAfterOpenFolder(node, nextNode);
+                }
+            }
+        };
+
+        _iterateNode(this.tree, null);
+    }
+
+    protected abstract handleNode(
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ): void;
+
+    /*
+    override
+    return
+        - true: continue iterating
+        - false: stop iterating
+    */
+    protected abstract handleOpenFolder(
+        node: Node,
+        element: HTMLElement,
+    ): boolean;
+
+    protected abstract handleClosedFolder(
+        node: Node,
+        nextNode: Node | null,
+        element: HTMLElement,
+    ): void;
+
+    protected abstract handleAfterOpenFolder(
+        node: Node,
+        nextNode: Node | null,
+    ): void;
+
+    protected abstract handleFirstNode(node: Node): void;
+}
+
+export default VisibleNodeIterator;

package/src/elementsRenderer.ts

@@ -1,23 +1,63 @@
 import { getBoolString } from "./util";
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
-
-type IconElement = string | HTMLElement | JQuery<HTMLElement>;
+import { IconElement, OnCreateLi } from "./jqtreeOptions";
+import { GetTree, IsNodeSelected } from "./jqtreeMethodTypes";
+
+interface ElementsRendererParams {
+    autoEscape: boolean;
+    buttonLeft: boolean;
+    closedIcon?: IconElement;
+    dragAndDrop: boolean;
+    $element: JQuery<HTMLElement>;
+    getTree: GetTree;
+    isNodeSelected: IsNodeSelected;
+    onCreateLi?: OnCreateLi;
+    openedIcon?: IconElement;
+    rtl?: boolean;
+    showEmptyFolder: boolean;
+    tabIndex?: number;
+}
 
 export default class ElementsRenderer {
     public openedIconElement?: HTMLElement | Text;
     public closedIconElement?: HTMLElement | Text;
-    private treeWidget: JqTreeWidget;
-
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
-
-        this.openedIconElement = this.createButtonElement(
-            treeWidget.options.openedIcon || "+",
-        );
-        this.closedIconElement = this.createButtonElement(
-            treeWidget.options.closedIcon || "-",
-        );
+    private autoEscape: boolean;
+    private buttonLeft: boolean;
+    private dragAndDrop: boolean;
+    private $element: JQuery<HTMLElement>;
+    private getTree: GetTree;
+    private isNodeSelected: IsNodeSelected;
+    private onCreateLi?: OnCreateLi;
+    private rtl?: boolean;
+    private showEmptyFolder: boolean;
+    private tabIndex?: number;
+
+    constructor({
+        autoEscape,
+        buttonLeft,
+        closedIcon,
+        onCreateLi,
+        dragAndDrop,
+        $element,
+        getTree,
+        isNodeSelected,
+        openedIcon,
+        rtl,
+        showEmptyFolder,
+        tabIndex,
+    }: ElementsRendererParams) {
+        this.autoEscape = autoEscape;
+        this.buttonLeft = buttonLeft;
+        this.dragAndDrop = dragAndDrop;
+        this.$element = $element;
+        this.getTree = getTree;
+        this.isNodeSelected = isNodeSelected;
+        this.onCreateLi = onCreateLi;
+        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 {
@@ -29,16 +69,12 @@ export default class ElementsRenderer {
     }
 
     public renderFromRoot(): void {
-        const $element = this.treeWidget.element;
-        $element.empty();
+        this.$element.empty();
 
-        if ($element[0]) {
-            this.createDomElements(
-                $element[0],
-                this.treeWidget.tree.children,
-                true,
-                1,
-            );
+        const tree = this.getTree();
+
+        if (this.$element[0] && tree) {
+            this.createDomElements(this.$element[0], tree.children, true, 1);
         }
     }
 
@@ -104,12 +140,12 @@ export default class ElementsRenderer {
             classString = "jqtree-tree";
             role = "tree";
 
-            if (this.treeWidget.options.rtl) {
+            if (this.rtl) {
                 classString += " jqtree-rtl";
             }
         }
 
-        if (this.treeWidget.options.dragAndDrop) {
+        if (this.dragAndDrop) {
             classString += " jqtree-dnd";
         }
 
@@ -122,20 +158,17 @@ export default class ElementsRenderer {
     }
 
     private createLi(node: Node, level: number): HTMLLIElement {
-        const isSelected = Boolean(
-            this.treeWidget.selectNodeHandler.isNodeSelected(node),
-        );
+        const isSelected = Boolean(this.isNodeSelected(node));
 
         const mustShowFolder =
-            node.isFolder() ||
-            (node.isEmptyFolder && this.treeWidget.options.showEmptyFolder);
+            node.isFolder() || (node.isEmptyFolder && this.showEmptyFolder);
 
         const li = mustShowFolder
             ? this.createFolderLi(node, level, isSelected)
             : this.createNodeLi(node, level, isSelected);
 
-        if (this.treeWidget.options.onCreateLi) {
-            this.treeWidget.options.onCreateLi(node, jQuery(li), isSelected);
+        if (this.onCreateLi) {
+            this.onCreateLi(node, jQuery(li), isSelected);
         }
 
         return li;
@@ -185,7 +218,7 @@ export default class ElementsRenderer {
             buttonLink.appendChild(iconElement.cloneNode(true));
         }
 
-        if (this.treeWidget.options.buttonLeft) {
+        if (this.buttonLeft) {
             div.appendChild(buttonLink);
         }
 
@@ -199,7 +232,7 @@ export default class ElementsRenderer {
         titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
         div.appendChild(titleSpan);
 
-        if (!this.treeWidget.options.buttonLeft) {
+        if (!this.buttonLeft) {
             div.appendChild(buttonLink);
         }
 
@@ -257,14 +290,12 @@ export default class ElementsRenderer {
             classes += " jqtree-title-folder";
         }
 
-        classes += ` jqtree-title-button-${
-            this.treeWidget.options.buttonLeft ? "left" : "right"
-        }`;
+        classes += ` jqtree-title-button-${this.buttonLeft ? "left" : "right"}`;
 
         titleSpan.className = classes;
 
         if (isSelected) {
-            const tabIndex = this.treeWidget.options.tabIndex;
+            const tabIndex = this.tabIndex;
 
             if (tabIndex !== undefined) {
                 titleSpan.setAttribute("tabindex", `${tabIndex}`);
@@ -273,7 +304,7 @@ export default class ElementsRenderer {
 
         this.setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
 
-        if (this.treeWidget.options.autoEscape) {
+        if (this.autoEscape) {
             titleSpan.textContent = nodeName;
         } else {
             titleSpan.innerHTML = nodeName;
@@ -289,7 +320,7 @@ export default class ElementsRenderer {
             classes.push("jqtree-closed");
         }
 
-        if (this.treeWidget.options.buttonLeft) {
+        if (this.buttonLeft) {
             classes.push("jqtree-toggler-left");
         } else {
             classes.push("jqtree-toggler-right");
@@ -325,6 +356,10 @@ export default class ElementsRenderer {
             div.innerHTML = value;
 
             return document.createTextNode(div.innerHTML);
+        } else if (value == null) {
+            return undefined;
+        } else if ((value as HTMLElement).nodeType) {
+            return value as HTMLElement;
         } else {
             return jQuery(value)[0];
         }

package/src/jqtreeMethodTypes.ts

@@ -0,0 +1,40 @@
+import { Node } from "./node";
+
+export type AddToSelection = (node: Node) => void;
+
+export type CloseNode = (node: Node) => void;
+
+export type GetNodeById = (nodeId: NodeId) => Node | null;
+
+export type GetScrollLeft = () => number;
+
+export type GetSelectedNode = () => Node | false;
+
+export type GetSelectedNodes = () => Node[];
+
+export type GetTree = () => Node | null;
+
+export type IsFocusOnTree = () => boolean;
+
+export type IsNodeSelected = (node: Node) => boolean;
+
+export type LoadData = (data: NodeData[], parentNode: Node | null) => void;
+
+export type OnFinishOpenNode = (node: Node) => void;
+
+export type OpenNode = (
+    node: Node,
+    slide?: boolean,
+    onFinished?: OnFinishOpenNode,
+) => void;
+
+export type RefreshElements = (fromNode: Node | null) => void;
+
+export type RemoveFromSelection = (node: Node) => void;
+
+export type SelectNode = (node: Node) => void;
+
+export type TriggerEvent = (
+    eventName: string,
+    values?: Record<string, unknown>,
+) => JQuery.Event;

package/src/jqtreeOptions.ts

@@ -1,16 +1,34 @@
 import { Node } from "./node";
 
-type CanMoveNodeTo = (
+export type OnCanMove = ((node: Node) => boolean) | undefined;
+
+type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;
+
+export type DataUrl = string | JQuery.AjaxSettings | DataUrlFunction;
+
+export type DragMethod = (node: Node, event: Event | Touch) => void;
+
+export type OnCanMoveTo = (
     node: Node,
     targetNode: Node,
     positionName: string,
 ) => boolean;
-type CreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
-type DataFilter = (data: unknown) => NodeData[];
-type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;
-type DataUrl = string | JQuery.AjaxSettings | DataUrlFunction;
-type DragMethod = (node: Node, event: Event | Touch) => void;
-type HandleLoadingMethod = (
+
+export type OnGetStateFromStorage = (() => string) | undefined;
+
+export type OnIsMoveHandle = (el: JQuery) => boolean;
+
+export type OnLoadFailed = (response: JQuery.jqXHR) => void;
+
+export type OnSetStateFromStorage = ((data: string) => void) | undefined;
+
+export type DataFilter = (data: unknown) => NodeData[];
+
+export type IconElement = string | HTMLElement | JQuery<HTMLElement>;
+
+export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
+
+export type OnLoading = (
     isLoading: boolean,
     node: Node | null,
     $el: JQuery,
@@ -21,32 +39,32 @@ export interface JQTreeOptions {
     autoEscape: boolean;
     autoOpen: boolean | number;
     buttonLeft: boolean;
-    closedIcon?: string | HTMLElement | JQuery<HTMLElement>;
-    data: NodeData[] | undefined;
-    dataFilter: DataFilter | undefined;
-    dataUrl: DataUrl | undefined;
+    closedIcon?: IconElement;
+    data?: NodeData[];
+    dataFilter?: DataFilter;
+    dataUrl?: DataUrl;
     dragAndDrop: boolean;
     keyboardSupport: boolean;
     nodeClass: typeof Node;
-    onCanMove: ((node: Node) => boolean) | undefined;
-    onCanMoveTo: CanMoveNodeTo | undefined;
-    onCanSelectNode: ((node: Node) => boolean) | undefined;
-    onCreateLi: CreateLi | undefined;
-    onDragMove: DragMethod | undefined;
-    onDragStop: DragMethod | undefined;
-    onGetStateFromStorage: (() => string) | undefined;
-    onIsMoveHandle: ((el: JQuery) => boolean) | undefined;
-    onLoadFailed: ((response: JQuery.jqXHR) => void) | undefined;
-    onLoading: HandleLoadingMethod | undefined;
-    onSetStateFromStorage: ((data: string) => void) | undefined;
-    openedIcon?: string | HTMLElement | JQuery<HTMLElement>;
+    onCanMove?: OnCanMove;
+    onCanMoveTo?: OnCanMoveTo;
+    onCanSelectNode?: (node: Node) => boolean;
+    onCreateLi?: OnCreateLi;
+    onDragMove?: DragMethod;
+    onDragStop?: DragMethod;
+    onGetStateFromStorage?: OnGetStateFromStorage;
+    onIsMoveHandle?: OnIsMoveHandle;
+    onLoadFailed?: OnLoadFailed;
+    onLoading?: OnLoading;
+    onSetStateFromStorage?: OnSetStateFromStorage;
+    openedIcon?: IconElement;
     openFolderDelay: number | false;
-    rtl: boolean | undefined;
+    rtl?: boolean;
     selectable: boolean;
     saveState: boolean | string;
     showEmptyFolder: boolean;
     slide: boolean;
     startDndDelay: number;
-    tabIndex: number;
+    tabIndex?: number;
     useContextMenu: boolean;
 }

package/src/keyHandler.ts

@@ -1,24 +1,58 @@
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
+import {
+    CloseNode,
+    GetSelectedNode,
+    IsFocusOnTree,
+    OpenNode,
+    SelectNode,
+} from "./jqtreeMethodTypes";
+
+type KeyboardEventHandler = (event: KeyboardEvent) => boolean;
+
+interface KeyHandlerParams {
+    closeNode: CloseNode;
+    getSelectedNode: GetSelectedNode;
+    isFocusOnTree: IsFocusOnTree;
+    keyboardSupport: boolean;
+    openNode: OpenNode;
+    selectNode: SelectNode;
+}
 
 export default class KeyHandler {
-    private static LEFT = 37;
-    private static UP = 38;
-    private static RIGHT = 39;
-    private static DOWN = 40;
-
-    private treeWidget: JqTreeWidget;
-
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
-
-        if (treeWidget.options.keyboardSupport) {
-            jQuery(document).on("keydown.jqtree", this.handleKeyDown);
+    private closeNode: CloseNode;
+    private getSelectedNode: GetSelectedNode;
+    private handleKeyDownHandler?: KeyboardEventHandler;
+    private isFocusOnTree: IsFocusOnTree;
+    private keyboardSupport: boolean;
+    private openNode: OpenNode;
+    private originalSelectNode: SelectNode;
+
+    constructor({
+        closeNode,
+        getSelectedNode,
+        isFocusOnTree,
+        keyboardSupport,
+        openNode,
+        selectNode,
+    }: KeyHandlerParams) {
+        this.closeNode = closeNode;
+        this.getSelectedNode = getSelectedNode;
+        this.isFocusOnTree = isFocusOnTree;
+        this.keyboardSupport = keyboardSupport;
+        this.openNode = openNode;
+        this.originalSelectNode = selectNode;
+
+        if (keyboardSupport) {
+            this.handleKeyDownHandler = this.handleKeyDown.bind(this);
+
+            document.addEventListener("keydown", this.handleKeyDownHandler);
         }
     }
 
     public deinit(): void {
-        jQuery(document).off("keydown.jqtree");
+        if (this.handleKeyDownHandler) {
+            document.removeEventListener("keydown", this.handleKeyDownHandler);
+        }
     }
 
     public moveDown(selectedNode: Node): boolean {
@@ -39,7 +73,7 @@ export default class KeyHandler {
                 return this.selectNode(selectedNode.getNextVisibleNode());
             } else {
                 // Right expands a closed node
-                this.treeWidget.openNode(selectedNode);
+                this.openNode(selectedNode);
                 return false;
             }
         }
@@ -48,7 +82,7 @@ export default class KeyHandler {
     public moveLeft(selectedNode: Node): boolean {
         if (selectedNode.isFolder() && selectedNode.is_open) {
             // Left on an open node closes the node
-            this.treeWidget.closeNode(selectedNode);
+            this.closeNode(selectedNode);
             return false;
         } else {
             // Left on a closed or end node moves focus to the node's parent
@@ -60,43 +94,33 @@ export default class KeyHandler {
         if (!node) {
             return true;
         } else {
-            this.treeWidget.selectNode(node);
-
-            if (
-                !this.treeWidget.scrollHandler.isScrolledIntoView(
-                    jQuery(node.element).find(".jqtree-element")
-                )
-            ) {
-                this.treeWidget.scrollToNode(node);
-            }
+            this.originalSelectNode(node);
 
             return false;
         }
     }
 
-    private handleKeyDown = (e: JQuery.Event): boolean => {
+    private handleKeyDown = (e: KeyboardEvent): boolean => {
         if (!this.canHandleKeyboard()) {
             return true;
         }
 
-        const selectedNode = this.treeWidget.getSelectedNode();
+        const selectedNode = this.getSelectedNode();
         if (!selectedNode) {
             return true;
         }
 
-        const key = e.which;
-
-        switch (key) {
-            case KeyHandler.DOWN:
+        switch (e.key) {
+            case "ArrowDown":
                 return this.moveDown(selectedNode);
 
-            case KeyHandler.UP:
+            case "ArrowUp":
                 return this.moveUp(selectedNode);
 
-            case KeyHandler.RIGHT:
+            case "ArrowRight":
                 return this.moveRight(selectedNode);
 
-            case KeyHandler.LEFT:
+            case "ArrowLeft":
                 return this.moveLeft(selectedNode);
 
             default:
@@ -105,9 +129,6 @@ export default class KeyHandler {
     };
 
     private canHandleKeyboard(): boolean {
-        return (
-            (this.treeWidget.options.keyboardSupport || false) &&
-            this.treeWidget.selectNodeHandler.isFocusOnTree()
-        );
+        return this.keyboardSupport && this.isFocusOnTree();
     }
 }

package/src/mouse.widget.ts

@@ -2,7 +2,7 @@
 This widget does the same a the mouse widget in jqueryui.
 */
 import SimpleWidget from "./simple.widget";
-import { PositionInfo } from "./types";
+import { PositionInfo } from "./mouseWidgetTypes";
 
 const getPositionInfoFromMouseEvent = (e: MouseEvent): PositionInfo => ({
     pageX: e.pageX,
@@ -13,7 +13,7 @@ const getPositionInfoFromMouseEvent = (e: MouseEvent): PositionInfo => ({
 
 const getPositionInfoFromTouch = (
     touch: Touch,
-    e: TouchEvent
+    e: TouchEvent,
 ): PositionInfo => ({
     pageX: touch.pageX,
     pageY: touch.pageY,
@@ -144,7 +144,7 @@ abstract class MouseWidget<WidgetOptions> extends SimpleWidget<WidgetOptions> {
 
     private handleMouseMove(
         e: MouseEvent | TouchEvent,
-        positionInfo: PositionInfo
+        positionInfo: PositionInfo,
     ): void {
         if (this.isMouseStarted) {
             this.mouseDrag(positionInfo);

package/src/mouseWidgetTypes.ts

@@ -0,0 +1,6 @@
+export interface PositionInfo {
+    pageX: number | undefined;
+    pageY: number | undefined;
+    target: HTMLElement;
+    originalEvent: Event;
+}