jqtree 1.7.5 → 1.8.1

package/.eslintrc

@@ -6,8 +6,7 @@
         "plugin:@typescript-eslint/eslint-recommended",
         "plugin:@typescript-eslint/recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
-        "plugin:import/errors",
-        "plugin:import/warnings",
+        "plugin:import/recommended",
         "plugin:import/typescript"
     ],
     "rules": {
@@ -33,6 +32,17 @@
         ]
     },
     "parserOptions": {
-        "project": "./tsconfig.json",
+        "project": "./tsconfig.json"
+    },
+    "settings": {
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts"]
+        },
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true,
+                "project": "./tsconfig.json"
+            }
+        }
     }
 }

package/.github/workflows/ci.yml

@@ -8,25 +8,25 @@ jobs:
 
         steps:
             - name: Check out repository code
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                node-version: "20"
             - name: Install pnpm
               run: npm install -g pnpm
             - name: Get pnpm store directory
               id: pnpm-cache
               run: |
                 echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-            - uses: actions/cache@v3
+            - uses: actions/cache@v4
               name: Setup pnpm cache
               with:
                 path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
                 key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
                 restore-keys: |
                   ${{ runner.os }}-pnpm-store-
-            - uses: actions/cache@v3
+            - uses: actions/cache@v4
               name: Setup Playwright browsers cache
               with:
                 path: /home/runner/.cache/ms-playwright/
@@ -55,7 +55,7 @@ jobs:
               run: pnpm run playwright
             - name: Screenshots artifact
               if: always()
-              uses: actions/upload-artifact@v3
+              uses: actions/upload-artifact@v4
               with:
                 name: screenshots
                 path: src/playwright/playwright.test.ts-snapshots/

package/.github/workflows/codeql-analysis.yml

@@ -18,15 +18,15 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
 
             - name: Initialize CodeQL
-              uses: github/codeql-action/init@v2
+              uses: github/codeql-action/init@v3
               with:
                   languages: ${{ matrix.language }}
 
             - name: Autobuild
-              uses: github/codeql-action/autobuild@v2
+              uses: github/codeql-action/autobuild@v3
 
             - name: Perform CodeQL Analysis
-              uses: github/codeql-action/analyze@v2
+              uses: github/codeql-action/analyze@v3

package/.github/workflows/size.yml

@@ -7,11 +7,11 @@ jobs:
 
         steps:
             - name: Check out repository code
-              uses: actions/checkout@v3
+              uses: actions/checkout@v4
             - name: Setup node
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: "20"
             - name: Install pnpm
               run: npm install -g pnpm
             - name: Install packages

package/.github/workflows/static.yml

@@ -31,7 +31,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
       - name: Install pnpm
         run: npm install -g pnpm
       - name: Install ruby packages

package/bower.json

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

package/config/babel.config.json

@@ -4,7 +4,7 @@
         "test": {
             "presets": [
                 "@babel/preset-typescript",
-                ["@babel/preset-env", { "targets": { "node": "current" } }]
+                "@babel/preset-env"
             ]
         }
     }

package/config/jest.config.js

@@ -12,7 +12,11 @@ module.exports = {
         "givens/setup.js",
         "jest-extended/all",
     ],
+    setupFiles: ["<rootDir>/config/jest.polyfills.js"],
     testEnvironment: "jsdom",
+    testEnvironmentOptions: {
+        customExportConditions: [""],
+    },
     testRegex: "\\/src\\/test\\/.*\\.test\\.ts",
     transform: {
         "\\.tsx?$": ["babel-jest", { root: __dirname }],

package/config/jest.polyfills.js

@@ -0,0 +1,14 @@
+const { TextEncoder, TextDecoder } = require("node:util");
+
+Reflect.set(globalThis, "TextEncoder", TextEncoder);
+Reflect.set(globalThis, "TextDecoder", TextDecoder);
+
+const { Blob } = require("node:buffer");
+const { fetch, Request, Response, Headers, FormData } = require("undici");
+
+Reflect.set(globalThis, "fetch", fetch);
+Reflect.set(globalThis, "Blob", Blob);
+Reflect.set(globalThis, "Request", Request);
+Reflect.set(globalThis, "Response", Response);
+Reflect.set(globalThis, "Headers", Headers);
+Reflect.set(globalThis, "FormData", FormData);

package/config/production

@@ -1,3 +1,5 @@
+rm -rf ./lib &&
+mkdir lib &&
 rollup -c config/rollup.config.mjs &&
 DEBUG_BUILD=true rollup -c config/rollup.config.mjs &&
 babel src --config-file ./config/babel.config.json --out-dir lib --extensions .ts &&

package/devserver/devserver_scroll.js

@@ -0,0 +1,8 @@
+const $tree = $("#tree1");
+
+$tree.tree({
+    autoOpen: true,
+    data: ExampleData.exampleData,
+    dragAndDrop: true,
+    useContextMenu: false,
+});

package/devserver/test_index.html

@@ -6,6 +6,15 @@
         <script src="/bower_components/jquery/dist/jquery.min.js"></script>
         <script src="tree.jquery.js"></script>
         <script src="/example_data.js"></script>
+        <style>
+            .wide-tree {
+                font-size: 20px;
+            }
+
+            .wide-tree ul.jqtree-tree ul.jqtree_common {
+                margin-left: 128px;
+            }
+        </style>
     </head>
     <body>
         <div id="tree1"></div>

package/devserver/test_scroll.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>JqTree devserver</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="JqTree is a jQuery widget for displaying a tree structure in html"
+        />
+        <link rel="stylesheet" href="/jqtree.css" />
+        <style>
+          body {
+            font-size: 20px;
+          }
+          ul.jqtree-tree ul.jqtree_common {
+            margin-left: 128px;
+          }
+        </style>
+    </head>
+    <body>
+      <div id="tree1"></div>
+    </body>
+    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="/tree.jquery.js"></script>
+    <script src="/example_data.js"></script>
+    <script src="/devserver_scroll.js"></script>
+</html>

package/devserver/test_scroll_container.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>JqTree devserver</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta
+            name="description"
+            content="JqTree is a jQuery widget for displaying a tree structure in html"
+        />
+        <link rel="stylesheet" href="/jqtree.css" />
+        <style>
+          body {
+            font-size: 20px;
+          }
+          ul.jqtree-tree ul.jqtree_common {
+            margin-left: 128px;
+          }
+          #scroll-container {
+            height: 200px;
+            width: 400px;
+            overflow-y: scroll;
+            user-select: none;
+            background-color: #eee;
+            margin: 128px;
+            padding: 8px;
+          }
+        </style>
+    </head>
+    <body>
+      <div id="scroll-container">
+        <div id="tree1"></div>
+      </div>
+    </body>
+    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
+    <script src="/tree.jquery.js"></script>
+    <script src="/example_data.js"></script>
+    <script src="/devserver_scroll.js"></script>
+</html>

package/docs/.ruby-version

@@ -1 +1 @@
-3.2.2
+3.2.3

package/docs/_config.yml

@@ -118,7 +118,7 @@ defaults:
     values:
       layout: "example"
 
-jqtree_version: 1.7.5
+jqtree_version: 1.8.1
 
 # Build settings
 markdown: kramdown

package/docs/_entries/general/changelog.md

@@ -3,6 +3,17 @@ title: Changelog
 name: changelog
 ---
 
+#### 1.8.1 (march 16 2024)
+
+-   Issue #791: fix onCanMoveTo (thanks to Christophe Caron)
+
+#### 1.8.0 (november 26 2023)
+
+This release drops support for very old browsers (like IE 11).
+
+-   Issue #735: compile to es6. This decreases the file size to 49K (from 62K). This is the minified (not gzipped) version.
+-   Issue #766: open parent nodes in the addToSelection method (thanks to Tmgarcia)
+
 #### 1.7.5 (october 21 2023)
 
 -   Issue #734: fix autoscroll issue (thanks to WriterStat)

package/docs/_entries/multiple_selection/get-selected-nodes.md

@@ -1,6 +1,6 @@
 ---
 title: getSelectedNodes
-name: multiple-get-selected-nodes
+name: multiple-selection-get-selected-nodes
 ---
 
 Get the selected nodes. Return an array of nodes

package/docs/_entries/node/getnextnode.md

@@ -3,13 +3,10 @@ title: getNextNode
 name: node-functions-getnextnode
 ---
 
-Get the next node in the tree.
+Get the next node in the tree. This is the next sibling, if there is one. Or, if there is no next sibling, a node further down in the tree.
 
--   If the node has children, return the first child.
--   If the node is the last child, return the next sibling of the parent.
-
-Returns a node or null.
+-   Returns a node or null.
 
 {% highlight js %}
-var node = node.getNextNode();
+const nextNode = node.getNextNode();
 {% endhighlight %}

package/docs/_entries/node/getnextsibling.md

@@ -6,5 +6,5 @@ name: node-functions-getnextsibling
 Get the next sibling of this node. Returns a node or null.
 
 {% highlight js %}
-var node = node.getNextSibling();
+const nextSibling = node.getNextSibling();
 {% endhighlight %}

package/docs/_entries/node/getnextvisiblenode.md

@@ -1,12 +1,15 @@
 ---
-title: getPreviousNode
-name: node-functions-getpreviousnode
+title: getNextVisibleNode
+name: node-functions-getnextvisiblenode
 ---
 
-Return the previous node in the tree.
+Get the next visible node in the tree. Does the same as using the _down_ key.
 
-Returns a node or null.
+This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree that is visible.
+
+-   Returns a node or null.
+-   A node is visible if all its parents are open.
 
 {% highlight js %}
-var node = node.getPreviousNode();
+const nextNode = node.getNextVisibleNode();
 {% endhighlight %}

package/docs/_entries/node/getpreviousnode.md

@@ -0,0 +1,12 @@
+---
+title: getPreviousNode
+name: node-functions-getpreviousnode
+---
+
+Return the previous node in the tree. This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree.
+
+-   Returns a node or null.
+
+{% highlight js %}
+const previousNode = node.getPreviousNode();
+{% endhighlight %}

package/docs/_entries/node/getprevioussibling.md

@@ -6,5 +6,5 @@ name: node-functions-getprevioussibling
 Get the previous sibling of this node. Returns a node or null.
 
 {% highlight js %}
-var node = node.getPreviousSibling();
+const previousSibling = node.getPreviousSibling();
 {% endhighlight %}

package/docs/_entries/node/getpreviousvisiblenode.md

@@ -3,12 +3,13 @@ title: getPreviousVisibleNode
 name: node-functions-getpreviousvisiblenode
 ---
 
--   Get the previous visible node in the tree. Does the same as using the _up_ key.
--   If the previous node is an open parent: return the last child of the node.
--   If the previous node is a closed parent: skip the child nodes of the previous parent, return the previous parent node.
+Get the previous visible node in the tree. Does the same as using the _up_ key.
 
-Returns a node or null.
+This is the previous sibling, if there is one. Or, if there is no previous sibling, a node further up in the tree that is visible.
+
+-   Returns a node or null.
+-   A node is visible if all its parents are open.
 
 {% highlight js %}
-var node = node.getPreviousVisibleNode();
+const previousNode = node.getPreviousVisibleNode();
 {% endhighlight %}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.7.5",
+    "version": "1.8.1",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -28,34 +28,39 @@
         "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
         "test": "pnpm jest && pnpm playwright"
     },
+    "browserslist": [
+        "defaults"
+    ],
     "peerDependencies": {
         "jquery": "^3"
     },
     "devDependencies": {
-        "@babel/cli": "^7.23.0",
-        "@babel/core": "^7.23.2",
-        "@babel/preset-env": "^7.23.2",
-        "@babel/preset-typescript": "^7.23.2",
-        "@playwright/test": "^1.39.0",
+        "@babel/cli": "^7.23.9",
+        "@babel/core": "^7.23.9",
+        "@babel/preset-env": "^7.23.9",
+        "@babel/preset-typescript": "^7.23.3",
+        "@playwright/test": "^1.41.2",
         "@rollup/plugin-babel": "^6.0.4",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
-        "@testing-library/dom": "^9.3.3",
-        "@types/debug": "^4.1.10",
-        "@types/jest": "^29.5.6",
-        "@types/jest-axe": "^3.5.7",
-        "@types/jquery": "^3.5.24",
-        "@types/node": "^20.8.7",
-        "@typescript-eslint/eslint-plugin": "^6.8.0",
-        "@typescript-eslint/parser": "^6.8.0",
-        "autoprefixer": "^10.4.16",
+        "@testing-library/dom": "^9.3.4",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/debug": "^4.1.12",
+        "@types/jest": "^29.5.12",
+        "@types/jest-axe": "^3.5.9",
+        "@types/jquery": "^3.5.29",
+        "@types/node": "^20.11.19",
+        "@typescript-eslint/eslint-plugin": "^7.0.1",
+        "@typescript-eslint/parser": "^7.0.1",
+        "autoprefixer": "^10.4.17",
         "babel-jest": "^29.7.0",
         "babel-plugin-istanbul": "^6.1.1",
-        "eslint": "^8.52.0",
-        "eslint-plugin-import": "^2.28.1",
-        "eslint-plugin-jest": "^27.4.3",
-        "eslint-plugin-playwright": "^0.17.0",
-        "eslint-plugin-testing-library": "^6.1.0",
+        "eslint": "^8.56.0",
+        "eslint-import-resolver-typescript": "^3.6.1",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jest": "^27.9.0",
+        "eslint-plugin-playwright": "^1.1.2",
+        "eslint-plugin-testing-library": "^6.2.0",
         "givens": "^1.3.9",
         "graphql": "^16.8.1",
         "jest": "^29.7.0",
@@ -64,16 +69,17 @@
         "jest-extended": "^4.0.2",
         "jsonfile": "^6.1.0",
         "lodash.template": "^4.5.0",
-        "msw": "^1.3.2",
-        "postcss": "^8.4.31",
-        "postcss-cli": "^10.1.0",
-        "postcss-import": "^15.1.0",
-        "postcss-load-config": "^4.0.1",
+        "msw": "^2.2.1",
+        "postcss": "^8.4.35",
+        "postcss-cli": "^11.0.0",
+        "postcss-import": "^16.0.1",
+        "postcss-load-config": "^5.0.3",
         "postcss-nested": "^6.0.1",
-        "prettier": "^3.0.3",
-        "rollup": "^4.1.4",
-        "rollup-plugin-serve": "^2.0.2",
+        "prettier": "^3.2.5",
+        "rollup": "^4.12.0",
+        "rollup-plugin-serve": "^3.0.0",
         "tslib": "^2.6.2",
-        "typescript": "^5.2.2"
+        "typescript": "^5.3.3",
+        "undici": "^5.28.3"
     }
 }

package/src/dataLoader.ts

@@ -1,36 +1,63 @@
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
+import { DataFilter, OnLoadFailed, OnLoading } from "./jqtreeOptions";
+import { LoadData, TriggerEvent } from "./jqtreeMethodTypes";
 
 export type HandleFinishedLoading = () => void;
 
-export default class DataLoader {
-    private treeWidget: JqTreeWidget;
+interface DataLoaderParams {
+    dataFilter?: DataFilter;
+    loadData: LoadData;
+    onLoadFailed?: OnLoadFailed;
+    onLoading?: OnLoading;
+    treeElement: HTMLElement;
+    triggerEvent: TriggerEvent;
+}
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+export default class DataLoader {
+    private dataFilter?: DataFilter;
+    private loadData: LoadData;
+    private onLoadFailed?: OnLoadFailed;
+    private onLoading?: OnLoading;
+    private treeElement: HTMLElement;
+    private triggerEvent: TriggerEvent;
+
+    constructor({
+        dataFilter,
+        loadData,
+        onLoadFailed,
+        onLoading,
+        treeElement,
+        triggerEvent,
+    }: DataLoaderParams) {
+        this.dataFilter = dataFilter;
+        this.loadData = loadData;
+        this.onLoadFailed = onLoadFailed;
+        this.onLoading = onLoading;
+        this.treeElement = treeElement;
+        this.triggerEvent = triggerEvent;
     }
 
     public loadFromUrl(
         urlInfo: string | JQuery.AjaxSettings | null,
         parentNode: Node | null,
-        onFinished: HandleFinishedLoading | null
+        onFinished: HandleFinishedLoading | null,
     ): void {
         if (!urlInfo) {
             return;
         }
 
-        const $el = this.getDomElement(parentNode);
-        this.addLoadingClass($el);
-        this.notifyLoading(true, parentNode, $el);
+        const element = this.getDomElement(parentNode);
+        this.addLoadingClass(element);
+        this.notifyLoading(true, parentNode, element);
 
         const stopLoading = (): void => {
-            this.removeLoadingClass($el);
-            this.notifyLoading(false, parentNode, $el);
+            this.removeLoadingClass(element);
+            this.notifyLoading(false, parentNode, element);
         };
 
         const handleSuccess = (data: string | NodeData[]): void => {
             stopLoading();
-            this.treeWidget.loadData(this.parseData(data), parentNode);
+            this.loadData(this.parseData(data), parentNode);
 
             if (onFinished && typeof onFinished === "function") {
                 onFinished();
@@ -40,44 +67,42 @@ export default class DataLoader {
         const handleError = (jqXHR: JQuery.jqXHR): void => {
             stopLoading();
 
-            if (this.treeWidget.options.onLoadFailed) {
-                this.treeWidget.options.onLoadFailed(jqXHR);
+            if (this.onLoadFailed) {
+                this.onLoadFailed(jqXHR);
             }
         };
 
         this.submitRequest(urlInfo, handleSuccess, handleError);
     }
 
-    private addLoadingClass($el: JQuery<HTMLElement>): void {
-        if ($el) {
-            $el.addClass("jqtree-loading");
-        }
+    private addLoadingClass(element: HTMLElement): void {
+        element.classList.add("jqtree-loading");
     }
 
-    private removeLoadingClass($el: JQuery<HTMLElement>): void {
-        if ($el) {
-            $el.removeClass("jqtree-loading");
-        }
+    private removeLoadingClass(element: HTMLElement): void {
+        element.classList.remove("jqtree-loading");
     }
 
-    private getDomElement(parentNode: Node | null): JQuery<HTMLElement> {
+    private getDomElement(parentNode: Node | null): HTMLElement {
         if (parentNode) {
-            return jQuery(parentNode.element);
+            return parentNode.element;
         } else {
-            return this.treeWidget.element;
+            return this.treeElement;
         }
     }
 
     private notifyLoading(
         isLoading: boolean,
         node: Node | null,
-        $el: JQuery
+        element: HTMLElement,
     ): void {
-        if (this.treeWidget.options.onLoading) {
-            this.treeWidget.options.onLoading(isLoading, node, $el);
+        const $el = jQuery(element);
+
+        if (this.onLoading) {
+            this.onLoading(isLoading, node, $el);
         }
 
-        this.treeWidget._triggerEvent("tree.loading_data", {
+        this.triggerEvent("tree.loading_data", {
             isLoading,
             node,
             $el,
@@ -87,7 +112,7 @@ export default class DataLoader {
     private submitRequest(
         urlInfoInput: string | JQuery.AjaxSettings,
         handleSuccess: JQuery.Ajax.SuccessCallback<any>,
-        handleError: JQuery.Ajax.ErrorCallback<any>
+        handleError: JQuery.Ajax.ErrorCallback<any>,
     ): void {
         const urlInfo =
             typeof urlInfoInput === "string"
@@ -109,8 +134,6 @@ export default class DataLoader {
     }
 
     private parseData(data: string | NodeData[]): NodeData[] {
-        const { dataFilter } = this.treeWidget.options;
-
         const getParsedData = () => {
             if (typeof data === "string") {
                 return JSON.parse(data) as NodeData[];
@@ -121,8 +144,8 @@ export default class DataLoader {
 
         const parsedData = getParsedData();
 
-        if (dataFilter) {
-            return dataFilter(parsedData);
+        if (this.dataFilter) {
+            return this.dataFilter(parsedData);
         } else {
             return parsedData;
         }