wunderbaum 0.0.1 → 0.0.4

package/src/wb_options.ts

@@ -7,8 +7,10 @@
 import {
   BoolOptionResolver,
   NavigationModeOption,
-  WbEventType,
+  WbNodeEventType,
+  WbTreeEventType,
 } from "./common";
+import { DndOptionsType } from "./wb_ext_dnd";
 
 export interface WbNodeData {
   title: string;
@@ -16,7 +18,7 @@ export interface WbNodeData {
   refKey?: string;
   expanded?: boolean;
   selected?: boolean;
-  checkbox?: boolean | "radio" | BoolOptionResolver;
+  checkbox?: boolean | string;
   children?: Array<WbNodeData>;
   // ...any?: Any;
 }
@@ -34,6 +36,21 @@ export interface WbNodeData {
  *   ...
  * });
  * ```
+ *
+ * Event handlers are also passed as callbacks
+ *
+ * ```js
+ * const tree = new mar10.Wunderbaum({
+ *   ...
+ *   init: (e) => {
+ *     console.log(`Tree ${e.tree} was initialized and loaded.`)
+ *   },
+ *   activate: (e) => {
+ *     console.log(`Node ${e.node} was activated.`)
+ *   },
+ *   ...
+ * });
+ * ```
  */
 export interface WunderbaumOptions {
   /**
@@ -62,56 +79,186 @@ export interface WunderbaumOptions {
    *
    * Default: `{}`.
    */
-  types: any; //[key: string]: any;
+  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.
+   * Wunderbaum becomes a treegrid 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>;
   /**
-   *
+   * If true, add a `wb-skeleton` class to all nodes, that will result in a
+   * 'glow' effect. Typically used with initial dummy nodes, while loading the
+   * real data.
    * Default: false.
    */
-  skeleton: false;
+  skeleton?: false;
+  /**
+   * Translation map for some system messages.
+   */
+  strings?: any; //[key: string] string;
+  /**
+   * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
+   * Default: 3 (4 in local debug environment)
+   */
+  debugLevel: number;
+  /**
+   * Number of levels that are forced to be expanded, and have no expander icon.
+   *  Default: 0
+   */
+  minExpandLevel?: number;
+  // escapeTitles: boolean;
+  /**
+   * Height of the header row div.
+   * Default: 22
+   */
+  headerHeightPx: number;
+  /**
+   * Height of a node row div.
+   * Default: 22
+   */
+  rowHeightPx?: number;
+  /**
+   * Collapse siblings when a node is expanded.
+   * Default: false
+   */
+  autoCollapse?: boolean;
+  /**
+   * Default:  NavigationModeOption.startRow
+   */
+  navigationMode?: NavigationModeOption;
+  /**
+   * Show/hide header (pass bool or string)
+   */
+  header?: boolean | string | null;
   /**
    *
-   * Default: false.
    */
-  strings: any; //[key: string] string;
+  showSpinner?: boolean;
+  /**
+   * Default: true
+   */
+  checkbox?: boolean | "radio" | BoolOptionResolver;
+  /**
+   * Default: 200
+   */
+  updateThrottleWait?: number;
+  // --- KeyNav ---
   /**
+   * Default: true
    */
-  debugLevel: 3;
-  minExpandLevel: 0;
-  escapeTitles: true;
-  headerHeightPx: 22;
-  autoCollapse: false;
+  quicksearch?: boolean;
+
   // --- Extensions ---
-  dnd: any; // = {};
+  dnd?: DndOptionsType; // = {};
   filter: any; // = {};
+  grid: any; // = {};
+  // --- Events ---
   /**
-   * 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.
+   *
+   * @category Callback
    */
-  navigationMode?: NavigationModeOption;
-  // --- Events ---
+  activate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  change?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Return `false` to prevent default handling, e.g. activating the node.
+   * @category Callback
+   */
+  click?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  deactivate?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  discard?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  enhanceTitle?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  error?: (e: WbTreeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
+   * @category Callback
+   */
+  focus?: (e: WbTreeEventType) => void;
   /**
-   * Called after initial data was loaded and tree markup was rendered.
+   * Fires when the tree markup was created and the initial source data was loaded.
+   * Typical use cases would be activating a node, setting focus, enabling other
+   * controls on the page, etc.<br>
+   * Check `e.error` for status.
    * @category Callback
    */
-  init?: (e: WbEventType) => void;
+  init?: (e: WbTreeEventType) => void;
   /**
-   * Called after data was loaded from local storage.
+   *
+   * @category Callback
+   */
+  keydown?: (e: WbNodeEventType) => void;
+  /**
+   * Fires when a node that was marked 'lazy', is expanded for the first time.
+   * Typically we return an endpoint URL or the Promise of a fetch request that
+   * provides a (potentially nested) list of child nodes.
+   * @category Callback
+   */
+  lazyLoad?: (e: WbNodeEventType) => void;
+  /**
+   * Fires when data was loaded (initial request, reload, or lazy loading),
+   * after the data is applied and rendered.
+   * @category Callback
+   */
+  load?: (e: WbNodeEventType) => void;
+  /**
+   * @category Callback
+   */
+  modifyChild?: (e: WbNodeEventType) => void;
+  /**
+   * Fires when data was fetched (initial request, reload, or lazy loading),
+   * but before the data is applied and rendered.
+   * Here we can modify and adjust the received data, for example to convert an
+   * external response to native Wunderbaum syntax.
+   * @category Callback
+   */
+  receive?: (e: WbNodeEventType) => void;
+  /**
+   * Fires when a node is about to be displayed.
+   * The default HTML markup is already created, but not yet added to the DOM.
+   * Now we can tweak the markup, create HTML elements in this node's column
+   * cells, etc.
+   * See also `Custom Rendering` for details.
+   * @category Callback
+   */
+  render?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * @category Callback
+   */
+  renderStatusNode?: (e: WbNodeEventType) => void;
+  /**
+   *
+   * Check `e.flag` for status.
    * @category Callback
    */
-  update?: (e: WbEventType) => void;
+  select?: (e: WbNodeEventType) => void;
   /**
-   * Called after data was loaded from local storage.
+   * Fires when the viewport content was updated, after scroling, expanding etc.
    * @category Callback
    */
-  modifyChild?: (e: WbEventType) => void;
+  update?: (e: WbTreeEventType) => void;
 }

package/src/wunderbaum.scss

@@ -11,8 +11,11 @@ $error-color: #b5373b;
 $node-text-color: #56534c;
 $bg-highlight-color: #26a0da;
 $header-color: #dedede;
+$background-color: white;
 $alternate-row-color: #fcfcfc;
 $alternate-row-color-even: #f7fcfe;
+$focus-border-color: #275dc5;
+
 // derived
 $border-color: $node-text-color;
 $drop-source-color: adjust-color($node-text-color, $lightness: 50%);
@@ -22,14 +25,12 @@ $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;
@@ -60,6 +61,7 @@ $level-rainbow: rgba(255, 255, 232, 1), rgba(240, 255, 240, 1),
 div.wunderbaum {
   box-sizing: border-box;
   height: 100%; // fill parent container
+  background-color: $background-color;
   margin: 0;
   padding: 0;
 
@@ -67,14 +69,17 @@ div.wunderbaum {
   font-size: 14px;
 
   color: $node-text-color;
-  border: 1px solid $border-color;
+  border: 2px solid $border-color;
+  border-radius: 4px;
+  background-clip: content-box; // Keep color outside rounded borders?
   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;
-  // }
+  &:focus,
+  &:focus-within {
+    border-color: $focus-border-color;
+    //    outline-style: none;
+  }
 
   div.wb-scroll-container {
     position: relative;
@@ -103,42 +108,51 @@ div.wunderbaum {
       &.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;
@@ -151,6 +165,7 @@ div.wunderbaum {
         );
         animation: wb-dirty-animation 2s linear infinite;
       }
+
       &.wb-error,
       &.wb-status-error {
         color: $error-color;
@@ -166,6 +181,7 @@ div.wunderbaum {
     border-bottom: 1px solid $border-color;
     padding: 0;
     background-color: $header-color;
+
     span.wb-col {
       font-weight: bold;
       // &::after {
@@ -177,14 +193,36 @@ div.wunderbaum {
   span.wb-col {
     position: absolute;
     display: inline-block;
-    text-overflow: ellipsis;
+    // 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;
     }
+
+    overflow: visible; // allow resizer to overlap next col
+
+    span.wb-col-title {
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span.wb-col-resizer {
+      position: absolute;
+      top: 0;
+      // left: auto;
+      right: -1px;
+      width: 3px;
+      // float: right;
+      border: none;
+      border-right: 2px solid $border-color;
+      height: 100%;
+      cursor: col-resize;
+    }
   }
 
   span.wb-node {
@@ -208,18 +246,21 @@ div.wunderbaum {
   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
@@ -248,68 +289,81 @@ div.wunderbaum {
         }
       }
     }
+
     &.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 {
+        > input[type="color"],
+        > input[type="date"],
+        > input[type="datetime"],
+        > 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) {
@@ -324,30 +378,38 @@ div.wunderbaum {
   &.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;
@@ -360,11 +422,13 @@ div.wunderbaum {
       }
     }
   }
+
   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;
@@ -373,6 +437,7 @@ div.wunderbaum {
 
   &.wb-rainbow {
     @for $i from 1 through length($level-rainbow) {
+      i.wb-expander:nth-child(#{length($level-rainbow)}n + #{$i}),
       i.wb-indent:nth-child(#{length($level-rainbow)}n + #{$i}) {
         background: nth($level-rainbow, $i);
       }
@@ -382,16 +447,20 @@ div.wunderbaum {
   /* Fade out expanders, when container is not hovered or active */
   &.wb-fade-expander {
     i.wb-expander {
-      transition: opacity 1.5s;
-      opacity: 0;
+      // only text-alpha is animated, since we want to keep the background color
+      // transition: opacity 1.5s;
+      // opacity: 0;
+      transition: color 1.5s;
+      color: rgba($node-text-color, 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;
+      transition: color 0.6s;
+      color: $node-text-color;
     }
   }
 
@@ -412,10 +481,12 @@ div.wunderbaum {
     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 {
@@ -423,28 +494,36 @@ div.wunderbaum {
       }
     }
   }
-} // div.wunderbaum
+}
+
+// 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;
 // }
@@ -453,17 +532,21 @@ div.wunderbaum {
 .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 ...
  */
@@ -485,6 +568,7 @@ div.wunderbaum {
   0% {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(1turn);
   }
@@ -494,6 +578,7 @@ div.wunderbaum {
   0% {
     background-color: hsl(200, 20%, 70%);
   }
+
   100% {
     background-color: hsl(200, 20%, 95%);
   }
@@ -503,6 +588,7 @@ div.wunderbaum {
   0% {
     background-position: 0 0;
   }
+
   100% {
     background-position: -70px 0;
   }