tree-element 0.1.1 → 0.3.0

package/src/selectNodeHandler.ts

@@ -1,192 +1,198 @@
-import type { GetNodeById, GetNodeElementForNode, OpenParents, TriggerEvent } from "./methodTypes";
+import type {
+  GetNodeById,
+  GetNodeElementForNode,
+  OpenParents,
+  TriggerEvent,
+} from "./methodTypes";
 import type { Node, NodeId } from "./node";
 import type { OnCanSelectNode } from "./options";
 
 export interface SelectNodeOptions {
-    mustSetFocus?: boolean;
-    mustToggle?: boolean;
+  mustSetFocus?: boolean;
+  mustToggle?: boolean;
 }
 
 interface SelectNodeHandlerParameters {
-    getNodeById: GetNodeById;
-    getNodeElementForNode: GetNodeElementForNode;
-    getOnCanSelectNode: () => OnCanSelectNode | undefined;
-    getSelectable: () => boolean;
-    openParents: OpenParents;
-    saveState: () => void;
-    triggerEvent: TriggerEvent;
+  getNodeById: GetNodeById;
+  getNodeElementForNode: GetNodeElementForNode;
+  getOnCanSelectNode: () => OnCanSelectNode | undefined;
+  getSelectable: () => boolean;
+  openParents: OpenParents;
+  saveState: () => void;
+  triggerEvent: TriggerEvent;
+  updateTabStop: () => void;
 }
 
 export default class SelectNodeHandler {
-    private getNodeById: GetNodeById;
-    private getNodeElementForNode: GetNodeElementForNode;
-    private getOnCanSelectNode: () => OnCanSelectNode | undefined;
-    private getSelectable: () => boolean;
-    private openParents: OpenParents;
-    private saveState: () => void;
-    private selectedNodes: Set<NodeId>;
-    private selectedSingleNode: Node | null;
-    private triggerEvent: TriggerEvent;
-
-    constructor({ getNodeById, getNodeElementForNode, getOnCanSelectNode, getSelectable, openParents, saveState, triggerEvent }: SelectNodeHandlerParameters) {
-        this.getNodeById = getNodeById;
-        this.getNodeElementForNode = getNodeElementForNode;
-        this.getOnCanSelectNode = getOnCanSelectNode;
-        this.getSelectable = getSelectable;
-        this.openParents = openParents;
-        this.saveState = saveState;
-        this.selectedNodes = new Set<NodeId>();
-        this.selectedSingleNode = null;
-        this.triggerEvent = triggerEvent;
+  private getNodeById: GetNodeById;
+  private getNodeElementForNode: GetNodeElementForNode;
+  private getOnCanSelectNode: () => OnCanSelectNode | undefined;
+  private getSelectable: () => boolean;
+  private openParents: OpenParents;
+  private saveState: () => void;
+  private selectedNodes: Set<NodeId>;
+  private selectedSingleNode: Node | null;
+  private triggerEvent: TriggerEvent;
+  private updateTabStop: () => void;
+
+  constructor({
+    getNodeById,
+    getNodeElementForNode,
+    getOnCanSelectNode,
+    getSelectable,
+    openParents,
+    saveState,
+    triggerEvent,
+    updateTabStop,
+  }: SelectNodeHandlerParameters) {
+    this.getNodeById = getNodeById;
+    this.getNodeElementForNode = getNodeElementForNode;
+    this.getOnCanSelectNode = getOnCanSelectNode;
+    this.getSelectable = getSelectable;
+    this.openParents = openParents;
+    this.saveState = saveState;
+    this.selectedNodes = new Set<NodeId>();
+    this.selectedSingleNode = null;
+    this.triggerEvent = triggerEvent;
+    this.updateTabStop = updateTabStop;
+  }
+
+  public addToSelection(node: Node): void {
+    if (node.id == null) {
+      this.selectedSingleNode = node;
+    } else {
+      this.selectedNodes.add(node.id);
     }
+  }
 
-    public addToSelection(node: Node): void {
-        if (node.id != null) {
-            this.selectedNodes.add(node.id);
-        } else {
-            this.selectedSingleNode = node;
-        }
-    }
+  public clear(): void {
+    this.selectedNodes.clear();
+    this.selectedSingleNode = null;
+  }
 
-    public clear(): void {
-        this.selectedNodes.clear();
-        this.selectedSingleNode = null;
-    }
+  public getSelectedNode(): Node | null {
+    const selectedNodes = this.getSelectedNodes();
 
-    public getSelectedNode(): false | Node {
-        const selectedNodes = this.getSelectedNodes();
+    return selectedNodes.length ? (selectedNodes[0] ?? null) : null;
+  }
 
-        if (selectedNodes.length) {
-            return selectedNodes[0] ?? false;
-        } else {
-            return false;
-        }
+  public getSelectedNodes(): Node[] {
+    if (this.selectedSingleNode) {
+      return [this.selectedSingleNode];
     }
 
-    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);
-                }
-            });
-
-            return selectedNodes;
-        }
-    }
+    const selectedNodes: Node[] = [];
+
+    this.selectedNodes.forEach((id) => {
+      const node = this.getNodeById(id);
+      if (node) {
+        selectedNodes.push(node);
+      }
+    });
 
-    public getSelectedNodesUnder(parent: Node): Node[] {
-        if (this.selectedSingleNode) {
-            if (parent.isParentOf(this.selectedSingleNode)) {
-                return [this.selectedSingleNode];
-            } else {
-                return [];
-            }
-        } else {
-            const selectedNodes: Node[] = [];
-
-            this.selectedNodes.forEach((id) => {
-                const node = this.getNodeById(id);
-                if (node && parent.isParentOf(node)) {
-                    selectedNodes.push(node);
-                }
-            });
-
-            return selectedNodes;
-        }
+    return selectedNodes;
+  }
+
+  public getSelectedNodesUnder(parent: Node): Node[] {
+    if (this.selectedSingleNode) {
+      return parent.isParentOf(this.selectedSingleNode)
+        ? [this.selectedSingleNode]
+        : [];
     }
 
-    public isNodeSelected(node: Node): boolean {
-        if (node.id != null) {
-            return this.selectedNodes.has(node.id);
-        } else if (this.selectedSingleNode) {
-            return this.selectedSingleNode.element === node.element;
-        } else {
-            return false;
-        }
+    const selectedNodes: Node[] = [];
+
+    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);
     }
+    return this.selectedSingleNode ? this.selectedSingleNode === node : false;
+  }
 
-    public removeFromSelection(node: Node, includeChildren = false): void {
-        if (node.id == null) {
-            if (
-                this.selectedSingleNode &&
-                node.element === this.selectedSingleNode.element
-            ) {
-                this.selectedSingleNode = null;
-            }
-        } else {
-            this.selectedNodes.delete(node.id);
+  public removeFromSelection(node: Node, includeChildren = false): void {
+    if (node.id == null) {
+      if (this.selectedSingleNode === node) {
+        this.selectedSingleNode = null;
+      }
+    } else {
+      this.selectedNodes.delete(node.id);
 
-            if (includeChildren) {
-                node.iterate(() => {
-                    if (node.id != null) {
-                        this.selectedNodes.delete(node.id);
-                    }
-                    return true;
-                });
-            }
-        }
+      if (includeChildren) {
+        node.iterate(() => {
+          if (node.id != null) {
+            this.selectedNodes.delete(node.id);
+          }
+          return true;
+        });
+      }
+    }
+  }
+
+  /* Select a single node.
+   * Renders the changed elements.
+   * Deselects if the node is currently selected (if the mustToggle is on).
+   * Deselects the previously selected node.
+   * Check if the node is selectable.
+   * Saves the state.
+   * Options:
+   * mustSetFocus: set the focus to the selected node
+   * mustToggle: support deselecting the selected node
+   */
+  public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
+    const defaultOptions = { mustSetFocus: true, mustToggle: true };
+    const selectOptions = { ...defaultOptions, ...optionsParam };
+
+    const canSelect = (): boolean => {
+      if (!this.getSelectable()) {
+        return false;
+      }
+
+      const onCanSelectNode = this.getOnCanSelectNode();
+      return onCanSelectNode ? onCanSelectNode(node) : true;
+    };
+
+    if (!canSelect()) {
+      return;
     }
 
-    /* Select a single node.
-    * Renders the changed elements.
-    * Deselects if the node is currently selected (if the mustToggle is on).
-    * Deselects the previously selected node.
-    * Check if the node is selectable.
-    * Saves the state.
-    * Options:
-      * mustSetFocus: set the focus to the selected node
-      * mustToggle: support deselecting the selected node
-    */
-    public selectSingleNode(node: Node, optionsParam?: SelectNodeOptions) {
-        const defaultOptions = { mustSetFocus: true, mustToggle: true };
-        const selectOptions = { ...defaultOptions, ...(optionsParam ?? {}) };
-
-        const canSelect = (): boolean => {
-            if (!this.getSelectable()) {
-                return false;
-            }
-
-            const onCanSelectNode = this.getOnCanSelectNode();
-            return onCanSelectNode ? onCanSelectNode(node) : true;
-        };
-
-        if (!canSelect()) {
-            return;
-        }
-
-        const deselectCurrentNode = (deselectedNode: Node) => {
-            this.removeFromSelection(deselectedNode);
-            this.getNodeElementForNode(deselectedNode).deselect();
-        };
-
-        if (this.isNodeSelected(node)) {
-            if (selectOptions.mustToggle) {
-                deselectCurrentNode(node);
-                this.triggerEvent("tree.deselect", { node });
-            }
-        } else {
-            const deselectedNode = this.getSelectedNode();
-
-            if (deselectedNode) {
-                deselectCurrentNode(deselectedNode);
-            }
-
-            this.addToSelection(node);
-            this.openParents(node);
-            this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);
-
-            this.triggerEvent("tree.select", {
-                deselectedNode: deselectedNode || null,
-                node,
-            });
-        }
-
-        this.saveState();
+    const deselectCurrentNode = (deselectedNode: Node) => {
+      this.removeFromSelection(deselectedNode);
+      this.getNodeElementForNode(deselectedNode).deselect();
+    };
+
+    if (this.isNodeSelected(node)) {
+      if (selectOptions.mustToggle) {
+        deselectCurrentNode(node);
+        this.triggerEvent("tree.deselect", { node });
+      }
+    } else {
+      const deselectedNode = this.getSelectedNode();
+
+      if (deselectedNode) {
+        deselectCurrentNode(deselectedNode);
+      }
+
+      this.addToSelection(node);
+      this.openParents(node);
+      this.getNodeElementForNode(node).select(selectOptions.mustSetFocus);
+
+      this.triggerEvent("tree.select", {
+        deselectedNode,
+        node,
+      });
     }
+
+    this.updateTabStop();
+    this.saveState();
+  }
 }

package/src/setDefaultOptions.ts

@@ -1,3 +1,4 @@
+import type { AnimationSpeed } from "./animation";
 import type { TreeElementOptions } from "./options";
 
 import { DEFAULT_CLASS_PREFIX } from "./classNames";
@@ -10,41 +11,48 @@ const defaults: TreeElementOptions = {
   buttonLeft: true,
   classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes
   // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-  // http://www.fileformat.info/info/unicode/char/25ba/index.htm
-  closedIcon: undefined,
-  commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
-  data: undefined,
-  dataFilter: undefined,
-  dataUrl: undefined,
+  // https://www.fileformat.info/info/unicode/char/25ba/index.htm
+  // closedIcon: undefined,
+  // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
+  // data: undefined,
+  // dataFilter: undefined,
+  // dataUrl: undefined,
   dragAndDrop: false,
   keyboardSupport: true,
   nodeClass: Node,
-  onCanMove: undefined, // Can this node be moved?
-  onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
-  onCanSelectNode: undefined,
-  onCreateLi: undefined,
-  onDragMove: undefined,
-  onDragStop: undefined,
-  onGetStateFromStorage: undefined,
-  onIsMoveHandle: undefined,
-  onSetStateFromStorage: undefined,
-  openedIcon: undefined,
+  // onCanMove: undefined, // Can this node be moved?
+  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)
+  // onCanSelectNode: undefined,
+  // onCreateLi: undefined,
+  // onDragMove: undefined,
+  // onDragStop: undefined,
+  // onGetStateFromStorage: undefined,
+  // onIsMoveHandle: undefined,
+  // onSetStateFromStorage: undefined,
+  // openedIcon: undefined,
   openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
   // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-  // http://www.fileformat.info/info/unicode/char/25bc/index.htm
-  rtl: undefined, // right-to-left support; true / false (default)
+  // https://www.fileformat.info/info/unicode/char/25bc/index.htm
+  // rtl: undefined, // right-to-left support; true / false (default)
   saveState: false, // true / false / string (local storage key; the default key is "tree")
   selectable: true,
   showEmptyFolder: false,
   slide: true, // must display slide animation?
   startDndDelay: 300, // The delay for starting dnd (in milliseconds)
   tabIndex: 0,
-  treeClassName: undefined, // the class of the root element; the default is classPrefix
+  // treeClassName: undefined, // the class of the root element; the default is classPrefix
   useContextMenu: true,
 };
 
-const setDefaultOptions = (htmlElement: HTMLElement, inputOptions: Partial<TreeElementOptions>): TreeElementOptions => {
-  const options = { ...defaults, ...inputOptions };
+const setDefaultOptions = (
+  htmlElement: HTMLElement,
+  inputOptions: Partial<TreeElementOptions>,
+): TreeElementOptions => {
+  const options = {
+    ...defaults,
+    ...inputOptions,
+    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),
+  };
 
   options.dataUrl ??= htmlElement.dataset.url;
   options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
@@ -52,28 +60,32 @@ const setDefaultOptions = (htmlElement: HTMLElement, inputOptions: Partial<TreeE
   options.openedIcon ??= "&#x25bc;";
 
   return options;
-}
+};
+
+// No animation when the user asked the system for reduced motion
+const getDefaultAnimationSpeed = (): AnimationSpeed =>
+  prefersReducedMotion() ? 0 : defaults.animationSpeed;
+
+const prefersReducedMotion = (): boolean =>
+  typeof window.matchMedia === "function" &&
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
 const getDefaultClosedIcon = (options: TreeElementOptions): string => {
   if (options.rtl) {
     // triangle to the left
     return "&#x25c0;";
-  } else {
-    // triangle to the right
-    return "&#x25ba;";
   }
-}
+  // triangle to the right
+  return "&#x25ba;";
+};
 
 const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
   const dataRtl = htmlElement.dataset.rtl;
 
   if (dataRtl == "") {
     return true;
-  } else if (dataRtl === "false") {
-    return false;
-  } else {
-    return Boolean(dataRtl);
   }
-}
+  return dataRtl === "false" ? false : Boolean(dataRtl);
+};
 
-export default setDefaultOptions;
+export default setDefaultOptions;

package/src/triggerCustomEvent.ts

@@ -1,5 +1,9 @@
 // Trigger a CustomEvent. Return if the event is processed (true) or cancelled (false).
-const triggerCustomEvent = (element: HTMLElement, eventName: string, values?: Record<string, unknown>): boolean => {
+const triggerCustomEvent = (
+  element: HTMLElement,
+  eventName: string,
+  values?: Record<string, unknown>,
+): boolean => {
   const event = new CustomEvent(eventName, {
     bubbles: true,
     cancelable: true,
@@ -9,6 +13,6 @@ const triggerCustomEvent = (element: HTMLElement, eventName: string, values?: Re
   element.dispatchEvent(event);
 
   return !event.defaultPrevented;
-}
+};
 
-export default triggerCustomEvent;
+export default triggerCustomEvent;

package/src/util.ts

@@ -1,5 +1,4 @@
-export const isInt = (n: unknown): boolean =>
-    typeof n === "number" && n % 1 === 0;
+export const isInt = (n: unknown): boolean => Number.isInteger(n);
 
 export const getBoolString = (value: unknown): string =>
-    value ? "true" : "false";
+  value ? "true" : "false";

package/src/version.ts

@@ -1,4 +1,4 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-const version = "0.1.1";
+const version = "0.3.0";
 
 export default version;