Merge pull request #35 from mar10/badges

Badges

CHANGELOG.md

@@ -7,6 +7,8 @@ First release.
 > This section will be removed after the beta phase. <br>
 > Note that semantic versioning rules are not strictly followed during this phase.
 
+- v0.5.1: Add support for `tree.iconBadge` (allows to implement counter badges, ...)
+
 - v0.5.0: Add support for Font Awesome icons (`options.iconMap: "fontawesome6"`)
 
 - v0.4.0: Add support for hierarchical selection (`selectMode: "hier"`)

src/common.ts

@@ -65,11 +65,11 @@ export const iconMaps: { [key: string]: { [key: string]: string } } = {
   },
   fontawesome6: {
     error: "fa-solid fa-triangle-exclamation",
-    loading: "fa-regular fa-chevron-right fa-beat",
+    loading: "fa-solid fa-chevron-right fa-beat",
     noData: "fa-solid fa-circle-question",
-    expanderExpanded: "fa-regular fa-chevron-down",
-    expanderCollapsed: "fa-regular fa-chevron-right",
-    expanderLazy: "fa-regular fa-chevron-right wb-helper-lazy-expander",
+    expanderExpanded: "fa-solid fa-chevron-down",
+    expanderCollapsed: "fa-solid fa-chevron-right",
+    expanderLazy: "fa-solid fa-chevron-right wb-helper-lazy-expander",
     checkChecked: "fa-regular fa-square-check",
     checkUnchecked: "fa-regular fa-square",
     checkUnknown: "fa-regular fa-square-minus",

src/types.ts

@@ -50,6 +50,10 @@ export type SourceType =
 
 /** Passed to `find...()` methods. Should return true if node matches. */
 export type MatcherCallback = (node: WunderbaumNode) => boolean;
+/** Used for `tree.iconBadge` event. */
+export type WbIconBadgeCallback = (
+  e: WbIconBadgeEventType
+) => WbIconBadgeEventResultType;
 /** Passed to `sortChildren()` methods. Should return -1, 0, or 1. */
 export type SortCallback = (a: WunderbaumNode, b: WunderbaumNode) => number;
 /** When set as option, called when the value is needed (e.g. `colspan` type definition). */
@@ -171,8 +175,20 @@ export interface WbDeactivateEventType extends WbNodeEventType {
   event: Event;
 }
 
-export interface WbEnhanceTitleEventType extends WbNodeEventType {
-  titleSpan: HTMLSpanElement;
+// export interface WbEnhanceTitleEventType extends WbNodeEventType {
+//   titleSpan: HTMLSpanElement;
+// }
+
+export interface WbIconBadgeEventType extends WbNodeEventType {
+  iconSpan: HTMLElement;
+}
+export interface WbIconBadgeEventResultType {
+  /** Content of the badge `<span class='wb-badge'>` if any. */
+  badge: string | number | HTMLSpanElement | null | false;
+  /** Additional class name(s), separate with space. */
+  badgeClass?: string;
+  /** Additional class name(s), separate with space. */
+  badgeTooltip?: string;
 }
 
 export interface WbFocusEventType extends WbTreeEventType {

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;

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",
   ]);

src/wb_node.ts

@@ -36,6 +36,7 @@ import {
   CheckboxOption,
   IconOption,
   SourceType,
+  WbIconBadgeEventResultType,
 } from "./types";
 
 import {
@@ -1520,6 +1521,38 @@ export class WunderbaumNode {
     } else {
       parentElem.appendChild(iconSpan);
     }
+
+    // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
+
+    let cbRes: WbIconBadgeEventResultType | void | false = 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 +1636,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

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

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 ...
  */

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

test/playground.js

@@ -29,30 +29,30 @@ const tree = new Wunderbaum({
   // source: "generator/fixture_department_1k_3_6_comp.json",
   // source: "../docs/assets/ajax-tree-products.json",
   // source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/fixture_store_104k_3_7_flat_comp.json",
-  // source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_100k_3_1_6.json",
+  source: "https://cdn.jsdelivr.net/gh/mar10/assets@master/wunderbaum/ajax_100k_3_1_6.json",
   // source: "generator/fixture.json",
   // source: (e)=>{
   //   console.info("SOURCE", e.type, e)
   //   return util.setTimeoutPromise(() => {
   //     return {url: "../docs/assets/ajax-tree-products.json"};
   //   }, 5000);
   // },
-  source: {
-    children: [
-      { title: "a", type: "book", details: "A book", children: [] },
-      {
-        title: "b",
-        children: [
-          {
-            title: "ba",
-          },
-        ],
-      },
-      { title: "c", children: null },
-      { title: "d", children: false },
-      { title: "e" },
-    ],
-  },
+  // source: {
+  //   children: [
+  //     { title: "a", type: "book", details: "A book", children: [] },
+  //     {
+  //       title: "b",
+  //       children: [
+  //         {
+  //           title: "ba",
+  //         },
+  //       ],
+  //     },
+  //     { title: "c", children: null },
+  //     { title: "d", children: false },
+  //     { title: "e" },
+  //   ],
+  // },
   columns: [
     { title: "test", id: "*", width: "200px" },
     // {
@@ -83,21 +83,6 @@ const tree = new Wunderbaum({
     book: { icon: "bi bi-book", classes: "extra-book-class" },
   },
   // showSpinner: true,
-  // source: {
-  //   children: [
-  //     { title: "Node 1", expanded: true, children: [{ title: "Node 1.1" }] },
-  //     {
-  //       title: "Node 2",
-  //       selected: true,
-  //       icon: "../docs/assets/favicon/favicon-16x16.png",
-  //       children: [
-  //         { title: "book2", type: "book" },
-  //         { title: "book2", type: "book" },
-  //       ],
-  //     },
-  //     { title: "Node 3", type: "book" },
-  //   ],
-  // },
 
   dnd: {
     dragStart: (e) => {
@@ -138,8 +123,8 @@ const tree = new Wunderbaum({
       })
     );
   },
-  deactivate: (e) => {},
-  discard: (e) => {},
+  deactivate: (e) => { },
+  discard: (e) => { },
   change: (e) => {
     const node = e.node;
     const value = e.inputValue;
@@ -168,6 +153,20 @@ const tree = new Wunderbaum({
       }
     }
   },
+  iconBadge: (e) => {
+    const count = e.node.children?.length || 0;
+    if (count > 0 && !e.node.expanded) {
+      if (count > 99) {
+        return { badge: "99+", badgeTooltip: `${count} children` };
+      }
+
+      // return { badge: count };
+      // return { badge: count, classes: "badge-primary" };
+      // return "" + count;
+      return count;
+      // return `<span class="badge badge-pill badge-primary">${count}</span>`;
+    }
+  },
 });
 console.log(`Created  ${tree}`);
 
@@ -179,8 +178,10 @@ tree.ready
     console.error(`${tree} init failed.`, err);
   });
 
-document.body.style.setProperty("--wb-node-text-color", "#ff8080");
-document.querySelector("div.wunderbaum").style.setProperty("--wb-font-stack", "monospace");
+// document.body.style.setProperty("--wb-node-text-color", "#ff8080");
+document
+  .querySelector("div.wunderbaum")
+  .style.setProperty("--wb-font-stack", "monospace");
 // document.querySelector("div.wunderbaum").style.setProperty("--wb-font-stack", "monospace");
 
 document.querySelectorAll(".demo-btn").forEach((elem) => {