wunderbaum 0.0.1-0

package/src/wb_options.ts

@@ -0,0 +1,117 @@
+/*!
+ * Wunderbaum - utils
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+import {
+  BoolOptionResolver,
+  NavigationModeOption,
+  WbEventType,
+} from "./common";
+
+export interface WbNodeData {
+  title: string;
+  key?: string;
+  refKey?: string;
+  expanded?: boolean;
+  selected?: boolean;
+  checkbox?: boolean | "radio" | BoolOptionResolver;
+  children?: Array<WbNodeData>;
+  // ...any?: Any;
+}
+
+/**
+ * Available options for [[Wunderbaum]].
+ *
+ * Options are passed to the constructor as plain object:
+ *
+ * ```js
+ * const tree = new mar10.Wunderbaum({
+ *   id: "demo",
+ *   element: document.querySelector("#demo-tree"),
+ *   source: "url/of/data/request",
+ *   ...
+ * });
+ * ```
+ */
+export interface WunderbaumOptions {
+  /**
+   * The target `div` element (or selector) that shall become a Wunderbaum.
+   */
+  element: string | HTMLDivElement;
+  /**
+   * The identifier of this tree. Used to reference the instance, especially
+   * when multiple trees are present (e.g. `tree = mar10.Wunderbaum.getTree("demo")`).
+   *
+   * Default: `"wb_" + COUNTER`.
+   */
+  id?: string;
+  /**
+   * Define the initial tree data. Typically a URL of an endpoint that serves
+   * a JSON formatted structure, but also a callback, Promise, or static data
+   * is allowed.
+   *
+   * Default: `{}`.
+   */
+  source?: string | Array<WbNodeData>;
+  /**
+   * Define shared attributes for multiple nodes of the same type.
+   * This allows for more compact data models. Type definitions can be passed
+   * as tree option, or be part of a `source` response.
+   *
+   * Default: `{}`.
+   */
+  types: any; //[key: string]: any;
+  /**
+   * A list of maps that define column headers. If this option is set,
+   * Wunderbaum becomes a tree-grid control instead of a plain tree.
+   * Column definitions can be passed as tree option, or be part of a `source`
+   * response.
+   * Default: `[]` meaning this is a plain tree.
+   */
+  columns?: Array<any>;
+  /**
+   *
+   * Default: false.
+   */
+  skeleton: false;
+  /**
+   *
+   * Default: false.
+   */
+  strings: any; //[key: string] string;
+  /**
+   */
+  debugLevel: 3;
+  minExpandLevel: 0;
+  escapeTitles: true;
+  headerHeightPx: 22;
+  autoCollapse: false;
+  // --- Extensions ---
+  dnd: any; // = {};
+  filter: any; // = {};
+  /**
+   * A list of maps that define column headers. If this option is set,
+   * Wunderbaum becomes a tree grid control instead of a plain tree.
+   * Column definitions can be passed as tree option, or be part of a `source`
+   * response.
+   */
+  navigationMode?: NavigationModeOption;
+  // --- Events ---
+  /**
+   * Called after initial data was loaded and tree markup was rendered.
+   * @category Callback
+   */
+  init?: (e: WbEventType) => void;
+  /**
+   * Called after data was loaded from local storage.
+   * @category Callback
+   */
+  update?: (e: WbEventType) => void;
+  /**
+   * Called after data was loaded from local storage.
+   * @category Callback
+   */
+  modifyChild?: (e: WbEventType) => void;
+}

package/src/wunderbaum.scss

@@ -0,0 +1,509 @@
+/*!
+ * Wunderbaum style sheet (generated from wunderbaum.scss)
+ * Copyright (c) 2021-2022, Martin Wendt. Released under the MIT license.
+ * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
+ */
+
+$font-stack: Helvetica, sans-serif;
+
+// Basic Theme Colors
+$error-color: #b5373b;
+$node-text-color: #56534c;
+$bg-highlight-color: #26a0da;
+$header-color: #dedede;
+$alternate-row-color: #fcfcfc;
+$alternate-row-color-even: #f7fcfe;
+// derived
+$border-color: $node-text-color;
+$drop-source-color: adjust-color($node-text-color, $lightness: 50%);
+$drop-target-color: adjust-color($bg-highlight-color, $lightness: 40%);
+$dim-color: adjust-color($node-text-color, $lightness: 20%);
+$error-background-color: adjust-color($error-color, $lightness: 45%);
+// @debug $dim-color;
+$hover-color: adjust-color($bg-highlight-color, $lightness: 48%); // #f7f7f7;
+$hover-border-color: $hover-color;
+$focus-border-color: #969da3;
+$grid-color: #dedede;
+$active-color: #e5f3fb;
+$active-cell-color: $bg-highlight-color;
+$active-border-color: #70c0e7;
+$active-hover-color: #dceff8;
+$active-hover-border-color: $bg-highlight-color;
+$background-color: #fcfcfc;
+$active-column-color: $hover-color;
+$active-header-column-color: adjust-color($header-color, $lightness: -10%);
+// @debug $active-header-column-color;
+$filter-dim-color: #dedede;
+$filter-submatch-color: #868581;
+
+$row-outer-height: 22px;
+$row-inner-height: $row-outer-height - 2; // outer height minus border size
+$row-padding-y: ($row-outer-height - $row-inner-height) / 2;
+$col-padding-x: 2px; // on each side within span.wb-col
+
+$icon-outer-height: $row-inner-height;
+$icon-outer-width: 20px;
+$icon-height: 16px;
+$icon-width: 16px;
+$icon-padding-y: ($icon-outer-height - $icon-height) / 2;
+$icon-padding-x: ($icon-outer-width - $icon-width) / 2;
+
+$header-height: $row-outer-height;
+
+// PyCharm:
+$level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
+  rgba(255, 240, 255, 1), rgba(234, 253, 253, 1);
+// VS-Code_
+// $level-rainbow: rgba(255, 255, 64, 0.07), rgba(127, 255, 127, 0.07),
+//   rgba(255, 127, 255, 0.07), rgba(79, 236, 236, 0.07);
+
+div.wunderbaum {
+  box-sizing: border-box;
+  height: 100%; // fill parent container
+  margin: 0;
+  padding: 0;
+
+  font-family: $font-stack;
+  font-size: 14px;
+
+  color: $node-text-color;
+  border: 1px solid $border-color;
+  overflow: hidden; // avoid unwanted effects when auto-resizing
+
+  // Focus border is generated by the browsers per default:
+  // &:focus,
+  // &:focus-within {
+  //   border-color: $active-border-color;
+  // }
+
+  div.wb-scroll-container {
+    position: relative;
+    overflow: auto;
+    // scroll-behavior: smooth;
+    min-height: 4px;
+    // height: calc(100% - #{$header-height});  // didn't work. Using JS instead
+  }
+
+  // --- Header and node list ---
+  div.wb-row {
+    position: absolute;
+    width: 100%;
+    height: $row-outer-height;
+    line-height: $row-outer-height;
+    border: 1px solid transparent;
+  }
+
+  // --- Node List Only ---
+
+  // Dimm some colors if tree has no focus
+  &:not(:focus-within),
+  &:not(:focus) {
+    div.wb-node-list div.wb-row {
+      &.wb-active,
+      &.wb-selected {
+        background-color: grayscale($active-color);
+        border-color: grayscale($active-border-color);
+        &:hover {
+          background-color: grayscale($active-hover-color);
+        }
+      }
+    }
+  }
+  div.wb-node-list {
+    div.wb-row {
+      &:hover {
+        background-color: $hover-color;
+      }
+      &.wb-active,
+      &.wb-selected {
+        background-color: $active-color;
+        // border-color: $active-border-color;
+        &:hover {
+          background-color: $active-hover-color;
+          // border-color: $active-hover-border-color;
+        }
+      }
+      &.wb-focus:not(.wb-active) {
+        border-style: dotted;
+        border-color: $active-border-color;
+      }
+      &.wb-active {
+        // background-color: $active-hover-color;
+        border-style: solid;
+        border-color: $active-border-color;
+        &:hover {
+          // background-color: $active-hover-color;
+          border-color: $active-hover-border-color;
+        }
+      }
+      &.wb-loading {
+        font-style: italic;
+      }
+      &.wb-dirty,
+      .wb-col.wb-dirty {
+        font-style: italic;
+        background: repeating-linear-gradient(
+          45deg,
+          $hover-color,
+          $hover-color 5px,
+          $grid-color 5px,
+          $grid-color 10px
+        );
+        animation: wb-dirty-animation 2s linear infinite;
+      }
+      &.wb-error,
+      &.wb-status-error {
+        color: $error-color;
+      }
+    }
+  }
+
+  // --- HEADER ---
+
+  div.wb-header {
+    position: relative;
+    height: $header-height;
+    border-bottom: 1px solid $border-color;
+    padding: 0;
+    background-color: $header-color;
+    span.wb-col {
+      font-weight: bold;
+      // &::after {
+      //   content: "|";
+      // }
+    }
+  }
+
+  span.wb-col {
+    position: absolute;
+    display: inline-block;
+    text-overflow: ellipsis;
+    height: $row-inner-height;
+    line-height: $row-inner-height;
+    padding: 0 $col-padding-x;
+    border-right: 1px solid $grid-color;
+    &:last-of-type {
+      border-right: none;
+    }
+  }
+
+  span.wb-node {
+    user-select: none;
+    // &:first-of-type {
+    //   margin-left: 8px; // leftmost icon gets a little margin
+    // }
+  }
+
+  i.wb-checkbox,
+  i.wb-expander,
+  i.wb-icon,
+  i.wb-indent {
+    height: $icon-outer-height;
+    width: $icon-outer-width;
+    padding: $icon-padding-y $icon-padding-x;
+    display: inline-block;
+  }
+
+  /* Fix Bootstrap Icon alignment */
+  i.bi::before {
+    vertical-align: baseline;
+  }
+  img.wb-icon {
+    width: $icon-width;
+    height: $icon-height;
+    padding: $icon-padding-y $icon-padding-x;
+    // margin-top: $icon-padding-y;
+  }
+  i.wb-indent {
+    // border-left: 1px solid gray;
+    &::before {
+      content: "\00a0";
+    }
+  }
+  i.wb-expander.wb-spin,
+  i.wb-icon.wb-spin {
+    height: unset; // Prevent wobble
+    width: unset;
+    padding: 0 3px;
+    animation: wb-spin-animation 2s linear infinite;
+  }
+
+  span.wb-title {
+    min-width: 1em;
+    display: inline-block; // fix vertical offset on Chrome?
+    vertical-align: top;
+    overflow-x: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* --- GRID --- */
+  &.wb-grid {
+    div.wb-header {
+      div.wb-row {
+        span.wb-col {
+          &:hover {
+            background-color: $active-header-column-color;
+          }
+        }
+      }
+    }
+    &.wb-cell-mode div.wb-header div.wb-row span.wb-col {
+      &.wb-active {
+        background-color: $active-hover-color;
+      }
+    }
+    div.wb-node-list div.wb-row {
+      border-bottom-color: $grid-color;
+      &:hover:not(.wb-active):not(.wb-selected) {
+        background-color: $hover-color;
+        // border-color: $hover-border-color;
+      }
+      &.wb-active {
+        border-bottom-color: $active-border-color;
+      }
+      span.wb-col {
+        border-right: 1px solid $grid-color;
+
+        input.wb-input-edit,
+        >input[type=color],
+        >input[type=date],
+        >input[type=datetime],  // deprecated
+        >input[type=datetime-local],
+        >input[type=email],
+        >input[type=month],
+        >input[type=number],
+        >input[type=password],
+        >input[type=search],
+        >input[type=tel],
+        >input[type=text],
+        >input[type=time],
+        >input[type=url],
+        >input[type=week],
+        >select {
+          width: 100%;
+        }
+      }
+    }
+    &.wb-cell-mode {
+      div.wb-row {
+        background-color: $background-color;
+        span.wb-col.wb-active {
+          background-color: $active-column-color;
+        }
+        &.wb-active {
+          background-color: $active-column-color;
+          span.wb-col.wb-active {
+            background-color: $active-cell-color;
+          }
+        }
+      }
+      &.wb-cell-edit-mode div.wb-row.wb-active span.wb-col.wb-active {
+        background-color: $error-color;
+      }
+    }
+    &.wb-alternate div.wb-node-list {
+      div.wb-row:nth-of-type(even):not(.wb-active):not(.wb-selected) {
+        background-color: $alternate-row-color;
+        &:hover {
+          background-color: $alternate-row-color-even;
+        }
+      }
+    }
+    // Dimm some colors if tree has no focus
+    &:not(:focus-within),
+    &:not(:focus) {
+      div.wb-node-list div.wb-row {
+        border-bottom-color: grayscale($grid-color);
+      }
+    }
+  }
+
+  /* --- FILTER --- */
+  &.wb-ext-filter-dim,
+  &.wb-ext-filter-hide {
+    div.wb-node-list div.wb-row {
+      color: $filter-dim-color;
+      &.wb-submatch {
+        color: $filter-submatch-color;
+      }
+      &.wb-match {
+        color: $node-text-color;
+      }
+    }
+  }
+  /* --- DND --- */
+  div.wb-row.wb-drag-source {
+    opacity: 0.5;
+    .wb-node {
+      background-color: $drop-source-color;
+    }
+  }
+  div.wb-row.wb-drop-target {
+    overflow: visible;
+    .wb-node {
+      background-color: $drop-target-color;
+      overflow: visible;
+      // z-index: 1000;
+      .wb-icon {
+        position: relative;
+        overflow: visible;
+        &::after {
+          // use ::after, because ::before is used by icon fonts
+          // vertical-align: baseline;
+          position: absolute;
+          z-index: 1000;
+          content: url(../docs/assets/drop_marker_16x32.png);
+          left: 0; //-$icon-outer-width;
+          top: ($row-outer-height - 16) / 2;
+        }
+      }
+    }
+  }
+  div.wb-row.wb-drop-target.wb-drop-before .wb-node .wb-icon::after {
+    content: url(../docs/assets/drop_marker_insert_16x64.png);
+    left: 0; // $icon-outer-width * 1.5;
+    top: ($row-outer-height - 16) / 2 - $row-outer-height / 2;
+  }
+  div.wb-row.wb-drop-target.wb-drop-after .wb-node .wb-icon::after {
+    content: url(../docs/assets/drop_marker_insert_16x64.png);
+    left: 0; //$icon-outer-width * 1.5;
+    top: ($row-outer-height - 16) / 2 + $row-outer-height / 2;
+  }
+
+  &.wb-rainbow {
+    @for $i from 1 through length($level-rainbow) {
+      i.wb-indent:nth-child(#{length($level-rainbow)}n + #{$i}) {
+        background: nth($level-rainbow, $i);
+      }
+    }
+  }
+
+  /* Fade out expanders, when container is not hovered or active */
+  &.wb-fade-expander {
+    i.wb-expander {
+      transition: opacity 1.5s;
+      opacity: 0;
+    }
+    div.wb-row.wb-loading i.wb-expander,
+    &:hover i.wb-expander,
+    &:focus i.wb-expander,
+    &:focus-within i.wb-expander,
+    [class*="wb-statusnode-"] i.wb-expander {
+      transition: opacity 0.6s;
+      opacity: 1;
+    }
+  }
+
+  /* Skeleton */
+  div.wb-row.wb-skeleton {
+    span.wb-title,
+    i.wb-icon {
+      animation: wb-skeleton-animation 1s linear infinite alternate;
+      border-radius: 0.25em;
+      color: transparent;
+      opacity: 0.7;
+      // max-width: 20px;
+    }
+  }
+
+  /* Auto-hide checkboxes unless selected or hovered */
+  &.wb-checkbox-auto-hide {
+    i.wb-checkbox {
+      visibility: hidden;
+    }
+    .wb-row:hover i.wb-checkbox,
+    .wb-row.wb-selected i.wb-checkbox {
+      visibility: unset;
+    }
+    &:focus,
+    &:focus-within {
+      .wb-row.wb-active i.wb-checkbox {
+        visibility: unset;
+      }
+    }
+  }
+} // div.wunderbaum
+
+/* --- TOOL CLASSES --- */
+
+.wb-helper-center {
+  text-align: center;
+}
+.wb-helper-disabled {
+  color: $dim-color;
+}
+.wb-helper-hidden {
+  display: none;
+}
+.wb-helper-invalid {
+  color: $error-color;
+}
+.wb-helper-lazy-expander {
+  color: $bg-highlight-color;
+}
+.wb-helper-link {
+  cursor: pointer;
+}
+// .wb-helper-edit-text {
+//   // content-editable: true;
+// }
+
+/* RTL support */
+.wb-helper-start {
+  text-align: left;
+}
+.wb-helper-end {
+  text-align: right;
+}
+.wb-rtl {
+  .wb-helper-start {
+    text-align: right;
+  }
+  .wb-helper-end {
+    text-align: left;
+  }
+}
+/* Class 'wb-tristate' is used to mark checkboxes that should toggle like
+ *   indeterminate -> checked -> unchecked -> indeterminate ...
+ */
+// input[type=checkbox].wb-tristate {
+// }
+// tri-state checkbox in indeterminate state
+.wb-col input[type="checkbox"]:indeterminate {
+  color: $dim-color;
+  background-color: red;
+}
+
+.wb-col input:invalid {
+  // border-color: $error-color;
+  color: $error-color;
+  background-color: $error-background-color;
+}
+
+@keyframes wb-spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+@keyframes wb-skeleton-animation {
+  0% {
+    background-color: hsl(200, 20%, 70%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+@keyframes wb-dirty-animation {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -70px 0;
+  }
+}