jqtree 1.8.10 → 1.9.0

package/src/elementsRenderer.ts

@@ -1,15 +1,16 @@
-import { GetTree, IsNodeSelected } from "./jqtreeMethodTypes";
-import { IconElement, OnCreateLi } from "./jqtreeOptions";
-import { Node } from "./node";
+import type { GetTree, IsNodeSelected } from "./jqtreeMethodTypes";
+import type { IconElement, OnCreateLi } from "./jqtreeOptions";
+import type { Node } from "./node";
+
 import { getBoolString } from "./util";
 
 interface ElementsRendererParams {
-    $element: JQuery;
     autoEscape: boolean;
     buttonLeft: boolean;
     closedIcon?: IconElement;
     dragAndDrop: boolean;
     getTree: GetTree;
+    htmlElement: HTMLElement;
     isNodeSelected: IsNodeSelected;
     onCreateLi?: OnCreateLi;
     openedIcon?: IconElement;
@@ -21,25 +22,25 @@ interface ElementsRendererParams {
 export default class ElementsRenderer {
     public closedIconElement?: HTMLElement | Text;
     public openedIconElement?: HTMLElement | Text;
-    private $element: JQuery;
-    private autoEscape: boolean;
-    private buttonLeft: boolean;
-    private dragAndDrop: boolean;
-    private getTree: GetTree;
-    private isNodeSelected: IsNodeSelected;
-    private onCreateLi?: OnCreateLi;
-    private rtl?: boolean;
-
-    private showEmptyFolder: boolean;
-    private tabIndex?: number;
+    private _autoEscape: boolean;
+    private _buttonLeft: boolean;
+    private _dragAndDrop: boolean;
+    private _getTree: GetTree;
+    private _htmlElement: HTMLElement;
+    private _isNodeSelected: IsNodeSelected;
+    private _onCreateLi?: OnCreateLi;
+    private _rtl?: boolean;
+
+    private _showEmptyFolder: boolean;
+    private _tabIndex?: number;
 
     constructor({
-        $element,
         autoEscape,
         buttonLeft,
         closedIcon,
         dragAndDrop,
         getTree,
+        htmlElement,
         isNodeSelected,
         onCreateLi,
         openedIcon,
@@ -47,18 +48,18 @@ export default class ElementsRenderer {
         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 ?? "-");
+        this._autoEscape = autoEscape;
+        this._buttonLeft = buttonLeft;
+        this._dragAndDrop = dragAndDrop;
+        this._getTree = getTree;
+        this._htmlElement = htmlElement;
+        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 {
@@ -74,38 +75,30 @@ export default class ElementsRenderer {
             return;
         }
 
-        // remember current li
-        const $previousLi = jQuery(node.element);
-
-        // create element
-        const li = this.createLi(node, node.getLevel());
-
-        // add element to dom
-        $previousLi.after(li);
-
-        // remove previous li
-        $previousLi.remove();
+        const currentLi = node.element;
+        const newLi = this._createLi(node, node.getLevel());
+        currentLi.replaceWith(newLi);
 
         // create children
-        this.createDomElements(li, node.children, false, node.getLevel() + 1);
+        this._createDomElements(newLi, node.children, false, node.getLevel() + 1);
     }
 
     public renderFromRoot(): void {
-        this.$element.empty();
+        this._htmlElement.textContent = '';
 
-        const tree = this.getTree();
+        const tree = this._getTree();
 
-        if (this.$element[0] && tree) {
-            this.createDomElements(this.$element[0], tree.children, true, 1);
+        if (tree) {
+            this._createDomElements(this._htmlElement, tree.children, true, 1);
         }
     }
 
-    private attachNodeData(node: Node, li: HTMLElement): void {
+    private _attachNodeData(node: Node, li: HTMLElement): void {
         node.element = li;
         jQuery(li).data("node", node);
     }
 
-    private createButtonElement(
+    private _createButtonElement(
         value: IconElement,
     ): HTMLElement | Text | undefined {
         if (typeof value === "string") {
@@ -121,32 +114,32 @@ export default class ElementsRenderer {
         }
     }
 
-    private createDomElements(
+    private _createDomElements(
         element: Element,
         children: Node[],
         isRootNode: boolean,
         level: number,
     ): void {
-        const ul = this.createUl(isRootNode);
+        const ul = this._createUl(isRootNode);
         element.appendChild(ul);
 
         for (const child of children) {
-            const li = this.createLi(child, level);
+            const li = this._createLi(child, level);
             ul.appendChild(li);
 
             if (child.hasChildren()) {
-                this.createDomElements(li, child.children, false, level + 1);
+                this._createDomElements(li, child.children, false, level + 1);
             }
         }
     }
 
-    private createFolderLi(
+    private _createFolderLi(
         node: Node,
         level: number,
         isSelected: boolean,
     ): HTMLLIElement {
-        const buttonClasses = this.getButtonClasses(node);
-        const folderClasses = this.getFolderClasses(node, isSelected);
+        const buttonClasses = this._getButtonClasses(node);
+        const folderClasses = this._getFolderClasses(node, isSelected);
 
         const iconElement = node.is_open
             ? this.openedIconElement
@@ -172,12 +165,12 @@ export default class ElementsRenderer {
             buttonLink.appendChild(iconElement.cloneNode(true));
         }
 
-        if (this.buttonLeft) {
+        if (this._buttonLeft) {
             div.appendChild(buttonLink);
         }
 
         // title span
-        const titleSpan = this.createTitleSpan(
+        const titleSpan = this._createTitleSpan(
             node.name,
             isSelected,
             true,
@@ -186,7 +179,7 @@ export default class ElementsRenderer {
         titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
         div.appendChild(titleSpan);
 
-        if (!this.buttonLeft) {
+        if (!this._buttonLeft) {
             div.appendChild(buttonLink);
         }
 
@@ -197,26 +190,26 @@ export default class ElementsRenderer {
      * Attach it to node.element.
      * Call onCreateLi
      */
-    private createLi(node: Node, level: number): HTMLLIElement {
-        const isSelected = Boolean(this.isNodeSelected(node));
+    private _createLi(node: Node, level: number): HTMLLIElement {
+        const isSelected = this._isNodeSelected(node);
 
         const mustShowFolder =
-            node.isFolder() || (node.isEmptyFolder && this.showEmptyFolder);
+            node.isFolder() || (node.isEmptyFolder && this._showEmptyFolder);
 
         const li = mustShowFolder
-            ? this.createFolderLi(node, level, isSelected)
-            : this.createNodeLi(node, level, isSelected);
+            ? this._createFolderLi(node, level, isSelected)
+            : this._createNodeLi(node, level, isSelected);
 
-        this.attachNodeData(node, li);
+        this._attachNodeData(node, li);
 
-        if (this.onCreateLi) {
-            this.onCreateLi(node, jQuery(li), isSelected);
+        if (this._onCreateLi) {
+            this._onCreateLi(node, jQuery(li), isSelected);
         }
 
         return li;
     }
 
-    private createNodeLi(
+    private _createNodeLi(
         node: Node,
         level: number,
         isSelected: boolean,
@@ -242,7 +235,7 @@ export default class ElementsRenderer {
         li.appendChild(div);
 
         // title span
-        const titleSpan = this.createTitleSpan(
+        const titleSpan = this._createTitleSpan(
             node.name,
             isSelected,
             false,
@@ -253,7 +246,7 @@ export default class ElementsRenderer {
         return li;
     }
 
-    private createTitleSpan(
+    private _createTitleSpan(
         nodeName: string,
         isSelected: boolean,
         isFolder: boolean,
@@ -267,21 +260,21 @@ export default class ElementsRenderer {
             classes += " jqtree-title-folder";
         }
 
-        classes += ` jqtree-title-button-${this.buttonLeft ? "left" : "right"}`;
+        classes += ` jqtree-title-button-${this._buttonLeft ? "left" : "right"}`;
 
         titleSpan.className = classes;
 
         if (isSelected) {
-            const tabIndex = this.tabIndex;
+            const tabIndex = this._tabIndex;
 
             if (tabIndex !== undefined) {
                 titleSpan.setAttribute("tabindex", `${tabIndex}`);
             }
         }
 
-        this.setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
+        this._setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
 
-        if (this.autoEscape) {
+        if (this._autoEscape) {
             titleSpan.textContent = nodeName;
         } else {
             titleSpan.innerHTML = nodeName;
@@ -290,7 +283,7 @@ export default class ElementsRenderer {
         return titleSpan;
     }
 
-    private createUl(isRootNode: boolean): HTMLUListElement {
+    private _createUl(isRootNode: boolean): HTMLUListElement {
         let classString;
         let role;
 
@@ -301,12 +294,12 @@ export default class ElementsRenderer {
             classString = "jqtree-tree";
             role = "tree";
 
-            if (this.rtl) {
+            if (this._rtl) {
                 classString += " jqtree-rtl";
             }
         }
 
-        if (this.dragAndDrop) {
+        if (this._dragAndDrop) {
             classString += " jqtree-dnd";
         }
 
@@ -318,14 +311,14 @@ export default class ElementsRenderer {
         return ul;
     }
 
-    private getButtonClasses(node: Node): string {
+    private _getButtonClasses(node: Node): string {
         const classes = ["jqtree-toggler", "jqtree_common"];
 
         if (!node.is_open) {
             classes.push("jqtree-closed");
         }
 
-        if (this.buttonLeft) {
+        if (this._buttonLeft) {
             classes.push("jqtree-toggler-left");
         } else {
             classes.push("jqtree-toggler-right");
@@ -334,7 +327,7 @@ export default class ElementsRenderer {
         return classes.join(" ");
     }
 
-    private getFolderClasses(node: Node, isSelected: boolean): string {
+    private _getFolderClasses(node: Node, isSelected: boolean): string {
         const classes = ["jqtree-folder"];
 
         if (!node.is_open) {
@@ -352,7 +345,7 @@ export default class ElementsRenderer {
         return classes.join(" ");
     }
 
-    private setTreeItemAriaAttributes(
+    private _setTreeItemAriaAttributes(
         element: HTMLElement,
         name: string,
         level: number,

package/src/jqtreeMethodTypes.ts

@@ -1,4 +1,4 @@
-import { Node } from "./node";
+import type { Node } from "./node";
 
 export type AddToSelection = (node: Node) => void;
 
@@ -37,4 +37,4 @@ export type SelectNode = (node: Node) => void;
 export type TriggerEvent = (
     eventName: string,
     values?: Record<string, unknown>,
-) => JQuery.Event;
+) => boolean;

package/src/jqtreeOptions.ts

@@ -1,4 +1,5 @@
-import { Node } from "./node";
+import type { AnimationSpeed } from "./animation";
+import type { Node } from "./node";
 
 export type DataFilter = (data: unknown) => NodeData[];
 
@@ -9,7 +10,7 @@ export type DragMethod = (node: Node, event: Event | Touch) => void;
 export type IconElement = HTMLElement | JQuery | string;
 
 export interface JQTreeOptions {
-    animationSpeed: JQuery.Duration;
+    animationSpeed: AnimationSpeed;
     autoEscape: boolean;
     autoOpen: boolean | number;
     buttonLeft: boolean;

package/src/keyHandler.ts

@@ -1,11 +1,11 @@
-import {
+import type {
     CloseNode,
     GetSelectedNode,
     IsFocusOnTree,
     OpenNode,
     SelectNode,
 } from "./jqtreeMethodTypes";
-import { Node } from "./node";
+import type { Node } from "./node";
 
 interface KeyHandlerParams {
     closeNode: CloseNode;
@@ -17,14 +17,14 @@ interface KeyHandlerParams {
 }
 
 export default class KeyHandler {
-    private closeNode: CloseNode;
-    private getSelectedNode: GetSelectedNode;
+    private _closeNode: CloseNode;
+    private _getSelectedNode: GetSelectedNode;
 
-    private isFocusOnTree: IsFocusOnTree;
+    private _isFocusOnTree: IsFocusOnTree;
 
-    private keyboardSupport: boolean;
-    private openNode: OpenNode;
-    private originalSelectNode: SelectNode;
+    private _keyboardSupport: boolean;
+    private _openNode: OpenNode;
+    private _originalSelectNode: SelectNode;
     constructor({
         closeNode,
         getSelectedNode,
@@ -33,44 +33,44 @@ export default class KeyHandler {
         openNode,
         selectNode,
     }: KeyHandlerParams) {
-        this.closeNode = closeNode;
-        this.getSelectedNode = getSelectedNode;
-        this.isFocusOnTree = isFocusOnTree;
-        this.keyboardSupport = keyboardSupport;
-        this.openNode = openNode;
-        this.originalSelectNode = selectNode;
+        this._closeNode = closeNode;
+        this._getSelectedNode = getSelectedNode;
+        this._isFocusOnTree = isFocusOnTree;
+        this._keyboardSupport = keyboardSupport;
+        this._openNode = openNode;
+        this._originalSelectNode = selectNode;
 
         if (keyboardSupport) {
-            document.addEventListener("keydown", this.handleKeyDown);
+            document.addEventListener("keydown", this._handleKeyDown);
         }
     }
 
     public deinit(): void {
-        if (this.keyboardSupport) {
-            document.removeEventListener("keydown", this.handleKeyDown);
+        if (this._keyboardSupport) {
+            document.removeEventListener("keydown", this._handleKeyDown);
         }
     }
 
     public moveDown(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getNextVisibleNode());
+        return this._selectNode(selectedNode.getNextVisibleNode());
     }
 
     public moveUp(selectedNode: Node): boolean {
-        return this.selectNode(selectedNode.getPreviousVisibleNode());
+        return this._selectNode(selectedNode.getPreviousVisibleNode());
     }
 
-    private canHandleKeyboard(): boolean {
-        return this.keyboardSupport && this.isFocusOnTree();
+    private _canHandleKeyboard(): boolean {
+        return this._keyboardSupport && this._isFocusOnTree();
     }
 
-    private handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this.canHandleKeyboard()) {
+    private _handleKeyDown = (e: KeyboardEvent): void => {
+        if (!this._canHandleKeyboard()) {
             return;
         }
 
         let isKeyHandled = false;
 
-        const selectedNode = this.getSelectedNode();
+        const selectedNode = this._getSelectedNode();
         if (selectedNode) {
             switch (e.key) {
                 case "ArrowDown":
@@ -78,11 +78,11 @@ export default class KeyHandler {
                     break;
 
                 case "ArrowLeft":
-                    isKeyHandled = this.moveLeft(selectedNode);
+                    isKeyHandled = this._moveLeft(selectedNode);
                     break;
 
                 case "ArrowRight":
-                    isKeyHandled = this.moveRight(selectedNode);
+                    isKeyHandled = this._moveRight(selectedNode);
                     break;
 
                 case "ArrowUp":
@@ -96,28 +96,28 @@ export default class KeyHandler {
         }
     };
 
-    private moveLeft(selectedNode: Node): boolean {
+    private _moveLeft(selectedNode: Node): boolean {
         if (selectedNode.isFolder() && selectedNode.is_open) {
             // Left on an open node closes the node
-            this.closeNode(selectedNode);
+            this._closeNode(selectedNode);
             return true;
         } else {
             // Left on a closed or end node moves focus to the node's parent
-            return this.selectNode(selectedNode.getParent());
+            return this._selectNode(selectedNode.getParent());
         }
     }
 
-    private moveRight(selectedNode: Node): boolean {
+    private _moveRight(selectedNode: Node): boolean {
         if (!selectedNode.isFolder()) {
             return false;
         } else {
             // folder node
             if (selectedNode.is_open) {
                 // Right moves to the first child of an open node
-                return this.selectNode(selectedNode.getNextVisibleNode());
+                return this._selectNode(selectedNode.getNextVisibleNode());
             } else {
                 // Right expands a closed node
-                this.openNode(selectedNode);
+                this._openNode(selectedNode);
                 return true;
             }
         }
@@ -127,11 +127,11 @@ export default class KeyHandler {
      * Don't do anything if the node is null.
      * Result: a different node was selected.
      */
-    private selectNode(node: Node | null): boolean {
+    private _selectNode(node: Node | null): boolean {
         if (!node) {
             return false;
         } else {
-            this.originalSelectNode(node);
+            this._originalSelectNode(node);
 
             return true;
         }