Merge pull request #42 from pennions/fix/flightkit-treenav-table

fix: events are correctly handled when clicking an item in the tree

build-ibiss.js

@@ -18,7 +18,7 @@ function build() {
         }
     }
 
-    fs.rmdir('./dist', { recursive: true }, () => {
+    fs.rm('./dist', { recursive: true }, () => {
         console.log('cleaning done');
         const rollupCommands = [
             "npx rollup --config rollup.config.js",

dist/flightkit-v0.0.21/flightkit.js → dist/flightkit-v0.0.22/flightkit.js

@@ -1001,14 +1001,14 @@
 
                 if (templateItem) {
                     if (annotation[property] && annotation[property][templateItem]) {
-                        replacement = annotation[property][templateItem];
+                        replacement = annotation[property][templateItem].trim();
                     }
                     else {
-                        replacement = templateItem;
+                        replacement = templateItem.trim();
                     }
                 }
 
-                return Array.isArray(replacement) ? replacement.join(', ') : replacement.toString().trim();
+                return Array.isArray(replacement) ? replacement.join(', ') : replacement.toString();
             });
         }
 
@@ -1625,6 +1625,9 @@
         selectedElements = [];
         _setup = true;
 
+        /** Keep track of bubbling event, because we cannot stop propagation, it conflicts with things like dropdown */
+        _lastEventEmitted = 0;
+
         /** To make it so, something will not collapse when clicking, remember that we filtered, so the next click action will not close if open. */
         _justFiltered = false;
 
@@ -1639,13 +1642,14 @@
             return [...new Set(getAllValuesAndKeysFromJson(json))];
         }
 
-        _emit(event, ftElement, detail) {
+        _emit(event, flkElement, detail) {
+            detail.fkTreeEvent = true;
             let selectEvent = new CustomEvent(event, {
                 detail,
                 bubbles: true,
                 cancelable: true
             });
-            ftElement.dispatchEvent(selectEvent);
+            flkElement.dispatchEvent(selectEvent);
         }
 
         constructor() {
@@ -1686,15 +1690,23 @@
         }
 
         emitNodeToggle(event) {
-            event.stopPropagation();
-
             /** Clicked in between items in a list, ignore. */
             if (["LI", "UL"].includes(event.target.tagName)) {
                 return false;
             }
-
             const flkEvent = returnEventWithTopLevelElement(event, 'flk-tree-nav');
             const flkElement = flkEvent.target;
+
+           /** Check if an event bubbled, so we do not do it twice. */
+            var lastEventEmitted = flkElement._lastEventEmitted;
+            flkElement._lastEventEmitted = event.timeStamp;
+
+            if (lastEventEmitted !== 0) {
+                var noSignificantChange = event.timeStamp - lastEventEmitted < 30;
+                if (noSignificantChange) {
+                    return false;
+                }
+            }
             const item = returnDataSetValue(event, 'branchKey');
             const depth = parseInt(returnDataSetValue(event, 'depth'));
             let data = flkElement.contents;

flightkit/components/table.js

@@ -515,14 +515,14 @@ export class FlightkitTable extends HTMLElement {
 
             if (templateItem) {
                 if (annotation[property] && annotation[property][templateItem]) {
-                    replacement = annotation[property][templateItem]
+                    replacement = annotation[property][templateItem].trim();
                 }
                 else {
-                    replacement = templateItem;
+                    replacement = templateItem.trim();
                 }
             }
 
-            return Array.isArray(replacement) ? replacement.join(', ') : replacement.toString().trim();
+            return Array.isArray(replacement) ? replacement.join(', ') : replacement.toString();
         });
     }
 

flightkit/components/tree-navigation.js

@@ -18,6 +18,9 @@ export class FlightkitTreeNavigation extends HTMLElement {
     selectedElements = [];
     _setup = true;
 
+    /** Keep track of bubbling event, because we cannot stop propagation, it conflicts with things like dropdown */
+    _lastEventEmitted = 0;
+
     /** To make it so, something will not collapse when clicking, remember that we filtered, so the next click action will not close if open. */
     _justFiltered = false;
 
@@ -32,13 +35,13 @@ export class FlightkitTreeNavigation extends HTMLElement {
         return [...new Set(getAllValuesAndKeysFromJson(json))];
     }
 
-    _emit(event, ftElement, detail) {
+    _emit(event, flkElement, detail) {
         let selectEvent = new CustomEvent(event, {
             detail,
             bubbles: true,
             cancelable: true
         });
-        ftElement.dispatchEvent(selectEvent);
+        flkElement.dispatchEvent(selectEvent);
     }
 
     constructor() {
@@ -79,15 +82,23 @@ export class FlightkitTreeNavigation extends HTMLElement {
     }
 
     emitNodeToggle(event) {
-        event.stopPropagation();
-
         /** Clicked in between items in a list, ignore. */
         if (["LI", "UL"].includes(event.target.tagName)) {
             return false;
         }
-
         const flkEvent = returnEventWithTopLevelElement(event, 'flk-tree-nav');
         const flkElement = flkEvent.target;
+
+       /** Check if an event bubbled, so we do not do it twice. */
+        var lastEventEmitted = flkElement._lastEventEmitted;
+        flkElement._lastEventEmitted = event.timeStamp;
+
+        if (lastEventEmitted !== 0) {
+            var noSignificantChange = event.timeStamp - lastEventEmitted < 30
+            if (noSignificantChange) {
+                return false;
+            }
+        }
         const item = returnDataSetValue(event, 'branchKey');
         const depth = parseInt(returnDataSetValue(event, 'depth'));
         let data = flkElement.contents;

flightkit/index.html

@@ -22,12 +22,12 @@
 <body class="row gap-5 p-3">
     <div>
         <input class="mb-2" type="text" id="table-filter" placeholder="filter">
-        <flk-table class="bg-white striped" id="db-table" pagination="1|20" e-paginate="maxPages">
+        <flk-table class="bg-white striped" id="db-table" pagination="1|20">
             <template name="column1">
                 <div title="{{ +notes }}">{{ $fooifier }} + {{ column6 }}</div>
             </template>
             <template name="column3">
-             <i>{{ column3 }}</i>
+                <i>{{ column3 }}</i>
             </template>
         </flk-table>
     </div>
@@ -48,7 +48,7 @@
             max-depth="1"></flk-tree-nav>
     </div>
 
-    <flk-tree-nav id="databases" icon-set="database" max-depth="3" e-tree-click="clicky" e-loaded="log"> </flk-tree-nav>
+    <flk-tree-nav id="databases" icon-set="database" max-depth="3" e-tree-click="clicky"> </flk-tree-nav>
 
     <code>
         Click on a tree to get the Preview
@@ -67,14 +67,9 @@
         }
 
         var myDbNav;
-        function log(e) {
-            console.log('loaded!')
-        }
-        function maxPages(e) {
-            console.log(e)
-        }
-        function clicky(e) {
 
+        function clicky(e) {
+            console.log(e)
             let previewEl = document.getElementById('clicky-preview')
             previewEl.innerText = JSON.stringify(e.contents, null, 4);
         }

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@pennions/ibiss",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "avian_version": "0.0.2",
-  "flightkit_version": "0.0.21",
+  "flightkit_version": "0.0.22",
   "htmx_plugin_version": "0.0.1",
   "rocketjs_version": "0.0.1",
   "description": "Frontend library of Pennions",