tree-element 0.2.0 → 0.3.1

package/src/setDefaultOptions.ts

@@ -1,17 +1,28 @@
+import type { AnimationSpeed } from "./animation";
 import type { TreeElementOptions } from "./options";
 
 import { DEFAULT_CLASS_PREFIX } from "./classNames";
 import { Node } from "./node";
 
+/* The default icons are svg instead of text: the triangle characters come
+ * from different fonts on each platform, so they differ in shape and size.
+ * They are sized in em to follow the font size, and use currentColor to follow
+ * --tree-element-toggler-color.
+ */
+const triangle = (points: string): string =>
+  `<svg width="0.7em" height="0.7em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+
+export const triangleDown = triangle("0.5,1.5 9.5,1.5 5,9");
+export const triangleLeft = triangle("9,0.5 9,9.5 1.5,5");
+export const triangleRight = triangle("1,0.5 1,9.5 8.5,5");
+
 const defaults: TreeElementOptions = {
   animationSpeed: "fast",
   autoEscape: true,
   autoOpen: false, // true / false / int (open n levels starting at 0)
   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,
+  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon
   // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
   // data: undefined,
   // dataFilter: undefined,
@@ -28,10 +39,8 @@ const defaults: TreeElementOptions = {
   // onGetStateFromStorage: undefined,
   // onIsMoveHandle: undefined,
   // onSetStateFromStorage: undefined,
-  // openedIcon: undefined,
+  // openedIcon: undefined, // the default is a triangle pointing down
   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)
   saveState: false, // true / false / string (local storage key; the default key is "tree")
   selectable: true,
@@ -47,24 +56,30 @@ const setDefaultOptions = (
   htmlElement: HTMLElement,
   inputOptions: Partial<TreeElementOptions>,
 ): TreeElementOptions => {
-  const options = { ...defaults, ...inputOptions };
+  const options = {
+    ...defaults,
+    ...inputOptions,
+    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),
+  };
 
   options.dataUrl ??= htmlElement.dataset.url;
   options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
   options.closedIcon ??= getDefaultClosedIcon(options);
-  options.openedIcon ??= "&#x25bc;";
+  options.openedIcon ??= triangleDown;
 
   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;";
-  }
+  return options.rtl ? triangleLeft : triangleRight;
 };
 
 const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
@@ -72,11 +87,8 @@ const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {
 
   if (dataRtl == "") {
     return true;
-  } else if (dataRtl === "false") {
-    return false;
-  } else {
-    return Boolean(dataRtl);
   }
+  return dataRtl === "false" ? false : Boolean(dataRtl);
 };
 
 export default setDefaultOptions;

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";

package/src/version.ts

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

package/tree_element.css

@@ -1,14 +1,31 @@
+/*
+  Colors. Override them on :root or on an element around the tree, for example
+  for a dark theme. :where keeps the specificity at 0, so any rule wins.
+  --tree-element-selected-color defaults to --tree-element-title-color.
+*/
+:where(:root) {
+  --tree-element-title-color: #1c4257;
+  --tree-element-toggler-color: #333;
+  --tree-element-toggler-hover-color: #000;
+  --tree-element-selected-background: linear-gradient(#bee0f5, #89afca);
+  --tree-element-selected-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+  --tree-element-drop-hint-color: #00f;
+  --tree-element-dragging-color: #fff;
+  --tree-element-dragging-background: #000;
+}
+
 ul.tree-element {
   list-style: none outside;
   margin-left: 0;
   margin-bottom: 0;
   padding: 0;
+}
 
-  &.tree-element-dnd {
+ul.tree-element.tree-element-dnd {
     touch-action: none;
   }
 
-  ul.tree-element-common {
+ul.tree-element ul.tree-element-common {
     list-style: none outside;
     margin-left: 12px;
     margin-right: 0;
@@ -17,81 +34,88 @@ ul.tree-element {
     display: block;
   }
 
-  li.tree-element-closed > ul.tree-element-common {
+ul.tree-element li.tree-element-closed > ul.tree-element-common {
     display: none;
   }
 
-  li.tree-element-common {
+ul.tree-element li.tree-element-common {
     clear: both;
     list-style-type: none;
   }
 
-  .tree-element-toggler {
+/* The toggler and the row are at least 24px: the WCAG minimum for
+     something you click. The space around the icon separates the toggler
+     from the title, so it has no margin. */
+
+ul.tree-element .tree-element-toggler {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    min-width: 24px;
+    min-height: 24px;
     border-bottom: none;
-    color: #333;
+    color: var(--tree-element-toggler-color);
     text-decoration: none;
     vertical-align: middle;
+  }
 
-    &:hover {
-      color: #000;
+ul.tree-element .tree-element-toggler:hover {
+      color: var(--tree-element-toggler-hover-color);
       text-decoration: none;
     }
 
-    &.tree-element-closed {
+ul.tree-element .tree-element-toggler.tree-element-closed {
       background-position: 0 0;
     }
 
-    &.tree-element-toggler-left {
-      margin-right: 0.5em;
-    }
-
-    &.tree-element-toggler-right {
-      margin-left: 0.5em;
-    }
-  }
-
-  .tree-element-element {
+ul.tree-element .tree-element-element {
     cursor: pointer;
     position: relative;
     display: flex;
+    align-items: center;
+    min-height: 24px;
+  }
 
-    &:has(.tree-element-title-button-right) {
+ul.tree-element .tree-element-element:has(.tree-element-title-button-right) {
       display: block;
     }
-  }
 
-  .tree-element-title {
-    color: #1c4257;
+ul.tree-element .tree-element-title {
+    color: var(--tree-element-title-color);
     vertical-align: middle;
   }
 
-  .tree-element-title-button-left {
-    margin-left: 1.5em;
+/* Line up with the titles of folders, after the toggler */
 
-    &.tree-element-title-folder {
+ul.tree-element .tree-element-title-button-left {
+    margin-left: 24px;
+  }
+
+ul.tree-element .tree-element-title-button-left.tree-element-title-folder {
       margin-left: 0;
     }
-  }
 
-  li.tree-element-folder {
+ul.tree-element li.tree-element-folder {
     margin-bottom: 4px;
+  }
 
-    &.tree-element-closed {
+ul.tree-element li.tree-element-folder.tree-element-closed {
       margin-bottom: 1px;
     }
-  }
 
-  li.tree-element-ghost {
+ul.tree-element li.tree-element-ghost {
     position: relative;
     z-index: 10;
     margin-right: 10px;
+  }
 
-    span {
+ul.tree-element li.tree-element-ghost span {
       display: block;
     }
 
-    span.tree-element-circle {
-      border: solid 2px #0000ff;
+ul.tree-element li.tree-element-ghost span.tree-element-circle {
+      border: solid 2px var(--tree-element-drop-hint-color);
       border-radius: 100px;
       height: 8px;
       width: 8px;
@@ -101,8 +125,8 @@ ul.tree-element {
       box-sizing: border-box;
     }
 
-    span.tree-element-line {
-      background-color: #0000ff;
+ul.tree-element li.tree-element-ghost span.tree-element-line {
+      background-color: var(--tree-element-drop-hint-color);
       height: 2px;
       padding: 0;
       position: absolute;
@@ -111,85 +135,79 @@ ul.tree-element {
       width: 100%;
     }
 
-    &.tree-element-inside {
+ul.tree-element li.tree-element-ghost.tree-element-inside {
       margin-left: 48px;
     }
-  }
 
-  span.tree-element-border {
+ul.tree-element span.tree-element-border {
     position: absolute;
     display: block;
     left: -2px;
     top: 0;
-    border: solid 2px #0000ff;
+    border: solid 2px var(--tree-element-drop-hint-color);
     border-radius: 6px;
     margin: 0;
     box-sizing: content-box;
   }
 
-  li.tree-element-selected > .tree-element-element,
-  li.tree-element-selected > .tree-element-element:hover {
-    background-color: #97bdd6;
-    background: linear-gradient(#bee0f5, #89afca);
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+ul.tree-element li.tree-element-selected > .tree-element-element,
+  ul.tree-element li.tree-element-selected > .tree-element-element:hover {
+    background: var(--tree-element-selected-background);
+    text-shadow: var(--tree-element-selected-text-shadow);
   }
 
-  .tree-element-moving > .tree-element-element .tree-element-title {
-    outline: dashed 1px #0000ff;
+ul.tree-element li.tree-element-selected > .tree-element-element .tree-element-title {
+    color: var(--tree-element-selected-color, var(--tree-element-title-color));
+  }
+
+ul.tree-element .tree-element-moving > .tree-element-element .tree-element-title {
+    outline: dashed 1px var(--tree-element-drop-hint-color);
   }
-}
 
 ul.tree-element.tree-element-rtl {
   direction: rtl;
+}
 
-  ul.tree-element-common {
+ul.tree-element.tree-element-rtl ul.tree-element-common {
     margin-left: 0;
     margin-right: 12px;
   }
 
-  .tree-element-toggler {
-    margin-left: 0.5em;
-    margin-right: 0;
-  }
-
-  .tree-element-title {
+ul.tree-element.tree-element-rtl .tree-element-title {
     margin-left: 0;
-    margin-right: 1.5em;
+    margin-right: 24px;
+  }
 
-    &.tree-element-title-folder {
+ul.tree-element.tree-element-rtl .tree-element-title.tree-element-title-folder {
       margin-right: 0;
     }
-  }
 
-  li.tree-element-ghost {
+ul.tree-element.tree-element-rtl li.tree-element-ghost {
     margin-right: 0;
     margin-left: 10px;
+  }
 
-    span.tree-element-circle {
+ul.tree-element.tree-element-rtl li.tree-element-ghost span.tree-element-circle {
       right: -6px;
     }
 
-    span.tree-element-line {
+ul.tree-element.tree-element-rtl li.tree-element-ghost span.tree-element-line {
       right: 2px;
     }
 
-    &.tree-element-inside {
+ul.tree-element.tree-element-rtl li.tree-element-ghost.tree-element-inside {
       margin-left: 0;
       margin-right: 48px;
     }
-  }
 
-  span.tree-element-border {
+ul.tree-element.tree-element-rtl span.tree-element-border {
     right: -2px;
   }
-}
 
 span.tree-element-dragging {
-  color: #fff;
-  background: #000;
+  color: var(--tree-element-dragging-color);
+  background: var(--tree-element-dragging-background);
   opacity: 0.6;
   cursor: pointer;
   padding: 2px 8px;
 }
-
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNzcy90cmVlX2VsZW1lbnQucG9zdGNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJ0cmVlX2VsZW1lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsidWwudHJlZS1lbGVtZW50IHtcbiAgbGlzdC1zdHlsZTogbm9uZSBvdXRzaWRlO1xuICBtYXJnaW4tbGVmdDogMDtcbiAgbWFyZ2luLWJvdHRvbTogMDtcbiAgcGFkZGluZzogMDtcblxuICAmLnRyZWUtZWxlbWVudC1kbmQge1xuICAgIHRvdWNoLWFjdGlvbjogbm9uZTtcbiAgfVxuXG4gIHVsLnRyZWUtZWxlbWVudC1jb21tb24ge1xuICAgIGxpc3Qtc3R5bGU6IG5vbmUgb3V0c2lkZTtcbiAgICBtYXJnaW4tbGVmdDogMTJweDtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgbWFyZ2luLWJvdHRvbTogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICB9XG5cbiAgbGkudHJlZS1lbGVtZW50LWNsb3NlZCA+IHVsLnRyZWUtZWxlbWVudC1jb21tb24ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtY29tbW9uIHtcbiAgICBjbGVhcjogYm90aDtcbiAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gIH1cblxuICAudHJlZS1lbGVtZW50LXRvZ2dsZXIge1xuICAgIGJvcmRlci1ib3R0b206IG5vbmU7XG4gICAgY29sb3I6ICMzMzM7XG4gICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG5cbiAgICAmOmhvdmVyIHtcbiAgICAgIGNvbG9yOiAjMDAwO1xuICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWNsb3NlZCB7XG4gICAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAwIDA7XG4gICAgfVxuXG4gICAgJi50cmVlLWVsZW1lbnQtdG9nZ2xlci1sZWZ0IHtcbiAgICAgIG1hcmdpbi1yaWdodDogMC41ZW07XG4gICAgfVxuXG4gICAgJi50cmVlLWVsZW1lbnQtdG9nZ2xlci1yaWdodCB7XG4gICAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgfVxuICB9XG5cbiAgLnRyZWUtZWxlbWVudC1lbGVtZW50IHtcbiAgICBjdXJzb3I6IHBvaW50ZXI7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIGRpc3BsYXk6IGZsZXg7XG5cbiAgICAmOmhhcygudHJlZS1lbGVtZW50LXRpdGxlLWJ1dHRvbi1yaWdodCkge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgY29sb3I6ICMxYzQyNTc7XG4gICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgfVxuXG4gIC50cmVlLWVsZW1lbnQtdGl0bGUtYnV0dG9uLWxlZnQge1xuICAgIG1hcmdpbi1sZWZ0OiAxLjVlbTtcblxuICAgICYudHJlZS1lbGVtZW50LXRpdGxlLWZvbGRlciB7XG4gICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICB9XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtZm9sZGVyIHtcbiAgICBtYXJnaW4tYm90dG9tOiA0cHg7XG5cbiAgICAmLnRyZWUtZWxlbWVudC1jbG9zZWQge1xuICAgICAgbWFyZ2luLWJvdHRvbTogMXB4O1xuICAgIH1cbiAgfVxuXG4gIGxpLnRyZWUtZWxlbWVudC1naG9zdCB7XG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgIHotaW5kZXg6IDEwO1xuICAgIG1hcmdpbi1yaWdodDogMTBweDtcblxuICAgIHNwYW4ge1xuICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgfVxuXG4gICAgc3Bhbi50cmVlLWVsZW1lbnQtY2lyY2xlIHtcbiAgICAgIGJvcmRlcjogc29saWQgMnB4ICMwMDAwZmY7XG4gICAgICBib3JkZXItcmFkaXVzOiAxMDBweDtcbiAgICAgIGhlaWdodDogOHB4O1xuICAgICAgd2lkdGg6IDhweDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogLTRweDtcbiAgICAgIGxlZnQ6IC02cHg7XG4gICAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIH1cblxuICAgIHNwYW4udHJlZS1lbGVtZW50LWxpbmUge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwMDBmZjtcbiAgICAgIGhlaWdodDogMnB4O1xuICAgICAgcGFkZGluZzogMDtcbiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgIHRvcDogLTFweDtcbiAgICAgIGxlZnQ6IDJweDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWluc2lkZSB7XG4gICAgICBtYXJnaW4tbGVmdDogNDhweDtcbiAgICB9XG4gIH1cblxuICBzcGFuLnRyZWUtZWxlbWVudC1ib3JkZXIge1xuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgICBsZWZ0OiAtMnB4O1xuICAgIHRvcDogMDtcbiAgICBib3JkZXI6IHNvbGlkIDJweCAjMDAwMGZmO1xuICAgIGJvcmRlci1yYWRpdXM6IDZweDtcbiAgICBtYXJnaW46IDA7XG4gICAgYm94LXNpemluZzogY29udGVudC1ib3g7XG4gIH1cblxuICBsaS50cmVlLWVsZW1lbnQtc2VsZWN0ZWQgPiAudHJlZS1lbGVtZW50LWVsZW1lbnQsXG4gIGxpLnRyZWUtZWxlbWVudC1zZWxlY3RlZCA+IC50cmVlLWVsZW1lbnQtZWxlbWVudDpob3ZlciB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzk3YmRkNjtcbiAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoI2JlZTBmNSwgIzg5YWZjYSk7XG4gICAgdGV4dC1zaGFkb3c6IDAgMXB4IDAgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjcpO1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC1tb3ZpbmcgPiAudHJlZS1lbGVtZW50LWVsZW1lbnQgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgb3V0bGluZTogZGFzaGVkIDFweCAjMDAwMGZmO1xuICB9XG59XG5cbnVsLnRyZWUtZWxlbWVudC50cmVlLWVsZW1lbnQtcnRsIHtcbiAgZGlyZWN0aW9uOiBydGw7XG5cbiAgdWwudHJlZS1lbGVtZW50LWNvbW1vbiB7XG4gICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgbWFyZ2luLXJpZ2h0OiAxMnB4O1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10b2dnbGVyIHtcbiAgICBtYXJnaW4tbGVmdDogMC41ZW07XG4gICAgbWFyZ2luLXJpZ2h0OiAwO1xuICB9XG5cbiAgLnRyZWUtZWxlbWVudC10aXRsZSB7XG4gICAgbWFyZ2luLWxlZnQ6IDA7XG4gICAgbWFyZ2luLXJpZ2h0OiAxLjVlbTtcblxuICAgICYudHJlZS1lbGVtZW50LXRpdGxlLWZvbGRlciB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgfVxuICB9XG5cbiAgbGkudHJlZS1lbGVtZW50LWdob3N0IHtcbiAgICBtYXJnaW4tcmlnaHQ6IDA7XG4gICAgbWFyZ2luLWxlZnQ6IDEwcHg7XG5cbiAgICBzcGFuLnRyZWUtZWxlbWVudC1jaXJjbGUge1xuICAgICAgcmlnaHQ6IC02cHg7XG4gICAgfVxuXG4gICAgc3Bhbi50cmVlLWVsZW1lbnQtbGluZSB7XG4gICAgICByaWdodDogMnB4O1xuICAgIH1cblxuICAgICYudHJlZS1lbGVtZW50LWluc2lkZSB7XG4gICAgICBtYXJnaW4tbGVmdDogMDtcbiAgICAgIG1hcmdpbi1yaWdodDogNDhweDtcbiAgICB9XG4gIH1cblxuICBzcGFuLnRyZWUtZWxlbWVudC1ib3JkZXIge1xuICAgIHJpZ2h0OiAtMnB4O1xuICB9XG59XG5cbnNwYW4udHJlZS1lbGVtZW50LWRyYWdnaW5nIHtcbiAgY29sb3I6ICNmZmY7XG4gIGJhY2tncm91bmQ6ICMwMDA7XG4gIG9wYWNpdHk6IDAuNjtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBwYWRkaW5nOiAycHggOHB4O1xufVxuIl19 */