jqtree 1.8.11 → 1.9.1

package/src/nodeElement/folderElement.ts

@@ -1,6 +1,10 @@
-import { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
-import { Position } from "../node";
-import NodeElement, { NodeElementParams } from "./index";
+import type { AnimationSpeed } from "../animation";
+import type { OnFinishOpenNode, TriggerEvent } from "../jqtreeMethodTypes";
+import type { Position } from "../node";
+import type { NodeElementParams } from "./index";
+
+import { slideDown, slideUp } from "../animation";
+import NodeElement from "./index";
 
 interface FolderElementParams extends NodeElementParams {
     closedIconElement?: HTMLElement | Text;
@@ -9,9 +13,9 @@ interface FolderElementParams extends NodeElementParams {
 }
 
 class FolderElement extends NodeElement {
-    private closedIconElement?: HTMLElement | Text;
-    private openedIconElement?: HTMLElement | Text;
-    private triggerEvent: TriggerEvent;
+    private _closedIconElement?: HTMLElement | Text;
+    private _openedIconElement?: HTMLElement | Text;
+    private _triggerEvent: TriggerEvent;
 
     constructor({
         closedIconElement,
@@ -29,23 +33,23 @@ class FolderElement extends NodeElement {
             treeElement,
         });
 
-        this.closedIconElement = closedIconElement;
-        this.openedIconElement = openedIconElement;
-        this.triggerEvent = triggerEvent;
+        this._closedIconElement = closedIconElement;
+        this._openedIconElement = openedIconElement;
+        this._triggerEvent = triggerEvent;
     }
 
-    public close(slide: boolean, animationSpeed: JQuery.Duration): void {
+    public close(slide: boolean, animationSpeed: AnimationSpeed): void {
         if (!this.node.is_open) {
             return;
         }
 
         this.node.is_open = false;
 
-        const button = this.getButton();
+        const button = this._getButton();
         button.classList.add("jqtree-closed");
         button.innerHTML = "";
 
-        const closedIconElement = this.closedIconElement;
+        const closedIconElement = this._closedIconElement;
 
         if (closedIconElement) {
             const icon = closedIconElement.cloneNode(true);
@@ -55,18 +59,20 @@ class FolderElement extends NodeElement {
         const doClose = (): void => {
             this.element.classList.add("jqtree-closed");
 
-            const titleSpan = this.getTitleSpan();
+            const titleSpan = this._getTitleSpan();
             titleSpan.setAttribute("aria-expanded", "false");
 
-            this.triggerEvent("tree.close", {
+            this._triggerEvent("tree.close", {
                 node: this.node,
             });
         };
 
+        const ul = this._getUl();
+
         if (slide) {
-            jQuery(this.getUl()).slideUp(animationSpeed, doClose);
+            slideUp(ul, animationSpeed, doClose);
         } else {
-            jQuery(this.getUl()).hide();
+            ul.style.display = "none";
             doClose();
         }
     }
@@ -74,7 +80,7 @@ class FolderElement extends NodeElement {
     public open(
         onFinished: OnFinishOpenNode | undefined,
         slide: boolean,
-        animationSpeed: JQuery.Duration,
+        animationSpeed: AnimationSpeed,
     ): void {
         if (this.node.is_open) {
             return;
@@ -82,11 +88,11 @@ class FolderElement extends NodeElement {
 
         this.node.is_open = true;
 
-        const button = this.getButton();
+        const button = this._getButton();
         button.classList.remove("jqtree-closed");
         button.innerHTML = "";
 
-        const openedIconElement = this.openedIconElement;
+        const openedIconElement = this._openedIconElement;
 
         if (openedIconElement) {
             const icon = openedIconElement.cloneNode(true);
@@ -96,31 +102,33 @@ class FolderElement extends NodeElement {
         const doOpen = (): void => {
             this.element.classList.remove("jqtree-closed");
 
-            const titleSpan = this.getTitleSpan();
+            const titleSpan = this._getTitleSpan();
             titleSpan.setAttribute("aria-expanded", "true");
 
             if (onFinished) {
                 onFinished(this.node);
             }
 
-            this.triggerEvent("tree.open", {
+            this._triggerEvent("tree.open", {
                 node: this.node,
             });
         };
 
+        const ul = this._getUl();
+
         if (slide) {
-            jQuery(this.getUl()).slideDown(animationSpeed, doOpen);
+            slideDown(ul, animationSpeed, doOpen);
         } else {
-            jQuery(this.getUl()).show();
+            ul.style.display = "block";
             doOpen();
         }
     }
 
-    protected mustShowBorderDropHint(position: Position): boolean {
+    protected _mustShowBorderDropHint(position: Position): boolean {
         return !this.node.is_open && position === "inside";
     }
 
-    private getButton(): HTMLLinkElement {
+    private _getButton(): HTMLLinkElement {
         return this.element.querySelector(
             ":scope > .jqtree-element > a.jqtree-toggler",
         ) as HTMLLinkElement;

package/src/nodeElement/ghostDropHint.ts

@@ -1,40 +1,40 @@
-import { DropHint } from "../dragAndDropHandler/types";
-import { Node, Position } from "../node";
+import type { DropHint } from "../dragAndDropHandler/types";
+import type { Node, Position } from "../node";
 
 class GhostDropHint implements DropHint {
-    private element: HTMLElement;
-    private ghost: HTMLElement;
-    private node: Node;
+    private _element: HTMLElement;
+    private _ghost: HTMLElement;
+    private _node: Node;
 
     constructor(node: Node, element: HTMLElement, position: Position) {
-        this.element = element;
-        this.node = node;
-        this.ghost = this.createGhostElement();
+        this._element = element;
+        this._node = node;
+        this._ghost = this._createGhostElement();
 
         switch (position) {
             case "after":
-                this.moveAfter();
+                this._moveAfter();
                 break;
 
             case "before":
-                this.moveBefore();
+                this._moveBefore();
                 break;
 
             case "inside": {
                 if (node.isFolder() && node.is_open) {
-                    this.moveInsideOpenFolder();
+                    this._moveInsideOpenFolder();
                 } else {
-                    this.moveInside();
+                    this._moveInside();
                 }
             }
         }
     }
 
     public remove(): void {
-        this.ghost.remove();
+        this._ghost.remove();
     }
 
-    private createGhostElement() {
+    private _createGhostElement() {
         const ghost = document.createElement("li");
         ghost.className = "jqtree_common jqtree-ghost";
 
@@ -49,24 +49,24 @@ class GhostDropHint implements DropHint {
         return ghost;
     }
 
-    private moveAfter(): void {
-        this.element.after(this.ghost);
+    private _moveAfter(): void {
+        this._element.after(this._ghost);
     }
 
-    private moveBefore(): void {
-        this.element.before(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 _moveInside(): void {
+        this._element.after(this._ghost);
+        this._ghost.classList.add("jqtree-inside");
     }
 
-    private moveInsideOpenFolder(): void {
-        const childElement = this.node.children[0]?.element;
+    private _moveInsideOpenFolder(): void {
+        const childElement = this._node.children[0]?.element;
 
         if (childElement) {
-            childElement.before(this.ghost);
+            childElement.before(this._ghost);
         }
     }
 }

package/src/nodeElement/index.ts

@@ -1,6 +1,7 @@
-import { DropHint } from "../dragAndDropHandler/types";
-import { GetScrollLeft } from "../jqtreeMethodTypes";
-import { Node, Position } from "../node";
+import type { DropHint } from "../dragAndDropHandler/types";
+import type { GetScrollLeft } from "../jqtreeMethodTypes";
+import type { Node, Position } from "../node";
+
 import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";
 
@@ -14,9 +15,9 @@ export interface NodeElementParams {
 class NodeElement {
     public element: HTMLElement;
     public node: Node;
-    private getScrollLeft: GetScrollLeft;
-    private tabIndex?: number;
-    private treeElement: HTMLElement;
+    private _getScrollLeft: GetScrollLeft;
+    private _tabIndex?: number;
+    private _treeElement: HTMLElement;
 
     constructor({
         getScrollLeft,
@@ -24,16 +25,16 @@ class NodeElement {
         tabIndex,
         treeElement,
     }: NodeElementParams) {
-        this.getScrollLeft = getScrollLeft;
-        this.tabIndex = tabIndex;
-        this.treeElement = treeElement;
+        this._getScrollLeft = getScrollLeft;
+        this._tabIndex = tabIndex;
+        this._treeElement = treeElement;
 
         this.init(node);
     }
 
     public addDropHint(position: Position): DropHint {
-        if (this.mustShowBorderDropHint(position)) {
-            return new BorderDropHint(this.element, this.getScrollLeft());
+        if (this._mustShowBorderDropHint(position)) {
+            return new BorderDropHint(this.element, this._getScrollLeft());
         } else {
             return new GhostDropHint(this.node, this.element, position);
         }
@@ -42,7 +43,7 @@ class NodeElement {
     public deselect(): void {
         this.element.classList.remove("jqtree-selected");
 
-        const titleSpan = this.getTitleSpan();
+        const titleSpan = this._getTitleSpan();
         titleSpan.removeAttribute("tabindex");
         titleSpan.setAttribute("aria-selected", "false");
 
@@ -52,7 +53,7 @@ class NodeElement {
     public init(node: Node): void {
         this.node = node;
 
-        node.element ??= this.treeElement;
+        node.element ??= this._treeElement;
 
         this.element = node.element;
     }
@@ -60,8 +61,8 @@ class NodeElement {
     public select(mustSetFocus: boolean): void {
         this.element.classList.add("jqtree-selected");
 
-        const titleSpan = this.getTitleSpan();
-        const tabIndex = this.tabIndex;
+        const titleSpan = this._getTitleSpan();
+        const tabIndex = this._tabIndex;
 
         // Check for null or undefined
         if (tabIndex != null) {
@@ -75,17 +76,17 @@ class NodeElement {
         }
     }
 
-    protected getTitleSpan(): HTMLSpanElement {
+    protected _getTitleSpan(): HTMLSpanElement {
         return this.element.querySelector(
             ":scope > .jqtree-element > span.jqtree-title",
         ) as HTMLSpanElement;
     }
 
-    protected getUl(): HTMLUListElement {
+    protected _getUl(): HTMLUListElement {
         return this.element.querySelector(":scope > ul") as HTMLUListElement;
     }
 
-    protected mustShowBorderDropHint(position: Position): boolean {
+    protected _mustShowBorderDropHint(position: Position): boolean {
         return position === "inside";
     }
 }

package/src/positionUtils.ts

@@ -0,0 +1,18 @@
+interface TopLeftPosition {
+  left: number;
+  top: number;
+}
+
+// Get the top position of the HTML element.
+export const getOffsetTop = (element: HTMLElement): number =>
+  getElementPosition(element).top;
+
+// Get the top left position of the HTML element.
+export const getElementPosition = (element: HTMLElement): TopLeftPosition => {
+  const rect = element.getBoundingClientRect();
+
+  return {
+    left: rect.x + window.scrollX,
+    top: rect.y + window.scrollY,
+  };
+};

package/src/saveStateHandler.ts

@@ -1,4 +1,4 @@
-import {
+import type {
     AddToSelection,
     GetNodeById,
     GetSelectedNodes,
@@ -7,8 +7,9 @@ import {
     RefreshElements,
     RemoveFromSelection,
 } from "./jqtreeMethodTypes";
-import { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
-import { Node } from "./node";
+import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
+import type { Node } from "./node";
+
 import { isInt } from "./util";
 
 export interface SavedState {
@@ -30,16 +31,16 @@ interface SaveStateHandlerParams {
 }
 
 export default class SaveStateHandler {
-    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 _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;
 
     constructor({
         addToSelection,
@@ -53,16 +54,16 @@ export default class SaveStateHandler {
         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;
+        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 getNodeIdToBeSelected(): NodeId | null {
@@ -79,7 +80,7 @@ export default class SaveStateHandler {
         const getOpenNodeIds = (): NodeId[] => {
             const openNodes: NodeId[] = [];
 
-            this.getTree()?.iterate((node: Node) => {
+            this._getTree()?.iterate((node: Node) => {
                 if (node.is_open && node.id && node.hasChildren()) {
                     openNodes.push(node.id);
                 }
@@ -92,7 +93,7 @@ export default class SaveStateHandler {
         const getSelectedNodeIds = (): NodeId[] => {
             const selectedNodeIds: NodeId[] = [];
 
-            this.getSelectedNodes().forEach((node) => {
+            this._getSelectedNodes().forEach((node) => {
                 if (node.id != null) {
                     selectedNodeIds.push(node.id);
                 }
@@ -108,10 +109,10 @@ export default class SaveStateHandler {
     }
 
     public getStateFromStorage(): null | SavedState {
-        const jsonData = this.loadFromStorage();
+        const jsonData = this._loadFromStorage();
 
         if (jsonData) {
-            return this.parseState(jsonData) as unknown as SavedState;
+            return this._parseState(jsonData);
         } else {
             return null;
         }
@@ -120,10 +121,10 @@ export default class SaveStateHandler {
     public saveState(): void {
         const state = JSON.stringify(this.getState());
 
-        if (this.onSetStateFromStorage) {
-            this.onSetStateFromStorage(state);
+        if (this._onSetStateFromStorage) {
+            this._onSetStateFromStorage(state);
         } else {
-            localStorage.setItem(this.getKeyName(), state);
+            localStorage.setItem(this._getKeyName(), state);
         }
     }
 
@@ -137,13 +138,13 @@ export default class SaveStateHandler {
         let mustLoadOnDemand = false;
 
         if (state.open_nodes) {
-            mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
+            mustLoadOnDemand = this._openInitialNodes(state.open_nodes);
         }
 
-        this.resetSelection();
+        this._resetSelection();
 
         if (state.selected_node) {
-            this.selectInitialNodes(state.selected_node);
+            this._selectInitialNodes(state.selected_node);
         }
 
         return mustLoadOnDemand;
@@ -164,7 +165,7 @@ export default class SaveStateHandler {
             const newNodesIds = [];
 
             for (const nodeId of nodeIds) {
-                const node = this.getNodeById(nodeId);
+                const node = this._getNodeById(nodeId);
 
                 if (!node) {
                     newNodesIds.push(nodeId);
@@ -173,7 +174,7 @@ export default class SaveStateHandler {
                         if (node.load_on_demand) {
                             loadAndOpenNode(node);
                         } else {
-                            this.openNode(node, false);
+                            this._openNode(node, false);
                         }
                     }
                 }
@@ -182,8 +183,8 @@ export default class SaveStateHandler {
             nodeIds = newNodesIds;
 
             if (state.selected_node) {
-                if (this.selectInitialNodes(state.selected_node)) {
-                    this.refreshElements(null);
+                if (this._selectInitialNodes(state.selected_node)) {
+                    this._refreshElements(null);
                 }
             }
 
@@ -194,7 +195,7 @@ export default class SaveStateHandler {
 
         const loadAndOpenNode = (node: Node): void => {
             loadingCount += 1;
-            this.openNode(node, false, () => {
+            this._openNode(node, false, () => {
                 loadingCount -= 1;
                 openNodes();
             });
@@ -203,27 +204,27 @@ export default class SaveStateHandler {
         openNodes();
     }
 
-    private getKeyName(): string {
-        if (typeof this.saveStateOption === "string") {
-            return this.saveStateOption;
+    private _getKeyName(): string {
+        if (typeof this._saveStateOption === "string") {
+            return this._saveStateOption;
         } else {
             return "tree";
         }
     }
 
-    private loadFromStorage(): null | string {
-        if (this.onGetStateFromStorage) {
-            return this.onGetStateFromStorage();
+    private _loadFromStorage(): null | string {
+        if (this._onGetStateFromStorage) {
+            return this._onGetStateFromStorage();
         } else {
-            return localStorage.getItem(this.getKeyName());
+            return localStorage.getItem(this._getKeyName());
         }
     }
 
-    private openInitialNodes(nodeIds: NodeId[]): boolean {
+    private _openInitialNodes(nodeIds: NodeId[]): boolean {
         let mustLoadOnDemand = false;
 
         for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+            const node = this._getNodeById(nodeId);
 
             if (node) {
                 if (!node.load_on_demand) {
@@ -237,7 +238,7 @@ export default class SaveStateHandler {
         return mustLoadOnDemand;
     }
 
-    private parseState(jsonData: string): SavedState {
+    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)
@@ -246,27 +247,27 @@ export default class SaveStateHandler {
             state.selected_node = [state.selected_node];
         }
 
-        return state as unknown as SavedState;
+        return state;
     }
 
-    private resetSelection(): void {
-        const selectedNodes = this.getSelectedNodes();
+    private _resetSelection(): void {
+        const selectedNodes = this._getSelectedNodes();
 
         selectedNodes.forEach((node) => {
-            this.removeFromSelection(node);
+            this._removeFromSelection(node);
         });
     }
 
-    private selectInitialNodes(nodeIds: NodeId[]): boolean {
+    private _selectInitialNodes(nodeIds: NodeId[]): boolean {
         let selectCount = 0;
 
         for (const nodeId of nodeIds) {
-            const node = this.getNodeById(nodeId);
+            const node = this._getNodeById(nodeId);
 
             if (node) {
                 selectCount += 1;
 
-                this.addToSelection(node);
+                this._addToSelection(node);
             }
         }
 

package/src/scrollHandler/containerScrollParent.ts

@@ -1,26 +1,28 @@
-import { getElementPosition, getOffsetTop } from "../util";
-import {
+import type {
     HorizontalScrollDirection,
-    ScrollParent,
     VerticalScrollDirection,
 } from "./scrollParent";
 
+import { getElementPosition, getOffsetTop } from "../positionUtils";
+import { ScrollParent } from "./scrollParent";
+
+
 export default class ContainerScrollParent extends ScrollParent {
-    private scrollParentBottom?: number;
-    private scrollParentTop?: number;
+    private _scrollParentBottom?: number;
+    private _scrollParentTop?: number;
 
     public stopScrolling() {
         super.stopScrolling();
 
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
+        this._horizontalScrollDirection = undefined;
+        this._verticalScrollDirection = undefined;
     }
 
-    protected getNewHorizontalScrollDirection(
+    protected _getNewHorizontalScrollDirection(
         pageX: number,
     ): HorizontalScrollDirection | undefined {
-        const scrollParentOffset = getElementPosition(this.container);
-        const containerWidth = this.container.getBoundingClientRect().width;
+        const scrollParentOffset = getElementPosition(this._container);
+        const containerWidth = this._container.getBoundingClientRect().width;
 
         const rightEdge = scrollParentOffset.left + containerWidth;
         const leftEdge = scrollParentOffset.left;
@@ -36,34 +38,34 @@ export default class ContainerScrollParent extends ScrollParent {
         return undefined;
     }
 
-    protected getNewVerticalScrollDirection(
+    protected _getNewVerticalScrollDirection(
         pageY: number,
     ): undefined | VerticalScrollDirection {
-        if (pageY < this.getScrollParentTop()) {
+        if (pageY < this._getScrollParentTop()) {
             return "top";
         }
 
-        if (pageY > this.getScrollParentBottom()) {
+        if (pageY > this._getScrollParentBottom()) {
             return "bottom";
         }
 
         return undefined;
     }
 
-    private getScrollParentBottom() {
-        if (this.scrollParentBottom == null) {
+    private _getScrollParentBottom() {
+        if (this._scrollParentBottom == null) {
             const containerHeight =
-                this.container.getBoundingClientRect().height;
-            this.scrollParentBottom =
-                this.getScrollParentTop() + containerHeight;
+                this._container.getBoundingClientRect().height;
+            this._scrollParentBottom =
+                this._getScrollParentTop() + containerHeight;
         }
 
-        return this.scrollParentBottom;
+        return this._scrollParentBottom;
     }
 
-    private getScrollParentTop() {
-        this.scrollParentTop ??= getOffsetTop(this.container);
+    private _getScrollParentTop() {
+        this._scrollParentTop ??= getOffsetTop(this._container);
 
-        return this.scrollParentTop;
+        return this._scrollParentTop;
     }
 }