jqtree 1.7.4 → 1.8.0

package/src/node.ts

@@ -1,6 +1,4 @@
-interface NodeRecordWithChildren extends NodeRecord {
-    children: NodeData[];
-}
+import { isNodeRecordWithChildren } from "./nodeUtils";
 
 export enum Position {
     Before = 1,
@@ -33,13 +31,6 @@ export const getPositionName = (position: Position): string => {
 export const getPosition = (name: string): Position | undefined =>
     positionNames[name];
 
-const isNodeRecordWithChildren = (
-    data: NodeData
-): data is NodeRecordWithChildren =>
-    typeof data === "object" &&
-    "children" in data &&
-    data["children"] instanceof Array;
-
 export class Node implements INode {
     public id?: NodeId;
     public name: string;
@@ -56,12 +47,20 @@ export class Node implements INode {
 
     [key: string]: unknown;
 
-    constructor(o: NodeData | null = null, isRoot = false, nodeClass = Node) {
+    constructor(
+        nodeData: NodeData | null = null,
+        isRoot = false,
+        nodeClass = Node,
+    ) {
         this.name = "";
-        this.isEmptyFolder = false;
         this.load_on_demand = false;
 
-        this.setData(o);
+        this.isEmptyFolder =
+            nodeData != null &&
+            isNodeRecordWithChildren(nodeData) &&
+            nodeData.children.length === 0;
+
+        this.setData(nodeData);
 
         this.children = [];
         this.parent = null;
@@ -77,10 +76,10 @@ export class Node implements INode {
     Set the data of this node.
 
     setData(string): set the name of the node
-    setdata(object): set attributes of the node
+    setData(object): set attributes of the node
 
     Examples:
-        setdata('node1')
+        setData('node1')
 
         setData({ name: 'node1', id: 1});
 
@@ -133,16 +132,12 @@ export class Node implements INode {
     public loadFromData(data: NodeData[]): Node {
         this.removeChildren();
 
-        for (const o of data) {
-            const node = this.createNode(o);
+        for (const childData of data) {
+            const node = this.createNode(childData);
             this.addChild(node);
 
-            if (isNodeRecordWithChildren(o)) {
-                if (o.children.length === 0) {
-                    node.isEmptyFolder = true;
-                } else {
-                    node.loadFromData(o.children);
-                }
+            if (isNodeRecordWithChildren(childData)) {
+                node.loadFromData(childData.children);
             }
         }
 
@@ -254,7 +249,7 @@ export class Node implements INode {
     public moveNode(
         movedNode: Node,
         targetNode: Node,
-        position: Position
+        position: Position,
     ): boolean {
         if (!movedNode.parent || movedNode.isParentOf(targetNode)) {
             // - Node is parent of target node
@@ -268,7 +263,7 @@ export class Node implements INode {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
-                            targetNode.parent.getChildIndex(targetNode) + 1
+                            targetNode.parent.getChildIndex(targetNode) + 1,
                         );
                         return true;
                     }
@@ -279,7 +274,7 @@ export class Node implements INode {
                     if (targetNode.parent) {
                         targetNode.parent.addChildAtPosition(
                             movedNode,
-                            targetNode.parent.getChildIndex(targetNode)
+                            targetNode.parent.getChildIndex(targetNode),
                         );
                         return true;
                     }
@@ -380,13 +375,7 @@ export class Node implements INode {
             const childIndex = this.parent.getChildIndex(this);
             this.parent.addChildAtPosition(node, childIndex + 1);
 
-            if (
-                isNodeRecordWithChildren(nodeInfo) &&
-                nodeInfo.children.length
-            ) {
-                node.loadFromData(nodeInfo.children);
-            }
-
+            node.loadChildrenFromData(nodeInfo);
             return node;
         }
     }
@@ -400,13 +389,7 @@ export class Node implements INode {
             const childIndex = this.parent.getChildIndex(this);
             this.parent.addChildAtPosition(node, childIndex);
 
-            if (
-                isNodeRecordWithChildren(nodeInfo) &&
-                nodeInfo.children.length
-            ) {
-                node.loadFromData(nodeInfo.children);
-            }
-
+            node.loadChildrenFromData(nodeInfo);
             return node;
         }
     }
@@ -443,10 +426,7 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChild(node);
 
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-            node.loadFromData(nodeInfo.children);
-        }
-
+        node.loadChildrenFromData(nodeInfo);
         return node;
     }
 
@@ -454,10 +434,7 @@ export class Node implements INode {
         const node = this.createNode(nodeInfo);
         this.addChildAtPosition(node, 0);
 
-        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
-            node.loadFromData(nodeInfo.children);
-        }
-
+        node.loadChildrenFromData(nodeInfo);
         return node;
     }
 
@@ -702,4 +679,11 @@ export class Node implements INode {
         const nodeClass = this.getNodeClass();
         return new nodeClass(nodeData);
     }
+
+    // Load children data from nodeInfo if it has children
+    private loadChildrenFromData(nodeInfo: NodeData) {
+        if (isNodeRecordWithChildren(nodeInfo) && nodeInfo.children.length) {
+            this.loadFromData(nodeInfo.children);
+        }
+    }
 }

package/src/nodeElement/borderDropHint.ts

@@ -0,0 +1,32 @@
+import { DropHint } from "../dragAndDropHandler/types";
+
+class BorderDropHint implements DropHint {
+    private hint?: HTMLElement;
+
+    constructor(element: HTMLElement, scrollLeft: number) {
+        const div = element.querySelector(":scope > .jqtree-element");
+
+        if (!div) {
+            this.hint = undefined;
+            return;
+        }
+
+        const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
+        const height = Math.max(element.clientHeight - 4, 0);
+
+        const hint = document.createElement("span");
+        hint.className = "jqtree-border";
+        hint.style.width = `${width}px`;
+        hint.style.height = `${height}px`;
+
+        this.hint = hint;
+
+        div.append(this.hint);
+    }
+
+    public remove(): void {
+        this.hint?.remove();
+    }
+}
+
+export default BorderDropHint;

package/src/nodeElement/folderElement.ts

@@ -0,0 +1,133 @@
+import { Position } from "../node";
+import NodeElement, { NodeElementParams } from "./index";
+import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
+
+interface FolderElementParams extends NodeElementParams {
+    closedIconElement?: HTMLElement | Text;
+    openedIconElement?: HTMLElement | Text;
+    triggerEvent: TriggerEvent;
+}
+
+class FolderElement extends NodeElement {
+    private closedIconElement?: HTMLElement | Text;
+    private openedIconElement?: HTMLElement | Text;
+    private triggerEvent: TriggerEvent;
+
+    constructor({
+        closedIconElement,
+        getScrollLeft,
+        node,
+        openedIconElement,
+        tabIndex,
+        $treeElement,
+        triggerEvent,
+    }: FolderElementParams) {
+        super({
+            getScrollLeft,
+            node,
+            tabIndex,
+            $treeElement,
+        });
+
+        this.closedIconElement = closedIconElement;
+        this.openedIconElement = openedIconElement;
+        this.triggerEvent = triggerEvent;
+    }
+
+    public open(
+        onFinished: OnFinishOpenNode | undefined,
+        slide = true,
+        animationSpeed: JQuery.Duration = "fast",
+    ): void {
+        if (this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = true;
+
+        const button = this.getButton();
+        button.classList.remove("jqtree-closed");
+        button.innerHTML = "";
+
+        const openedIconElement = this.openedIconElement;
+
+        if (openedIconElement) {
+            const icon = openedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doOpen = (): void => {
+            this.element.classList.remove("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "true");
+
+            if (onFinished) {
+                onFinished(this.node);
+            }
+
+            this.triggerEvent("tree.open", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
+        } else {
+            jQuery(this.getUl()).show();
+            doOpen();
+        }
+    }
+
+    public close(
+        slide = true,
+        animationSpeed: JQuery.Duration | undefined = "fast",
+    ): void {
+        if (!this.node.is_open) {
+            return;
+        }
+
+        this.node.is_open = false;
+
+        const button = this.getButton();
+        button.classList.add("jqtree-closed");
+        button.innerHTML = "";
+
+        const closedIconElement = this.closedIconElement;
+
+        if (closedIconElement) {
+            const icon = closedIconElement.cloneNode(true);
+            button.appendChild(icon);
+        }
+
+        const doClose = (): void => {
+            this.element.classList.add("jqtree-closed");
+
+            const titleSpan = this.getTitleSpan();
+            titleSpan.setAttribute("aria-expanded", "false");
+
+            this.triggerEvent("tree.close", {
+                node: this.node,
+            });
+        };
+
+        if (slide) {
+            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
+        } else {
+            jQuery(this.getUl()).hide();
+            doClose();
+        }
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return !this.node.is_open && position === Position.Inside;
+    }
+
+    private getButton(): HTMLLinkElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > a.jqtree-toggler",
+        ) as HTMLLinkElement;
+    }
+}
+
+export default FolderElement;

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/nodeUtils.ts

@@ -0,0 +1,10 @@
+interface NodeRecordWithChildren extends NodeRecord {
+    children: NodeData[];
+}
+
+export const isNodeRecordWithChildren = (
+    data: NodeData,
+): data is NodeRecordWithChildren =>
+    typeof data === "object" &&
+    "children" in data &&
+    data["children"] instanceof Array;

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);
             }
         }