jqtree 1.9.0 → 2.0.0

package/src/tree.jquery.ts

@@ -1,97 +1,49 @@
-import type { HandleFinishedLoading } from "./dataLoader";
-import type { OnFinishOpenNode } from "./jqtreeMethodTypes";
-import type { JQTreeOptions } from "./jqtreeOptions";
-import type { PositionInfo } from "./mouseUtils";
-import type { Position } from "./node";
-import type { SavedState } from "./saveStateHandler";
-
-import DataLoader from "./dataLoader";
-import { DragAndDropHandler } from "./dragAndDropHandler";
-import ElementsRenderer from "./elementsRenderer";
-import KeyHandler from "./keyHandler";
-import MouseHandler from "./mouseHandler";
-import { Node } from "./node";
-import NodeElement from "./nodeElement";
-import FolderElement from "./nodeElement/folderElement";
-import { getOffsetTop } from "./positionUtils";
-import SaveStateHandler from "./saveStateHandler";
-import ScrollHandler from "./scrollHandler";
-import SelectNodeHandler from "./selectNodeHandler";
-import SimpleWidget from "./simple.widget";
+import type { Node, NodeData, NodeId, Position, SavedState, SelectNodeOptions, TreeElementOptions } from "tree-element"
+
+import TreeElement from "tree-element";
+
+import type { JQTreeIconElement, JQTreeOptions } from "./jqtreeOptions";
+
+import triggerJQueryEvent from "./triggerJQueryEvent";
 import __version__ from "./version";
 
-interface SelectNodeOptions {
-    mustSetFocus?: boolean;
-    mustToggle?: boolean;
+type IconElement = HTMLElement | string
+
+interface LoadFailedEvent {
+    response: Response;
 }
 
+interface LoadingDataEvent {
+    $el: JQuery;
+    isLoading: boolean;
+    node: Node | null;
+}
+
+type OnCreateLi = (node: Node, el: HTMLElement, isSelected: boolean) => void;
+type OnFinishOpenNode = (node: Node) => void;
+type OnIsMoveHandle = (el: HTMLElement) => boolean;
+
 const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
 const PARAM_IS_EMPTY = "Parameter is empty: ";
 
-export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
-    protected static defaults: JQTreeOptions = {
-        animationSpeed: "fast",
-        autoEscape: true,
-        autoOpen: false, // true / false / int (open n levels starting at 0)
-        buttonLeft: true,
-        // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-        // http://www.fileformat.info/info/unicode/char/25ba/index.htm
-        closedIcon: undefined,
-        data: undefined,
-        dataFilter: undefined,
-        dataUrl: undefined,
-        dragAndDrop: false,
-        keyboardSupport: true,
-        nodeClass: Node,
-        onCanMove: undefined, // Can this node be moved?
-        onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
-        onCanSelectNode: undefined,
-        onCreateLi: undefined,
-        onDragMove: undefined,
-        onDragStop: undefined,
-        onGetStateFromStorage: undefined,
-        onIsMoveHandle: undefined,
-        onLoadFailed: undefined,
-        onLoading: undefined,
-        onSetStateFromStorage: undefined,
-        openedIcon: "&#x25bc;",
-        openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
-        // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-        // http://www.fileformat.info/info/unicode/char/25bc/index.htm
-        rtl: undefined, // right-to-left support; true / false (default)
-        saveState: false, // true / false / string (cookie name)
-        selectable: true,
-        showEmptyFolder: false,
-        slide: true, // must display slide animation?
-        startDndDelay: 300, // The delay for starting dnd (in milliseconds)
-        tabIndex: 0,
-        useContextMenu: true,
-    };
+export class JqTreeWidget {
+    [key: string]: unknown;
 
-    private _dataLoader: DataLoader;
-    private _dndHandler: DragAndDropHandler;
     private _element: JQuery;
-    private _htmlElement: HTMLElement;
-    private _isInitialized: boolean;
-    private _keyHandler: KeyHandler;
-    private _mouseHandler: MouseHandler;
-    private _renderer: ElementsRenderer;
-    private _saveStateHandler: SaveStateHandler;
-    private _scrollHandler: ScrollHandler;
-    private _selectNodeHandler: SelectNodeHandler;
-    private _tree: Node;
+    private _inputOptions: Partial<JQTreeOptions>;
+    private _treeElement: TreeElement;
+
+    constructor(el: HTMLElement, options: Partial<JQTreeOptions>) {
+        this._element = jQuery(el);
+
+        this._inputOptions = options;
+    }
 
     public addNodeAfter(
         newNodeInfo: NodeData,
         existingNode: Node,
     ): Node | null {
-        const newNode = existingNode.addAfter(newNodeInfo);
-
-        if (newNode) {
-            this._refreshElements(existingNode.parent);
-        }
-
-        return newNode;
+        return this._treeElement.addNodeAfter(newNodeInfo, existingNode);
     }
 
     public addNodeBefore(
@@ -102,13 +54,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(PARAM_IS_EMPTY + "existingNode");
         }
 
-        const newNode = existingNode.addBefore(newNodeInfo);
-
-        if (newNode) {
-            this._refreshElements(existingNode.parent);
-        }
-
-        return newNode;
+        return this._treeElement.addNodeBefore(newNodeInfo, existingNode);
     }
 
     public addParentNode(
@@ -119,13 +65,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(PARAM_IS_EMPTY + "existingNode");
         }
 
-        const newNode = existingNode.addParent(newNodeInfo);
-
-        if (newNode) {
-            this._refreshElements(newNode.parent);
-        }
-
-        return newNode;
+        return this._treeElement.addParentNode(newNodeInfo, existingNode);
     }
 
     public addToSelection(node?: Node, mustSetFocus?: boolean): JQuery {
@@ -133,24 +73,14 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        this._selectNodeHandler.addToSelection(node);
-        this._openParents(node);
-
-        this._getNodeElementForNode(node).select(mustSetFocus ?? true);
-
-        this._saveState();
-
+        this._treeElement.addToSelection(node, mustSetFocus);
         return this._element;
     }
 
     public appendNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
-        const parentNode = parentNodeParam ?? this._tree;
+        const parentNode = parentNodeParam ?? this._treeElement.tree;
 
-        const node = parentNode.append(newNodeInfo);
-
-        this._refreshElements(parentNode);
-
-        return node;
+        return this._treeElement.appendNode(newNodeInfo, parentNode);
     }
 
     public closeNode(node?: Node, slideParam?: boolean | null): JQuery {
@@ -158,34 +88,22 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const slide = slideParam ?? this.options.slide;
-
-        if (node.isFolder() || node.isEmptyFolder) {
-            this._createFolderElement(node).close(
-                slide,
-                this.options.animationSpeed,
-            );
-
-            this._saveState();
-        }
+        this._treeElement.closeNode(node, slideParam ?? undefined);
 
         return this._element;
     }
 
     public deinit(): void {
-        this._htmlElement.textContent = "";
         this._element.off();
+        this._treeElement.deinit();
+    }
 
-        this._keyHandler.deinit();
-        this._mouseHandler.deinit();
-
-        this._tree = new Node({}, true);
-
-        super.deinit();
+    public destroy(): void {
+        this.deinit();
     }
 
     public getNodeByCallback(callback: (node: Node) => boolean): Node | null {
-        return this._tree.getNodeByCallback(callback);
+        return this._treeElement.getNodeByCallback(callback);
     }
 
     public getNodeByHtmlElement(
@@ -200,43 +118,43 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             return null;
         }
 
-        return this._getNode(element);
+        return this._treeElement.getNode(element);
     }
 
     public getNodeById(nodeId: NodeId): Node | null {
-        return this._tree.getNodeById(nodeId);
+        return this._treeElement.getNodeById(nodeId);
     }
 
     public getNodeByName(name: string): Node | null {
-        return this._tree.getNodeByName(name);
+        return this._treeElement.getNodeByName(name);
     }
 
     public getNodeByNameMustExist(name: string): Node {
-        return this._tree.getNodeByNameMustExist(name);
+        return this._treeElement.getNodeByNameMustExist(name);
     }
 
     public getNodesByProperty(key: string, value: unknown): Node[] {
-        return this._tree.getNodesByProperty(key, value);
+        return this._treeElement.getNodesByProperty(key, value);
     }
 
     public getSelectedNode(): false | Node {
-        return this._selectNodeHandler.getSelectedNode();
+        return this._treeElement.getSelectedNode();
     }
 
     public getSelectedNodes(): Node[] {
-        return this._selectNodeHandler.getSelectedNodes();
+        return this._treeElement.getSelectedNodes();
     }
 
     public getState(): null | SavedState {
-        return this._saveStateHandler.getState();
+        return this._treeElement.getState();
     }
 
     public getStateFromStorage(): null | SavedState {
-        return this._saveStateHandler.getStateFromStorage();
+        return this._treeElement.getStateFromStorage();
     }
 
     public getTree(): Node {
-        return this._tree;
+        return this._treeElement.getTree();
     }
 
     public getVersion(): string {
@@ -244,25 +162,29 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
     }
 
     public init(): void {
-        super.init();
+        const htmlElement = this._element.get(0) as HTMLElement;
 
-        this._element = this.$el;
-        this._htmlElement = this._element.get(0) as HTMLElement;
-        this._isInitialized = false;
+        this._element.on("tree.loading_data", this._handleLoadingDataEvent.bind(this));
+        this._element.on("tree.load_failed", this._handleLoadFailedEvent.bind(this));
 
-        this.options.dataUrl ??= this._element.data("url");
+        const options = this._transformInputOptions();
 
-        const dataRtl = this._element.data("rtl") as unknown;
-        this.options.rtl ??= dataRtl === '' ? true : Boolean(dataRtl);
-
-        this.options.closedIcon ??= this._getDefaultClosedIcon();
+        const treeElement = new TreeElement(
+            {
+                ...options,
+                classPrefix: "jqtree",
+                commonClassName: "jqtree_common",
+                htmlElement,
+                overrideTriggerEventProvider: triggerJQueryEvent,
+                treeClassName: "jqtree-tree"
+            }
+        );
 
-        this._connectHandlers();
-        this._initData();
+        this._treeElement = treeElement;
     }
 
     public isDragging(): boolean {
-        return this._dndHandler.isDragging;
+        return this._treeElement.isDragging();
     }
 
     public isNodeSelected(node?: Node): boolean {
@@ -270,11 +192,11 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        return this._selectNodeHandler.isNodeSelected(node);
+        return this._treeElement.isNodeSelected(node);
     }
 
-    public loadData(data: NodeData[], parentNode: Node | null): JQuery {
-        this._doLoadData(data, parentNode);
+    public loadData(data: NodeData[], parentNode?: Node): JQuery {
+        this._treeElement.loadData(data, parentNode);
         return this._element;
     }
 
@@ -285,7 +207,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
         loadDataFromUrl('/my_data', node1);
         loadDataFromUrl('/my_data', node1, function() { console.log('finished'); });
         loadDataFromUrl('/my_data', null, function() { console.log('finished'); });
-
+ 
     - loadDataFromUrl(parent_node=null, on_finished=null)
         loadDataFromUrl();
         loadDataFromUrl(node1);
@@ -293,34 +215,41 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
         loadDataFromUrl(node1, function() { console.log('finished'); });
     */
     public loadDataFromUrl(
-        param1: Node | null | string,
-        param2?: HandleFinishedLoading | Node | null,
-        param3?: HandleFinishedLoading,
+        param1?: Node | string,
+        param2?: (() => void) | Node,
+        param3?: () => void,
     ): JQuery {
+        let parentNode: Node | undefined;
+        let onFinishedLoading: (() => void) | undefined;
+        let url: string | undefined;
+
+        // first parameter is url
         if (typeof param1 === "string") {
-            // first parameter is url
-            this._doLoadDataFromUrl(
-                param1,
-                param2 as Node | null,
-                param3 ?? null,
-            );
+            url = param1;
+            parentNode = param2 as (Node | undefined);
+            onFinishedLoading = param3;
+
         } else {
             // first parameter is not url
-            this._doLoadDataFromUrl(
-                null,
-                param1,
-                param2 as HandleFinishedLoading | null,
-            );
+            parentNode = param1;
+            onFinishedLoading = param2 as (() => void) | undefined;
         }
 
+        this._treeElement.loadDataFromUrl(url, parentNode)
+            .then(() => {
+                if (onFinishedLoading) {
+                    onFinishedLoading();
+                }
+            })
+            .catch((error: unknown) => {
+                throw error;
+            });
+
         return this._element;
     }
 
     public moveDown(): JQuery {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            this._keyHandler.moveDown(selectedNode);
-        }
+        this._treeElement.moveDown();
 
         return this._element;
     }
@@ -342,18 +271,13 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(PARAM_IS_EMPTY + "position");
         }
 
-        this._tree.moveNode(node, targetNode, position);
-        this._refreshElements(null);
+        this._treeElement.moveNode(node, targetNode, position);
 
         return this._element;
     }
 
     public moveUp(): JQuery {
-        const selectedNode = this.getSelectedNode();
-        if (selectedNode) {
-            this._keyHandler.moveUp(selectedNode);
-        }
-
+        this._treeElement.moveUp();
         return this._element;
     }
 
@@ -366,46 +290,45 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const parseParams = (): [boolean, OnFinishOpenNode | undefined] => {
-            let onFinished: null | OnFinishOpenNode;
-            let slide: boolean | null;
+        let onFinished: null | OnFinishOpenNode = null;
+        let slide: boolean | undefined;
 
-            if (typeof param1 === "function") {
-                onFinished = param1;
-                slide = null;
-            } else {
-                slide = param1 as boolean;
-                onFinished = param2 as OnFinishOpenNode;
-            }
-
-            slide ??= this.options.slide;
-
-            return [slide, onFinished];
-        };
-
-        const [slide, onFinished] = parseParams();
+        if (typeof param1 === "function") {
+            onFinished = param1;
+            slide = param2 as boolean | undefined;
+        } else {
+            slide = param1;
+        }
 
-        this._openNodeInternal(node, slide, onFinished);
+        void this._treeElement.openNode(node, slide).then(() => {
+            if (onFinished) {
+                onFinished(node);
+            }
+        });
         return this._element;
     }
 
     public prependNode(newNodeInfo: NodeData, parentNodeParam?: Node): Node {
-        const parentNode = parentNodeParam ?? this._tree;
+        const parentNode = parentNodeParam ?? this._treeElement.tree;
 
-        const node = parentNode.prepend(newNodeInfo);
-
-        this._refreshElements(parentNode);
-
-        return node;
+        return this._treeElement.prependNode(newNodeInfo, parentNode);
     }
 
     public refresh(): JQuery {
-        this._refreshElements(null);
+        this._treeElement.refresh();
         return this._element;
     }
 
-    public reload(onFinished: HandleFinishedLoading | null): JQuery {
-        this._doLoadDataFromUrl(null, null, onFinished);
+    public reload(onFinished?: () => void): JQuery {
+        this._treeElement.loadDataFromUrl(undefined, undefined).then(
+            () => {
+                if (onFinished) {
+                    onFinished();
+                }
+            }
+        ).catch((error: unknown) => {
+            throw error;
+        });
         return this._element;
     }
 
@@ -414,11 +337,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        this._selectNodeHandler.removeFromSelection(node);
-
-        this._getNodeElementForNode(node).deselect();
-        this._saveState();
-
+        this._treeElement.removeFromSelection(node);
         return this._element;
     }
 
@@ -431,12 +350,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error("Node has no parent");
         }
 
-        this._selectNodeHandler.removeFromSelection(node, true); // including children
-
-        const parent = node.parent;
-        node.remove();
-        this._refreshElements(parent);
-
+        this._treeElement.removeNode(node);
         return this._element;
     }
 
@@ -445,16 +359,7 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        if (!node.element) {
-            return this._element;
-        }
-
-        const top =
-            getOffsetTop(node.element) -
-            getOffsetTop(this._htmlElement);
-
-        this._scrollHandler.scrollToY(top);
-
+        this._treeElement.scrollToNode(node);
         return this._element;
     }
 
@@ -462,19 +367,18 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
         node: Node | null,
         optionsParam?: SelectNodeOptions,
     ): JQuery {
-        this._doSelectNode(node, optionsParam);
+        this._treeElement.selectNode(node, optionsParam);
         return this._element;
     }
 
     public setOption(option: string, value: unknown): JQuery {
-        (this.options as unknown as Record<string, unknown>)[option] = value;
+        this._treeElement.setOption(option, value);
         return this._element;
     }
 
     public setState(state?: SavedState): JQuery {
         if (state) {
-            this._saveStateHandler.setInitialState(state);
-            this._refreshElements(null);
+            this._treeElement.setState(state);
         }
 
         return this._element;
@@ -485,19 +389,12 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             throw Error(NODE_PARAM_IS_EMPTY);
         }
 
-        const slide = slideParam ?? this.options.slide;
-
-        if (node.is_open) {
-            this.closeNode(node, slide);
-        } else {
-            this.openNode(node, slide);
-        }
-
+        this._treeElement.toggle(node, slideParam);
         return this._element;
     }
 
     public toJson(): string {
-        return JSON.stringify(this._tree.getData());
+        return this._treeElement.toJson();
     }
 
     public updateNode(node?: Node, data?: NodeData): JQuery {
@@ -509,758 +406,157 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             return this._element;
         }
 
-        const idIsChanged =
-            typeof data === "object" && data.id && data.id !== node.id;
-
-        if (idIsChanged) {
-            this._tree.removeNodeFromIndex(node);
-        }
-
-        node.setData(data);
-
-        if (idIsChanged) {
-            this._tree.addNodeToIndex(node);
-        }
-
-        if (
-            typeof data === "object" &&
-            data.children &&
-            data.children instanceof Array
-        ) {
-            node.removeChildren();
-
-            if (data.children.length) {
-                node.loadFromData(data.children);
-            }
-        }
-
-        this._refreshElements(node);
-
+        this._treeElement.updateNode(node, data);
         return this._element;
     }
 
-    private _connectHandlers() {
-        const {
-            autoEscape,
-            buttonLeft,
-            closedIcon,
-            dataFilter,
-            dragAndDrop,
-            keyboardSupport,
-            onCanMove,
-            onCanMoveTo,
-            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 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._openNodeInternal.bind(this);
-        const refreshElements = this._refreshElements.bind(this);
-        const selectNode = this.selectNode.bind(this);
-        const treeElement = this._htmlElement;
-        const triggerEvent = this._triggerEvent.bind(this);
-
-        const selectNodeHandler = new SelectNodeHandler({
-            getNodeById,
-        });
+    private _handleLoadFailedEvent(e: JQuery.TriggeredEvent) {
+        const jqTreeOnLoadFailed = this._inputOptions.onLoadFailed;
 
-        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 getMouseDelay = () => this.options.startDndDelay ?? 0;
-
-        const refreshHitAreas = () => {
-            dndHandler.refresh();
+        if (jqTreeOnLoadFailed) {
+            const { response } = e as unknown as LoadFailedEvent;
+            jqTreeOnLoadFailed(response);
         }
-
-        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 scrollHandler = new ScrollHandler({
-            refreshHitAreas,
-            treeElement,
-        });
-
-        const getScrollLeft = scrollHandler.getScrollLeft.bind(scrollHandler);
-
-        const dndHandler = new DragAndDropHandler({
-            autoEscape,
-            getNodeElement,
-            getNodeElementForNode,
-            getScrollLeft,
-            getTree,
-            onCanMove,
-            onCanMoveTo,
-            onDragMove,
-            onDragStop,
-            onIsMoveHandle,
-            openFolderDelay,
-            openNode,
-            refreshElements,
-            slide,
-            treeElement,
-            triggerEvent,
-        });
-
-        const keyHandler = new KeyHandler({
-            closeNode,
-            getSelectedNode,
-            isFocusOnTree,
-            keyboardSupport,
-            openNode,
-            selectNode,
-        });
-
-        const renderer = new ElementsRenderer({
-            autoEscape,
-            buttonLeft,
-            closedIcon,
-            dragAndDrop,
-            getTree,
-            htmlElement: treeElement,
-            isNodeSelected,
-            onCreateLi,
-            openedIcon,
-            rtl,
-            showEmptyFolder,
-            tabIndex,
-        });
-
-        const getNode = this._getNode.bind(this);
-        const onMouseCapture = this._mouseCapture.bind(this);
-        const onMouseDrag = this._mouseDrag.bind(this);
-        const onMouseStart = this._mouseStart.bind(this);
-        const onMouseStop = this._mouseStop.bind(this);
-
-        const mouseHandler = new MouseHandler({
-            element: treeElement,
-            getMouseDelay,
-            getNode,
-            onClickButton: this.toggle.bind(this),
-            onClickTitle: this._doSelectNode.bind(this),
-            onMouseCapture,
-            onMouseDrag,
-            onMouseStart,
-            onMouseStop,
-            triggerEvent,
-            useContextMenu: this.options.useContextMenu,
-        });
-
-        this._dataLoader = dataLoader;
-        this._dndHandler = dndHandler;
-        this._keyHandler = keyHandler;
-        this._mouseHandler = mouseHandler;
-        this._renderer = renderer;
-        this._saveStateHandler = saveStateHandler;
-        this._scrollHandler = scrollHandler;
-        this._selectNodeHandler = selectNodeHandler;
     }
 
-    private _containsElement(element: HTMLElement): boolean {
-        const node = this._getNode(element);
-
-        return node?.tree === this._tree;
-    }
-
-    private _createFolderElement(node: Node) {
-        const closedIconElement = this._renderer.closedIconElement;
-        const getScrollLeft = this._scrollHandler.getScrollLeft.bind(
-            this._scrollHandler,
-        );
-        const openedIconElement = this._renderer.openedIconElement;
-        const tabIndex = this.options.tabIndex;
-        const triggerEvent = this._triggerEvent.bind(this);
-
-        return new FolderElement({
-            closedIconElement,
-            getScrollLeft,
-            node,
-            openedIconElement,
-            tabIndex,
-            treeElement: this._htmlElement,
-            triggerEvent,
-        });
-    }
-
-    private _createNodeElement(node: Node) {
-        const getScrollLeft = this._scrollHandler.getScrollLeft.bind(
-            this._scrollHandler,
-        );
-        const tabIndex = this.options.tabIndex;
+    private _handleLoadingDataEvent(e: JQuery.TriggeredEvent) {
+        const jqTreeOnLoading = this._inputOptions.onLoading;
 
-        return new NodeElement({
-            getScrollLeft,
-            node,
-            tabIndex,
-            treeElement: this._htmlElement
-        });
-    }
-
-    private _deselectCurrentNode(): void {
-        const node = this.getSelectedNode();
-        if (node) {
-            this.removeFromSelection(node);
-        }
-    }
-
-    private _deselectNodes(parentNode: Node): void {
-        const selectedNodesUnderParent =
-            this._selectNodeHandler.getSelectedNodesUnder(parentNode);
-        for (const n of selectedNodesUnderParent) {
-            this._selectNodeHandler.removeFromSelection(n);
+        if (jqTreeOnLoading) {
+            const { $el, isLoading, node } = e as unknown as LoadingDataEvent;
+            jqTreeOnLoading(isLoading, node ?? undefined, $el)
         }
     }
 
-    private _doLoadData(data: NodeData[] | null, parentNode: Node | null): void {
-        if (data) {
-            if (parentNode) {
-                this._deselectNodes(parentNode);
-                this._loadSubtree(data, parentNode);
+    private _transformInputOptions(): Partial<TreeElementOptions> {
+        function convertToIconElement(jqtreeIconElement: JQTreeIconElement | undefined) {
+            if (jqtreeIconElement instanceof jQuery) {
+                return (jqtreeIconElement as JQuery).get(0);
             } else {
-                this._initTree(data);
-            }
-
-            if (this.isDragging()) {
-                this._dndHandler.refresh();
+                return jqtreeIconElement as IconElement;
             }
         }
 
-        this._triggerEvent("tree.load_data", {
-            parent_node: parentNode,
-            tree_data: data,
-        });
-    }
+        const closedIcon = convertToIconElement(this._inputOptions.closedIcon);
+        const openedIcon = convertToIconElement(this._inputOptions.openedIcon);
 
-    private _doLoadDataFromUrl(
-        urlInfoParam: JQuery.AjaxSettings | null | string,
-        parentNode: Node | null,
-        onFinished: HandleFinishedLoading | null,
-    ): void {
-        const urlInfo = urlInfoParam ?? this._getDataUrlInfo(parentNode);
+        let onCreateLi: OnCreateLi | undefined = undefined;
+        const jqTreeOnCreateLi = this._inputOptions.onCreateLi;
 
-        this._dataLoader.loadFromUrl(urlInfo, parentNode, onFinished);
-    }
-
-    private _doSelectNode(
-        node: Node | null,
-        optionsParam?: SelectNodeOptions,
-    ): void {
-        const saveState = (): void => {
-            if (this.options.saveState) {
-                this._saveStateHandler.saveState();
-            }
-        };
-
-        if (!node) {
-            // Called with empty node -> deselect current node
-            this._deselectCurrentNode();
-            saveState();
-            return;
-        }
-        const defaultOptions = { mustSetFocus: true, mustToggle: true };
-        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
-
-        const canSelect = (): boolean => {
-            if (this.options.onCanSelectNode) {
-                return (
-                    this.options.selectable &&
-                    this.options.onCanSelectNode(node)
-                );
-            } else {
-                return this.options.selectable;
-            }
-        };
-
-        if (!canSelect()) {
-            return;
-        }
-
-        if (this._selectNodeHandler.isNodeSelected(node)) {
-            if (selectOptions.mustToggle) {
-                this._deselectCurrentNode();
-                this._triggerEvent("tree.select", {
-                    node: null,
-                    previous_node: node,
-                });
-            }
-        } else {
-            const deselectedNode = this.getSelectedNode() || null;
-            this._deselectCurrentNode();
-            this.addToSelection(node, selectOptions.mustSetFocus);
-
-            this._triggerEvent("tree.select", {
-                deselected_node: deselectedNode,
-                node,
-            });
-            this._openParents(node);
-        }
-
-        saveState();
-    }
-
-    private _getAutoOpenMaxLevel(): number {
-        if (this.options.autoOpen === true) {
-            return -1;
-        } else if (typeof this.options.autoOpen === "number") {
-            return this.options.autoOpen;
-        } else if (typeof this.options.autoOpen === "string") {
-            return parseInt(this.options.autoOpen, 10);
-        } else {
-            return 0;
+        if (jqTreeOnCreateLi) {
+            onCreateLi = (node: Node, el: HTMLElement, isSelected: boolean) => {
+                jqTreeOnCreateLi(node, jQuery(el), isSelected);
+            };
         }
-    }
 
-    private _getDataUrlInfo(node: Node | null): JQuery.AjaxSettings | null {
-        const getUrlFromString = (url: string): JQuery.AjaxSettings => {
-            const urlInfo: JQuery.AjaxSettings = { url };
+        let onIsMoveHandle: OnIsMoveHandle | undefined = undefined;
+        const jqTreeOnIsMoveHandle = this._inputOptions.onIsMoveHandle;
 
-            setUrlInfoData(urlInfo);
-
-            return urlInfo;
-        };
-
-        const setUrlInfoData = (urlInfo: JQuery.AjaxSettings): void => {
-            if (node?.id) {
-                // Load on demand of a subtree; add node parameter
-                const data = { node: node.id };
-                urlInfo.data = data;
-            } else {
-                // Add selected_node parameter
-                const selectedNodeId = this._getNodeIdToBeSelected();
-                if (selectedNodeId) {
-                    const data = { selected_node: selectedNodeId };
-                    urlInfo.data = data;
-                }
-            }
-        };
-
-        const dataUrl = this.options.dataUrl;
-        if (typeof dataUrl === "function") {
-            return dataUrl(node);
-        } else if (typeof dataUrl === "string") {
-            return getUrlFromString(dataUrl);
-        } else if (dataUrl && typeof dataUrl === "object") {
-            setUrlInfoData(dataUrl);
-            return dataUrl;
-        } else {
-            return null;
+        if (jqTreeOnIsMoveHandle) {
+            onIsMoveHandle = (el: HTMLElement) => jqTreeOnIsMoveHandle(jQuery(el))
         }
-    }
 
-    private _getDefaultClosedIcon(): string {
-        if (this.options.rtl) {
-            // triangle to the left
-            return "&#x25c0;";
-        } else {
-            // triangle to the right
-            return "&#x25ba;";
+        return {
+            ...this._inputOptions,
+            closedIcon,
+            onCreateLi,
+            onIsMoveHandle,
+            openedIcon,
         }
     }
+}
 
-    private _getNode(element: HTMLElement): Node | null {
-        const liElement = element.closest("li.jqtree_common");
+const register = (): void => {
+    const getWidgetData = (
+        el: HTMLElement,
+        dataKey: string,
+    ): JqTreeWidget | null => {
+        const widget = jQuery.data(el, dataKey) as unknown;
 
-        if (liElement) {
-            return jQuery(liElement).data("node") as Node;
+        if (widget && widget instanceof JqTreeWidget) {
+            return widget;
         } else {
             return null;
         }
-    }
-
-    private _getNodeElement(element: HTMLElement): NodeElement | null {
-        const node = this._getNode(element);
-        if (node) {
-            return this._getNodeElementForNode(node);
-        } else {
-            return null;
-        }
-    }
-
-    private _getNodeElementForNode(node: Node): NodeElement {
-        if (node.isFolder()) {
-            return this._createFolderElement(node);
-        } else {
-            return this._createNodeElement(node);
-        }
-    }
-
-    private _getNodeIdToBeSelected(): NodeId | null {
-        if (this.options.saveState) {
-            return this._saveStateHandler.getNodeIdToBeSelected();
-        } else {
-            return null;
-        }
-    }
-
-    private _initData(): void {
-        if (this.options.data) {
-            this._doLoadData(this.options.data, null);
-        } else {
-            const dataUrl = this._getDataUrlInfo(null);
-
-            if (dataUrl) {
-                this._doLoadDataFromUrl(null, null, null);
-            } else {
-                this._doLoadData([], null);
-            }
-        }
-    }
-
-    private _initTree(data: NodeData[]): void {
-        const doInit = (): void => {
-            if (!this._isInitialized) {
-                this._isInitialized = true;
-                this._triggerEvent("tree.init");
-            }
-        };
-
-        this._tree = new this.options.nodeClass(
-            null,
-            true,
-            this.options.nodeClass,
-        );
-
-        this._selectNodeHandler.clear();
-
-        this._tree.loadFromData(data);
-
-        const mustLoadOnDemand = this._setInitialState();
-
-        this._refreshElements(null);
-
-        if (!mustLoadOnDemand) {
-            doInit();
-        } else {
-            // Load data on demand and then init the tree
-            this._setInitialStateOnDemand(doInit);
-        }
-    }
-
-    private _isFocusOnTree(): boolean {
-        const activeElement = document.activeElement;
-
-        return activeElement?.tagName === "SPAN" && this._containsElement(activeElement as HTMLElement);
-    }
-
-    private _isSelectedNodeInSubtree(subtree: Node): boolean {
-        const selectedNode = this.getSelectedNode();
-
-        if (!selectedNode) {
-            return false;
-        } else {
-            return subtree === selectedNode || subtree.isParentOf(selectedNode);
-        }
-    }
-
-    private _loadFolderOnDemand(
-        node: Node,
-        slide = true,
-        onFinished?: OnFinishOpenNode,
-    ): void {
-        node.is_loading = true;
-
-        this._doLoadDataFromUrl(null, node, () => {
-            this._openNodeInternal(node, slide, onFinished);
-        });
-    }
-
-    private _loadSubtree(data: NodeData[], parentNode: Node): void {
-        parentNode.loadFromData(data);
-
-        parentNode.load_on_demand = false;
-        parentNode.is_loading = false;
-
-        this._refreshElements(parentNode);
-    }
-
-    private _mouseCapture(positionInfo: PositionInfo): boolean | null {
-        if (this.options.dragAndDrop) {
-            return this._dndHandler.mouseCapture(positionInfo);
-        } else {
-            return false;
-        }
-    }
-
-    private _mouseDrag(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            const result = this._dndHandler.mouseDrag(positionInfo);
-
-            this._scrollHandler.checkScrolling(positionInfo);
-            return result;
-        } else {
-            return false;
-        }
-    }
-
-    private _mouseStart(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            return this._dndHandler.mouseStart(positionInfo);
-        } else {
-            return false;
-        }
-    }
+    };
 
-    private _mouseStop(positionInfo: PositionInfo): boolean {
-        if (this.options.dragAndDrop) {
-            this._scrollHandler.stopScrolling();
-            return this._dndHandler.mouseStop(positionInfo);
-        } else {
-            return false;
-        }
-    }
+    const createWidget = ($el: JQuery, options: null | Partial<JQTreeOptions>): JQuery => {
+        for (const el of $el.get()) {
+            const existingWidget = getWidgetData(el, "jqtree");
 
-    private _openNodeInternal(
-        node: Node,
-        slide = true,
-        onFinished?: OnFinishOpenNode,
-    ): void {
-        const doOpenNode = (
-            _node: Node,
-            _slide: boolean,
-            _onFinished?: OnFinishOpenNode,
-        ): void => {
-            if (!node.children.length) {
-                return;
-            }
+            if (!existingWidget) {
+                const widget = new JqTreeWidget(el, options ?? {});
 
-            const folderElement = this._createFolderElement(_node);
-            folderElement.open(
-                _onFinished,
-                _slide,
-                this.options.animationSpeed,
-            );
-        };
-
-        if (node.isFolder() || node.isEmptyFolder) {
-            if (node.load_on_demand) {
-                this._loadFolderOnDemand(node, slide, onFinished);
-            } else {
-                let parent = node.parent;
-
-                while (parent) {
-                    // nb: do not open root element
-                    if (parent.parent) {
-                        doOpenNode(parent, false);
-                    }
-                    parent = parent.parent;
+                if (!jQuery.data(el, "jqtree")) {
+                    jQuery.data(el, "jqtree", widget);
                 }
 
-                doOpenNode(node, slide, onFinished);
-                this._saveState();
+                // Call init after setting data, so we can call methods
+                widget.init();
             }
         }
-    }
 
-    private _openParents(node: Node) {
-        const parent = node.parent;
-
-        if (parent?.parent && !parent.is_open) {
-            this.openNode(parent, false);
-        }
-    }
-
-    /*
-    Redraw the tree or part of the tree.
-     from_node: redraw this subtree
-    */
-    private _refreshElements(fromNode: Node | null): void {
-        const mustSetFocus = this._isFocusOnTree();
-        const mustSelect = fromNode
-            ? this._isSelectedNodeInSubtree(fromNode)
-            : false;
-
-        this._renderer.render(fromNode);
+        return $el;
+    };
 
-        if (mustSelect) {
-            this._selectCurrentNode(mustSetFocus);
-        }
+    const destroyWidget = ($el: JQuery): void => {
+        for (const el of $el.get()) {
+            const widget = getWidgetData(el, "jqtree");
 
-        this._triggerEvent("tree.refresh");
-    }
+            if (widget) {
+                widget.destroy();
+            }
 
-    private _saveState(): void {
-        if (this.options.saveState) {
-            this._saveStateHandler.saveState();
+            jQuery.removeData(el, "jqtree");
         }
-    }
+    };
 
-    private _selectCurrentNode(mustSetFocus: boolean): void {
-        const node = this.getSelectedNode();
-        if (node) {
-            const nodeElement = this._getNodeElementForNode(node);
-            nodeElement.select(mustSetFocus);
-        }
-    }
+    const callFunction = (
+        $el: JQuery,
+        functionName: string,
+        args: unknown[],
+    ): unknown => {
+        let result = null;
 
-    // Set initial state, either by restoring the state or auto-opening nodes
-    // result: must load nodes on demand?
-    private _setInitialState(): boolean {
-        const restoreState = (): [boolean, boolean] => {
-            // result: is state restored, must load on demand?
-            if (!this.options.saveState) {
-                return [false, false];
-            } else {
-                const state = this._saveStateHandler.getStateFromStorage();
+        for (const el of $el.get()) {
+            const widget = jQuery.data(el, "jqtree") as unknown;
 
-                if (!state) {
-                    return [false, false];
-                } else {
-                    const mustLoadOnDemand =
-                        this._saveStateHandler.setInitialState(state);
+            if (widget && widget instanceof JqTreeWidget) {
+                const widgetFunction = widget[functionName];
 
-                    // return true: the state is restored
-                    return [true, mustLoadOnDemand];
+                if (widgetFunction && typeof widgetFunction === "function") {
+                    result = widgetFunction.apply(widget, args) as unknown;
                 }
             }
-        };
-
-        const autoOpenNodes = (): boolean => {
-            // result: must load on demand?
-            if (this.options.autoOpen === false) {
-                return false;
-            }
-
-            const maxLevel = this._getAutoOpenMaxLevel();
-            let mustLoadOnDemand = false;
-
-            this._tree.iterate((node: Node, level: number) => {
-                if (node.load_on_demand) {
-                    mustLoadOnDemand = true;
-                    return false;
-                } else if (!node.hasChildren()) {
-                    return false;
-                } else {
-                    node.is_open = true;
-                    return level !== maxLevel;
-                }
-            });
-
-            return mustLoadOnDemand;
-        };
-
-        let [isRestored, mustLoadOnDemand] = restoreState(); // eslint-disable-line prefer-const
-
-        if (!isRestored) {
-            mustLoadOnDemand = autoOpenNodes();
         }
 
-        return mustLoadOnDemand;
-    }
+        return result;
+    };
 
-    // Set the initial state for nodes that are loaded on demand
-    // Call cb_finished when done
-    private _setInitialStateOnDemand(cbFinished: () => void): void {
-        const restoreState = (): boolean => {
-            if (!this.options.saveState) {
-                return false;
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    (jQuery.fn as any).tree = function (
+        this: JQuery,
+        argument1: unknown,
+        ...args: unknown[]
+    ) {
+        if (!argument1) {
+            return createWidget(this, null);
+        } else if (typeof argument1 === "object") {
+            const options = argument1 as unknown;
+            return createWidget(this, options as JQTreeOptions);
+        } else if (typeof argument1 === "string" && argument1[0] !== "_") {
+            const functionName = argument1;
+
+            if (argument1 === "destroy") {
+                destroyWidget(this);
+                return undefined;
             } else {
-                const state = this._saveStateHandler.getStateFromStorage();
-
-                if (!state) {
-                    return false;
-                } else {
-                    this._saveStateHandler.setInitialStateOnDemand(
-                        state,
-                        cbFinished,
-                    );
-
-                    return true;
-                }
+                return callFunction(this, functionName, args);
             }
-        };
-
-        const autoOpenNodes = (): void => {
-            const maxLevel = this._getAutoOpenMaxLevel();
-            let loadingCount = 0;
-
-            const loadAndOpenNode = (node: Node): void => {
-                loadingCount += 1;
-                this._openNodeInternal(node, false, () => {
-                    loadingCount -= 1;
-                    openNodes();
-                });
-            };
-
-            const openNodes = (): void => {
-                this._tree.iterate((node: Node, level: number) => {
-                    if (node.load_on_demand) {
-                        if (!node.is_loading) {
-                            loadAndOpenNode(node);
-                        }
-
-                        return false;
-                    } else {
-                        this._openNodeInternal(node, false);
-
-                        return level !== maxLevel;
-                    }
-                });
-
-                if (loadingCount === 0) {
-                    cbFinished();
-                }
-            };
-
-            openNodes();
-        };
-
-        if (!restoreState()) {
-            autoOpenNodes();
+        } else {
+            return undefined;
         }
-    }
-
-    private _triggerEvent(
-        eventName: string,
-        values?: Record<string, unknown>,
-    ): boolean {
-        const event = jQuery.Event(eventName, values);
-        this._element.trigger(event);
-        return !event.isDefaultPrevented();
-    }
-}
+    };
+};
 
-SimpleWidget.register(JqTreeWidget, "tree");
+register();