mar10 · mar10 · Feb 13, 2025 · Feb 12, 2025 · Feb 12, 2025 · Feb 12, 2025
diff --git a/.eslintrc.cjs → .eslintrc.cjs.OBSOLETE b/.eslintrc.cjs → .eslintrc.cjs.OBSOLETE
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,6 @@ playwright-report/
 test-results/
 /test/fixtures
 test/issue_*.*
+/.yarn
+.pnp.cjs
+.pnp.loader.mjs
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
   },
   "explorer.excludeGitIgnore": false,
   "editor.formatOnSave": true,
-  "black-formatter.importStrategy": "fromEnvironment"
-}
+  "black-formatter.importStrategy": "fromEnvironment",
+  "eslint.useFlatConfig": true
+}
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/docs/demo/demo-select.js b/docs/demo/demo-select.js
@@ -127,8 +127,7 @@ new mar10.Wunderbaum({
   },
   select: function (e) {
     console.log(e.type, e, e.tree.getSelectedNodes());
-    document.getElementById(
-      "tree-info-custom"
-    ).textContent = `Selected: ${e.tree.getSelectedNodes(true)}`;
+    document.getElementById("tree-info-custom").textContent =
+      `Selected: ${e.tree.getSelectedNodes(true)}`;
   },
 });
diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

diff --git a/docs/demo/style.css b/docs/demo/style.css
@@ -22,7 +22,8 @@ ul {
 }
 
 body {
-  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans",
+  font-family:
+    "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans",
     "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
   background-color: var(--bg-color-dark);
   color: var(--font-color);

diff --git a/docs/tutorial/tutorial_events.md b/docs/tutorial/tutorial_events.md
@@ -285,3 +285,26 @@ Common event handlers include:
 </dd>
 
 </dl>
+
+## Register Custom events
+
+To register a custom event, we can use event delegation.
+For example, to handle a `contextmenu` event on a row, we can add an event listener to the `body` element. This would allow to prevent the default context menu, or to show a custom context menu. <br>
+The `getNode()` utility method can be used to retrieve the node object that
+corresponds to the clicked row:
+
+```html
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    document.body.addEventListener("contextmenu", function (event) {
+      if (event.target.closest("div.wb-row")) {
+        const node = mar10.Wunderbaum.getNode(event);
+        node.logInfo("received contextmenu event");
+
+        // Optionally prevent the default context menu:
+        event.preventDefault();
+      }
+    });
+  });
+</script>
+```
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,65 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+import globals from "globals";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended"
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      globals: {
+        ...globals.browser,
+        ...globals.nodeBuiltin,
+      },
+    },
+    rules: {
+      curly: ["error", "all"],
+      "no-alert": "error",
+      "no-console": "error",
+
+      "prefer-const": [
+        "error",
+        {
+          destructuring: "all",
+        },
+      ],
+
+      "no-constant-condition": [
+        "error",
+        {
+          checkLoops: false,
+        },
+      ],
+
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+
+      "one-var": [
+        "error",
+        {
+          const: "never",
+        },
+      ],
+    },
+  },
+];
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -6,7 +6,7 @@ repo_url: https://github.com/mar10/wunderbaum
 
 site_author: Martin Wendt
 copyright: |
-  Copyright © 2021-2024 Martin Wendt, 
+  Copyright © 2021-2024 Martin Wendt,
   Documentation generated with <a href="https://squidfunk.github.io/mkdocs-material/">MkDocs</a>.
 
 # remote_branch: gh-pages
@@ -23,11 +23,11 @@ theme:
     - content.code.copy
 
     - header.autohide
-    
+
     # - navigation.anchors
     - navigation.bottom
     - navigation.breadcrumbs
-    # - navigation.edit_url 
+    # - navigation.edit_url
     - navigation.expand
     - navigation.footer
     - navigation.indexes
@@ -41,10 +41,10 @@ theme:
     - navigation.tabs.sticky
     # - navigation.toc
     - navigation.top
-    - navigation.tracking 
+    - navigation.tracking
 
-    - toc.follow 
-    # - toc.integrate 
+    - toc.follow
+    # - toc.integrate
 
   palette:
 
@@ -56,7 +56,7 @@ theme:
 
     # Palette toggle for light mode
     - media: "(prefers-color-scheme: light)"
-      scheme: default 
+      scheme: default
       toggle:
         icon: material/brightness-7
         name: Switch to dark mode
@@ -68,11 +68,6 @@ theme:
         icon: material/brightness-4
         name: Switch to system preference
 
-markdown_extensions:
-  - admonition
-  - pymdownx.details
-  - pymdownx.superfences
-
 exclude_docs: |
   .*
   /templates/
@@ -108,9 +103,9 @@ nav:
 
 validation:
   omitted_files: warn
-  absolute_links: warn # Or 'relative_to_docs' 
+  absolute_links: warn # Or 'relative_to_docs'
   unrecognized_links: warn
-  anchors: warn 
+  anchors: warn
 
 markdown_extensions:
   - admonition

diff --git a/package.json b/package.json
@@ -47,40 +47,42 @@
     "control"
   ],
   "devDependencies": {
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@types/jest": "^29.5.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
-    "concurrently": "^8.1.0",
-    "eslint": "^8.51.0",
-    "eslint-config-jquery": "^3.0.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.20.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^8.24.0",
+    "@typescript-eslint/parser": "^8.24.0",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.20.1",
+    "eslint-config-jquery": "^3.0.2",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "grunt": "^1.6.1",
-    "grunt-contrib-connect": "^3.0.0",
+    "grunt-contrib-connect": "^5.0.1",
     "grunt-contrib-qunit": "^10.1.1",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-exec": "^3.0.0",
     "grunt-yabs": "^1.3.0",
     "http-server": "^14.1.1",
-    "nodemon": "^2.0.22",
-    "postcss": "^8.2.24",
+    "nodemon": "^3.1.9",
+    "postcss": "^8.5.2",
     "postcss-url": "^10.1.3",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
-    "puppeteer": "^23.10.0",
-    "qunit": "^2.19.4",
-    "rollup": "^3.23.0",
-    "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.63.6",
-    "terser": "^5.17.7",
-    "ts-jest": "^29.1.0",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.5.2",
-    "typedoc": "^0.25.2",
-    "typescript": "^5.2.2",
+    "prettier": "^3.5.1",
+    "pretty-quick": "^4.0.0",
+    "puppeteer": "^24.2.0",
+    "qunit": "^2.24.1",
+    "rollup": "^4.34.6",
+    "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.84.0",
+    "terser": "^5.39.0",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
+    "typedoc": "^0.27.7",
+    "typescript": "^5.7",
     "yarn-audit-fix": "^10.1.1"
   },
   "nodemonConfig": {
@@ -134,4 +136,4 @@
     }
   ],
   "packageManager": "yarn@4.4.1+sha512.f825273d0689cc9ead3259c14998037662f1dcd06912637b21a450e8da7cfeb4b1965bbee73d16927baa1201054126bc385c6f43ff4aa705c8631d26e12460f1"
-}
+}
diff --git a/src/wb_ext_dnd.ts b/src/wb_ext_dnd.ts
@@ -143,8 +143,8 @@ export class DndExtension extends WunderbaumExtension<DndOptionsType> {
       return dy < 0.25 * rowHeight
         ? "before"
         : dy > 0.75 * rowHeight
-        ? "after"
-        : "over";
+          ? "after"
+          : "over";
     } else if (allowed.size === 1 && allowed.has("over")) {
       return "over";
     } else {

diff --git a/src/wb_ext_filter.ts b/src/wb_ext_filter.ts
@@ -177,7 +177,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     }
 
     tree.filterMode = opts.mode;
-    // eslint-disable-next-line prefer-rest-params, prefer-spread
+    // eslint-disable-next-line prefer-rest-params
     this.lastFilterArgs = arguments;
 
     tree.element.classList.toggle("wb-ext-filter-hide", !!hideMode);

diff --git a/src/wb_options.ts b/src/wb_options.ts
@@ -113,6 +113,14 @@ export interface WunderbaumOptions {
   skeleton?: boolean;
   /**
    * Translation map for some system messages.
+   * Default:
+   * ```js
+   * strings: {
+   *   loading: "Loading...",
+   *   loadError: "Error",
+   *   noData: "No data",
+   * }
+   * ```
    */
   strings?: any; //[key: string] string;
   /**

diff --git a/src/wunderbaum.scss b/src/wunderbaum.scss
@@ -69,8 +69,8 @@ $header-height: $row-outer-height;
 // $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);
 // Slightly stronger*
-$level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
-  rgb(204, 250, 250);
+$level-rainbow:
+  rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254), rgb(204, 250, 250);
 
 // ----------------------------------------------------------------------------
 // --- Define CSS variables with calculated default values

diff --git a/src/wunderbaum.ts b/src/wunderbaum.ts
@@ -125,14 +125,14 @@ export class Wunderbaum {
   protected _focusNode: WunderbaumNode | null = null;
 
   /** Currently active node if any.
-   * Use @link {WunderbaumNode.setActive|setActive} to modify.
+   * Use {@link WunderbaumNode.setActive|setActive} to modify.
    */
   public get activeNode() {
     // Check for deleted node, i.e. node.tree === null
     return this._activeNode?.tree ? this._activeNode : null;
   }
   /** Current node hat has keyboard focus if any.
-   * Use @link {WunderbaumNode.setFocus|setFocus()} to modify.
+   * Use {@link WunderbaumNode.setFocus|setFocus()} to modify.
    */
   public get focusNode() {
     // Check for deleted node, i.e. node.tree === null
@@ -319,7 +319,7 @@ export class Wunderbaum {
       // User existing header markup to define `this.columns`
       util.assert(
         !this.columns,
-        "`opts.columns` must not be set if markup already contains a header"
+        "`opts.columns` must not be set if table markup already contains a header"
       );
       this.columns = [];
       const rowElement =
@@ -380,8 +380,7 @@ export class Wunderbaum {
     // --- Load initial data
     if (opts.source) {
       if (opts.showSpinner) {
-        this.nodeListElement.innerHTML =
-          "<progress class='spinner'>loading...</progress>";
+        this.nodeListElement.innerHTML = `<progress class='spinner'>${opts.strings.loading}</progress>`;
       }
       this.load(opts.source)
         .then(() => {
@@ -2400,8 +2399,9 @@ export class Wunderbaum {
     // this.debug("render", opts);
     const obsoleteNodes = new Set<WunderbaumNode>();
     this.nodeListElement.childNodes.forEach((elem) => {
-      const tr = elem as HTMLTableRowElement;
-      obsoleteNodes.add((<any>tr)._wb_node);
+      if ((<any>elem)._wb_node) {
+        obsoleteNodes.add((<any>elem)._wb_node);
+      }
     });
 
     let idx = 0;

diff --git a/test/playground.js b/test/playground.js
@@ -33,7 +33,7 @@ const tree = new Wunderbaum({
   // iconMap: "fontawesome6",
   // navigationModeOption: "cell",
   // scrollIntoViewOnExpandClick: false,
-  // showSpinner: true,
+  showSpinner: true,
 
   columns: [
     { title: "test", id: "*", width: "200px" },