jqtree 1.8.7 → 1.8.8

package/bower.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.8.7",
+    "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/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);
     }
@@ -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.7";
+const version = "1.8.8";
 
 export default version;

package/tree.jquery.debug.js

@@ -1,5 +1,5 @@
 /*
-JqTree 1.8.7
+JqTree 1.8.8
 
 Copyright 2024 Marco Braak
 
@@ -902,14 +902,14 @@ var jqtree = (function (exports) {
             case "ArrowDown":
               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;
           }
         }
@@ -978,8 +978,8 @@ var jqtree = (function (exports) {
         }
       }
       deinit() {
-        if (this.handleKeyDownHandler) {
-          document.removeEventListener("keydown", this.handleKeyDownHandler);
+        if (this.keyboardSupport) {
+          document.removeEventListener("keydown", this.handleKeyDown);
         }
       }
       moveDown(selectedNode) {
@@ -1863,14 +1863,14 @@ var jqtree = (function (exports) {
     class NodeElement {
       constructor(_ref) {
         let {
-          $treeElement,
           getScrollLeft,
           node,
-          tabIndex
+          tabIndex,
+          treeElement
         } = _ref;
         this.getScrollLeft = getScrollLeft;
         this.tabIndex = tabIndex;
-        this.$treeElement = $treeElement;
+        this.treeElement = treeElement;
         this.init(node);
       }
       getTitleSpan() {
@@ -1899,14 +1899,9 @@ var jqtree = (function (exports) {
       init(node) {
         this.node = node;
         if (!node.element) {
-          const element = this.$treeElement.get(0);
-          if (element) {
-            node.element = element;
-          }
-        }
-        if (node.element) {
-          this.element = node.element;
+          node.element = this.treeElement;
         }
+        this.element = node.element;
       }
       select(mustSetFocus) {
         this.element.classList.add("jqtree-selected");
@@ -1927,19 +1922,19 @@ var jqtree = (function (exports) {
     class FolderElement extends NodeElement {
       constructor(_ref) {
         let {
-          $treeElement,
           closedIconElement,
           getScrollLeft,
           node,
           openedIconElement,
           tabIndex,
+          treeElement,
           triggerEvent
         } = _ref;
         super({
-          $treeElement,
           getScrollLeft,
           node,
-          tabIndex
+          tabIndex,
+          treeElement
         });
         this.closedIconElement = closedIconElement;
         this.openedIconElement = openedIconElement;
@@ -1951,9 +1946,7 @@ var jqtree = (function (exports) {
       getButton() {
         return this.element.querySelector(":scope > .jqtree-element > a.jqtree-toggler");
       }
-      close() {
-        let slide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-        let animationSpeed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "fast";
+      close(slide, animationSpeed) {
         if (!this.node.is_open) {
           return;
         }
@@ -1981,9 +1974,7 @@ var jqtree = (function (exports) {
           doClose();
         }
       }
-      open(onFinished) {
-        let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-        let animationSpeed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "fast";
+      open(onFinished, slide, animationSpeed) {
         if (this.node.is_open) {
           return;
         }
@@ -2051,10 +2042,8 @@ var jqtree = (function (exports) {
       loadFromStorage() {
         if (this.onGetStateFromStorage) {
           return this.onGetStateFromStorage();
-        } else if (this.supportsLocalStorage()) {
-          return localStorage.getItem(this.getKeyName());
         } else {
-          return null;
+          return localStorage.getItem(this.getKeyName());
         }
       }
       openInitialNodes(nodeIds) {
@@ -2098,23 +2087,6 @@ var jqtree = (function (exports) {
         }
         return selectCount !== 0;
       }
-      supportsLocalStorage() {
-        const testSupport = () => {
-          // 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;
-      }
       getNodeIdToBeSelected() {
         const state = this.getStateFromStorage();
         if (state?.selected_node) {
@@ -2160,7 +2132,7 @@ var jqtree = (function (exports) {
         const state = JSON.stringify(this.getState());
         if (this.onSetStateFromStorage) {
           this.onSetStateFromStorage(state);
-        } else if (this.supportsLocalStorage()) {
+        } else {
           localStorage.setItem(this.getKeyName(), state);
         }
       }
@@ -2168,7 +2140,7 @@ var jqtree = (function (exports) {
       /*
       Set initial state
       Don't handle nodes that are loaded on demand
-       result: must load on demand
+       result: must load on demand (boolean)
       */
       setInitialState(state) {
         let mustLoadOnDemand = false;
@@ -2575,14 +2547,12 @@ var jqtree = (function (exports) {
           }
         } 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);
-              }
+          this.selectedNodes.forEach(id => {
+            const node = this.getNodeById(id);
+            if (node && parent.isParentOf(node)) {
+              selectedNodes.push(node);
             }
-          }
+          });
           return selectedNodes;
         }
       }
@@ -2718,7 +2688,7 @@ var jqtree = (function (exports) {
       }
     }
 
-    const version = "1.8.7";
+    const version = "1.8.8";
 
     const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
     const PARAM_IS_EMPTY = "Parameter is empty: ";
@@ -2919,27 +2889,27 @@ var jqtree = (function (exports) {
         const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
         const openedIconElement = this.renderer.openedIconElement;
         const tabIndex = this.options.tabIndex;
-        const $treeElement = this.element;
+        const treeElement = this.element.get(0);
         const triggerEvent = this.triggerEvent.bind(this);
         return new FolderElement({
-          $treeElement,
           closedIconElement,
           getScrollLeft,
           node,
           openedIconElement,
           tabIndex,
+          treeElement,
           triggerEvent
         });
       }
       createNodeElement(node) {
         const getScrollLeft = this.scrollHandler.getScrollLeft.bind(this.scrollHandler);
         const tabIndex = this.options.tabIndex;
-        const $treeElement = this.element;
+        const treeElement = this.element.get(0);
         return new NodeElement({
-          $treeElement,
           getScrollLeft,
           node,
-          tabIndex
+          tabIndex,
+          treeElement
         });
       }
       deselectCurrentNode() {
@@ -3217,6 +3187,9 @@ var jqtree = (function (exports) {
         let slide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
         let onFinished = arguments.length > 2 ? arguments[2] : undefined;
         const doOpenNode = (_node, _slide, _onFinished) => {
+          if (!node.children.length) {
+            return;
+          }
           const folderElement = this.createFolderElement(_node);
           folderElement.open(_onFinished, _slide, this.options.animationSpeed);
         };