Merge pull request #25 from pennions/flightkit/add-deselect-option

Flightkit/add deselect option

dist/flightkit-v0.0.7/flightkit.js → dist/flightkit-v0.0.8/flightkit.js

@@ -432,8 +432,6 @@
         return parsedSvg.documentElement;
     }
 
-    // import JOQ from '@pennions/joq';
-
     class FlightkitTable extends HTMLElement {
         base;
         /** to render */
@@ -1414,6 +1412,15 @@
             this.base.addEvent('.flk-branch', 'click', this.emitNodeToggle);
         }
 
+        deselectTree() {
+            if (this.selectedElements.length) {
+                for (const selectedElement of this.selectedElements) {
+                    selectedElement.classList.remove('font-weight-bold');
+                    delete selectedElement.dataset.selected;
+                }
+            }
+        }
+
         emitNodeToggle(event) {
             event.stopPropagation();
 
@@ -1462,11 +1469,7 @@
             while (!leafKey)
 
             if (flkElement.selectedElements.length) {
-                for (const selectedElement of flkElement.selectedElements) {
-                    selectedElement.classList.remove('font-weight-bold');
-                    delete selectedElement.dataset.selected;
-
-                }
+                flkElement.deselectTree();
             }
 
             // flkElement.previousElements = flkElement.selectedElements;

flightkit/components/tree-navigation.js

@@ -55,6 +55,15 @@ export class FlightkitTreeNavigation extends HTMLElement {
         this.base.addEvent('.flk-branch', 'click', this.emitNodeToggle);
     }
 
+    deselectTree() {
+        if (this.selectedElements.length) {
+            for (const selectedElement of this.selectedElements) {
+                selectedElement.classList.remove('font-weight-bold');
+                delete selectedElement.dataset.selected;
+            }
+        }
+    }
+
     emitNodeToggle(event) {
         event.stopPropagation();
 
@@ -103,11 +112,7 @@ export class FlightkitTreeNavigation extends HTMLElement {
         while (!leafKey)
 
         if (flkElement.selectedElements.length) {
-            for (const selectedElement of flkElement.selectedElements) {
-                selectedElement.classList.remove('font-weight-bold');
-                delete selectedElement.dataset.selected;
-
-            }
+            flkElement.deselectTree();
         }
 
         // flkElement.previousElements = flkElement.selectedElements;

flightkit/index.html

@@ -27,13 +27,12 @@
 
     <flk-tree-nav id="tree-nav" e-tree-click="clicky"></flk-tree-nav>
     <div>
+        <button class="bg-gray-light" type="button" id="deselect">Deselect database tree</button>
 
         <input id="search" class="m-2" type="text" placeholder="search" />
         <flk-tree-nav id="db-nav" class="mt-5" icon-set="database" e-tree-click="clicky" max-depth="4"></flk-tree-nav>
     </div>
 
-    <hr />
-
     <flk-tree-nav id="databases" icon-set="database" max-depth="3" e-tree-click="clicky"> </flk-tree-nav>
 
     <code>
@@ -74,7 +73,7 @@
             databasesNav.setContents(window.databaseSet);
 
             databasesNav.init();
-             const dbTable = document.getElementById("db-table")
+            const dbTable = document.getElementById("db-table")
             dbTable.setContents(window.databaseSet.database1.table1);
             dbTable.init();
 
@@ -90,6 +89,10 @@
                 })
 
             })
+
+            document.getElementById('deselect').addEventListener('click', () => {
+                myDbNav.deselectTree();
+            })
         };
     </script>
 </body>

package.json

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