jqtree 1.8.5 → 1.8.7

package/src/nodeElement/folderElement.ts

@@ -1,6 +1,6 @@
+import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
 import { Position } from "../position";
 import NodeElement, { NodeElementParams } from "./index";
-import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
 
 interface FolderElementParams extends NodeElementParams {
     closedIconElement?: HTMLElement | Text;
@@ -14,19 +14,19 @@ class FolderElement extends NodeElement {
     private triggerEvent: TriggerEvent;
 
     constructor({
+        $treeElement,
         closedIconElement,
         getScrollLeft,
         node,
         openedIconElement,
         tabIndex,
-        $treeElement,
         triggerEvent,
     }: FolderElementParams) {
         super({
+            $treeElement,
             getScrollLeft,
             node,
             tabIndex,
-            $treeElement,
         });
 
         this.closedIconElement = closedIconElement;
@@ -34,100 +34,100 @@ class FolderElement extends NodeElement {
         this.triggerEvent = triggerEvent;
     }
 
-    public open(
-        onFinished: OnFinishOpenNode | undefined,
+    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;
+    }
+
+    public close(
         slide = true,
-        animationSpeed: JQuery.Duration = "fast",
+        animationSpeed: JQuery.Duration | undefined = "fast",
     ): void {
-        if (this.node.is_open) {
+        if (!this.node.is_open) {
             return;
         }
 
-        this.node.is_open = true;
+        this.node.is_open = false;
 
         const button = this.getButton();
-        button.classList.remove("jqtree-closed");
+        button.classList.add("jqtree-closed");
         button.innerHTML = "";
 
-        const openedIconElement = this.openedIconElement;
+        const closedIconElement = this.closedIconElement;
 
-        if (openedIconElement) {
-            const icon = openedIconElement.cloneNode(true);
+        if (closedIconElement) {
+            const icon = closedIconElement.cloneNode(true);
             button.appendChild(icon);
         }
 
-        const doOpen = (): void => {
-            this.element.classList.remove("jqtree-closed");
+        const doClose = (): void => {
+            this.element.classList.add("jqtree-closed");
 
             const titleSpan = this.getTitleSpan();
-            titleSpan.setAttribute("aria-expanded", "true");
-
-            if (onFinished) {
-                onFinished(this.node);
-            }
+            titleSpan.setAttribute("aria-expanded", "false");
 
-            this.triggerEvent("tree.open", {
+            this.triggerEvent("tree.close", {
                 node: this.node,
             });
         };
 
         if (slide) {
-            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
+            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
         } else {
-            jQuery(this.getUl()).show();
-            doOpen();
+            jQuery(this.getUl()).hide();
+            doClose();
         }
     }
 
-    public close(
+    public open(
+        onFinished: OnFinishOpenNode | undefined,
         slide = true,
-        animationSpeed: JQuery.Duration | undefined = "fast",
+        animationSpeed: JQuery.Duration = "fast",
     ): void {
-        if (!this.node.is_open) {
+        if (this.node.is_open) {
             return;
         }
 
-        this.node.is_open = false;
+        this.node.is_open = true;
 
         const button = this.getButton();
-        button.classList.add("jqtree-closed");
+        button.classList.remove("jqtree-closed");
         button.innerHTML = "";
 
-        const closedIconElement = this.closedIconElement;
+        const openedIconElement = this.openedIconElement;
 
-        if (closedIconElement) {
-            const icon = closedIconElement.cloneNode(true);
+        if (openedIconElement) {
+            const icon = openedIconElement.cloneNode(true);
             button.appendChild(icon);
         }
 
-        const doClose = (): void => {
-            this.element.classList.add("jqtree-closed");
+        const doOpen = (): void => {
+            this.element.classList.remove("jqtree-closed");
 
             const titleSpan = this.getTitleSpan();
-            titleSpan.setAttribute("aria-expanded", "false");
+            titleSpan.setAttribute("aria-expanded", "true");
 
-            this.triggerEvent("tree.close", {
+            if (onFinished) {
+                onFinished(this.node);
+            }
+
+            this.triggerEvent("tree.open", {
                 node: this.node,
             });
         };
 
         if (slide) {
-            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
+            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
         } else {
-            jQuery(this.getUl()).hide();
-            doClose();
+            jQuery(this.getUl()).show();
+            doOpen();
         }
     }
-
-    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

@@ -1,19 +1,34 @@
 import { DropHint } from "../dragAndDropHandler/types";
+import { Node } from "../node";
+import { Position } from "../position";
 
 class GhostDropHint implements DropHint {
     private element: HTMLElement;
     private ghost: HTMLElement;
+    private node: Node;
 
-    constructor(element: HTMLElement) {
+    constructor(node: Node, element: HTMLElement, position: Position) {
         this.element = element;
+        this.node = node;
         this.ghost = this.createGhostElement();
 
-        this.element.after(this.ghost);
-        this.ghost.classList.add("jqtree-inside");
-    }
+        switch (position) {
+            case Position.After:
+                this.moveAfter();
+                break;
 
-    public remove(): void {
-        this.ghost.remove();
+            case Position.Before:
+                this.moveBefore();
+                break;
+
+            case Position.Inside: {
+                if (node.isFolder() && node.is_open) {
+                    this.moveInsideOpenFolder();
+                } else {
+                    this.moveInside();
+                }
+            }
+        }
     }
 
     private createGhostElement() {
@@ -30,6 +45,31 @@ class GhostDropHint implements DropHint {
 
         return ghost;
     }
+
+    private moveAfter(): void {
+        this.element.after(this.ghost);
+    }
+
+    private moveBefore(): void {
+        this.element.before(this.ghost);
+    }
+
+    private moveInside(): void {
+        this.element.after(this.ghost);
+        this.ghost.classList.add("jqtree-inside");
+    }
+
+    private moveInsideOpenFolder(): void {
+        const childElement = this.node.children[0]?.element;
+
+        if (childElement) {
+            childElement.before(this.ghost);
+        }
+    }
+
+    public remove(): void {
+        this.ghost.remove();
+    }
 }
 
 export default GhostDropHint;

package/src/nodeElement/index.ts

@@ -1,29 +1,29 @@
+import { DropHint } from "../dragAndDropHandler/types";
+import { GetScrollLeft } from "../jqtreeMethodTypes";
 import { Node } from "../node";
 import { Position } from "../position";
-import { DropHint } from "../dragAndDropHandler/types";
 import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";
-import { GetScrollLeft } from "../jqtreeMethodTypes";
 
 export interface NodeElementParams {
+    $treeElement: JQuery;
     getScrollLeft: GetScrollLeft;
     node: Node;
     tabIndex?: number;
-    $treeElement: JQuery<HTMLElement>;
 }
 
 class NodeElement {
-    public node: Node;
-    public element: HTMLElement;
+    private $treeElement: JQuery;
     private getScrollLeft: GetScrollLeft;
     private tabIndex?: number;
-    private $treeElement: JQuery<HTMLElement>;
+    public element: HTMLElement;
+    public node: Node;
 
     constructor({
+        $treeElement,
         getScrollLeft,
         node,
         tabIndex,
-        $treeElement,
     }: NodeElementParams) {
         this.getScrollLeft = getScrollLeft;
         this.tabIndex = tabIndex;
@@ -32,6 +32,38 @@ class NodeElement {
         this.init(node);
     }
 
+    protected getTitleSpan(): HTMLSpanElement {
+        return this.element.querySelector(
+            ":scope > .jqtree-element > span.jqtree-title",
+        ) as HTMLSpanElement;
+    }
+
+    protected getUl(): HTMLUListElement {
+        return this.element.querySelector(":scope > ul") as HTMLUListElement;
+    }
+
+    protected mustShowBorderDropHint(position: Position): boolean {
+        return position === Position.Inside;
+    }
+
+    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 deselect(): void {
+        this.element.classList.remove("jqtree-selected");
+
+        const titleSpan = this.getTitleSpan();
+        titleSpan.removeAttribute("tabindex");
+        titleSpan.setAttribute("aria-selected", "false");
+
+        titleSpan.blur();
+    }
+
     public init(node: Node): void {
         this.node = node;
 
@@ -48,14 +80,6 @@ class NodeElement {
         }
     }
 
-    public addDropHint(position: number): DropHint {
-        if (this.mustShowBorderDropHint(position)) {
-            return new BorderDropHint(this.element, this.getScrollLeft());
-        } else {
-            return new GhostDropHint(this.element);
-        }
-    }
-
     public select(mustSetFocus: boolean): void {
         this.element.classList.add("jqtree-selected");
 
@@ -73,30 +97,6 @@ class NodeElement {
             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

@@ -7,4 +7,4 @@ export const isNodeRecordWithChildren = (
 ): data is NodeRecordWithChildren =>
     typeof data === "object" &&
     "children" in data &&
-    data["children"] instanceof Array;
+    data.children instanceof Array;

package/src/position.ts

@@ -6,8 +6,8 @@ export enum Position {
 }
 
 const positionNames: Record<string, Position> = {
-    before: Position.Before,
     after: Position.After,
+    before: Position.Before,
     inside: Position.Inside,
     none: Position.None,
 };