wunderbaum 0.5.0 → 0.5.1

package/src/wb_ext_filter.ts

@@ -287,7 +287,6 @@ export class FilterExtension extends WunderbaumExtension {
     let tree = this.tree;
     // statusNode = tree.root.findDirectChild(KEY_NODATA),
     // escapeTitles = tree.options.escapeTitles;
-    // enhanceTitle = tree.options.enhanceTitle,
     tree.enableUpdate(false);
 
     // if (statusNode) {
@@ -299,16 +298,10 @@ export class FilterExtension extends WunderbaumExtension {
     delete tree.root.subMatchCount;
 
     tree.visit((node) => {
-      if (node.match && node._rowElem) {
-        // #491, #601
-        let titleElem = node._rowElem.querySelector("span.wb-title")!;
-        // if (escapeTitles) {
-        titleElem.textContent = node.title;
-        // } else {
-        //   titleElem.innerHTML = node.title;
-        // }
-        node._callEvent("enhanceTitle", { titleElem: titleElem });
-      }
+      // if (node.match && node._rowElem) {
+      //   let titleElem = node._rowElem.querySelector("span.wb-title")!;
+      //   node._callEvent("enhanceTitle", { titleElem: titleElem });
+      // }
       delete node.match;
       delete node.subMatchCount;
       delete node.titleWithHighlight;

package/src/wb_ext_logger.ts

@@ -11,7 +11,8 @@ import { Wunderbaum } from "./wunderbaum";
 export class LoggerExtension extends WunderbaumExtension {
   readonly prefix: string;
   protected ignoreEvents = new Set<string>([
-    "enhanceTitle",
+    "iconBadge",
+    // "enhanceTitle",
     "render",
     "discard",
   ]);

package/src/wb_node.ts

@@ -878,6 +878,11 @@ export class WunderbaumNode {
     return !this.selected && !!this._partsel;
   }
 
+  /** Return true if this node has DOM representaion, i.e. is displayed in the viewport. */
+  isRadio(): boolean {
+    return this.checkbox === "radio" || !!this.parent.radiogroup;
+  }
+
   /** Return true if this node has DOM representaion, i.e. is displayed in the viewport. */
   isRendered(): boolean {
     return !!this._rowElem;
@@ -1520,6 +1525,35 @@ export class WunderbaumNode {
     } else {
       parentElem.appendChild(iconSpan);
     }
+
+    // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
+
+    let cbRes = this._callEvent("iconBadge", { iconSpan: iconSpan });
+    let badge = null;
+    if (cbRes != null && cbRes !== false) {
+      let classes = "";
+      let tooltip = "";
+      if (util.isPlainObject(cbRes)) {
+        badge = "" + cbRes.badge;
+        classes = cbRes.badgeClass ? " " + cbRes.badgeClass : "";
+        tooltip = cbRes.badgeTooltip ? ` title="${cbRes.badgeTooltip}"` : "";
+      } else if (typeof cbRes === "number") {
+        badge = "" + cbRes;
+      } else {
+        badge = cbRes; // string or HTMLSpanElement
+      }
+      if (typeof badge === "string") {
+        badge = util.elemFromHtml(
+          `<span class="wb-badge${classes}"${tooltip}>${util.escapeHtml(
+            badge
+          )}</span>`
+        );
+      }
+      if (badge) {
+        iconSpan.append(<HTMLSpanElement>badge);
+      }
+    }
+
     // this.log("_createIcon: ", iconSpan);
     return iconSpan;
   }
@@ -1603,7 +1637,7 @@ export class WunderbaumNode {
     titleSpan.classList.add("wb-title");
     nodeElem.appendChild(titleSpan);
 
-    this._callEvent("enhanceTitle", { titleSpan: titleSpan });
+    // this._callEvent("enhanceTitle", { titleSpan: titleSpan });
 
     // Store the width of leading icons with the node, so we can calculate
     // the width of the embedded title span later
@@ -2178,7 +2212,7 @@ export class WunderbaumNode {
   /** Toggle the check/uncheck state. */
   toggleSelected(options?: SetSelectedOptions): TristateType {
     let flag = this.isSelected();
-    if (flag === undefined) {
+    if (flag === undefined && !this.isRadio()) {
       flag = this._anySelectable();
     } else {
       flag = !flag;

package/src/wb_options.ts

@@ -18,8 +18,8 @@ import {
   WbChangeEventType,
   WbClickEventType,
   WbDeactivateEventType,
-  WbEnhanceTitleEventType,
   WbErrorEventType,
+  WbIconBadgeCallback,
   WbInitEventType,
   WbKeydownEventType,
   WbNodeData,
@@ -258,7 +258,12 @@ export interface WunderbaumOptions {
    *
    * @category Callback
    */
-  enhanceTitle?: (e: WbEnhanceTitleEventType) => void;
+  iconBadge?: WbIconBadgeCallback;
+  // /**
+  //  *
+  //  * @category Callback
+  //  */
+  // enhanceTitle?: (e: WbEnhanceTitleEventType) => void;
   /**
    *
    * @category Callback

package/src/wunderbaum.scss

@@ -789,6 +789,26 @@ div.wunderbaum {
   }
 }
 
+i.wb-icon {
+  position: relative;
+  > span.wb-badge {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    left: -0.6rem;
+    color: white; //var(--wb-dim-color);
+    background-color: var(--wb-bg-highlight-color);
+    padding: 0.2em 0.3rem 0.1em 0.3rem;
+    font-size: 60%;
+    font-weight: 200;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    // vertical-align: baseline;
+    border-radius: 0.5rem;
+  }
+}
+
 /* Class 'wb-tristate' is used to mark checkboxes that should toggle like
  *   indeterminate -> checked -> unchecked -> indeterminate ...
  */

package/src/wunderbaum.ts

@@ -193,10 +193,11 @@ export class Wunderbaum {
         navigationModeOption: null, // NavModeEnum.startRow,
         quicksearch: true,
         // --- Events ---
-        change: util.noop,
-        enhanceTitle: util.noop,
-        error: util.noop,
-        receive: util.noop,
+        iconBadge: null,
+        change: null,
+        // enhanceTitle: null,
+        error: null,
+        receive: null,
         // --- Strings ---
         strings: {
           loadError: "Error",