jqtree 1.8.4 → 1.8.6

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

@@ -12,10 +12,6 @@ class GhostDropHint implements DropHint {
         this.ghost.classList.add("jqtree-inside");
     }
 
-    public remove(): void {
-        this.ghost.remove();
-    }
-
     private createGhostElement() {
         const ghost = document.createElement("li");
         ghost.className = "jqtree_common jqtree-ghost";
@@ -30,6 +26,10 @@ class GhostDropHint implements DropHint {
 
         return 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.element);
+        }
+    }
+
+    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,
 };

package/src/saveStateHandler.ts

@@ -1,6 +1,3 @@
-import { isInt } from "./util";
-import { Node } from "./node";
-import { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
 import {
     AddToSelection,
     GetNodeById,
@@ -10,10 +7,13 @@ import {
     RefreshElements,
     RemoveFromSelection,
 } from "./jqtreeMethodTypes";
+import { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
+import { Node } from "./node";
+import { isInt } from "./util";
 
 export interface SavedState {
-    open_nodes: NodeId[];
-    selected_node: NodeId[];
+    open_nodes?: NodeId[];
+    selected_node?: NodeId[];
 }
 
 interface SaveStateHandlerParams {
@@ -30,6 +30,7 @@ interface SaveStateHandlerParams {
 }
 
 export default class SaveStateHandler {
+    private _supportsLocalStorage: boolean | null;
     private addToSelection: AddToSelection;
     private getNodeById: GetNodeById;
     private getSelectedNodes: GetSelectedNodes;
@@ -40,7 +41,6 @@ export default class SaveStateHandler {
     private refreshElements: RefreshElements;
     private removeFromSelection: RemoveFromSelection;
     private saveStateOption: boolean | string;
-    private _supportsLocalStorage: boolean | null;
 
     constructor({
         addToSelection,
@@ -66,21 +66,104 @@ export default class SaveStateHandler {
         this.saveStateOption = saveState;
     }
 
-    public saveState(): void {
-        const state = JSON.stringify(this.getState());
+    private getKeyName(): string {
+        if (typeof this.saveStateOption === "string") {
+            return this.saveStateOption;
+        } else {
+            return "tree";
+        }
+    }
 
-        if (this.onSetStateFromStorage) {
-            this.onSetStateFromStorage(state);
+    private loadFromStorage(): null | string {
+        if (this.onGetStateFromStorage) {
+            return this.onGetStateFromStorage();
         } else if (this.supportsLocalStorage()) {
-            localStorage.setItem(this.getKeyName(), state);
+            return localStorage.getItem(this.getKeyName());
+        } else {
+            return null;
         }
     }
 
-    public getStateFromStorage(): SavedState | null {
-        const jsonData = this.loadFromStorage();
+    private openInitialNodes(nodeIds: NodeId[]): boolean {
+        let mustLoadOnDemand = false;
 
-        if (jsonData) {
-            return this.parseState(jsonData) as unknown as SavedState;
+        for (const nodeId of nodeIds) {
+            const node = this.getNodeById(nodeId);
+
+            if (node) {
+                if (!node.load_on_demand) {
+                    node.is_open = true;
+                } else {
+                    mustLoadOnDemand = true;
+                }
+            }
+        }
+
+        return mustLoadOnDemand;
+    }
+
+    private parseState(jsonData: string): SavedState {
+        const state = JSON.parse(jsonData) as Record<string, unknown>;
+
+        // Check if selected_node is an int (instead of an array)
+        if (state.selected_node && isInt(state.selected_node)) {
+            // Convert to array
+            state.selected_node = [state.selected_node];
+        }
+
+        return state as unknown as SavedState;
+    }
+
+    private resetSelection(): void {
+        const selectedNodes = this.getSelectedNodes();
+
+        selectedNodes.forEach((node) => {
+            this.removeFromSelection(node);
+        });
+    }
+
+    private selectInitialNodes(nodeIds: NodeId[]): boolean {
+        let selectCount = 0;
+
+        for (const nodeId of nodeIds) {
+            const node = this.getNodeById(nodeId);
+
+            if (node) {
+                selectCount += 1;
+
+                this.addToSelection(node);
+            }
+        }
+
+        return selectCount !== 0;
+    }
+
+    private supportsLocalStorage(): boolean {
+        const testSupport = (): boolean => {
+            // Check if it's possible to store an item. Safari does not allow this in private browsing mode.
+            try {
+                const key = "_storage_test";
+                sessionStorage.setItem(key, "value");
+                sessionStorage.removeItem(key);
+            } catch {
+                return false;
+            }
+
+            return true;
+        };
+
+        if (this._supportsLocalStorage == null) {
+            this._supportsLocalStorage = testSupport();
+        }
+
+        return this._supportsLocalStorage;
+    }
+
+    public getNodeIdToBeSelected(): NodeId | null {
+        const state = this.getStateFromStorage();
+
+        if (state?.selected_node) {
+            return state.selected_node[0] ?? null;
         } else {
             return null;
         }
@@ -118,6 +201,26 @@ export default class SaveStateHandler {
         };
     }
 
+    public getStateFromStorage(): null | SavedState {
+        const jsonData = this.loadFromStorage();
+
+        if (jsonData) {
+            return this.parseState(jsonData) as unknown as SavedState;
+        } else {
+            return null;
+        }
+    }
+
+    public saveState(): void {
+        const state = JSON.stringify(this.getState());
+
+        if (this.onSetStateFromStorage) {
+            this.onSetStateFromStorage(state);
+        } else if (this.supportsLocalStorage()) {
+            localStorage.setItem(this.getKeyName(), state);
+        }
+    }
+
     /*
     Set initial state
     Don't handle nodes that are loaded on demand
@@ -125,22 +228,19 @@ export default class SaveStateHandler {
     result: must load on demand
     */
     public setInitialState(state: SavedState): boolean {
-        if (!state) {
-            return false;
-        } else {
-            let mustLoadOnDemand = false;
+        let mustLoadOnDemand = false;
 
-            if (state.open_nodes) {
-                mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
-            }
+        if (state.open_nodes) {
+            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+        }
 
-            if (state.selected_node) {
-                this.resetSelection();
-                this.selectInitialNodes(state.selected_node);
-            }
+        this.resetSelection();
 
-            return mustLoadOnDemand;
+        if (state.selected_node) {
+            this.selectInitialNodes(state.selected_node);
         }
+
+        return mustLoadOnDemand;
     }
 
     public setInitialStateOnDemand(
@@ -151,6 +251,10 @@ export default class SaveStateHandler {
         let nodeIds = state.open_nodes;
 
         const openNodes = (): void => {
+            if (!nodeIds) {
+                return;
+            }
+
             const newNodesIds = [];
 
             for (const nodeId of nodeIds) {
@@ -171,8 +275,10 @@ export default class SaveStateHandler {
 
             nodeIds = newNodesIds;
 
-            if (this.selectInitialNodes(state.selected_node)) {
-                this.refreshElements(null);
+            if (state.selected_node) {
+                if (this.selectInitialNodes(state.selected_node)) {
+                    this.refreshElements(null);
+                }
             }
 
             if (loadingCount === 0) {
@@ -190,112 +296,4 @@ export default class SaveStateHandler {
 
         openNodes();
     }
-
-    public getNodeIdToBeSelected(): NodeId | null {
-        const state = this.getStateFromStorage();
-
-        if (state?.selected_node) {
-            return state.selected_node[0] || null;
-        } else {
-            return null;
-        }
-    }
-
-    private parseState(jsonData: string): SavedState {
-        const state = JSON.parse(jsonData) as Record<string, unknown>;
-
-        // Check if selected_node is an int (instead of an array)
-        if (state && state.selected_node && isInt(state.selected_node)) {
-            // Convert to array
-            state.selected_node = [state.selected_node];
-        }
-
-        return state as unknown as SavedState;
-    }
-
-    private loadFromStorage(): string | null {
-        if (this.onGetStateFromStorage) {
-            return this.onGetStateFromStorage();
-        } else if (this.supportsLocalStorage()) {
-            return localStorage.getItem(this.getKeyName());
-        } else {
-            return null;
-        }
-    }
-
-    private openInitialNodes(nodeIds: NodeId[]): boolean {
-        let mustLoadOnDemand = false;
-
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
-
-            if (node) {
-                if (!node.load_on_demand) {
-                    node.is_open = true;
-                } else {
-                    mustLoadOnDemand = true;
-                }
-            }
-        }
-
-        return mustLoadOnDemand;
-    }
-
-    private selectInitialNodes(nodeIds: NodeId[]): boolean {
-        let selectCount = 0;
-
-        for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
-
-            if (node) {
-                selectCount += 1;
-
-                this.addToSelection(node);
-            }
-        }
-
-        return selectCount !== 0;
-    }
-
-    private resetSelection(): void {
-        const selectedNodes = this.getSelectedNodes();
-
-        selectedNodes.forEach((node) => {
-            this.removeFromSelection(node);
-        });
-    }
-
-    private getKeyName(): string {
-        if (typeof this.saveStateOption === "string") {
-            return this.saveStateOption;
-        } else {
-            return "tree";
-        }
-    }
-
-    private supportsLocalStorage(): boolean {
-        const testSupport = (): boolean => {
-            // Is local storage supported?
-            if (localStorage == null) {
-                return false;
-            } else {
-                // Check if it's possible to store an item. Safari does not allow this in private browsing mode.
-                try {
-                    const key = "_storage_test";
-                    sessionStorage.setItem(key, "value");
-                    sessionStorage.removeItem(key);
-                } catch (error) {
-                    return false;
-                }
-
-                return true;
-            }
-        };
-
-        if (this._supportsLocalStorage == null) {
-            this._supportsLocalStorage = testSupport();
-        }
-
-        return this._supportsLocalStorage;
-    }
 }