tree-element 0.2.0 → 0.3.1

package/src/nodeElement/ghostDropHint.ts

@@ -20,13 +20,15 @@ class GhostDropHint implements DropHint {
     this.ghost = this.createGhostElement();
 
     switch (position) {
-      case "after":
+      case "after": {
         this.moveAfter();
         break;
+      }
 
-      case "before":
+      case "before": {
         this.moveBefore();
         break;
+      }
 
       case "inside": {
         if (node.isFolder() && node.is_open) {

package/src/nodeElement/index.ts

@@ -40,20 +40,9 @@ class NodeElement {
   }
 
   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,
-      );
-    }
+    return this.mustShowBorderDropHint(position)
+      ? new BorderDropHint(this.element, this.getScrollLeft(), this.classNames)
+      : new GhostDropHint(this.node, this.element, position, this.classNames);
   }
 
   public deselect(): void {
@@ -64,7 +53,12 @@ class NodeElement {
     this.element.classList.remove(this.classNames.selected);
 
     const titleSpan = this.getTitleSpan();
-    titleSpan.removeAttribute("tabindex");
+
+    // Check for null or undefined
+    if (this.tabIndex != null) {
+      titleSpan.setAttribute("tabindex", "-1");
+    }
+
     titleSpan.setAttribute("aria-selected", "false");
 
     titleSpan.blur();

package/src/nodeUtils.ts

@@ -9,4 +9,4 @@ export const isNodeRecordWithChildren = (
 ): data is NodeRecordWithChildren =>
   typeof data === "object" &&
   "children" in data &&
-  data.children instanceof Array;
+  Array.isArray(data.children);

package/src/options.ts

@@ -36,10 +36,25 @@ export interface TreeElementOptions {
    * The duration of the slide animation: `"fast"` is 200ms, `"slow"` is
    * 600ms, a number is milliseconds.
    *
-   * @defaultValue `"fast"`
+   * @defaultValue `"fast"`, or `0` when the user prefers reduced motion
+   * (`prefers-reduced-motion: reduce`).
    * @group Appearance
    */
   animationSpeed: AnimationSpeed;
+  /**
+   * The accessible name of the tree, set as `aria-label` on the root `ul`.
+   * Use `ariaLabelledBy` instead when the name is visible on the page.
+   *
+   * @group Appearance
+   */
+  ariaLabel?: string;
+  /**
+   * The id of the element that names the tree, set as `aria-labelledby` on
+   * the root `ul`.
+   *
+   * @group Appearance
+   */
+  ariaLabelledBy?: string;
   /**
    * Escape node names. With `false`, names are inserted as html — only do
    * that for data you control.
@@ -82,8 +97,8 @@ export interface TreeElementOptions {
    *
    * Type: `HTMLElement | string`
    *
-   * @defaultValue `"►"` (`►`), or `"◀"` (`◀`) when `rtl` is
-   * true.
+   * @defaultValue An svg triangle pointing right, or left when `rtl` is
+   * true. It is sized in em and filled with `currentColor`.
    * @group Appearance
    */
   closedIcon?: IconElement;
@@ -129,7 +144,7 @@ export interface TreeElementOptions {
    */
   dragAndDrop: boolean;
   /**
-   * Handle the arrow keys when the focus is on the tree. See
+   * Handle the keyboard when the focus is on the tree. See
    * [Selection](/guide/selection#keyboard-navigation).
    *
    * @defaultValue `true`
@@ -243,7 +258,8 @@ export interface TreeElementOptions {
    *
    * Type: `HTMLElement | string`
    *
-   * @defaultValue `"▼"` (`▼`)
+   * @defaultValue An svg triangle pointing down, sized in em and filled with
+   * `currentColor`.
    * @group Appearance
    */
   openedIcon?: IconElement;
@@ -302,7 +318,8 @@ export interface TreeElementOptions {
   startDndDelay?: number;
   /**
    * The `tabindex` of the selected node's title, which is what makes the
-   * tree focusable.
+   * tree focusable. When no node is selected, the first node gets it. The
+   * other nodes get `-1`.
    *
    * @defaultValue `0`
    * @group Selection

package/src/requestUrl.ts

@@ -1,28 +1,11 @@
-// Url class for absolute and relative urls.
-
-const isAbsoluteUrl = (inputUrl: string) => {
-  try {
-    new URL(inputUrl);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-const LOCALHOST = "http://localhost";
+// Url of a request. A relative url is resolved against the page, like a link
+// or `fetch` would, so it also works when the page is in a subdirectory.
 
 class RequestUrl {
-  private isAbsolute: boolean;
   private url: URL;
 
   constructor(inputUrl: string) {
-    if (isAbsoluteUrl(inputUrl)) {
-      this.url = new URL(inputUrl);
-      this.isAbsolute = true;
-    } else {
-      this.url = new URL(inputUrl, LOCALHOST);
-      this.isAbsolute = false;
-    }
+    this.url = new URL(inputUrl, document.baseURI);
   }
 
   setSearchParam(key: string, value: string) {
@@ -30,11 +13,7 @@ class RequestUrl {
   }
 
   value() {
-    if (this.isAbsolute) {
-      return this.url.href;
-    } else {
-      return this.url.href.slice(LOCALHOST.length);
-    }
+    return this.url.href;
   }
 }
 

package/src/saveStateHandler.ts

@@ -73,11 +73,7 @@ export default class SaveStateHandler {
 
     const state = this.getStateFromStorage();
 
-    if (state?.selected_node) {
-      return state.selected_node[0] ?? null;
-    } else {
-      return null;
-    }
+    return state?.selected_node ? (state.selected_node[0] ?? null) : null;
   }
 
   public getState(): SavedState {
@@ -97,11 +93,11 @@ export default class SaveStateHandler {
     const getSelectedNodeIds = (): NodeId[] => {
       const selectedNodeIds: NodeId[] = [];
 
-      this.getSelectedNodes().forEach((node) => {
+      for (const node of this.getSelectedNodes()) {
         if (node.id != null) {
           selectedNodeIds.push(node.id);
         }
-      });
+      }
 
       return selectedNodeIds;
     };
@@ -119,11 +115,7 @@ export default class SaveStateHandler {
 
     const jsonData = this.loadFromStorage();
 
-    if (jsonData) {
-      return this.parseState(jsonData);
-    } else {
-      return null;
-    }
+    return jsonData ? this.parseState(jsonData) : null;
   }
 
   public saveState(): void {
@@ -147,11 +139,9 @@ export default class SaveStateHandler {
     result: must load on demand (boolean)
     */
   public setInitialState(state: SavedState): boolean {
-    let mustLoadOnDemand = false;
-
-    if (state.open_nodes) {
-      mustLoadOnDemand = this.openInitialNodes(state.open_nodes);
-    }
+    const mustLoadOnDemand = state.open_nodes
+      ? this.openInitialNodes(state.open_nodes)
+      : false;
 
     this.resetSelection();
 
@@ -175,9 +165,7 @@ export default class SaveStateHandler {
       for (const nodeId of nodeIds) {
         const node = this.getNodeById(nodeId);
 
-        if (!node) {
-          newNodesIds.push(nodeId);
-        } else {
+        if (node) {
           if (!node.is_loading) {
             if (node.load_on_demand) {
               await loadAndOpenNode(node);
@@ -185,15 +173,15 @@ export default class SaveStateHandler {
               await this.openNode(node, false);
             }
           }
+        } else {
+          newNodesIds.push(nodeId);
         }
       }
 
       nodeIds = newNodesIds;
 
-      if (state.selected_node) {
-        if (this.selectInitialNodes(state.selected_node)) {
-          this.refreshElements(null);
-        }
+      if (state.selected_node && this.selectInitialNodes(state.selected_node)) {
+        this.refreshElements(null);
       }
     };
 
@@ -206,19 +194,15 @@ export default class SaveStateHandler {
   }
 
   private getKeyName(): string {
-    if (typeof this.saveStateOption === "string") {
-      return this.saveStateOption;
-    } else {
-      return "tree";
-    }
+    return typeof this.saveStateOption === "string"
+      ? this.saveStateOption
+      : "tree";
   }
 
   private loadFromStorage(): null | string {
-    if (this.onGetStateFromStorage) {
-      return this.onGetStateFromStorage();
-    } else {
-      return localStorage.getItem(this.getKeyName());
-    }
+    return this.onGetStateFromStorage
+      ? this.onGetStateFromStorage()
+      : localStorage.getItem(this.getKeyName());
   }
 
   private openInitialNodes(nodeIds: NodeId[]): boolean {
@@ -228,10 +212,10 @@ export default class SaveStateHandler {
       const node = this.getNodeById(nodeId);
 
       if (node) {
-        if (!node.load_on_demand) {
-          node.is_open = true;
-        } else {
+        if (node.load_on_demand) {
           mustLoadOnDemand = true;
+        } else {
+          node.is_open = true;
         }
       }
     }
@@ -254,9 +238,9 @@ export default class SaveStateHandler {
   private resetSelection(): void {
     const selectedNodes = this.getSelectedNodes();
 
-    selectedNodes.forEach((node) => {
+    for (const node of selectedNodes) {
       this.removeFromSelection(node);
-    });
+    }
   }
 
   private selectInitialNodes(nodeIds: NodeId[]): boolean {
@@ -265,11 +249,13 @@ export default class SaveStateHandler {
     for (const nodeId of nodeIds) {
       const node = this.getNodeById(nodeId);
 
-      if (node) {
-        selectCount += 1;
-
-        this.addToSelection(node);
+      if (!node) {
+        continue;
       }
+
+      selectCount += 1;
+
+      this.addToSelection(node);
     }
 
     return selectCount !== 0;

package/src/scrollHandler/containerScrollParent.ts

@@ -26,15 +26,13 @@ export default class ContainerScrollParent extends ScrollParent {
     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;
+    const isNearLeftEdge = pageX < leftEdge + 20;
+    return isNearLeftEdge ? "left" : undefined;
   }
 
   protected getNewVerticalScrollDirection(
@@ -44,11 +42,7 @@ export default class ContainerScrollParent extends ScrollParent {
       return "top";
     }
 
-    if (pageY > this.getScrollParentBottom()) {
-      return "bottom";
-    }
-
-    return undefined;
+    return pageY > this.getScrollParentBottom() ? "bottom" : undefined;
   }
 
   private getScrollParentBottom() {

package/src/scrollHandler/createScrollParent.ts

@@ -43,9 +43,8 @@ const createScrollParent = (
       container,
       refreshHitAreas,
     });
-  } else {
-    return new DocumentScrollParent({ refreshHitAreas, treeElement });
   }
+  return new DocumentScrollParent({ refreshHitAreas, treeElement });
 };
 
 export default createScrollParent;

package/src/scrollHandler/documentScrollParent.ts

@@ -42,17 +42,13 @@ export default class DocumentScrollParent extends ScrollParent {
     const windowWidth = window.innerWidth;
 
     const isNearRightEdge = pageX > windowWidth - 20;
-    const isNearLeftEdge = pageX - scrollLeft < 20;
 
     if (isNearRightEdge && this.canScrollRight()) {
       return "right";
     }
 
-    if (isNearLeftEdge) {
-      return "left";
-    }
-
-    return undefined;
+    const isNearLeftEdge = pageX - scrollLeft < 20;
+    return isNearLeftEdge ? "left" : undefined;
   }
 
   protected getNewVerticalScrollDirection(
@@ -67,11 +63,9 @@ export default class DocumentScrollParent extends ScrollParent {
 
     const windowHeight = window.innerHeight;
 
-    if (windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()) {
-      return "bottom";
-    }
-
-    return undefined;
+    return windowHeight - (pageY - scrollTop) < 20 && this.canScrollDown()
+      ? "bottom"
+      : undefined;
   }
 
   private canScrollDown() {

package/src/scrollHandler/scrollParent.ts

@@ -24,19 +24,21 @@ export abstract class ScrollParent {
     const newHorizontalScrollDirection =
       this.getNewHorizontalScrollDirection(pageX);
 
-    if (this.horizontalScrollDirection !== newHorizontalScrollDirection) {
-      this.horizontalScrollDirection = newHorizontalScrollDirection;
-
-      if (this.horizontalScrollTimeout != null) {
-        window.clearTimeout(this.horizontalScrollTimeout);
-      }
-
-      if (newHorizontalScrollDirection) {
-        this.horizontalScrollTimeout = window.setTimeout(
-          this.scrollHorizontally.bind(this),
-          40,
-        );
-      }
+    if (this.horizontalScrollDirection === newHorizontalScrollDirection) {
+      return;
+    }
+
+    this.horizontalScrollDirection = newHorizontalScrollDirection;
+
+    if (this.horizontalScrollTimeout != null) {
+      window.clearTimeout(this.horizontalScrollTimeout);
+    }
+
+    if (newHorizontalScrollDirection) {
+      this.horizontalScrollTimeout = window.setTimeout(
+        this.scrollHorizontally.bind(this),
+        40,
+      );
     }
   }
 
@@ -44,20 +46,22 @@ export abstract class ScrollParent {
     const newVerticalScrollDirection =
       this.getNewVerticalScrollDirection(pageY);
 
-    if (this.verticalScrollDirection !== newVerticalScrollDirection) {
-      this.verticalScrollDirection = newVerticalScrollDirection;
+    if (this.verticalScrollDirection === newVerticalScrollDirection) {
+      return;
+    }
 
-      if (this.verticalScrollTimeout != null) {
-        window.clearTimeout(this.verticalScrollTimeout);
-        this.verticalScrollTimeout = undefined;
-      }
+    this.verticalScrollDirection = newVerticalScrollDirection;
+
+    if (this.verticalScrollTimeout != null) {
+      window.clearTimeout(this.verticalScrollTimeout);
+      this.verticalScrollTimeout = undefined;
+    }
 
-      if (newVerticalScrollDirection) {
-        this.verticalScrollTimeout = window.setTimeout(
-          this.scrollVertically.bind(this),
-          40,
-        );
-      }
+    if (newVerticalScrollDirection) {
+      this.verticalScrollTimeout = window.setTimeout(
+        this.scrollVertically.bind(this),
+        40,
+      );
     }
   }
 

package/src/selectNodeHandler.ts

@@ -20,6 +20,7 @@ interface SelectNodeHandlerParameters {
   openParents: OpenParents;
   saveState: () => void;
   triggerEvent: TriggerEvent;
+  updateTabStop: () => void;
 }
 
 export default class SelectNodeHandler {
@@ -32,6 +33,7 @@ export default class SelectNodeHandler {
   private selectedNodes: Set<NodeId>;
   private selectedSingleNode: Node | null;
   private triggerEvent: TriggerEvent;
+  private updateTabStop: () => void;
 
   constructor({
     getNodeById,
@@ -41,6 +43,7 @@ export default class SelectNodeHandler {
     openParents,
     saveState,
     triggerEvent,
+    updateTabStop,
   }: SelectNodeHandlerParameters) {
     this.getNodeById = getNodeById;
     this.getNodeElementForNode = getNodeElementForNode;
@@ -51,13 +54,14 @@ export default class SelectNodeHandler {
     this.selectedNodes = new Set<NodeId>();
     this.selectedSingleNode = null;
     this.triggerEvent = triggerEvent;
+    this.updateTabStop = updateTabStop;
   }
 
   public addToSelection(node: Node): void {
-    if (node.id != null) {
-      this.selectedNodes.add(node.id);
-    } else {
+    if (node.id == null) {
       this.selectedSingleNode = node;
+    } else {
+      this.selectedNodes.add(node.id);
     }
   }
 
@@ -69,59 +73,50 @@ export default class SelectNodeHandler {
   public getSelectedNode(): Node | null {
     const selectedNodes = this.getSelectedNodes();
 
-    if (selectedNodes.length) {
-      return selectedNodes[0] ?? null;
-    } else {
-      return null;
-    }
+    return selectedNodes.length ? (selectedNodes[0] ?? null) : null;
   }
 
   public getSelectedNodes(): Node[] {
     if (this.selectedSingleNode) {
       return [this.selectedSingleNode];
-    } else {
-      const selectedNodes: Node[] = [];
+    }
 
-      this.selectedNodes.forEach((id) => {
-        const node = this.getNodeById(id);
-        if (node) {
-          selectedNodes.push(node);
-        }
-      });
+    const selectedNodes: Node[] = [];
 
-      return selectedNodes;
-    }
+    this.selectedNodes.forEach((id) => {
+      const node = this.getNodeById(id);
+      if (node) {
+        selectedNodes.push(node);
+      }
+    });
+
+    return selectedNodes;
   }
 
   public getSelectedNodesUnder(parent: Node): Node[] {
     if (this.selectedSingleNode) {
-      if (parent.isParentOf(this.selectedSingleNode)) {
-        return [this.selectedSingleNode];
-      } else {
-        return [];
-      }
-    } else {
-      const selectedNodes: Node[] = [];
+      return parent.isParentOf(this.selectedSingleNode)
+        ? [this.selectedSingleNode]
+        : [];
+    }
 
-      this.selectedNodes.forEach((id) => {
-        const node = this.getNodeById(id);
-        if (node && parent.isParentOf(node)) {
-          selectedNodes.push(node);
-        }
-      });
+    const selectedNodes: Node[] = [];
 
-      return selectedNodes;
-    }
+    this.selectedNodes.forEach((id) => {
+      const node = this.getNodeById(id);
+      if (node && parent.isParentOf(node)) {
+        selectedNodes.push(node);
+      }
+    });
+
+    return selectedNodes;
   }
 
   public isNodeSelected(node: Node): boolean {
     if (node.id != null) {
       return this.selectedNodes.has(node.id);
-    } else if (this.selectedSingleNode) {
-      return this.selectedSingleNode === node;
-    } else {
-      return false;
     }
+    return this.selectedSingleNode ? this.selectedSingleNode === node : false;
   }
 
   public removeFromSelection(node: Node, includeChildren = false): void {
@@ -155,7 +150,7 @@ export default class SelectNodeHandler {
    */
   public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
     const defaultOptions = { mustSetFocus: true, mustToggle: true };
-    const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
+    const selectOptions = { ...defaultOptions, ...optionsParam };
 
     const canSelect = (): boolean => {
       if (!this.getSelectable()) {
@@ -197,6 +192,7 @@ export default class SelectNodeHandler {
       });
     }
 
+    this.updateTabStop();
     this.saveState();
   }
 }