jqtree 1.7.4 → 1.8.0

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 {
@@ -101,7 +103,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public selectNode(
         node: Node | null,
-        optionsParam?: SelectNodeOptions
+        optionsParam?: SelectNodeOptions,
     ): JQuery {
         this.doSelectNode(node, optionsParam);
         return this.element;
@@ -137,21 +139,21 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     public loadDataFromUrl(
         param1: string | null | Node,
         param2?: Node | null | HandleFinishedLoading,
-        param3?: HandleFinishedLoading
+        param3?: HandleFinishedLoading,
     ): JQuery {
         if (typeof param1 === "string") {
             // first parameter is url
             this.doLoadDataFromUrl(
                 param1,
                 param2 as Node | null,
-                param3 ?? null
+                param3 ?? null,
             );
         } else {
             // first parameter is not url
             this.doLoadDataFromUrl(
                 null,
                 param1,
-                param2 as HandleFinishedLoading | null
+                param2 as HandleFinishedLoading | null,
             );
         }
 
@@ -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 {
@@ -197,18 +208,18 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     public openNode(
         node: Node,
         param1?: boolean | OnFinishOpenNode,
-        param2?: OnFinishOpenNode
+        param2?: OnFinishOpenNode,
     ): JQuery {
         if (!node) {
             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,9 +247,9 @@ 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
+                this.options.animationSpeed,
             );
 
             this.saveState();
@@ -258,7 +269,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public addNodeAfter(
         newNodeInfo: NodeData,
-        existingNode: Node
+        existingNode: Node,
     ): Node | null {
         const newNode = existingNode.addAfter(newNodeInfo);
 
@@ -271,7 +282,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public addNodeBefore(
         newNodeInfo: NodeData,
-        existingNode: Node
+        existingNode: Node,
     ): Node | null {
         if (!existingNode) {
             throw Error(PARAM_IS_EMPTY + "existingNode");
@@ -288,7 +299,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public addParentNode(
         newNodeInfo: NodeData,
-        existingNode: Node
+        existingNode: Node,
     ): Node | null {
         if (!existingNode) {
             throw Error(PARAM_IS_EMPTY + "existingNode");
@@ -415,9 +426,10 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         }
 
         this.selectNodeHandler.addToSelection(node);
+        this.openParents(node);
 
         this._getNodeElementForNode(node).select(
-            mustSetFocus === undefined ? true : mustSetFocus
+            mustSetFocus === undefined ? true : mustSetFocus,
         );
 
         this.saveState();
@@ -455,12 +467,8 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const nodeOffset = jQuery(node.element).offset();
-        const nodeTop = nodeOffset ? nodeOffset.top : 0;
-
-        const treeOffset = this.$el.offset();
-        const treeTop = treeOffset ? treeOffset.top : 0;
-
+        const nodeTop = jQuery(node.element).offset()?.top ?? 0;
+        const treeTop = this.$el.offset()?.top ?? 0;
         const top = nodeTop - treeTop;
 
         this.scrollHandler.scrollToY(top);
@@ -508,7 +516,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     public _triggerEvent(
         eventName: string,
-        values?: Record<string, unknown>
+        values?: Record<string, unknown>,
     ): JQuery.Event {
         const event = jQuery.Event(eventName, values);
         this.element.trigger(event);
@@ -518,18 +526,18 @@ 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,
-                this.options.animationSpeed
+                this.options.animationSpeed,
             );
         };
 
@@ -542,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;
                 }
@@ -558,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;
@@ -574,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 {
@@ -589,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();
     }
@@ -611,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();
 
@@ -660,7 +656,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         if (this.options.dragAndDrop) {
             const result = this.dndHandler.mouseDrag(positionInfo);
 
-            this.scrollHandler.checkScrolling();
+            this.scrollHandler.checkScrolling(positionInfo);
             return result;
         } else {
             return false;
@@ -669,6 +665,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     protected mouseStop(positionInfo: PositionInfo): boolean {
         if (this.options.dragAndDrop) {
+            this.scrollHandler.stopScrolling();
             return this.dndHandler.mouseStop(positionInfo);
         } else {
             return false;
@@ -755,7 +752,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
         this.tree = new this.options.nodeClass(
             null,
             true,
-            this.options.nodeClass
+            this.options.nodeClass,
         );
 
         this.selectNodeHandler.clear();
@@ -843,7 +840,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 } else {
                     this.saveStateHandler.setInitialStateOnDemand(
                         state,
-                        cbFinished
+                        cbFinished,
                     );
 
                     return true;
@@ -872,7 +869,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
                         return false;
                     } else {
-                        this._openNode(node, false, null);
+                        this._openNode(node, false);
 
                         return level !== maxLevel;
                     }
@@ -904,7 +901,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     }
 
     private handleClick = (
-        e: JQuery.ClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+        e: JQuery.ClickEvent<HTMLElement, any, HTMLElement, HTMLElement>,
     ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
@@ -929,7 +926,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     };
 
     private handleDblclick = (
-        e: JQuery.DoubleClickEvent<HTMLElement, any, HTMLElement, HTMLElement>
+        e: JQuery.DoubleClickEvent<HTMLElement, any, HTMLElement, HTMLElement>,
     ): void => {
         const clickTarget = this.getClickTarget(e.target);
 
@@ -941,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 {
@@ -956,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",
@@ -971,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>
+        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();
@@ -1054,7 +1052,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
 
     private doSelectNode(
         node: Node | null,
-        optionsParam?: SelectNodeOptions
+        optionsParam?: SelectNodeOptions,
     ): void {
         const saveState = (): void => {
             if (this.options.saveState) {
@@ -1082,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;
         }
@@ -1111,7 +1101,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
                 node,
                 deselected_node: deselectedNode,
             });
-            openParents();
+            this.openParents(node);
         }
 
         saveState();
@@ -1157,7 +1147,7 @@ export class JqTreeWidget extends MouseWidget<JQTreeOptions> {
     private doLoadDataFromUrl(
         urlInfoParam: string | JQuery.AjaxSettings | null,
         parentNode: Node | null,
-        onFinished: HandleFinishedLoading | null
+        onFinished: HandleFinishedLoading | null,
     ): void {
         const urlInfo = urlInfoParam || this.getDataUrlInfo(parentNode);
 
@@ -1167,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;
 
@@ -1175,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.4";
+const version = "1.8.0";
 
 export default version;