npm - jqtree - Versions diffs - 1.7.5 → 1.8.0 - Mend

jqtree 1.7.5 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/bower.json +1 -1
package/config/babel.config.json +1 -1
package/config/production +2 -0
package/devserver/devserver_scroll.js +8 -0
package/devserver/test_scroll.html +28 -0
package/devserver/test_scroll_container.html +39 -0
package/docs/_config.yml +1 -1
package/docs/_entries/general/changelog.md +7 -0
package/package.json +5 -1
package/src/dataLoader.ts +44 -19
package/src/dragAndDropHandler/dragElement.ts +42 -0
package/src/dragAndDropHandler/hitAreasGenerator.ts +175 -0
package/src/dragAndDropHandler/index.ts +470 -0
package/src/dragAndDropHandler/types.ts +12 -0
package/src/dragAndDropHandler/visibleNodeIterator.ts +97 -0
package/src/elementsRenderer.ts +75 -40
package/src/jqtreeMethodTypes.ts +40 -0
package/src/jqtreeOptions.ts +43 -25
package/src/keyHandler.ts +59 -30
package/src/mouse.widget.ts +3 -3
package/src/mouseWidgetTypes.ts +6 -0
package/src/nodeElement/borderDropHint.ts +32 -0
package/src/nodeElement/folderElement.ts +133 -0
package/src/nodeElement/ghostDropHint.ts +68 -0
package/src/nodeElement/index.ts +101 -0
package/src/playwright/coverage.ts +1 -4
package/src/playwright/playwright.test.ts +0 -4
package/src/saveStateHandler.ts +75 -26
package/src/scrollHandler.ts +13 -7
package/src/selectNodeHandler.ts +10 -16
package/src/test/jqTree/keyboard.test.ts +18 -23
package/src/test/jqTree/methods.test.ts +32 -3
package/src/test/jqTree/options.test.ts +15 -4
package/src/test/node.test.ts +1 -1
package/src/tree.jquery.ts +239 -57
package/src/util.ts +3 -0
package/src/version.ts +1 -1
package/tree.jquery.debug.js +1728 -2576
package/tree.jquery.debug.js.map +1 -1
package/tree.jquery.js +2 -2
package/tree.jquery.js.map +1 -1
package/lib/dataLoader.js +0 -123
package/lib/dragAndDropHandler.js +0 -588
package/lib/elementsRenderer.js +0 -267
package/lib/jqtreeOptions.js +0 -1
package/lib/keyHandler.js +0 -111
package/lib/mouse.widget.js +0 -255
package/lib/node.js +0 -708
package/lib/nodeElement.js +0 -274
package/lib/nodeUtils.js +0 -10
package/lib/playwright/coverage.js +0 -99
package/lib/playwright/playwright.test.js +0 -606
package/lib/playwright/testUtils.js +0 -210
package/lib/saveStateHandler.js +0 -277
package/lib/scrollHandler/containerScrollParent.js +0 -160
package/lib/scrollHandler/createScrollParent.js +0 -57
package/lib/scrollHandler/documentScrollParent.js +0 -169
package/lib/scrollHandler/scrollParent.js +0 -58
package/lib/scrollHandler/types.js +0 -1
package/lib/scrollHandler.js +0 -71
package/lib/selectNodeHandler.js +0 -128
package/lib/simple.widget.js +0 -158
package/lib/test/global.d.js +0 -3
package/lib/test/jqTree/accessibility.test.js +0 -37
package/lib/test/jqTree/create.test.js +0 -48
package/lib/test/jqTree/events.test.js +0 -210
package/lib/test/jqTree/keyboard.test.js +0 -225
package/lib/test/jqTree/loadOnDemand.test.js +0 -218
package/lib/test/jqTree/methods.test.js +0 -1348
package/lib/test/jqTree/options.test.js +0 -548
package/lib/test/jqTree/scrollHandler/containerScrollParent.test.js +0 -94
package/lib/test/node.test.js +0 -1202
package/lib/test/nodeUtil.test.js +0 -27
package/lib/test/nodeUtils.test.js +0 -20
package/lib/test/support/exampleData.js +0 -35
package/lib/test/support/jqTreeMatchers.js +0 -70
package/lib/test/support/matchers.d.js +0 -1
package/lib/test/support/setupTests.js +0 -7
package/lib/test/support/testUtil.js +0 -29
package/lib/test/support/treeStructure.js +0 -38
package/lib/test/util.test.js +0 -26
package/lib/tree.jquery.d.js +0 -1
package/lib/tree.jquery.js +0 -1105
package/lib/types.js +0 -1
package/lib/typings.d.js +0 -2
package/lib/util.js +0 -15
package/lib/version.js +0 -8
package/src/dragAndDropHandler.ts +0 -713
package/src/nodeElement.ts +0 -272
package/src/types.ts +0 -19

package/bower.json CHANGED Viewed

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

package/config/babel.config.json CHANGED Viewed

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

package/config/production CHANGED Viewed

@@ -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 ADDED Viewed

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

package/devserver/test_scroll.html ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/_config.yml CHANGED Viewed

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

package/docs/_entries/general/changelog.md CHANGED Viewed

@@ -3,6 +3,13 @@ title: Changelog
 name: changelog
 ---
+#### 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "jqtree",
-    "version": "1.7.5",
+    "version": "1.8.0",
     "description": "Tree widget for jQuery",
     "keywords": [
         "jquery-plugin",
@@ -28,6 +28,9 @@
         "playwright": "pnpm build-with-coverage && playwright test --config config/playwright.config.js",
         "test": "pnpm jest && pnpm playwright"
     },
+    "browserslist": [
+        "defaults"
+    ],
     "peerDependencies": {
         "jquery": "^3"
     },
@@ -41,6 +44,7 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@testing-library/dom": "^9.3.3",
+        "@testing-library/user-event": "^14.5.1",
         "@types/debug": "^4.1.10",
         "@types/jest": "^29.5.6",
         "@types/jest-axe": "^3.5.7",

package/src/dataLoader.ts CHANGED Viewed

@@ -1,19 +1,46 @@
 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: JQuery<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: JQuery<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;
@@ -30,7 +57,7 @@ export default class DataLoader {
         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,8 +67,8 @@ 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);
             }
         };
@@ -64,20 +91,20 @@ export default class DataLoader {
         if (parentNode) {
             return jQuery(parentNode.element);
         } else {
-            return this.treeWidget.element;
+            return this.$treeElement;
         }
     }
     private notifyLoading(
         isLoading: boolean,
         node: Node | null,
-        $el: JQuery
+        $el: JQuery,
     ): void {
-        if (this.treeWidget.options.onLoading) {
-            this.treeWidget.options.onLoading(isLoading, node, $el);
+        if (this.onLoading) {
+            this.onLoading(isLoading, node, $el);
         }
-        this.treeWidget._triggerEvent("tree.loading_data", {
+        this.triggerEvent("tree.loading_data", {
             isLoading,
             node,
             $el,
@@ -87,7 +114,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 +136,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 +146,8 @@ export default class DataLoader {
         const parsedData = getParsedData();
-        if (dataFilter) {
-            return dataFilter(parsedData);
+        if (this.dataFilter) {
+            return this.dataFilter(parsedData);
         } else {
             return parsedData;
         }

package/src/dragAndDropHandler/dragElement.ts ADDED Viewed

@@ -0,0 +1,42 @@
+class DragElement {
+    private offsetX: number;
+    private offsetY: number;
+    private $element: JQuery;
+    constructor(
+        nodeName: string,
+        offsetX: number,
+        offsetY: number,
+        $tree: JQuery,
+        autoEscape: boolean,
+    ) {
+        this.offsetX = offsetX;
+        this.offsetY = offsetY;
+        this.$element = jQuery("<span>").addClass(
+            "jqtree-title jqtree-dragging",
+        );
+        if (autoEscape) {
+            this.$element.text(nodeName);
+        } else {
+            this.$element.html(nodeName);
+        }
+        this.$element.css("position", "absolute");
+        $tree.append(this.$element);
+    }
+    public move(pageX: number, pageY: number): void {
+        this.$element.offset({
+            left: pageX - this.offsetX,
+            top: pageY - this.offsetY,
+        });
+    }
+    public remove(): void {
+        this.$element.remove();
+    }
+}
+export default DragElement;

package/src/dragAndDropHandler/hitAreasGenerator.ts ADDED Viewed

@@ -0,0 +1,175 @@
+import { HitArea } from "./types";
+import { Node, Position } from "../node";
+import { getOffsetTop } from "../util";
+import VisibleNodeIterator from "./visibleNodeIterator";
+class HitAreasGenerator extends VisibleNodeIterator {
+    private currentNode: Node;
+    private treeBottom: number;
+    private positions: HitArea[];
+    private lastTop: number;
+    constructor(tree: Node, currentNode: Node, treeBottom: number) {
+        super(tree);
+        this.currentNode = currentNode;
+        this.treeBottom = treeBottom;
+    }
+    public generate(): HitArea[] {
+        this.positions = [];
+        this.lastTop = 0;
+        this.iterate();
+        return this.generateHitAreas(this.positions);
+    }
+    protected generateHitAreas(positions: HitArea[]): HitArea[] {
+        let previousTop = positions[0]?.top ?? 0;
+        let group = [];
+        const hitAreas: HitArea[] = [];
+        for (const position of positions) {
+            if (position.top !== previousTop && group.length) {
+                this.generateHitAreasForGroup(
+                    hitAreas,
+                    group,
+                    previousTop,
+                    position.top,
+                );
+                previousTop = position.top;
+                group = [];
+            }
+            group.push(position);
+        }
+        this.generateHitAreasForGroup(
+            hitAreas,
+            group,
+            previousTop,
+            this.treeBottom,
+        );
+        return hitAreas;
+    }
+    protected handleOpenFolder(node: Node, element: HTMLElement): boolean {
+        if (node === this.currentNode) {
+            // Cannot move inside current item
+            // Stop iterating
+            return false;
+        }
+        // Cannot move before current item
+        if (node.children[0] !== this.currentNode) {
+            this.addPosition(node, Position.Inside, getOffsetTop(element));
+        }
+        // Continue iterating
+        return true;
+    }
+    protected handleClosedFolder(
+        node: Node,
+        nextNode: Node,
+        element: HTMLElement,
+    ): void {
+        const top = getOffsetTop(element);
+        if (node === this.currentNode) {
+            // Cannot move after current item
+            this.addPosition(node, Position.None, top);
+        } else {
+            this.addPosition(node, Position.Inside, top);
+            // Cannot move before current item
+            if (nextNode !== this.currentNode) {
+                this.addPosition(node, Position.After, top);
+            }
+        }
+    }
+    protected handleFirstNode(node: Node): void {
+        if (node !== this.currentNode) {
+            this.addPosition(node, Position.Before, getOffsetTop(node.element));
+        }
+    }
+    protected handleAfterOpenFolder(node: Node, nextNode: Node): void {
+        if (node === this.currentNode || nextNode === this.currentNode) {
+            // Cannot move before or after current item
+            this.addPosition(node, Position.None, this.lastTop);
+        } else {
+            this.addPosition(node, Position.After, this.lastTop);
+        }
+    }
+    protected handleNode(
+        node: Node,
+        nextNode: Node,
+        element: HTMLElement,
+    ): void {
+        const top = getOffsetTop(element);
+        if (node === this.currentNode) {
+            // Cannot move inside current item
+            this.addPosition(node, Position.None, top);
+        } else {
+            this.addPosition(node, Position.Inside, top);
+        }
+        if (nextNode === this.currentNode || node === this.currentNode) {
+            // Cannot move before or after current item
+            this.addPosition(node, Position.None, top);
+        } else {
+            this.addPosition(node, Position.After, top);
+        }
+    }
+    private addPosition(node: Node, position: number, top: number): void {
+        const area = {
+            top,
+            bottom: 0,
+            node,
+            position,
+        };
+        this.positions.push(area);
+        this.lastTop = top;
+    }
+    private generateHitAreasForGroup(
+        hitAreas: HitArea[],
+        positionsInGroup: HitArea[],
+        top: number,
+        bottom: number,
+    ): void {
+        // limit positions in group
+        const positionCount = Math.min(positionsInGroup.length, 4);
+        const areaHeight = Math.round((bottom - top) / positionCount);
+        let areaTop = top;
+        let i = 0;
+        while (i < positionCount) {
+            const position = positionsInGroup[i];
+            if (position) {
+                hitAreas.push({
+                    top: areaTop,
+                    bottom: areaTop + areaHeight,
+                    node: position.node,
+                    position: position.position,
+                });
+            }
+            areaTop += areaHeight;
+            i += 1;
+        }
+    }
+}
+export default HitAreasGenerator;