jqtree 1.9.0 → 2.0.0

package/src/nodeElement/folderElement.ts

@@ -1,138 +0,0 @@
-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;
-    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 close(slide: boolean, animationSpeed: AnimationSpeed): 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,
-            });
-        };
-
-        const ul = this.getUl();
-
-        if (slide) {
-            slideUp(ul, animationSpeed, doClose);
-        } else {
-            ul.style.display = "none";
-            doClose();
-        }
-    }
-
-    public open(
-        onFinished: OnFinishOpenNode | undefined,
-        slide: boolean,
-        animationSpeed: AnimationSpeed,
-    ): 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,
-            });
-        };
-
-        const ul = this.getUl();
-
-        if (slide) {
-            slideDown(ul, animationSpeed, doOpen);
-        } else {
-            ul.style.display = "block";
-            doOpen();
-        }
-    }
-
-    protected mustShowBorderDropHint(position: Position): boolean {
-        return !this.node.is_open && 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,74 +0,0 @@
-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;
-
-    constructor(node: Node, element: HTMLElement, position: Position) {
-        this._element = element;
-        this._node = node;
-        this._ghost = this._createGhostElement();
-
-        switch (position) {
-            case "after":
-                this._moveAfter();
-                break;
-
-            case "before":
-                this._moveBefore();
-                break;
-
-            case "inside": {
-                if (node.isFolder() && node.is_open) {
-                    this._moveInsideOpenFolder();
-                } else {
-                    this._moveInside();
-                }
-            }
-        }
-    }
-
-    public remove(): void {
-        this._ghost.remove();
-    }
-
-    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;
-    }
-
-    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);
-        }
-    }
-}
-
-export default GhostDropHint;

package/src/nodeElement/index.ts

@@ -1,94 +0,0 @@
-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";
-
-export interface NodeElementParams {
-    getScrollLeft: GetScrollLeft;
-    node: Node;
-    tabIndex?: number;
-    treeElement: HTMLElement;
-}
-
-class NodeElement {
-    public element: HTMLElement;
-    public node: Node;
-    private _getScrollLeft: GetScrollLeft;
-    private _tabIndex?: number;
-    private _treeElement: HTMLElement;
-
-    constructor({
-        getScrollLeft,
-        node,
-        tabIndex,
-        treeElement,
-    }: NodeElementParams) {
-        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());
-        } 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;
-
-        node.element ??= this._treeElement;
-
-        this.element = node.element;
-    }
-
-    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();
-        }
-    }
-
-    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 === "inside";
-    }
-}
-
-export default NodeElement;

package/src/nodeUtils.ts

@@ -1,10 +0,0 @@
-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/positionUtils.ts

@@ -1,18 +0,0 @@
-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,276 +0,0 @@
-import type {
-    AddToSelection,
-    GetNodeById,
-    GetSelectedNodes,
-    GetTree,
-    OpenNode,
-    RefreshElements,
-    RemoveFromSelection,
-} from "./jqtreeMethodTypes";
-import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./jqtreeOptions";
-import type { Node } from "./node";
-
-import { isInt } from "./util";
-
-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 _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,
-        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 getNodeIdToBeSelected(): NodeId | null {
-        const state = this.getStateFromStorage();
-
-        if (state?.selected_node) {
-            return state.selected_node[0] ?? null;
-        } else {
-            return null;
-        }
-    }
-
-    public getState(): SavedState {
-        const getOpenNodeIds = (): NodeId[] => {
-            const openNodes: NodeId[] = [];
-
-            this._getTree()?.iterate((node: Node) => {
-                if (node.is_open && node.id && node.hasChildren()) {
-                    openNodes.push(node.id);
-                }
-                return true;
-            });
-
-            return openNodes;
-        };
-
-        const getSelectedNodeIds = (): NodeId[] => {
-            const selectedNodeIds: NodeId[] = [];
-
-            this._getSelectedNodes().forEach((node) => {
-                if (node.id != null) {
-                    selectedNodeIds.push(node.id);
-                }
-            });
-
-            return selectedNodeIds;
-        };
-
-        return {
-            open_nodes: getOpenNodeIds(),
-            selected_node: getSelectedNodeIds(),
-        };
-    }
-
-    public getStateFromStorage(): null | SavedState {
-        const jsonData = this._loadFromStorage();
-
-        if (jsonData) {
-            return this._parseState(jsonData);
-        } else {
-            return null;
-        }
-    }
-
-    public saveState(): void {
-        const state = JSON.stringify(this.getState());
-
-        if (this._onSetStateFromStorage) {
-            this._onSetStateFromStorage(state);
-        } else {
-            localStorage.setItem(this._getKeyName(), state);
-        }
-    }
-
-    /*
-    Set initial state
-    Don't handle nodes that are loaded on demand
-
-    result: must load on demand (boolean)
-    */
-    public setInitialState(state: SavedState): boolean {
-        let mustLoadOnDemand = false;
-
-        if (state.open_nodes) {
-            mustLoadOnDemand = this._openInitialNodes(state.open_nodes);
-        }
-
-        this._resetSelection();
-
-        if (state.selected_node) {
-            this._selectInitialNodes(state.selected_node);
-        }
-
-        return mustLoadOnDemand;
-    }
-
-    public setInitialStateOnDemand(
-        state: SavedState,
-        cbFinished: () => void,
-    ): void {
-        let loadingCount = 0;
-        let nodeIds = state.open_nodes;
-
-        const openNodes = (): void => {
-            if (!nodeIds) {
-                return;
-            }
-
-            const newNodesIds = [];
-
-            for (const nodeId of nodeIds) {
-                const node = this._getNodeById(nodeId);
-
-                if (!node) {
-                    newNodesIds.push(nodeId);
-                } else {
-                    if (!node.is_loading) {
-                        if (node.load_on_demand) {
-                            loadAndOpenNode(node);
-                        } else {
-                            this._openNode(node, false);
-                        }
-                    }
-                }
-            }
-
-            nodeIds = newNodesIds;
-
-            if (state.selected_node) {
-                if (this._selectInitialNodes(state.selected_node)) {
-                    this._refreshElements(null);
-                }
-            }
-
-            if (loadingCount === 0) {
-                cbFinished();
-            }
-        };
-
-        const loadAndOpenNode = (node: Node): void => {
-            loadingCount += 1;
-            this._openNode(node, false, () => {
-                loadingCount -= 1;
-                openNodes();
-            });
-        };
-
-        openNodes();
-    }
-
-    private _getKeyName(): string {
-        if (typeof this._saveStateOption === "string") {
-            return this._saveStateOption;
-        } else {
-            return "tree";
-        }
-    }
-
-    private _loadFromStorage(): null | string {
-        if (this._onGetStateFromStorage) {
-            return this._onGetStateFromStorage();
-        } else {
-            return localStorage.getItem(this._getKeyName());
-        }
-    }
-
-    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 _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;
-    }
-
-    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;
-    }
-}

package/src/scrollHandler/containerScrollParent.ts

@@ -1,71 +0,0 @@
-import type {
-    HorizontalScrollDirection,
-    VerticalScrollDirection,
-} from "./scrollParent";
-
-import { getElementPosition, getOffsetTop } from "../positionUtils";
-import { ScrollParent } from "./scrollParent";
-
-
-export default class ContainerScrollParent extends ScrollParent {
-    private _scrollParentBottom?: number;
-    private _scrollParentTop?: number;
-
-    public stopScrolling() {
-        super.stopScrolling();
-
-        this.horizontalScrollDirection = undefined;
-        this.verticalScrollDirection = undefined;
-    }
-
-    protected getNewHorizontalScrollDirection(
-        pageX: number,
-    ): HorizontalScrollDirection | undefined {
-        const scrollParentOffset = getElementPosition(this.container);
-        const containerWidth = this.container.getBoundingClientRect().width;
-
-        const rightEdge = scrollParentOffset.left + containerWidth;
-        const leftEdge = scrollParentOffset.left;
-        const isNearRightEdge = pageX > rightEdge - 20;
-        const isNearLeftEdge = pageX < leftEdge + 20;
-
-        if (isNearRightEdge) {
-            return "right";
-        } else if (isNearLeftEdge) {
-            return "left";
-        }
-
-        return undefined;
-    }
-
-    protected getNewVerticalScrollDirection(
-        pageY: number,
-    ): undefined | VerticalScrollDirection {
-        if (pageY < this._getScrollParentTop()) {
-            return "top";
-        }
-
-        if (pageY > this._getScrollParentBottom()) {
-            return "bottom";
-        }
-
-        return undefined;
-    }
-
-    private _getScrollParentBottom() {
-        if (this._scrollParentBottom == null) {
-            const containerHeight =
-                this.container.getBoundingClientRect().height;
-            this._scrollParentBottom =
-                this._getScrollParentTop() + containerHeight;
-        }
-
-        return this._scrollParentBottom;
-    }
-
-    private _getScrollParentTop() {
-        this._scrollParentTop ??= getOffsetTop(this.container);
-
-        return this._scrollParentTop;
-    }
-}