tree-element 0.1.1 → 0.3.0

package/src/animation.ts

@@ -11,8 +11,7 @@ export const getAnimationDuration = (duration: AnimationSpeed): number => {
 export const slideDown = (
   element: HTMLElement,
   animationSpeed: AnimationSpeed,
-  onFinished: () => void,
-): void => {
+): Promise<void> => {
   element.style.display = "block";
 
   const animation = element.animate(
@@ -23,16 +22,17 @@ export const slideDown = (
     { duration: getAnimationDuration(animationSpeed) },
   );
 
-  animation.onfinish = () => {
-    onFinished();
-  };
+  return new Promise((resolve) => {
+    animation.onfinish = () => {
+      resolve();
+    };
+  });
 };
 
 export const slideUp = (
   element: HTMLElement,
   animationSpeed: AnimationSpeed,
-  onFinished: () => void,
-): void => {
+): Promise<void> => {
   const animation = element.animate(
     [
       { height: `${element.scrollHeight}px`, overflow: "hidden" },
@@ -41,8 +41,10 @@ export const slideUp = (
     { duration: getAnimationDuration(animationSpeed) },
   );
 
-  animation.onfinish = () => {
-    element.style.display = "none";
-    onFinished();
-  };
-};
+  return new Promise((resolve) => {
+    animation.onfinish = () => {
+      element.style.display = "none";
+      resolve();
+    };
+  });
+};

package/src/classNames.ts

@@ -1,33 +1,33 @@
 export interface ClassNames {
-    border: string;
-    circle: string;
-    closed: string;
-    common: string;
-    dnd: string;
-    dragging: string;
-    element: string;
-    folder: string;
-    ghost: string;
-    inside: string;
-    line: string;
-    loading: string;
-    moving: string;
-    rtl: string;
-    selected: string;
-    title: string;
-    titleButtonLeft: string;
-    titleButtonRight: string;
-    titleFolder: string;
-    toggler: string;
-    togglerLeft: string;
-    togglerRight: string;
-    tree: string;
+  border: string;
+  circle: string;
+  closed: string;
+  common: string;
+  dnd: string;
+  dragging: string;
+  element: string;
+  folder: string;
+  ghost: string;
+  inside: string;
+  line: string;
+  loading: string;
+  moving: string;
+  rtl: string;
+  selected: string;
+  title: string;
+  titleButtonLeft: string;
+  titleButtonRight: string;
+  titleFolder: string;
+  toggler: string;
+  togglerLeft: string;
+  togglerRight: string;
+  tree: string;
 }
 
 export interface ClassNamesOptions {
-    classPrefix: string;
-    commonClassName?: string;
-    treeClassName?: string;
+  classPrefix: string;
+  commonClassName?: string;
+  treeClassName?: string;
 }
 
 export const DEFAULT_CLASS_PREFIX = "tree-element";
@@ -38,33 +38,33 @@ export const DEFAULT_CLASS_PREFIX = "tree-element";
  * their own.
  */
 const createClassNames = ({
-    classPrefix,
-    commonClassName,
-    treeClassName,
+  classPrefix,
+  commonClassName,
+  treeClassName,
 }: ClassNamesOptions): ClassNames => ({
-    border: `${classPrefix}-border`,
-    circle: `${classPrefix}-circle`,
-    closed: `${classPrefix}-closed`,
-    common: commonClassName ?? `${classPrefix}-common`,
-    dnd: `${classPrefix}-dnd`,
-    dragging: `${classPrefix}-dragging`,
-    element: `${classPrefix}-element`,
-    folder: `${classPrefix}-folder`,
-    ghost: `${classPrefix}-ghost`,
-    inside: `${classPrefix}-inside`,
-    line: `${classPrefix}-line`,
-    loading: `${classPrefix}-loading`,
-    moving: `${classPrefix}-moving`,
-    rtl: `${classPrefix}-rtl`,
-    selected: `${classPrefix}-selected`,
-    title: `${classPrefix}-title`,
-    titleButtonLeft: `${classPrefix}-title-button-left`,
-    titleButtonRight: `${classPrefix}-title-button-right`,
-    titleFolder: `${classPrefix}-title-folder`,
-    toggler: `${classPrefix}-toggler`,
-    togglerLeft: `${classPrefix}-toggler-left`,
-    togglerRight: `${classPrefix}-toggler-right`,
-    tree: treeClassName ?? classPrefix,
+  border: `${classPrefix}-border`,
+  circle: `${classPrefix}-circle`,
+  closed: `${classPrefix}-closed`,
+  common: commonClassName ?? `${classPrefix}-common`,
+  dnd: `${classPrefix}-dnd`,
+  dragging: `${classPrefix}-dragging`,
+  element: `${classPrefix}-element`,
+  folder: `${classPrefix}-folder`,
+  ghost: `${classPrefix}-ghost`,
+  inside: `${classPrefix}-inside`,
+  line: `${classPrefix}-line`,
+  loading: `${classPrefix}-loading`,
+  moving: `${classPrefix}-moving`,
+  rtl: `${classPrefix}-rtl`,
+  selected: `${classPrefix}-selected`,
+  title: `${classPrefix}-title`,
+  titleButtonLeft: `${classPrefix}-title-button-left`,
+  titleButtonRight: `${classPrefix}-title-button-right`,
+  titleFolder: `${classPrefix}-title-folder`,
+  toggler: `${classPrefix}-toggler`,
+  togglerLeft: `${classPrefix}-toggler-left`,
+  togglerRight: `${classPrefix}-toggler-right`,
+  tree: treeClassName ?? classPrefix,
 });
 
 export default createClassNames;

package/src/dataLoader.ts

@@ -5,89 +5,97 @@ import type { DataFilter } from "./options";
 import type RequestUrl from "./requestUrl";
 
 interface DataLoaderParams {
-    classNames: ClassNames;
-    dataFilter?: DataFilter;
-    loadData: LoadData;
-    treeElement: HTMLElement;
-    triggerEvent: TriggerEvent;
+  classNames: ClassNames;
+  dataFilter?: DataFilter;
+  loadData: LoadData;
+  treeElement: HTMLElement;
+  triggerEvent: TriggerEvent;
 }
 
 export default class DataLoader {
-    private abortController: AbortController;
-    private classNames: ClassNames;
-    private dataFilter?: DataFilter;
-    private loadData: LoadData;
-    private treeElement: HTMLElement;
-    private triggerEvent: TriggerEvent;
+  private abortController: AbortController;
+  private classNames: ClassNames;
+  private dataFilter?: DataFilter;
+  private loadData: LoadData;
+  private treeElement: HTMLElement;
+  private triggerEvent: TriggerEvent;
 
-    constructor({
-        classNames,
-        dataFilter,
-        loadData,
-        treeElement,
-        triggerEvent,
-    }: DataLoaderParams) {
-        this.abortController = new AbortController();
-        this.classNames = classNames;
-        this.dataFilter = dataFilter;
-        this.loadData = loadData;
-        this.treeElement = treeElement;
-        this.triggerEvent = triggerEvent;
-    }
+  constructor({
+    classNames,
+    dataFilter,
+    loadData,
+    treeElement,
+    triggerEvent,
+  }: DataLoaderParams) {
+    this.abortController = new AbortController();
+    this.classNames = classNames;
+    this.dataFilter = dataFilter;
+    this.loadData = loadData;
+    this.treeElement = treeElement;
+    this.triggerEvent = triggerEvent;
+  }
 
-    public deinit(): void {
-        this.abortController.abort();
-    }
+  public deinit(): void {
+    this.abortController.abort();
+  }
 
-    public async loadFromUrl(
-        url: RequestUrl,
-        node?: Node,
-    ): Promise<void> {
-        const element = node?.element ?? this.treeElement;
-        element.classList.add(this.classNames.loading);
+  public async loadFromUrl(url: RequestUrl, node?: Node): Promise<void> {
+    const element = node?.element ?? this.treeElement;
+    element.classList.add(this.classNames.loading);
 
-        this.triggerEvent("tree.loading_data", {
-            element,
-            node,
-        });
+    // Tell screen readers that the children of the folder are loading
+    const titleSpan = node ? this.getTitleSpan(element) : null;
+    titleSpan?.setAttribute("aria-busy", "true");
 
-        const stopLoading = (): void => {
-            element.classList.remove(this.classNames.loading);
-            this.triggerEvent("tree.loaded_data", {
-                element,
-                node,
-            });
-        };
+    this.triggerEvent("tree.loading_data", {
+      element,
+      node,
+    });
 
-        const handleResponse = async (response: Response): Promise<void> => {
-            if (response.ok) {
-                const data = (await response.json()) as NodeData[];
+    const stopLoading = (): void => {
+      element.classList.remove(this.classNames.loading);
+      titleSpan?.removeAttribute("aria-busy");
+      this.triggerEvent("tree.loaded_data", {
+        element,
+        node,
+      });
+    };
 
-                stopLoading();
-                this.loadData(
-                    this.dataFilter ? this.dataFilter(data) : data,
-                    node
-                );
-            } else {
-                stopLoading();
+    const handleResponse = async (response: Response): Promise<void> => {
+      if (response.ok) {
+        const data = (await response.json()) as NodeData[];
 
-                this.triggerEvent("tree.load_failed", { response });
-            }
-        };
+        stopLoading();
+        this.loadData(this.dataFilter ? this.dataFilter(data) : data, node);
+      } else {
+        stopLoading();
 
-        const signal = this.abortController.signal;
-        url.setSearchParam("_", Date.now().toString());
+        this.triggerEvent("tree.load_failed", { response });
+      }
+    };
 
-        return fetch(url.toString(), { headers: { "Content-Type": "application/json" }, signal })
-            .then(handleResponse)
-            .catch((error: unknown) => {
-                if (this.abortController.signal.aborted) {
-                    // The request was aborted by deinit.
-                    return;
-                }
+    const signal = this.abortController.signal;
+    url.setSearchParam("_", Date.now().toString());
 
-                stopLoading();
-                this.triggerEvent("tree.load_failed", { error });
-            });
-    }
+    return fetch(url.value(), {
+      headers: { "Content-Type": "application/json" },
+      signal,
+    })
+      .then(handleResponse)
+      .catch((error: unknown) => {
+        if (this.abortController.signal.aborted) {
+          // The request was aborted by deinit.
+          return;
+        }
+
+        stopLoading();
+        this.triggerEvent("tree.load_failed", { error });
+      });
+  }
+
+  private getTitleSpan(element: HTMLElement): HTMLElement | null {
+    return element.querySelector<HTMLElement>(
+      `:scope > .${this.classNames.element} > .${this.classNames.title}`,
+    );
+  }
 }

package/src/dragAndDropHandler/binarySearch.ts

@@ -1,27 +1,27 @@
 function binarySearch<T>(items: T[], compareFn: (a: T) => number): null | T {
-    let low = 0;
-    let high = items.length;
+  let low = 0;
+  let high = items.length;
 
-    while (low < high) {
-        const mid = (low + high) >> 1;
-        const item = items[mid];
+  while (low < high) {
+    const mid = (low + high) >> 1;
+    const item = items[mid];
 
-        if (item === undefined) {
-            return null;
-        }
+    if (item === undefined) {
+      return null;
+    }
 
-        const compareResult = compareFn(item);
+    const compareResult = compareFn(item);
 
-        if (compareResult > 0) {
-            high = mid;
-        } else if (compareResult < 0) {
-            low = mid + 1;
-        } else {
-            return item;
-        }
+    if (compareResult > 0) {
+      high = mid;
+    } else if (compareResult < 0) {
+      low = mid + 1;
+    } else {
+      return item;
     }
+  }
 
-    return null;
+  return null;
 }
 
 export default binarySearch;

package/src/dragAndDropHandler/dragElement.ts

@@ -1,62 +1,63 @@
 import type { ClassNames } from "../classNames";
 
 interface DragElementParams {
-    autoEscape: boolean;
-    classNames: ClassNames;
-    nodeName: string;
-    offsetX: number;
-    offsetY: number;
-    treeElement: HTMLElement;
+  autoEscape: boolean;
+  classNames: ClassNames;
+  nodeName: string;
+  offsetX: number;
+  offsetY: number;
+  treeElement: HTMLElement;
 }
 
 class DragElement {
-    private element: HTMLElement;
-    private offsetX: number;
-    private offsetY: number;
-
-    constructor({
-        autoEscape,
-        classNames,
-        nodeName,
-        offsetX,
-        offsetY,
-        treeElement,
-    }: DragElementParams) {
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
-
-        this.element = this.createElement(nodeName, autoEscape, classNames);
-
-        treeElement.appendChild(this.element);
+  private element: HTMLElement;
+  private offsetX: number;
+  private offsetY: number;
+
+  constructor({
+    autoEscape,
+    classNames,
+    nodeName,
+    offsetX,
+    offsetY,
+    treeElement,
+  }: DragElementParams) {
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+
+    this.element = this.createElement(nodeName, autoEscape, classNames);
+
+    treeElement.append(this.element);
+  }
+
+  public move(pageX: number, pageY: number): void {
+    this.element.style.left = `${pageX - this.offsetX}px`;
+    this.element.style.top = `${pageY - this.offsetY}px`;
+  }
+
+  public remove(): void {
+    this.element.remove();
+  }
+
+  private createElement(
+    nodeName: string,
+    autoEscape: boolean,
+    classNames: ClassNames,
+  ) {
+    const element = document.createElement("span");
+    element.classList.add(classNames.title, classNames.dragging);
+
+    if (autoEscape) {
+      element.textContent = nodeName;
+    } else {
+      // eslint-disable-next-line no-unsanitized/property -- the user opted out of escaping with autoEscape: false
+      element.innerHTML = nodeName;
     }
 
-    public move(pageX: number, pageY: number): void {
-        this.element.style.left = `${pageX - this.offsetX}px`;
-        this.element.style.top = `${pageY - this.offsetY}px`;
-    }
-
-    public remove(): void {
-        this.element.remove();
-    }
-
-    private createElement(
-        nodeName: string,
-        autoEscape: boolean,
-        classNames: ClassNames,
-    ) {
-        const element = document.createElement("span");
-        element.classList.add(classNames.title, classNames.dragging);
+    element.style.position = "absolute";
 
-        if (autoEscape) {
-            element.textContent = nodeName;
-        } else {
-            element.innerHTML = nodeName;
-        }
-
-        element.style.position = "absolute";
-
-        return element;
-    }
+    return element;
+  }
 }
 
 export default DragElement;