jqtree 1.8.6 → 1.8.8

package/bower.json

@@ -1,6 +1,6 @@
 {
     "name": "jqTree",
-    "version": "1.8.6",
+    "version": "1.8.8",
     "main": [
         "jqtree.css",
         "jqtree-circle.png",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.6",
+    "version": "1.8.8",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -35,51 +35,50 @@
         "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.25.7",
-        "@babel/core": "^7.25.7",
-        "@babel/preset-env": "^7.25.7",
-        "@babel/preset-typescript": "^7.25.7",
-        "@playwright/test": "^1.47.2",
+        "@babel/cli": "^7.25.9",
+        "@babel/core": "^7.26.0",
+        "@babel/preset-env": "^7.26.0",
+        "@babel/preset-typescript": "^7.26.0",
+        "@playwright/test": "^1.48.2",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-terser": "^0.4.4",
         "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/user-event": "^14.5.2",
         "@types/debug": "^4.1.12",
-        "@types/jest": "^29.5.13",
+        "@types/jest": "^29.5.14",
         "@types/jest-axe": "^3.5.9",
-        "@types/jquery": "^3.5.31",
-        "@types/node": "^22.7.4",
+        "@types/jquery": "^3.5.32",
+        "@types/node": "^22.9.0",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^7.0.0",
-        "eslint": "^9",
+        "eslint": "^9.14.0",
         "eslint-plugin-import": "^2.31.0",
-        "eslint-plugin-jest": "^28.8.3",
+        "eslint-plugin-jest": "^28.9.0",
         "eslint-plugin-jest-dom": "^5.4.0",
-        "eslint-plugin-perfectionist": "^3.8.0",
-        "eslint-plugin-playwright": "^1.6.2",
+        "eslint-plugin-perfectionist": "^3.9.1",
+        "eslint-plugin-playwright": "^2.0.1",
         "givens": "^1.3.9",
         "graphql": "^16.9.0",
         "jest": "^29.7.0",
         "jest-axe": "^9.0.0",
         "jest-extended": "^4.0.2",
-        "jest-fixed-jsdom": "^0.0.4",
+        "jest-fixed-jsdom": "^0.0.8",
         "jsonfile": "^6.1.0",
         "lodash": "^4.17.21",
-        "msw": "^2.4.9",
+        "msw": "^2.6.2",
         "postcss": "^8.4.47",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.1.0",
         "postcss-load-config": "^6.0.1",
-        "postcss-nested": "^6.2.0",
+        "postcss-nested": "^7.0.2",
         "prettier": "^3.3.3",
-        "rollup": "^4.24.0",
+        "rollup": "^4.24.4",
         "rollup-plugin-serve": "^3.0.0",
-        "tslib": "^2.7.0",
-        "typescript": "^5.6.2",
-        "typescript-eslint": "^8.8.0",
-        "undici": "^5.28.4"
+        "tslib": "^2.8.1",
+        "typescript": "^5.6.3",
+        "typescript-eslint": "^8.13.0"
     }
 }

package/src/keyHandler.ts

@@ -7,8 +7,6 @@ import {
 } from "./jqtreeMethodTypes";
 import { Node } from "./node";
 
-type KeyboardEventHandler = (event: KeyboardEvent) => boolean;
-
 interface KeyHandlerParams {
     closeNode: CloseNode;
     getSelectedNode: GetSelectedNode;
@@ -36,16 +34,16 @@ export default class KeyHandler {
                     isKeyHandled = this.moveDown(selectedNode);
                     break;
 
-                case "ArrowUp":
-                    isKeyHandled = this.moveUp(selectedNode);
+                case "ArrowLeft":
+                    isKeyHandled = this.moveLeft(selectedNode);
                     break;
 
                 case "ArrowRight":
                     isKeyHandled = this.moveRight(selectedNode);
                     break;
 
-                case "ArrowLeft":
-                    isKeyHandled = this.moveLeft(selectedNode);
+                case "ArrowUp":
+                    isKeyHandled = this.moveUp(selectedNode);
                     break;
             }
         }
@@ -55,7 +53,6 @@ export default class KeyHandler {
         }
     };
 
-    private handleKeyDownHandler?: KeyboardEventHandler;
     private isFocusOnTree: IsFocusOnTree;
     private keyboardSupport: boolean;
     private openNode: OpenNode;
@@ -127,8 +124,8 @@ export default class KeyHandler {
     }
 
     public deinit(): void {
-        if (this.handleKeyDownHandler) {
-            document.removeEventListener("keydown", this.handleKeyDownHandler);
+        if (this.keyboardSupport) {
+            document.removeEventListener("keydown", this.handleKeyDown);
         }
     }
 

package/src/nodeElement/folderElement.ts

@@ -14,19 +14,19 @@ class FolderElement extends NodeElement {
     private triggerEvent: TriggerEvent;
 
     constructor({
-        $treeElement,
         closedIconElement,
         getScrollLeft,
         node,
         openedIconElement,
         tabIndex,
+        treeElement,
         triggerEvent,
     }: FolderElementParams) {
         super({
-            $treeElement,
             getScrollLeft,
             node,
             tabIndex,
+            treeElement,
         });
 
         this.closedIconElement = closedIconElement;
@@ -44,10 +44,7 @@ class FolderElement extends NodeElement {
         ) as HTMLLinkElement;
     }
 
-    public close(
-        slide = true,
-        animationSpeed: JQuery.Duration | undefined = "fast",
-    ): void {
+    public close(slide: boolean, animationSpeed: JQuery.Duration): void {
         if (!this.node.is_open) {
             return;
         }
@@ -86,8 +83,8 @@ class FolderElement extends NodeElement {
 
     public open(
         onFinished: OnFinishOpenNode | undefined,
-        slide = true,
-        animationSpeed: JQuery.Duration = "fast",
+        slide: boolean,
+        animationSpeed: JQuery.Duration,
     ): void {
         if (this.node.is_open) {
             return;

package/src/nodeElement/ghostDropHint.ts

@@ -1,15 +1,34 @@
 import { DropHint } from "../dragAndDropHandler/types";
+import { Node } from "../node";
+import { Position } from "../position";
 
 class GhostDropHint implements DropHint {
     private element: HTMLElement;
     private ghost: HTMLElement;
+    private node: Node;
 
-    constructor(element: HTMLElement) {
+    constructor(node: Node, element: HTMLElement, position: Position) {
         this.element = element;
+        this.node = node;
         this.ghost = this.createGhostElement();
 
-        this.element.after(this.ghost);
-        this.ghost.classList.add("jqtree-inside");
+        switch (position) {
+            case Position.After:
+                this.moveAfter();
+                break;
+
+            case Position.Before:
+                this.moveBefore();
+                break;
+
+            case Position.Inside: {
+                if (node.isFolder() && node.is_open) {
+                    this.moveInsideOpenFolder();
+                } else {
+                    this.moveInside();
+                }
+            }
+        }
     }
 
     private createGhostElement() {
@@ -27,6 +46,27 @@ class GhostDropHint implements DropHint {
         return ghost;
     }
 
+    private moveAfter(): void {
+        this.element.after(this.ghost);
+    }
+
+    private moveBefore(): void {
+        this.element.before(this.ghost);
+    }
+
+    private moveInside(): void {
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
+    }
+
+    private moveInsideOpenFolder(): void {
+        const childElement = this.node.children[0]?.element;
+
+        if (childElement) {
+            childElement.before(this.ghost);
+        }
+    }
+
     public remove(): void {
         this.ghost.remove();
     }

package/src/nodeElement/index.ts

@@ -6,28 +6,28 @@ import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";
 
 export interface NodeElementParams {
-    $treeElement: JQuery;
     getScrollLeft: GetScrollLeft;
     node: Node;
     tabIndex?: number;
+    treeElement: HTMLElement;
 }
 
 class NodeElement {
-    private $treeElement: JQuery;
     private getScrollLeft: GetScrollLeft;
     private tabIndex?: number;
+    private treeElement: HTMLElement;
     public element: HTMLElement;
     public node: Node;
 
     constructor({
-        $treeElement,
         getScrollLeft,
         node,
         tabIndex,
+        treeElement,
     }: NodeElementParams) {
         this.getScrollLeft = getScrollLeft;
         this.tabIndex = tabIndex;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
 
         this.init(node);
     }
@@ -50,7 +50,7 @@ class NodeElement {
         if (this.mustShowBorderDropHint(position)) {
             return new BorderDropHint(this.element, this.getScrollLeft());
         } else {
-            return new GhostDropHint(this.element);
+            return new GhostDropHint(this.node, this.element, position);
         }
     }
 
@@ -68,16 +68,10 @@ class NodeElement {
         this.node = node;
 
         if (!node.element) {
-            const element = this.$treeElement.get(0);
-
-            if (element) {
-                node.element = element;
-            }
+            node.element = this.treeElement;
         }
 
-        if (node.element) {
-            this.element = node.element;
-        }
+        this.element = node.element;
     }
 
     public select(mustSetFocus: boolean): void {

package/src/saveStateHandler.ts

@@ -30,7 +30,6 @@ interface SaveStateHandlerParams {
 }
 
 export default class SaveStateHandler {
-    private _supportsLocalStorage: boolean | null;
     private addToSelection: AddToSelection;
     private getNodeById: GetNodeById;
     private getSelectedNodes: GetSelectedNodes;
@@ -77,10 +76,8 @@ export default class SaveStateHandler {
     private loadFromStorage(): null | string {
         if (this.onGetStateFromStorage) {
             return this.onGetStateFromStorage();
-        } else if (this.supportsLocalStorage()) {
-            return localStorage.getItem(this.getKeyName());
         } else {
-            return null;
+            return localStorage.getItem(this.getKeyName());
         }
     }
 
@@ -138,27 +135,6 @@ export default class SaveStateHandler {
         return selectCount !== 0;
     }
 
-    private supportsLocalStorage(): boolean {
-        const testSupport = (): boolean => {
-            // Check if it's possible to store an item. Safari does not allow this in private browsing mode.
-            try {
-                const key = "_storage_test";
-                sessionStorage.setItem(key, "value");
-                sessionStorage.removeItem(key);
-            } catch {
-                return false;
-            }
-
-            return true;
-        };
-
-        if (this._supportsLocalStorage == null) {
-            this._supportsLocalStorage = testSupport();
-        }
-
-        return this._supportsLocalStorage;
-    }
-
     public getNodeIdToBeSelected(): NodeId | null {
         const state = this.getStateFromStorage();
 
@@ -216,7 +192,7 @@ export default class SaveStateHandler {
 
         if (this.onSetStateFromStorage) {
             this.onSetStateFromStorage(state);
-        } else if (this.supportsLocalStorage()) {
+        } else {
             localStorage.setItem(this.getKeyName(), state);
         }
     }
@@ -225,7 +201,7 @@ export default class SaveStateHandler {
     Set initial state
     Don't handle nodes that are loaded on demand
 
-    result: must load on demand
+    result: must load on demand (boolean)
     */
     public setInitialState(state: SavedState): boolean {
         let mustLoadOnDemand = false;

package/src/selectNodeHandler.ts

@@ -64,18 +64,14 @@ export default class SelectNodeHandler {
                 return [];
             }
         } else {
-            const selectedNodes = [];
-
-            for (const id in this.selectedNodes) {
-                if (
-                    Object.prototype.hasOwnProperty.call(this.selectedNodes, id)
-                ) {
-                    const node = this.getNodeById(id);
-                    if (node && parent.isParentOf(node)) {
-                        selectedNodes.push(node);
-                    }
+            const selectedNodes: Node[] = [];
+
+            this.selectedNodes.forEach((id) => {
+                const node = this.getNodeById(id);
+                if (node && parent.isParentOf(node)) {
+                    selectedNodes.push(node);
                 }
-            }
+            });
 
             return selectedNodes;
         }

package/src/tree.jquery.ts

@@ -250,16 +250,16 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
         );
         const openedIconElement = this.renderer.openedIconElement;
         const tabIndex = this.options.tabIndex;
-        const $treeElement = this.element;
+        const treeElement = this.element.get(0) as HTMLElement;
         const triggerEvent = this.triggerEvent.bind(this);
 
         return new FolderElement({
-            $treeElement,
             closedIconElement,
             getScrollLeft,
             node,
             openedIconElement,
             tabIndex,
+            treeElement,
             triggerEvent,
         });
     }
@@ -269,13 +269,13 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             this.scrollHandler,
         );
         const tabIndex = this.options.tabIndex;
-        const $treeElement = this.element;
+        const treeElement = this.element.get(0) as HTMLElement;
 
         return new NodeElement({
-            $treeElement,
             getScrollLeft,
             node,
             tabIndex,
+            treeElement,
         });
     }
 
@@ -626,6 +626,10 @@ export class JqTreeWidget extends SimpleWidget<JQTreeOptions> {
             _slide: boolean,
             _onFinished?: OnFinishOpenNode,
         ): void => {
+            if (!node.children.length) {
+                return;
+            }
+
             const folderElement = this.createFolderElement(_node);
             folderElement.open(
                 _onFinished,

package/src/version.ts

@@ -1,3 +1,3 @@
-const version = "1.8.6";
+const version = "1.8.8";
 
 export default version;