jqtree 1.7.5 → 1.8.0

package/src/nodeElement/ghostDropHint.ts

@@ -0,0 +1,68 @@
+import { Position, Node } from "../node";
+import { DropHint } from "../dragAndDropHandler/types";
+
+class GhostDropHint implements DropHint {
+    private element: HTMLElement;
+    private node: Node;
+    private ghost: HTMLElement;
+
+    constructor(node: Node, element: HTMLElement, position: Position) {
+        this.element = element;
+        this.node = node;
+        this.ghost = this.createGhostElement();
+
+        if (position === Position.After) {
+            this.moveAfter();
+        } else if (position === Position.Before) {
+            this.moveBefore();
+        } else if (position === Position.Inside) {
+            if (node.isFolder() && node.is_open) {
+                this.moveInsideOpenFolder();
+            } else {
+                this.moveInside();
+            }
+        }
+    }
+
+    public remove(): void {
+        this.ghost.remove();
+    }
+
+    private moveAfter(): void {
+        this.element.after(this.ghost);
+    }
+
+    private moveBefore(): void {
+        this.element.before(this.ghost);
+    }
+
+    private moveInsideOpenFolder(): void {
+        const childElement = this.node.children[0]?.element;
+
+        if (childElement) {
+            childElement.before(this.ghost);
+        }
+    }
+
+    private moveInside(): void {
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
+    }
+
+    private createGhostElement() {
+        const ghost = document.createElement("li");
+        ghost.className = "jqtree_common jqtree-ghost";
+
+        const circleSpan = document.createElement("span");
+        circleSpan.className = "jqtree_common jqtree-circle";
+        ghost.append(circleSpan);
+
+        const lineSpan = document.createElement("span");
+        lineSpan.className = "jqtree_common jqtree-line";
+        ghost.append(lineSpan);
+
+        return ghost;
+    }
+}
+
+export default GhostDropHint;

package/src/nodeElement/index.ts

@@ -0,0 +1,101 @@
+import { Position, Node } from "../node";
+import { DropHint } from "../dragAndDropHandler/types";
+import BorderDropHint from "./borderDropHint";
+import GhostDropHint from "./ghostDropHint";
+import { GetScrollLeft } from "../jqtreeMethodTypes";
+
+export interface NodeElementParams {
+    getScrollLeft: GetScrollLeft;
+    node: Node;
+    tabIndex?: number;
+    $treeElement: JQuery<HTMLElement>;
+}
+
+class NodeElement {
+    public node: Node;
+    public element: HTMLElement;
+    private getScrollLeft: GetScrollLeft;
+    private tabIndex?: number;
+    private $treeElement: JQuery<HTMLElement>;
+
+    constructor({
+        getScrollLeft,
+        node,
+        tabIndex,
+        $treeElement,
+    }: NodeElementParams) {
+        this.getScrollLeft = getScrollLeft;
+        this.tabIndex = tabIndex;
+        this.$treeElement = $treeElement;
+
+        this.init(node);
+    }
+
+    public init(node: Node): void {
+        this.node = node;
+
+        if (!node.element) {
+            const element = this.$treeElement.get(0);
+
+            if (element) {
+                node.element = element;
+            }
+        }
+
+        if (node.element) {
+            this.element = node.element;
+        }
+    }
+
+    public addDropHint(position: number): DropHint {
+        if (this.mustShowBorderDropHint(position)) {
+            return new BorderDropHint(this.element, this.getScrollLeft());
+        } else {
+            return new GhostDropHint(this.node, this.element, position);
+        }
+    }
+
+    public select(mustSetFocus: boolean): void {
+        this.element.classList.add("jqtree-selected");
+
+        const titleSpan = this.getTitleSpan();
+        const tabIndex = this.tabIndex;
+
+        // Check for null or undefined
+        if (tabIndex != null) {
+            titleSpan.setAttribute("tabindex", tabIndex.toString());
+        }
+
+        titleSpan.setAttribute("aria-selected", "true");
+
+        if (mustSetFocus) {
+            titleSpan.focus();
+        }
+    }
+
+    public deselect(): void {
+        this.element.classList.remove("jqtree-selected");
+
+        const titleSpan = this.getTitleSpan();
+        titleSpan.removeAttribute("tabindex");
+        titleSpan.setAttribute("aria-selected", "false");
+
+        titleSpan.blur();
+    }
+
+    protected getUl(): HTMLUListElement {
+        return this.element.querySelector(":scope > ul") as HTMLUListElement;
+    }
+
+    protected getTitleSpan(): HTMLSpanElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > span.jqtree-title",
+        ) as HTMLSpanElement;
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return position === Position.Inside;
+    }
+}
+
+export default NodeElement;

package/src/playwright/coverage.ts

@@ -13,14 +13,11 @@ export const initCoverage = async (context: BrowserContext) => {
     await context.exposeFunction(
         "collectIstanbulCoverage",
         (coverageJSON: string) => {
-            if (!coverageJSON) {
-                console.log("No coverage");
-            } else {
+            if (coverageJSON) {
                 const filename = path.join(
                     istanbulCLIOutput,
                     `playwright_coverage_${generateUUID()}.json`
                 );
-                console.log(`Writing coverage to ${filename}`);
                 fs.writeFileSync(filename, coverageJSON);
             }
         }

package/src/playwright/playwright.test.ts

@@ -17,10 +17,6 @@ const initPage = async (page: Page, baseURL: string | undefined) => {
     await page.waitForLoadState("domcontentloaded");
 
     page.on("console", (msg) => console.log(`console: ${msg.text()}`));
-
-    await page.evaluate(`
-        console.log(window.__coverage__ ? 'Coverage enabled' : 'Coverage not enabled');
-    `);
 };
 
 interface InitTreeOptions {

package/src/saveStateHandler.ts

@@ -1,25 +1,76 @@
 import { isInt } from "./util";
-import { JqTreeWidget } from "./tree.jquery";
 import { Node } from "./node";
+import { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
+import {
+    AddToSelection,
+    GetNodeById,
+    GetSelectedNodes,
+    GetTree,
+    OpenNode,
+    RefreshElements,
+    RemoveFromSelection,
+} from "./jqtreeMethodTypes";
 
 export interface SavedState {
     open_nodes: NodeId[];
     selected_node: NodeId[];
 }
 
+interface SaveStateHandlerParams {
+    addToSelection: AddToSelection;
+    getNodeById: GetNodeById;
+    getSelectedNodes: GetSelectedNodes;
+    getTree: GetTree;
+    onGetStateFromStorage?: OnGetStateFromStorage;
+    onSetStateFromStorage?: OnSetStateFromStorage;
+    openNode: OpenNode;
+    refreshElements: RefreshElements;
+    removeFromSelection: RemoveFromSelection;
+    saveState: boolean | string;
+}
+
 export default class SaveStateHandler {
-    private treeWidget: JqTreeWidget;
+    private addToSelection: AddToSelection;
+    private getNodeById: GetNodeById;
+    private getSelectedNodes: GetSelectedNodes;
+    private getTree: GetTree;
+    private onGetStateFromStorage?: OnGetStateFromStorage;
+    private onSetStateFromStorage?: OnSetStateFromStorage;
+    private openNode: OpenNode;
+    private refreshElements: RefreshElements;
+    private removeFromSelection: RemoveFromSelection;
+    private saveStateOption: boolean | string;
     private _supportsLocalStorage: boolean | null;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({
+        addToSelection,
+        getNodeById,
+        getSelectedNodes,
+        getTree,
+        onGetStateFromStorage,
+        onSetStateFromStorage,
+        openNode,
+        refreshElements,
+        removeFromSelection,
+        saveState,
+    }: SaveStateHandlerParams) {
+        this.addToSelection = addToSelection;
+        this.getNodeById = getNodeById;
+        this.getSelectedNodes = getSelectedNodes;
+        this.getTree = getTree;
+        this.onGetStateFromStorage = onGetStateFromStorage;
+        this.onSetStateFromStorage = onSetStateFromStorage;
+        this.openNode = openNode;
+        this.refreshElements = refreshElements;
+        this.removeFromSelection = removeFromSelection;
+        this.saveStateOption = saveState;
     }
 
     public saveState(): void {
         const state = JSON.stringify(this.getState());
 
-        if (this.treeWidget.options.onSetStateFromStorage) {
-            this.treeWidget.options.onSetStateFromStorage(state);
+        if (this.onSetStateFromStorage) {
+            this.onSetStateFromStorage(state);
         } else if (this.supportsLocalStorage()) {
             localStorage.setItem(this.getKeyName(), state);
         }
@@ -39,7 +90,7 @@ export default class SaveStateHandler {
         const getOpenNodeIds = (): NodeId[] => {
             const openNodes: NodeId[] = [];
 
-            this.treeWidget.tree.iterate((node: Node) => {
+            this.getTree()?.iterate((node: Node) => {
                 if (node.is_open && node.id && node.hasChildren()) {
                     openNodes.push(node.id);
                 }
@@ -52,7 +103,7 @@ export default class SaveStateHandler {
         const getSelectedNodeIds = (): NodeId[] => {
             const selectedNodeIds: NodeId[] = [];
 
-            this.treeWidget.getSelectedNodes().forEach((node) => {
+            this.getSelectedNodes().forEach((node) => {
                 if (node.id != null) {
                     selectedNodeIds.push(node.id);
                 }
@@ -94,13 +145,13 @@ export default class SaveStateHandler {
 
     public setInitialStateOnDemand(
         state: SavedState,
-        cbFinished: () => void
+        cbFinished: () => void,
     ): void {
         if (state) {
             this.doSetInitialStateOnDemand(
                 state.open_nodes,
                 state.selected_node,
-                cbFinished
+                cbFinished,
             );
         } else {
             cbFinished();
@@ -130,8 +181,8 @@ export default class SaveStateHandler {
     }
 
     private loadFromStorage(): string | null {
-        if (this.treeWidget.options.onGetStateFromStorage) {
-            return this.treeWidget.options.onGetStateFromStorage();
+        if (this.onGetStateFromStorage) {
+            return this.onGetStateFromStorage();
         } else if (this.supportsLocalStorage()) {
             return localStorage.getItem(this.getKeyName());
         } else {
@@ -143,7 +194,7 @@ export default class SaveStateHandler {
         let mustLoadOnDemand = false;
 
         for (const nodeId of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeId);
+            const node = this.getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {
@@ -161,12 +212,12 @@ export default class SaveStateHandler {
         let selectCount = 0;
 
         for (const nodeId of nodeIds) {
-            const node = this.treeWidget.getNodeById(nodeId);
+            const node = this.getNodeById(nodeId);
 
             if (node) {
                 selectCount += 1;
 
-                this.treeWidget.selectNodeHandler.addToSelection(node);
+                this.addToSelection(node);
             }
         }
 
@@ -174,19 +225,17 @@ export default class SaveStateHandler {
     }
 
     private resetSelection(): void {
-        const selectNodeHandler = this.treeWidget.selectNodeHandler;
-
-        const selectedNodes = selectNodeHandler.getSelectedNodes();
+        const selectedNodes = this.getSelectedNodes();
 
         selectedNodes.forEach((node) => {
-            selectNodeHandler.removeFromSelection(node);
+            this.removeFromSelection(node);
         });
     }
 
     private doSetInitialStateOnDemand(
         nodeIdsParam: NodeId[],
         selectedNodes: NodeId[],
-        cbFinished: () => void
+        cbFinished: () => void,
     ): void {
         let loadingCount = 0;
         let nodeIds = nodeIdsParam;
@@ -195,7 +244,7 @@ export default class SaveStateHandler {
             const newNodesIds = [];
 
             for (const nodeId of nodeIds) {
-                const node = this.treeWidget.getNodeById(nodeId);
+                const node = this.getNodeById(nodeId);
 
                 if (!node) {
                     newNodesIds.push(nodeId);
@@ -204,7 +253,7 @@ export default class SaveStateHandler {
                         if (node.load_on_demand) {
                             loadAndOpenNode(node);
                         } else {
-                            this.treeWidget._openNode(node, false, null);
+                            this.openNode(node, false);
                         }
                     }
                 }
@@ -213,7 +262,7 @@ export default class SaveStateHandler {
             nodeIds = newNodesIds;
 
             if (this.selectInitialNodes(selectedNodes)) {
-                this.treeWidget._refreshElements(null);
+                this.refreshElements(null);
             }
 
             if (loadingCount === 0) {
@@ -223,7 +272,7 @@ export default class SaveStateHandler {
 
         const loadAndOpenNode = (node: Node): void => {
             loadingCount += 1;
-            this.treeWidget._openNode(node, false, () => {
+            this.openNode(node, false, () => {
                 loadingCount -= 1;
                 openNodes();
             });
@@ -233,8 +282,8 @@ export default class SaveStateHandler {
     }
 
     private getKeyName(): string {
-        if (typeof this.treeWidget.options.saveState === "string") {
-            return this.treeWidget.options.saveState;
+        if (typeof this.saveStateOption === "string") {
+            return this.saveStateOption;
         } else {
             return "tree";
         }

package/src/scrollHandler.ts

@@ -1,15 +1,21 @@
-import { JqTreeWidget } from "./tree.jquery";
-import { PositionInfo } from "./types";
+import { PositionInfo } from "./mouseWidgetTypes";
 import { ScrollParent } from "./scrollHandler/types";
 import createScrollParent from "./scrollHandler/createScrollParent";
 
+interface ScrollHandlerParams {
+    refreshHitAreas: () => void;
+    $treeElement: JQuery<HTMLElement>;
+}
+
 export default class ScrollHandler {
-    private treeWidget: JqTreeWidget;
+    private refreshHitAreas: () => void;
     private scrollParent?: ScrollParent;
+    private $treeElement: JQuery<HTMLElement>;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({ refreshHitAreas, $treeElement }: ScrollHandlerParams) {
+        this.refreshHitAreas = refreshHitAreas;
         this.scrollParent = undefined;
+        this.$treeElement = $treeElement;
     }
 
     public checkScrolling(positionInfo: PositionInfo): void {
@@ -48,8 +54,8 @@ export default class ScrollHandler {
     private getScrollParent(): ScrollParent {
         if (!this.scrollParent) {
             this.scrollParent = createScrollParent(
-                this.treeWidget.$el,
-                this.treeWidget.refreshHitAreas.bind(this.treeWidget),
+                this.$treeElement,
+                this.refreshHitAreas,
             );
         }
 

package/src/selectNodeHandler.ts

@@ -1,13 +1,17 @@
 import { Node } from "./node";
-import { JqTreeWidget } from "./tree.jquery";
+import { GetNodeById } from "./jqtreeMethodTypes";
+
+interface SelectNodeHandlerParameters {
+    getNodeById: GetNodeById;
+}
 
 export default class SelectNodeHandler {
-    private treeWidget: JqTreeWidget;
+    private getNodeById: GetNodeById;
     private selectedNodes: Set<NodeId>;
     private selectedSingleNode: Node | null;
 
-    constructor(treeWidget: JqTreeWidget) {
-        this.treeWidget = treeWidget;
+    constructor({ getNodeById }: SelectNodeHandlerParameters) {
+        this.getNodeById = getNodeById;
         this.selectedNodes = new Set<NodeId>();
         this.clear();
     }
@@ -29,7 +33,7 @@ export default class SelectNodeHandler {
             const selectedNodes: Node[] = [];
 
             this.selectedNodes.forEach((id) => {
-                const node = this.treeWidget.getNodeById(id);
+                const node = this.getNodeById(id);
                 if (node) {
                     selectedNodes.push(node);
                 }
@@ -53,7 +57,7 @@ export default class SelectNodeHandler {
                 if (
                     Object.prototype.hasOwnProperty.call(this.selectedNodes, id)
                 ) {
-                    const node = this.treeWidget.getNodeById(id);
+                    const node = this.getNodeById(id);
                     if (node && parent.isParentOf(node)) {
                         selectedNodes.push(node);
                     }
@@ -108,14 +112,4 @@ export default class SelectNodeHandler {
             this.selectedSingleNode = node;
         }
     }
-
-    public isFocusOnTree(): boolean {
-        const activeElement = document.activeElement;
-
-        return Boolean(
-            activeElement &&
-                activeElement.tagName === "SPAN" &&
-                this.treeWidget._containsElement(activeElement as HTMLElement)
-        );
-    }
 }

package/src/test/jqTree/keyboard.test.ts

@@ -1,4 +1,5 @@
 import getGiven from "givens";
+import { userEvent } from "@testing-library/user-event";
 import "../../tree.jquery";
 import exampleData from "../support/exampleData";
 
@@ -18,22 +19,16 @@ describe("keyboard support", () => {
     interface Vars {
         autoOpen: boolean;
         initialSelectedNode: INode | null;
-        pressedKey: number;
+        pressedKey: string;
         $tree: JQuery<HTMLElement>;
     }
 
-    const KEY_DOWN = 40;
-    const KEY_LEFT = 37;
-    const KEY_RIGHT = 39;
-    const KEY_UP = 38;
-    const KEY_PAGE_UP = 33;
-
     const given = getGiven<Vars>();
     given("autoOpen", () => false);
     given("initialSelectedNode", () => null);
     given("$tree", () => $("#tree1"));
 
-    beforeEach(() => {
+    beforeEach(async () => {
         given.$tree.tree({
             animationSpeed: 0,
             autoOpen: given.autoOpen,
@@ -44,15 +39,15 @@ describe("keyboard support", () => {
             given.$tree.tree("selectNode", given.initialSelectedNode);
         }
 
-        given.$tree.trigger($.Event("keydown", { which: given.pressedKey }));
+        await userEvent.keyboard(`{${given.pressedKey}}`);
     });
 
     context("with key down", () => {
-        given("pressedKey", () => KEY_DOWN);
+        given("pressedKey", () => "ArrowDown");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the next node", () => {
@@ -71,7 +66,7 @@ describe("keyboard support", () => {
 
         context("when the last node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("keeps the node selected", () => {
@@ -83,11 +78,11 @@ describe("keyboard support", () => {
     });
 
     context("with key up", () => {
-        given("pressedKey", () => KEY_UP);
+        given("pressedKey", () => "ArrowUp");
 
         context("when a node is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("selects the next node", () => {
@@ -106,11 +101,11 @@ describe("keyboard support", () => {
     });
 
     context("with key right", () => {
-        given("pressedKey", () => KEY_RIGHT);
+        given("pressedKey", () => "ArrowRight");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("opens the folder", () => {
@@ -132,7 +127,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node1")
+                given.$tree.tree("getNodeByNameMustExist", "node1"),
             );
 
             it("selects the first child", () => {
@@ -168,7 +163,7 @@ describe("keyboard support", () => {
 
         context("when a child is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "child1")
+                given.$tree.tree("getNodeByNameMustExist", "child1"),
             );
 
             it("does nothing", () => {
@@ -179,11 +174,11 @@ describe("keyboard support", () => {
         });
     });
     context("with key left", () => {
-        given("pressedKey", () => KEY_LEFT);
+        given("pressedKey", () => "ArrowLeft");
 
         context("when a closed folder is selected", () => {
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node3")
+                given.$tree.tree("getNodeByNameMustExist", "node3"),
             );
 
             it("selects the previous node", () => {
@@ -210,7 +205,7 @@ describe("keyboard support", () => {
         context("when an open folder is selected", () => {
             given("autoOpen", () => true);
             given("initialSelectedNode", () =>
-                given.$tree.tree("getNodeByNameMustExist", "node2")
+                given.$tree.tree("getNodeByNameMustExist", "node2"),
             );
 
             it("closes the folder", () => {
@@ -237,10 +232,10 @@ describe("keyboard support", () => {
     });
 
     context("with page up key", () => {
-        given("pressedKey", () => KEY_PAGE_UP);
+        given("pressedKey", () => "PageUp");
 
         given("initialSelectedNode", () =>
-            given.$tree.tree("getNodeByNameMustExist", "child1")
+            given.$tree.tree("getNodeByNameMustExist", "child1"),
         );
 
         it("does nothing", () => {