jqtree 1.9.1 → 2.0.0

package/src/elementsRenderer.ts

@@ -1,359 +0,0 @@
-import type { GetTree, IsNodeSelected } from "./jqtreeMethodTypes";
-import type { IconElement, OnCreateLi } from "./jqtreeOptions";
-import type { Node } from "./node";
-
-import { getBoolString } from "./util";
-
-interface ElementsRendererParams {
-    autoEscape: boolean;
-    buttonLeft: boolean;
-    closedIcon?: IconElement;
-    dragAndDrop: boolean;
-    getTree: GetTree;
-    htmlElement: HTMLElement;
-    isNodeSelected: IsNodeSelected;
-    onCreateLi?: OnCreateLi;
-    openedIcon?: IconElement;
-    rtl?: boolean;
-    showEmptyFolder: boolean;
-    tabIndex?: number;
-}
-
-export default class ElementsRenderer {
-    public closedIconElement?: HTMLElement | Text;
-    public openedIconElement?: HTMLElement | Text;
-    private _autoEscape: boolean;
-    private _buttonLeft: boolean;
-    private _dragAndDrop: boolean;
-    private _getTree: GetTree;
-    private _htmlElement: HTMLElement;
-    private _isNodeSelected: IsNodeSelected;
-    private _onCreateLi?: OnCreateLi;
-    private _rtl?: boolean;
-
-    private _showEmptyFolder: boolean;
-    private _tabIndex?: number;
-
-    constructor({
-        autoEscape,
-        buttonLeft,
-        closedIcon,
-        dragAndDrop,
-        getTree,
-        htmlElement,
-        isNodeSelected,
-        onCreateLi,
-        openedIcon,
-        rtl,
-        showEmptyFolder,
-        tabIndex,
-    }: ElementsRendererParams) {
-        this._autoEscape = autoEscape;
-        this._buttonLeft = buttonLeft;
-        this._dragAndDrop = dragAndDrop;
-        this._getTree = getTree;
-        this._htmlElement = htmlElement;
-        this._isNodeSelected = isNodeSelected;
-        this._onCreateLi = onCreateLi;
-        this._rtl = rtl;
-        this._showEmptyFolder = showEmptyFolder;
-        this._tabIndex = tabIndex;
-        this.openedIconElement = this._createButtonElement(openedIcon ?? "+");
-        this.closedIconElement = this._createButtonElement(closedIcon ?? "-");
-    }
-
-    public render(fromNode: Node | null): void {
-        if (fromNode?.parent) {
-            this.renderFromNode(fromNode);
-        } else {
-            this.renderFromRoot();
-        }
-    }
-
-    public renderFromNode(node: Node): void {
-        if (!node.element) {
-            return;
-        }
-
-        const currentLi = node.element;
-        const newLi = this._createLi(node, node.getLevel());
-        currentLi.replaceWith(newLi);
-
-        // create children
-        this._createDomElements(newLi, node.children, false, node.getLevel() + 1);
-    }
-
-    public renderFromRoot(): void {
-        this._htmlElement.textContent = '';
-
-        const tree = this._getTree();
-
-        if (tree) {
-            this._createDomElements(this._htmlElement, tree.children, true, 1);
-        }
-    }
-
-    private _attachNodeData(node: Node, li: HTMLElement): void {
-        node.element = li;
-        jQuery(li).data("node", node);
-    }
-
-    private _createButtonElement(
-        value: IconElement,
-    ): HTMLElement | Text | undefined {
-        if (typeof value === "string") {
-            // convert value to html
-            const div = document.createElement("div");
-            div.innerHTML = value;
-
-            return document.createTextNode(div.innerHTML);
-        } else if ((value as HTMLElement).nodeType) {
-            return value as HTMLElement;
-        } else {
-            return jQuery(value)[0];
-        }
-    }
-
-    private _createDomElements(
-        element: Element,
-        children: Node[],
-        isRootNode: boolean,
-        level: number,
-    ): void {
-        const ul = this._createUl(isRootNode);
-        element.appendChild(ul);
-
-        for (const child of children) {
-            const li = this._createLi(child, level);
-            ul.appendChild(li);
-
-            if (child.hasChildren()) {
-                this._createDomElements(li, child.children, false, level + 1);
-            }
-        }
-    }
-
-    private _createFolderLi(
-        node: Node,
-        level: number,
-        isSelected: boolean,
-    ): HTMLLIElement {
-        const buttonClasses = this._getButtonClasses(node);
-        const folderClasses = this._getFolderClasses(node, isSelected);
-
-        const iconElement = node.is_open
-            ? this.openedIconElement
-            : this.closedIconElement;
-
-        // li
-        const li = document.createElement("li");
-        li.className = `jqtree_common ${folderClasses}`;
-        li.setAttribute("role", "none");
-
-        // div
-        const div = document.createElement("div");
-        div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "none");
-
-        li.appendChild(div);
-
-        // button link
-        const buttonLink = document.createElement("a");
-        buttonLink.className = buttonClasses;
-
-        if (iconElement) {
-            buttonLink.appendChild(iconElement.cloneNode(true));
-        }
-
-        if (this._buttonLeft) {
-            div.appendChild(buttonLink);
-        }
-
-        // title span
-        const titleSpan = this._createTitleSpan(
-            node.name,
-            isSelected,
-            true,
-            level,
-        );
-        titleSpan.setAttribute("aria-expanded", getBoolString(node.is_open));
-        div.appendChild(titleSpan);
-
-        if (!this._buttonLeft) {
-            div.appendChild(buttonLink);
-        }
-
-        return li;
-    }
-
-    /* Create the <li> element
-     * Attach it to node.element.
-     * Call onCreateLi
-     */
-    private _createLi(node: Node, level: number): HTMLLIElement {
-        const isSelected = this._isNodeSelected(node);
-
-        const mustShowFolder =
-            node.isFolder() || (node.isEmptyFolder && this._showEmptyFolder);
-
-        const li = mustShowFolder
-            ? this._createFolderLi(node, level, isSelected)
-            : this._createNodeLi(node, level, isSelected);
-
-        this._attachNodeData(node, li);
-
-        if (this._onCreateLi) {
-            this._onCreateLi(node, jQuery(li), isSelected);
-        }
-
-        return li;
-    }
-
-    private _createNodeLi(
-        node: Node,
-        level: number,
-        isSelected: boolean,
-    ): HTMLLIElement {
-        const liClasses = ["jqtree_common"];
-
-        if (isSelected) {
-            liClasses.push("jqtree-selected");
-        }
-
-        const classString = liClasses.join(" ");
-
-        // li
-        const li = document.createElement("li");
-        li.className = classString;
-        li.setAttribute("role", "none");
-
-        // div
-        const div = document.createElement("div");
-        div.className = "jqtree-element jqtree_common";
-        div.setAttribute("role", "none");
-
-        li.appendChild(div);
-
-        // title span
-        const titleSpan = this._createTitleSpan(
-            node.name,
-            isSelected,
-            false,
-            level,
-        );
-        div.appendChild(titleSpan);
-
-        return li;
-    }
-
-    private _createTitleSpan(
-        nodeName: string,
-        isSelected: boolean,
-        isFolder: boolean,
-        level: number,
-    ): HTMLSpanElement {
-        const titleSpan = document.createElement("span");
-
-        let classes = "jqtree-title jqtree_common";
-
-        if (isFolder) {
-            classes += " jqtree-title-folder";
-        }
-
-        classes += ` jqtree-title-button-${this._buttonLeft ? "left" : "right"}`;
-
-        titleSpan.className = classes;
-
-        if (isSelected) {
-            const tabIndex = this._tabIndex;
-
-            if (tabIndex !== undefined) {
-                titleSpan.setAttribute("tabindex", `${tabIndex}`);
-            }
-        }
-
-        this._setTreeItemAriaAttributes(titleSpan, nodeName, level, isSelected);
-
-        if (this._autoEscape) {
-            titleSpan.textContent = nodeName;
-        } else {
-            titleSpan.innerHTML = nodeName;
-        }
-
-        return titleSpan;
-    }
-
-    private _createUl(isRootNode: boolean): HTMLUListElement {
-        let classString;
-        let role;
-
-        if (!isRootNode) {
-            classString = "";
-            role = "group";
-        } else {
-            classString = "jqtree-tree";
-            role = "tree";
-
-            if (this._rtl) {
-                classString += " jqtree-rtl";
-            }
-        }
-
-        if (this._dragAndDrop) {
-            classString += " jqtree-dnd";
-        }
-
-        const ul = document.createElement("ul");
-        ul.className = `jqtree_common ${classString}`;
-
-        ul.setAttribute("role", role);
-
-        return ul;
-    }
-
-    private _getButtonClasses(node: Node): string {
-        const classes = ["jqtree-toggler", "jqtree_common"];
-
-        if (!node.is_open) {
-            classes.push("jqtree-closed");
-        }
-
-        if (this._buttonLeft) {
-            classes.push("jqtree-toggler-left");
-        } else {
-            classes.push("jqtree-toggler-right");
-        }
-
-        return classes.join(" ");
-    }
-
-    private _getFolderClasses(node: Node, isSelected: boolean): string {
-        const classes = ["jqtree-folder"];
-
-        if (!node.is_open) {
-            classes.push("jqtree-closed");
-        }
-
-        if (isSelected) {
-            classes.push("jqtree-selected");
-        }
-
-        if (node.is_loading) {
-            classes.push("jqtree-loading");
-        }
-
-        return classes.join(" ");
-    }
-
-    private _setTreeItemAriaAttributes(
-        element: HTMLElement,
-        name: string,
-        level: number,
-        isSelected: boolean,
-    ) {
-        element.setAttribute("aria-label", name);
-        element.setAttribute("aria-level", `${level}`);
-        element.setAttribute("aria-selected", getBoolString(isSelected));
-        element.setAttribute("role", "treeitem");
-    }
-}

package/src/jqtreeMethodTypes.ts

@@ -1,40 +0,0 @@
-import type { Node } from "./node";
-
-export type AddToSelection = (node: Node) => void;
-
-export type CloseNode = (node: Node) => void;
-
-export type GetNodeById = (nodeId: NodeId) => Node | null;
-
-export type GetScrollLeft = () => number;
-
-export type GetSelectedNode = () => false | Node;
-
-export type GetSelectedNodes = () => Node[];
-
-export type GetTree = () => Node | null;
-
-export type IsFocusOnTree = () => boolean;
-
-export type IsNodeSelected = (node: Node) => boolean;
-
-export type LoadData = (data: NodeData[], parentNode: Node | null) => void;
-
-export type OnFinishOpenNode = (node: Node) => void;
-
-export type OpenNode = (
-    node: Node,
-    slide?: boolean,
-    onFinished?: OnFinishOpenNode,
-) => void;
-
-export type RefreshElements = (fromNode: Node | null) => void;
-
-export type RemoveFromSelection = (node: Node) => void;
-
-export type SelectNode = (node: Node) => void;
-
-export type TriggerEvent = (
-    eventName: string,
-    values?: Record<string, unknown>,
-) => boolean;

package/src/keyHandler.ts

@@ -1,139 +0,0 @@
-import type {
-    CloseNode,
-    GetSelectedNode,
-    IsFocusOnTree,
-    OpenNode,
-    SelectNode,
-} from "./jqtreeMethodTypes";
-import type { Node } from "./node";
-
-interface KeyHandlerParams {
-    closeNode: CloseNode;
-    getSelectedNode: GetSelectedNode;
-    isFocusOnTree: IsFocusOnTree;
-    keyboardSupport: boolean;
-    openNode: OpenNode;
-    selectNode: SelectNode;
-}
-
-export default class KeyHandler {
-    private _closeNode: CloseNode;
-    private _getSelectedNode: GetSelectedNode;
-
-    private _isFocusOnTree: IsFocusOnTree;
-
-    private _keyboardSupport: boolean;
-    private _openNode: OpenNode;
-    private _originalSelectNode: SelectNode;
-    constructor({
-        closeNode,
-        getSelectedNode,
-        isFocusOnTree,
-        keyboardSupport,
-        openNode,
-        selectNode,
-    }: KeyHandlerParams) {
-        this._closeNode = closeNode;
-        this._getSelectedNode = getSelectedNode;
-        this._isFocusOnTree = isFocusOnTree;
-        this._keyboardSupport = keyboardSupport;
-        this._openNode = openNode;
-        this._originalSelectNode = selectNode;
-
-        if (keyboardSupport) {
-            document.addEventListener("keydown", this._handleKeyDown);
-        }
-    }
-
-    public deinit(): void {
-        if (this._keyboardSupport) {
-            document.removeEventListener("keydown", this._handleKeyDown);
-        }
-    }
-
-    public moveDown(selectedNode: Node): boolean {
-        return this._selectNode(selectedNode.getNextVisibleNode());
-    }
-
-    public moveUp(selectedNode: Node): boolean {
-        return this._selectNode(selectedNode.getPreviousVisibleNode());
-    }
-
-    private _canHandleKeyboard(): boolean {
-        return this._keyboardSupport && this._isFocusOnTree();
-    }
-
-    private _handleKeyDown = (e: KeyboardEvent): void => {
-        if (!this._canHandleKeyboard()) {
-            return;
-        }
-
-        let isKeyHandled = false;
-
-        const selectedNode = this._getSelectedNode();
-        if (selectedNode) {
-            switch (e.key) {
-                case "ArrowDown":
-                    isKeyHandled = this.moveDown(selectedNode);
-                    break;
-
-                case "ArrowLeft":
-                    isKeyHandled = this._moveLeft(selectedNode);
-                    break;
-
-                case "ArrowRight":
-                    isKeyHandled = this._moveRight(selectedNode);
-                    break;
-
-                case "ArrowUp":
-                    isKeyHandled = this.moveUp(selectedNode);
-                    break;
-            }
-        }
-
-        if (isKeyHandled) {
-            e.preventDefault();
-        }
-    };
-
-    private _moveLeft(selectedNode: Node): boolean {
-        if (selectedNode.isFolder() && selectedNode.is_open) {
-            // Left on an open node closes the node
-            this._closeNode(selectedNode);
-            return true;
-        } else {
-            // Left on a closed or end node moves focus to the node's parent
-            return this._selectNode(selectedNode.getParent());
-        }
-    }
-
-    private _moveRight(selectedNode: Node): boolean {
-        if (!selectedNode.isFolder()) {
-            return false;
-        } else {
-            // folder node
-            if (selectedNode.is_open) {
-                // Right moves to the first child of an open node
-                return this._selectNode(selectedNode.getNextVisibleNode());
-            } else {
-                // Right expands a closed node
-                this._openNode(selectedNode);
-                return true;
-            }
-        }
-    }
-
-    /* Select the node.
-     * Don't do anything if the node is null.
-     * Result: a different node was selected.
-     */
-    private _selectNode(node: Node | null): boolean {
-        if (!node) {
-            return false;
-        } else {
-            this._originalSelectNode(node);
-
-            return true;
-        }
-    }
-}