jqtree 1.9.0 → 2.0.0

package/lib/tree.jquery.js

@@ -0,0 +1,394 @@
+import TreeElement from "tree-element";
+import triggerJQueryEvent from "./triggerJQueryEvent";
+import __version__ from "./version";
+const NODE_PARAM_IS_EMPTY = "Node parameter is empty";
+const PARAM_IS_EMPTY = "Parameter is empty: ";
+export class JqTreeWidget {
+  _element;
+  _inputOptions;
+  _treeElement;
+  constructor(el, options) {
+    this._element = jQuery(el);
+    this._inputOptions = options;
+  }
+  addNodeAfter(newNodeInfo, existingNode) {
+    return this._treeElement.addNodeAfter(newNodeInfo, existingNode);
+  }
+  addNodeBefore(newNodeInfo, existingNode) {
+    if (!existingNode) {
+      throw Error(PARAM_IS_EMPTY + "existingNode");
+    }
+    return this._treeElement.addNodeBefore(newNodeInfo, existingNode);
+  }
+  addParentNode(newNodeInfo, existingNode) {
+    if (!existingNode) {
+      throw Error(PARAM_IS_EMPTY + "existingNode");
+    }
+    return this._treeElement.addParentNode(newNodeInfo, existingNode);
+  }
+  addToSelection(node, mustSetFocus) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    this._treeElement.addToSelection(node, mustSetFocus);
+    return this._element;
+  }
+  appendNode(newNodeInfo, parentNodeParam) {
+    const parentNode = parentNodeParam ?? this._treeElement.tree;
+    return this._treeElement.appendNode(newNodeInfo, parentNode);
+  }
+  closeNode(node, slideParam) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    this._treeElement.closeNode(node, slideParam ?? undefined);
+    return this._element;
+  }
+  deinit() {
+    this._element.off();
+    this._treeElement.deinit();
+  }
+  destroy() {
+    this.deinit();
+  }
+  getNodeByCallback(callback) {
+    return this._treeElement.getNodeByCallback(callback);
+  }
+  getNodeByHtmlElement(inputElement) {
+    const element = inputElement instanceof HTMLElement ? inputElement : inputElement.get(0);
+    if (!element) {
+      return null;
+    }
+    return this._treeElement.getNode(element);
+  }
+  getNodeById(nodeId) {
+    return this._treeElement.getNodeById(nodeId);
+  }
+  getNodeByName(name) {
+    return this._treeElement.getNodeByName(name);
+  }
+  getNodeByNameMustExist(name) {
+    return this._treeElement.getNodeByNameMustExist(name);
+  }
+  getNodesByProperty(key, value) {
+    return this._treeElement.getNodesByProperty(key, value);
+  }
+  getSelectedNode() {
+    return this._treeElement.getSelectedNode();
+  }
+  getSelectedNodes() {
+    return this._treeElement.getSelectedNodes();
+  }
+  getState() {
+    return this._treeElement.getState();
+  }
+  getStateFromStorage() {
+    return this._treeElement.getStateFromStorage();
+  }
+  getTree() {
+    return this._treeElement.getTree();
+  }
+  getVersion() {
+    return __version__;
+  }
+  init() {
+    const htmlElement = this._element.get(0);
+    this._element.on("tree.loading_data", this._handleLoadingDataEvent.bind(this));
+    this._element.on("tree.load_failed", this._handleLoadFailedEvent.bind(this));
+    const options = this._transformInputOptions();
+    const treeElement = new TreeElement({
+      ...options,
+      classPrefix: "jqtree",
+      commonClassName: "jqtree_common",
+      htmlElement,
+      overrideTriggerEventProvider: triggerJQueryEvent,
+      treeClassName: "jqtree-tree"
+    });
+    this._treeElement = treeElement;
+  }
+  isDragging() {
+    return this._treeElement.isDragging();
+  }
+  isNodeSelected(node) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    return this._treeElement.isNodeSelected(node);
+  }
+  loadData(data, parentNode) {
+    this._treeElement.loadData(data, parentNode);
+    return this._element;
+  }
+
+  /*
+  signatures:
+  - loadDataFromUrl(url, parent_node=null, on_finished=null)
+      loadDataFromUrl('/my_data');
+      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);
+      loadDataFromUrl(null, function() { console.log('finished'); });
+      loadDataFromUrl(node1, function() { console.log('finished'); });
+  */
+  loadDataFromUrl(param1, param2, param3) {
+    let parentNode;
+    let onFinishedLoading;
+    let url;
+
+    // first parameter is url
+    if (typeof param1 === "string") {
+      url = param1;
+      parentNode = param2;
+      onFinishedLoading = param3;
+    } else {
+      // first parameter is not url
+      parentNode = param1;
+      onFinishedLoading = param2;
+    }
+    this._treeElement.loadDataFromUrl(url, parentNode).then(() => {
+      if (onFinishedLoading) {
+        onFinishedLoading();
+      }
+    }).catch(error => {
+      throw error;
+    });
+    return this._element;
+  }
+  moveDown() {
+    this._treeElement.moveDown();
+    return this._element;
+  }
+  moveNode(node, targetNode, position) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    if (!targetNode) {
+      throw Error(PARAM_IS_EMPTY + "targetNode");
+    }
+    if (!position) {
+      throw Error(PARAM_IS_EMPTY + "position");
+    }
+    this._treeElement.moveNode(node, targetNode, position);
+    return this._element;
+  }
+  moveUp() {
+    this._treeElement.moveUp();
+    return this._element;
+  }
+  openNode(node, param1, param2) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    let onFinished = null;
+    let slide;
+    if (typeof param1 === "function") {
+      onFinished = param1;
+      slide = param2;
+    } else {
+      slide = param1;
+    }
+    void this._treeElement.openNode(node, slide).then(() => {
+      if (onFinished) {
+        onFinished(node);
+      }
+    });
+    return this._element;
+  }
+  prependNode(newNodeInfo, parentNodeParam) {
+    const parentNode = parentNodeParam ?? this._treeElement.tree;
+    return this._treeElement.prependNode(newNodeInfo, parentNode);
+  }
+  refresh() {
+    this._treeElement.refresh();
+    return this._element;
+  }
+  reload(onFinished) {
+    this._treeElement.loadDataFromUrl(undefined, undefined).then(() => {
+      if (onFinished) {
+        onFinished();
+      }
+    }).catch(error => {
+      throw error;
+    });
+    return this._element;
+  }
+  removeFromSelection(node) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    this._treeElement.removeFromSelection(node);
+    return this._element;
+  }
+  removeNode(node) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    if (!node.parent) {
+      throw Error("Node has no parent");
+    }
+    this._treeElement.removeNode(node);
+    return this._element;
+  }
+  scrollToNode(node) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    this._treeElement.scrollToNode(node);
+    return this._element;
+  }
+  selectNode(node, optionsParam) {
+    this._treeElement.selectNode(node, optionsParam);
+    return this._element;
+  }
+  setOption(option, value) {
+    this._treeElement.setOption(option, value);
+    return this._element;
+  }
+  setState(state) {
+    if (state) {
+      this._treeElement.setState(state);
+    }
+    return this._element;
+  }
+  toggle(node, slideParam = null) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    this._treeElement.toggle(node, slideParam);
+    return this._element;
+  }
+  toJson() {
+    return this._treeElement.toJson();
+  }
+  updateNode(node, data) {
+    if (!node) {
+      throw Error(NODE_PARAM_IS_EMPTY);
+    }
+    if (!data) {
+      return this._element;
+    }
+    this._treeElement.updateNode(node, data);
+    return this._element;
+  }
+  _handleLoadFailedEvent(e) {
+    const jqTreeOnLoadFailed = this._inputOptions.onLoadFailed;
+    if (jqTreeOnLoadFailed) {
+      const {
+        response
+      } = e;
+      jqTreeOnLoadFailed(response);
+    }
+  }
+  _handleLoadingDataEvent(e) {
+    const jqTreeOnLoading = this._inputOptions.onLoading;
+    if (jqTreeOnLoading) {
+      const {
+        $el,
+        isLoading,
+        node
+      } = e;
+      jqTreeOnLoading(isLoading, node ?? undefined, $el);
+    }
+  }
+  _transformInputOptions() {
+    function convertToIconElement(jqtreeIconElement) {
+      if (jqtreeIconElement instanceof jQuery) {
+        return jqtreeIconElement.get(0);
+      } else {
+        return jqtreeIconElement;
+      }
+    }
+    const closedIcon = convertToIconElement(this._inputOptions.closedIcon);
+    const openedIcon = convertToIconElement(this._inputOptions.openedIcon);
+    let onCreateLi = undefined;
+    const jqTreeOnCreateLi = this._inputOptions.onCreateLi;
+    if (jqTreeOnCreateLi) {
+      onCreateLi = (node, el, isSelected) => {
+        jqTreeOnCreateLi(node, jQuery(el), isSelected);
+      };
+    }
+    let onIsMoveHandle = undefined;
+    const jqTreeOnIsMoveHandle = this._inputOptions.onIsMoveHandle;
+    if (jqTreeOnIsMoveHandle) {
+      onIsMoveHandle = el => jqTreeOnIsMoveHandle(jQuery(el));
+    }
+    return {
+      ...this._inputOptions,
+      closedIcon,
+      onCreateLi,
+      onIsMoveHandle,
+      openedIcon
+    };
+  }
+}
+const register = () => {
+  const getWidgetData = (el, dataKey) => {
+    const widget = jQuery.data(el, dataKey);
+    if (widget && widget instanceof JqTreeWidget) {
+      return widget;
+    } else {
+      return null;
+    }
+  };
+  const createWidget = ($el, options) => {
+    for (const el of $el.get()) {
+      const existingWidget = getWidgetData(el, "jqtree");
+      if (!existingWidget) {
+        const widget = new JqTreeWidget(el, options ?? {});
+        if (!jQuery.data(el, "jqtree")) {
+          jQuery.data(el, "jqtree", widget);
+        }
+
+        // Call init after setting data, so we can call methods
+        widget.init();
+      }
+    }
+    return $el;
+  };
+  const destroyWidget = $el => {
+    for (const el of $el.get()) {
+      const widget = getWidgetData(el, "jqtree");
+      if (widget) {
+        widget.destroy();
+      }
+      jQuery.removeData(el, "jqtree");
+    }
+  };
+  const callFunction = ($el, functionName, args) => {
+    let result = null;
+    for (const el of $el.get()) {
+      const widget = jQuery.data(el, "jqtree");
+      if (widget && widget instanceof JqTreeWidget) {
+        const widgetFunction = widget[functionName];
+        if (widgetFunction && typeof widgetFunction === "function") {
+          result = widgetFunction.apply(widget, args);
+        }
+      }
+    }
+    return result;
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  jQuery.fn.tree = function (argument1, ...args) {
+    if (!argument1) {
+      return createWidget(this, null);
+    } else if (typeof argument1 === "object") {
+      const options = argument1;
+      return createWidget(this, options);
+    } else if (typeof argument1 === "string" && argument1[0] !== "_") {
+      const functionName = argument1;
+      if (argument1 === "destroy") {
+        destroyWidget(this);
+        return undefined;
+      } else {
+        return callFunction(this, functionName, args);
+      }
+    } else {
+      return undefined;
+    }
+  };
+};
+register();

package/lib/triggerJQueryEvent.js

@@ -0,0 +1,68 @@
+// Attributes of tree-element events that have a different name in the jqTree api.
+// Attributes that are not listed here are passed on unchanged; e.g. 'node' and
+// 'isLoading'.
+const attributeNames = {
+  deselectedNode: "deselected_node",
+  moveInfo: "move_info",
+  originalEvent: "click_event",
+  parentNode: "parent_node",
+  treeData: "tree_data"
+};
+
+// Attributes of the move info of the tree.move event.
+const moveInfoAttributeNames = {
+  doMove: "do_move",
+  movedNode: "moved_node",
+  originalEvent: "original_event",
+  previousParent: "previous_parent",
+  targetNode: "target_node"
+};
+const convertAttributes = (values, names) => Object.fromEntries(Object.entries(values).map(([key, value]) => [names[key] ?? key, value]));
+const convertValues = values => {
+  const result = convertAttributes(values, attributeNames);
+  if (result.move_info) {
+    result.move_info = convertAttributes(result.move_info, moveInfoAttributeNames);
+  }
+  return result;
+};
+const triggerJQueryEvent = (element, eventName, inputValues) => {
+  const values = inputValues ? convertValues(inputValues) : {};
+  if (values.element) {
+    values.$el = jQuery(values.element);
+    delete values.element;
+  }
+  let event;
+  switch (eventName) {
+    case "tree.deselect":
+      event = jQuery.Event("tree.select", {
+        node: null,
+        previous_node: values.node
+      });
+      break;
+    case "tree.loaded_data":
+      event = jQuery.Event("tree.loading_data", {
+        ...values,
+        isLoading: false,
+        node: values.node ?? null
+      });
+      break;
+    case "tree.loading_data":
+      event = jQuery.Event("tree.loading_data", {
+        ...values,
+        isLoading: true,
+        node: values.node ?? null
+      });
+      break;
+    case "tree.set_data":
+      values.parent_node = values.node;
+      delete values.node;
+      event = jQuery.Event("tree.load_data", values);
+      break;
+    default:
+      event = jQuery.Event(eventName, values);
+      break;
+  }
+  jQuery(element).trigger(event);
+  return !event.isDefaultPrevented();
+};
+export default triggerJQueryEvent;

package/lib/typings.d.js

@@ -0,0 +1 @@
+/// <reference path="./tree.jquery.d.ts" />

package/lib/version.js

@@ -0,0 +1,2 @@
+const version = "2.0.0";
+export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.9.0",
+    "version": "2.0.0",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -16,68 +16,73 @@
     },
     "scripts": {
         "ci": "pnpm lint && pnpm tsc && pnpm test",
-        "vitest": "vitest run --coverage --config test/vitest.config.ts",
-        "vitest-watch": "vitest --config test/vitest.config.ts",
+        "vitest": "vitest run --coverage --config test/vitest.config.mts",
+        "vitest-watch": "vitest --config test/vitest.config.mts",
         "lint": "eslint src playwright test",
         "production": "./config/production",
         "devserver": "SERVE=true rollup --config config/rollup.config.mjs --watch",
         "devserver-with-coverage": "COVERAGE=true SERVE=true rollup --config config/rollup.config.mjs",
         "build-with-coverage": "COVERAGE=true rollup --config config/rollup.config.mjs",
+        "bump-version": "./config/bump-version",
         "prettier": "prettier src/*.ts --write --tab-width 4",
         "tsc": "tsc --noEmit --project tsconfig.json",
         "playwright": "pnpm build-with-coverage && playwright test --config playwright/playwright.config.js",
         "test": "pnpm vitest && pnpm playwright"
     },
+    "dependencies": {
+        "tree-element": "^0.1.0"
+    },
     "peerDependencies": {
         "jquery": ">= 3"
     },
     "devDependencies": {
-        "@babel/cli": "^8.0.4",
-        "@babel/core": "^8.0.1",
-        "@babel/preset-env": "^8.0.2",
+        "@babel/cli": "^8.0.5",
+        "@babel/core": "^8.0.5",
+        "@babel/preset-env": "^8.0.5",
         "@babel/preset-typescript": "^8.0.1",
-        "@cspell/eslint-plugin": "^10.0.1",
-        "@eslint/js": "^9.39.5",
-        "@playwright/test": "^1.62.0",
+        "@cspell/eslint-plugin": "^10.3.0",
+        "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.63.0",
         "@rollup/plugin-babel": "^7.1.0",
         "@rollup/plugin-node-resolve": "^16.0.3",
         "@rollup/plugin-terser": "^1.0.0",
         "@testing-library/dom": "^10.4.1",
-        "@testing-library/jest-dom": "^7.0.0",
-        "@testing-library/user-event": "^14.6.1",
+        "@testing-library/jest-dom": "^7.0.1",
+        "@testing-library/user-event": "^14.6.7",
         "@types/debug": "^4.1.13",
         "@types/jquery": "^4.0.1",
-        "@types/node": "^26.1.1",
-        "@vitest/coverage-istanbul": "^4.1.10",
-        "@vitest/eslint-plugin": "^1.6.24",
-        "autoprefixer": "^10.5.4",
-        "axe-core": "^4.12.1",
+        "@types/node": "^26.5.1",
+        "@vitest/coverage-istanbul": "^4.1.11",
+        "@vitest/eslint-plugin": "^1.6.27",
+        "autoprefixer": "^10.5.6",
+        "axe-core": "^4.13.0",
         "babel-plugin-istanbul": "^8.0.0",
-        "eslint": "^9.39.5",
+        "eslint": "^10.10.0",
         "eslint-import-resolver-typescript": "^4.4.5",
         "eslint-plugin-import-x": "^4.17.1",
-        "eslint-plugin-jest-dom": "^5.5.0",
-        "eslint-plugin-jest-extended": "^3.0.1",
-        "eslint-plugin-perfectionist": "^5.10.0",
-        "eslint-plugin-playwright": "^2.10.5",
+        "eslint-plugin-jest-dom": "^5.10.1",
+        "eslint-plugin-jest-extended": "github:mbraak/eslint-plugin-jest-extended#modernize",
+        "eslint-plugin-perfectionist": "^5.11.0",
+        "eslint-plugin-playwright": "^2.11.0",
         "eslint-plugin-testing-library": "^7.16.2",
         "jest-extended": "^7.0.0",
-        "jsdom": "^29.1.1",
+        "jsdom": "^30.0.1",
         "jsdom-testing-mocks": "^1.16.0",
         "jsonfile": "^6.2.1",
         "lodash": "^4.18.1",
         "msw": "^2.15.0",
-        "postcss": "^8.5.23",
-        "postcss-cli": "^11.0.1",
-        "postcss-import": "^16.1.1",
+        "postcss": "^8.5.28",
+        "postcss-cli": "^12.0.0",
+        "postcss-import": "^17.0.0",
         "postcss-load-config": "^6.0.1",
-        "postcss-nested": "^7.0.2",
+        "postcss-nested": "^8.0.1",
         "prettier": "^3.9.6",
-        "rollup": "^4.62.2",
+        "rollup": "^4.63.2",
         "rollup-plugin-serve": "^3.0.0",
+        "rollup-plugin-tsconfig-paths": "^1.5.2",
         "tslib": "^2.8.1",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.65.0",
-        "vitest": "^4.1.10"
+        "typescript-eslint": "^8.70.0",
+        "vitest": "^4.1.11"
     }
 }

package/pnpm-workspace.yaml

@@ -1,4 +1,4 @@
 allowBuilds:
-  esbuild: true
-  msw: true
-  unrs-resolver: true
+    esbuild: true
+    msw: true
+    unrs-resolver: true

package/src/jqtreeOptions.ts

@@ -1,71 +1,29 @@
-import type { AnimationSpeed } from "./animation";
-import type { Node } from "./node";
+import type { Node, TreeElementOptions } from "tree-element";
 
-export type DataFilter = (data: unknown) => NodeData[];
+export type JQTreeIconElement = HTMLElement | JQuery | string;
 
-export type DataUrl = DataUrlFunction | JQuery.AjaxSettings | string;
+export type JQTreeOnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
 
-export type DragMethod = (node: Node, event: Event | Touch) => void;
+export type JQTreeOnIsMoveHandle = (el: JQuery) => boolean;
 
-export type IconElement = HTMLElement | JQuery | string;
+export type JQTreeOnLoadFailed = (el: Response) => void;
 
-export interface JQTreeOptions {
-    animationSpeed: AnimationSpeed;
-    autoEscape: boolean;
-    autoOpen: boolean | number;
-    buttonLeft: boolean;
-    closedIcon?: IconElement;
-    data?: NodeData[];
-    dataFilter?: DataFilter;
-    dataUrl?: DataUrl;
-    dragAndDrop: boolean;
-    keyboardSupport: boolean;
-    nodeClass: typeof Node;
-    onCanMove?: OnCanMove;
-    onCanMoveTo?: OnCanMoveTo;
-    onCanSelectNode?: (node: Node) => boolean;
-    onCreateLi?: OnCreateLi;
-    onDragMove?: DragMethod;
-    onDragStop?: DragMethod;
-    onGetStateFromStorage?: OnGetStateFromStorage;
-    onIsMoveHandle?: OnIsMoveHandle;
-    onLoadFailed?: OnLoadFailed;
-    onLoading?: OnLoading;
-    onSetStateFromStorage?: OnSetStateFromStorage;
-    openedIcon?: IconElement;
-    openFolderDelay: false | number;
-    rtl?: boolean;
-    saveState: boolean | string;
-    selectable: boolean;
-    showEmptyFolder: boolean;
-    slide: boolean;
-    startDndDelay?: number;
-    tabIndex?: number;
-    useContextMenu: boolean;
-}
-
-export type OnCanMove = ((node: Node) => boolean) | undefined;
-
-export type OnCanMoveTo = (
-    node: Node,
-    targetNode: Node,
-    positionName: string,
-) => boolean;
-
-export type OnCreateLi = (node: Node, el: JQuery, isSelected: boolean) => void;
-
-export type OnGetStateFromStorage = (() => string) | undefined;
-
-export type OnIsMoveHandle = (el: JQuery) => boolean;
-
-export type OnLoadFailed = (response: JQuery.jqXHR) => void;
-
-export type OnLoading = (
+export type JQTreeOnLoading = (
     isLoading: boolean,
-    node: Node | null,
+    node: Node | undefined,
     $el: JQuery,
 ) => void;
 
-export type OnSetStateFromStorage = ((data: string) => void) | undefined;
-
-type DataUrlFunction = (node: Node | null) => JQuery.AjaxSettings;
+/* The class name options are set by jqTree itself, so they are not part of the
+ * jqTree options.
+ */
+export type JQTreeOptions = Modify<Omit<TreeElementOptions, "classPrefix" | "commonClassName" | "treeClassName">, {
+    closedIcon?: JQTreeIconElement;
+    onCreateLi?: JQTreeOnCreateLi;
+    onIsMoveHandle?: JQTreeOnIsMoveHandle;
+    onLoadFailed?: JQTreeOnLoadFailed;
+    onLoading?: JQTreeOnLoading;
+    openedIcon?: JQTreeIconElement;
+}>
+
+type Modify<T, R> = Omit<T, keyof R> & R;