jqtree 1.7.5 → 1.8.0

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,35 +94,33 @@ export default class KeyHandler {
         if (!node) {
             return true;
         } else {
-            this.treeWidget.selectNode(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:
@@ -97,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;
+}

package/src/nodeElement/borderDropHint.ts

@@ -0,0 +1,32 @@
+import { DropHint } from "../dragAndDropHandler/types";
+
+class BorderDropHint implements DropHint {
+    private hint?: HTMLElement;
+
+    constructor(element: HTMLElement, scrollLeft: number) {
+        const div = element.querySelector(":scope > .jqtree-element");
+
+        if (!div) {
+            this.hint = undefined;
+            return;
+        }
+
+        const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
+        const height = Math.max(element.clientHeight - 4, 0);
+
+        const hint = document.createElement("span");
+        hint.className = "jqtree-border";
+        hint.style.width = `${width}px`;
+        hint.style.height = `${height}px`;
+
+        this.hint = hint;
+
+        div.append(this.hint);
+    }
+
+    public remove(): void {
+        this.hint?.remove();
+    }
+}
+
+export default BorderDropHint;

package/src/nodeElement/folderElement.ts

@@ -0,0 +1,133 @@
+import { Position } from "../node";
+import NodeElement, { NodeElementParams } from "./index";
+import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
+
+interface FolderElementParams extends NodeElementParams {
+    closedIconElement?: HTMLElement | Text;
+    openedIconElement?: HTMLElement | Text;
+    triggerEvent: TriggerEvent;
+}
+
+class FolderElement extends NodeElement {
+    private closedIconElement?: HTMLElement | Text;
+    private openedIconElement?: HTMLElement | Text;
+    private triggerEvent: TriggerEvent;
+
+    constructor({
+        closedIconElement,
+        getScrollLeft,
+        node,
+        openedIconElement,
+        tabIndex,
+        $treeElement,
+        triggerEvent,
+    }: FolderElementParams) {
+        super({
+            getScrollLeft,
+            node,
+            tabIndex,
+            $treeElement,
+        });
+
+        this.closedIconElement = closedIconElement;
+        this.openedIconElement = openedIconElement;
+        this.triggerEvent = triggerEvent;
+    }
+
+    public open(
+        onFinished: OnFinishOpenNode | undefined,
+        slide = true,
+        animationSpeed: JQuery.Duration = "fast",
+    ): void {
+        if (this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = true;
+
+        const button = this.getButton();
+        button.classList.remove("jqtree-closed");
+        button.innerHTML = "";
+
+        const openedIconElement = this.openedIconElement;
+
+        if (openedIconElement) {
+            const icon = openedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doOpen = (): void => {
+            this.element.classList.remove("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "true");
+
+            if (onFinished) {
+                onFinished(this.node);
+            }
+
+            this.triggerEvent("tree.open", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
+        } else {
+            jQuery(this.getUl()).show();
+            doOpen();
+        }
+    }
+
+    public close(
+        slide = true,
+        animationSpeed: JQuery.Duration | undefined = "fast",
+    ): void {
+        if (!this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = false;
+
+        const button = this.getButton();
+        button.classList.add("jqtree-closed");
+        button.innerHTML = "";
+
+        const closedIconElement = this.closedIconElement;
+
+        if (closedIconElement) {
+            const icon = closedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doClose = (): void => {
+            this.element.classList.add("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "false");
+
+            this.triggerEvent("tree.close", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
+        } else {
+            jQuery(this.getUl()).hide();
+            doClose();
+        }
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return !this.node.is_open && position === Position.Inside;
+    }
+
+    private getButton(): HTMLLinkElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > a.jqtree-toggler",
+        ) as HTMLLinkElement;
+    }
+}
+
+export default FolderElement;