tree-element 0.1.1 → 0.3.0

package/src/nodeElement/borderDropHint.ts

@@ -2,36 +2,36 @@ import type { ClassNames } from "../classNames";
 import type { DropHint } from "../dragAndDropHandler/types";
 
 class BorderDropHint implements DropHint {
-    private hint?: HTMLElement;
-
-    constructor(
-        element: HTMLElement,
-        scrollLeft: number,
-        classNames: ClassNames,
-    ) {
-        const div = element.querySelector(`:scope > .${classNames.element}`);
+  private hint?: HTMLElement;
+
+  constructor(
+    element: HTMLElement,
+    scrollLeft: number,
+    classNames: ClassNames,
+  ) {
+    const div = element.querySelector(`:scope > .${classNames.element}`);
+
+    if (!div) {
+      this.hint = undefined;
+      return;
+    }
 
-        if (!div) {
-            this.hint = undefined;
-            return;
-        }
+    const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
+    const height = Math.max(element.clientHeight - 4, 0);
 
-        const width = Math.max(element.offsetWidth + scrollLeft - 4, 0);
-        const height = Math.max(element.clientHeight - 4, 0);
+    const hint = document.createElement("span");
+    hint.className = classNames.border;
+    hint.style.width = `${width}px`;
+    hint.style.height = `${height}px`;
 
-        const hint = document.createElement("span");
-        hint.className = classNames.border;
-        hint.style.width = `${width}px`;
-        hint.style.height = `${height}px`;
+    this.hint = hint;
 
-        this.hint = hint;
+    div.append(this.hint);
+  }
 
-        div.append(this.hint);
-    }
-
-    public remove(): void {
-        this.hint?.remove();
-    }
+  public remove(): void {
+    this.hint?.remove();
+  }
 }
 
 export default BorderDropHint;

package/src/nodeElement/folderElement.ts

@@ -1,140 +1,154 @@
 import type { AnimationSpeed } from "../animation";
 import type { TriggerEvent } from "../methodTypes";
-import type { Position } from "../node";
+import type { Node, Position } from "../node";
 import type { NodeElementParams } from "./index";
 
 import { slideDown, slideUp } from "../animation";
 import NodeElement from "./index";
 
+export type RenderChildren = (node: Node) => HTMLUListElement | null;
+
 interface FolderElementParams extends NodeElementParams {
-    closedIconElement?: HTMLElement | Text;
-    openedIconElement?: HTMLElement | Text;
-    triggerEvent: TriggerEvent;
+  closedIconElement?: globalThis.Node;
+  openedIconElement?: globalThis.Node;
+  renderChildren: RenderChildren;
+  triggerEvent: TriggerEvent;
 }
 
 class FolderElement extends NodeElement {
-    private closedIconElement?: HTMLElement | Text;
-    private openedIconElement?: HTMLElement | Text;
-    private triggerEvent: TriggerEvent;
-
-    constructor({
-        classNames,
-        closedIconElement,
-        getScrollLeft,
-        node,
-        openedIconElement,
-        tabIndex,
-        treeElement,
-        triggerEvent,
-    }: FolderElementParams) {
-        super({
-            classNames,
-            getScrollLeft,
-            node,
-            tabIndex,
-            treeElement,
-        });
-
-        this.closedIconElement = closedIconElement;
-        this.openedIconElement = openedIconElement;
-        this.triggerEvent = triggerEvent;
+  private closedIconElement?: globalThis.Node;
+  private openedIconElement?: globalThis.Node;
+  private renderChildren: RenderChildren;
+  private triggerEvent: TriggerEvent;
+
+  constructor({
+    classNames,
+    closedIconElement,
+    getScrollLeft,
+    node,
+    openedIconElement,
+    renderChildren,
+    tabIndex,
+    treeElement,
+    triggerEvent,
+  }: FolderElementParams) {
+    super({
+      classNames,
+      getScrollLeft,
+      node,
+      tabIndex,
+      treeElement,
+    });
+
+    this.closedIconElement = closedIconElement;
+    this.openedIconElement = openedIconElement;
+    this.renderChildren = renderChildren;
+    this.triggerEvent = triggerEvent;
+  }
+
+  public async close(
+    slide: boolean,
+    animationSpeed: AnimationSpeed,
+  ): Promise<void> {
+    if (!this.node.is_open) {
+      return;
     }
 
-    public close(slide: boolean, animationSpeed: AnimationSpeed): void {
-        if (!this.node.is_open) {
-            return;
-        }
+    this.node.is_open = false;
+
+    if (!this.isRendered()) {
+      this.triggerEvent("tree.close", { node: this.node });
+      return;
+    }
 
-        this.node.is_open = false;
+    const button = this.getButton();
+    button.classList.add(this.classNames.closed);
+    button.replaceChildren();
 
-        const button = this.getButton();
-        button.classList.add(this.classNames.closed);
-        button.innerHTML = "";
+    const closedIconElement = this.closedIconElement;
 
-        const closedIconElement = this.closedIconElement;
+    if (closedIconElement) {
+      const icon = closedIconElement.cloneNode(true);
+      button.append(icon);
+    }
 
-        if (closedIconElement) {
-            const icon = closedIconElement.cloneNode(true);
-            button.appendChild(icon);
-        }
+    const ul = this.getUl();
 
-        const doClose = (): void => {
-            this.element.classList.add(this.classNames.closed);
+    if (ul) {
+      if (slide) {
+        await slideUp(ul, animationSpeed);
+      } else {
+        ul.style.display = "none";
+      }
+    }
 
-            const titleSpan = this.getTitleSpan();
-            titleSpan.setAttribute("aria-expanded", "false");
+    this.element.classList.add(this.classNames.closed);
 
-            this.triggerEvent("tree.close", {
-                node: this.node,
-            });
-        };
+    const titleSpan = this.getTitleSpan();
+    titleSpan.setAttribute("aria-expanded", "false");
 
-        const ul = this.getUl();
+    this.triggerEvent("tree.close", {
+      node: this.node,
+    });
+  }
 
-        if (slide) {
-            slideUp(ul, animationSpeed, doClose);
-        } else {
-            ul.style.display = "none";
-            doClose();
-        }
+  public async open(
+    slide: boolean,
+    animationSpeed: AnimationSpeed,
+  ): Promise<void> {
+    if (this.node.is_open) {
+      return;
     }
 
-    public async open(
-        slide: boolean,
-        animationSpeed: AnimationSpeed,
-    ): Promise<void> {
-        return new Promise(resolve => {
-            if (this.node.is_open) {
-                resolve();
-                return;
-            }
-
-            this.node.is_open = true;
+    this.node.is_open = true;
 
-            const button = this.getButton();
-            button.classList.remove(this.classNames.closed);
-            button.innerHTML = "";
+    if (!this.isRendered()) {
+      // The folder is rendered open when its parent is opened
+      this.triggerEvent("tree.open", { node: this.node });
+      return;
+    }
 
-            const openedIconElement = this.openedIconElement;
+    const button = this.getButton();
+    button.classList.remove(this.classNames.closed);
+    button.replaceChildren();
 
-            if (openedIconElement) {
-                const icon = openedIconElement.cloneNode(true);
-                button.appendChild(icon);
-            }
+    const openedIconElement = this.openedIconElement;
 
-            const doOpen = (): void => {
-                this.element.classList.remove(this.classNames.closed);
+    if (openedIconElement) {
+      const icon = openedIconElement.cloneNode(true);
+      button.append(icon);
+    }
 
-                const titleSpan = this.getTitleSpan();
-                titleSpan.setAttribute("aria-expanded", "true");
+    // The children are rendered the first time the folder is opened
+    const ul = this.getUl() ?? this.renderChildren(this.node);
 
-                this.triggerEvent("tree.open", {
-                    node: this.node,
-                });
+    if (ul) {
+      if (slide) {
+        await slideDown(ul, animationSpeed);
+      } else {
+        ul.style.display = "block";
+      }
+    }
 
-                resolve();
-            };
+    this.element.classList.remove(this.classNames.closed);
 
-            const ul = this.getUl();
+    const titleSpan = this.getTitleSpan();
+    titleSpan.setAttribute("aria-expanded", "true");
 
-            if (slide) {
-                slideDown(ul, animationSpeed, doOpen);
-            } else {
-                ul.style.display = "block";
-                doOpen();
-            }
-        });
-    }
+    this.triggerEvent("tree.open", {
+      node: this.node,
+    });
+  }
 
-    protected mustShowBorderDropHint(position: Position): boolean {
-        return !this.node.is_open && position === "inside";
-    }
+  protected mustShowBorderDropHint(position: Position): boolean {
+    return !this.node.is_open && position === "inside";
+  }
 
-    private getButton(): HTMLLinkElement {
-        return this.element.querySelector(
-            `:scope > .${this.classNames.element} > a.${this.classNames.toggler}`,
-        ) as HTMLLinkElement;
-    }
+  private getButton(): HTMLElement {
+    return this.element.querySelector(
+      `:scope > .${this.classNames.element} > .${this.classNames.toggler}`,
+    ) as HTMLElement;
+  }
 }
 
 export default FolderElement;

package/src/nodeElement/ghostDropHint.ts

@@ -3,82 +3,84 @@ import type { DropHint } from "../dragAndDropHandler/types";
 import type { Node, Position } from "../node";
 
 class GhostDropHint implements DropHint {
-    private classNames: ClassNames;
-    private element: HTMLElement;
-    private ghost: HTMLElement;
-    private node: Node;
-
-    constructor(
-        node: Node,
-        element: HTMLElement,
-        position: Position,
-        classNames: ClassNames,
-    ) {
-        this.classNames = classNames;
-        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();
-                }
-            }
+  private classNames: ClassNames;
+  private element: HTMLElement;
+  private ghost: HTMLElement;
+  private node: Node;
+
+  constructor(
+    node: Node,
+    element: HTMLElement,
+    position: Position,
+    classNames: ClassNames,
+  ) {
+    this.classNames = classNames;
+    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();
-    }
+  public remove(): void {
+    this.ghost.remove();
+  }
 
-    private createGhostElement() {
-        const { circle, common, ghost: ghostClass, line } = this.classNames;
+  private createGhostElement() {
+    const { circle, common, ghost: ghostClass, line } = this.classNames;
 
-        const ghost = document.createElement("li");
-        ghost.className = `${common} ${ghostClass}`;
+    const ghost = document.createElement("li");
+    ghost.className = `${common} ${ghostClass}`;
 
-        const circleSpan = document.createElement("span");
-        circleSpan.className = `${common} ${circle}`;
-        ghost.append(circleSpan);
+    const circleSpan = document.createElement("span");
+    circleSpan.className = `${common} ${circle}`;
+    ghost.append(circleSpan);
 
-        const lineSpan = document.createElement("span");
-        lineSpan.className = `${common} ${line}`;
-        ghost.append(lineSpan);
+    const lineSpan = document.createElement("span");
+    lineSpan.className = `${common} ${line}`;
+    ghost.append(lineSpan);
 
-        return ghost;
-    }
+    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(this.classNames.inside);
-    }
+  private moveInside(): void {
+    this.element.after(this.ghost);
+    this.ghost.classList.add(this.classNames.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);
-        }
+    if (childElement) {
+      childElement.before(this.ghost);
     }
+  }
 }
 
 export default GhostDropHint;

package/src/nodeElement/index.ts

@@ -7,97 +7,105 @@ import BorderDropHint from "./borderDropHint";
 import GhostDropHint from "./ghostDropHint";
 
 export interface NodeElementParams {
-    classNames: ClassNames;
-    getScrollLeft: GetScrollLeft;
-    node: Node;
-    tabIndex?: number;
-    treeElement: HTMLElement;
+  classNames: ClassNames;
+  getScrollLeft: GetScrollLeft;
+  node: Node;
+  tabIndex?: number;
+  treeElement: HTMLElement;
 }
 
 class NodeElement {
-    public element: HTMLElement;
-    public node: Node;
-    protected classNames: ClassNames;
-    private getScrollLeft: GetScrollLeft;
-    private tabIndex?: number;
-    private treeElement: HTMLElement;
-
-    constructor({
-        classNames,
-        getScrollLeft,
-        node,
-        tabIndex,
-        treeElement,
-    }: NodeElementParams) {
-        this.classNames = classNames;
-        this.getScrollLeft = getScrollLeft;
-        this.node = node;
-        this.tabIndex = tabIndex;
-        this.treeElement = treeElement;
-
-        node.element ??= this.treeElement;
-        this.element = node.element;
-
-    }
-
-    public addDropHint(position: Position): DropHint {
-        if (this.mustShowBorderDropHint(position)) {
-            return new BorderDropHint(
-                this.element,
-                this.getScrollLeft(),
-                this.classNames,
-            );
-        } else {
-            return new GhostDropHint(
-                this.node,
-                this.element,
-                position,
-                this.classNames,
-            );
-        }
+  public element: HTMLElement;
+  public node: Node;
+  protected classNames: ClassNames;
+  private getScrollLeft: GetScrollLeft;
+  private tabIndex?: number;
+  private treeElement: HTMLElement;
+
+  constructor({
+    classNames,
+    getScrollLeft,
+    node,
+    tabIndex,
+    treeElement,
+  }: NodeElementParams) {
+    this.classNames = classNames;
+    this.getScrollLeft = getScrollLeft;
+    this.node = node;
+    this.tabIndex = tabIndex;
+    this.treeElement = treeElement;
+
+    // The root node has no element of its own; it uses the tree element.
+    this.element = node.element ?? this.treeElement;
+  }
+
+  public addDropHint(position: Position): DropHint {
+    return this.mustShowBorderDropHint(position)
+      ? new BorderDropHint(this.element, this.getScrollLeft(), this.classNames)
+      : new GhostDropHint(this.node, this.element, position, this.classNames);
+  }
+
+  public deselect(): void {
+    if (!this.isRendered()) {
+      return;
     }
 
-    public deselect(): void {
-        this.element.classList.remove(this.classNames.selected);
+    this.element.classList.remove(this.classNames.selected);
 
-        const titleSpan = this.getTitleSpan();
-        titleSpan.removeAttribute("tabindex");
-        titleSpan.setAttribute("aria-selected", "false");
+    const titleSpan = this.getTitleSpan();
 
-        titleSpan.blur();
+    // Check for null or undefined
+    if (this.tabIndex != null) {
+      titleSpan.setAttribute("tabindex", "-1");
     }
 
-    public select(mustSetFocus: boolean): void {
-        this.element.classList.add(this.classNames.selected);
+    titleSpan.setAttribute("aria-selected", "false");
 
-        const titleSpan = this.getTitleSpan();
-        const tabIndex = this.tabIndex;
+    titleSpan.blur();
+  }
 
-        // Check for null or undefined
-        if (tabIndex != null) {
-            titleSpan.setAttribute("tabindex", tabIndex.toString());
-        }
+  public select(mustSetFocus: boolean): void {
+    if (!this.isRendered()) {
+      return;
+    }
 
-        titleSpan.setAttribute("aria-selected", "true");
+    this.element.classList.add(this.classNames.selected);
 
-        if (mustSetFocus) {
-            titleSpan.focus();
-        }
-    }
+    const titleSpan = this.getTitleSpan();
+    const tabIndex = this.tabIndex;
 
-    protected getTitleSpan(): HTMLSpanElement {
-        return this.element.querySelector(
-            `:scope > .${this.classNames.element} > span.${this.classNames.title}`,
-        ) as HTMLSpanElement;
+    // Check for null or undefined
+    if (tabIndex != null) {
+      titleSpan.setAttribute("tabindex", tabIndex.toString());
     }
 
-    protected getUl(): HTMLUListElement {
-        return this.element.querySelector(":scope > ul") as HTMLUListElement;
-    }
+    titleSpan.setAttribute("aria-selected", "true");
 
-    protected mustShowBorderDropHint(position: Position): boolean {
-        return position === "inside";
+    if (mustSetFocus) {
+      titleSpan.focus();
     }
+  }
+
+  protected getTitleSpan(): HTMLSpanElement {
+    return this.element.querySelector(
+      `:scope > .${this.classNames.element} > span.${this.classNames.title}`,
+    ) as HTMLSpanElement;
+  }
+
+  protected getUl(): HTMLUListElement | null {
+    return this.element.querySelector(":scope > ul");
+  }
+
+  /* A node inside a closed folder is not rendered. Its selected and open
+   * state is applied when it is rendered.
+   */
+  protected isRendered(): boolean {
+    return Boolean(this.node.element);
+  }
+
+  protected mustShowBorderDropHint(position: Position): boolean {
+    return position === "inside";
+  }
 }
 
 export default NodeElement;

package/src/nodeUtils.ts

@@ -1,12 +1,12 @@
 import type { NodeData, NodeRecord } from "./node";
 
 interface NodeRecordWithChildren extends NodeRecord {
-    children: NodeData[];
+  children: NodeData[];
 }
 
 export const isNodeRecordWithChildren = (
-    data: NodeData,
+  data: NodeData,
 ): data is NodeRecordWithChildren =>
-    typeof data === "object" &&
-    "children" in data &&
-    data.children instanceof Array;
+  typeof data === "object" &&
+  "children" in data &&
+  Array.isArray(data.children);