qomponent
diff --git a/‎example/index.html‎
Lines changed: 64 additions & 35 deletions b/‎example/index.html‎
Lines changed: 64 additions & 35 deletions
@@ -1,50 +1,79 @@
 <!DOCTYPE html>
+<html lang="en">
   <head>
-    <title>Directory tree web component demo</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Directory Tree Web Component Demo</title>
     <script type="module" src="./qui-directory-tree.js"></script>
     <style>
-        .row {
-            display: flex;
-            align-items: baseline;
-        }
-        .col {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
+      .row {
+        display: flex;
+        align-items: baseline;
+      }
+      .col {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+      button {
+        padding: 10px 20px;
+        cursor: pointer;
+      }
     </style>
-
   </head>
   <body>
     <h1>Directory Tree</h1>
-        <!-- Use the directory tree component -->
-        <qui-directory-tree></qui-directory-tree>
+    
+    <!-- Use the directory tree component -->
+    <qui-directory-tree id="directoryTree"></qui-directory-tree>
+
+    <!-- Add a button to trigger the file selection -->
+    <div class="row">
+      <button id="selectFileButton">Select "Folder1/SubFolder1/File2.txt"</button>
+      <button id="collapseAllButton">Collapse All</button>
+      <button id="expandAllButton">Expand All</button>
+    </div>
 
-        <script>
-            // Define sample data for the directory structure
-            const directoryData = [
+    <script>
+      // Define sample data for the directory structure
+      const directoryData = [
+        {
+          name: 'Folder1',
+          type: 'folder',
+          children: [
+            { name: 'File1.txt', type: 'file' },
             {
-                name: 'Folder1',
-                type: 'folder',
-                children: [
-                { name: 'File1.txt', type: 'file' },
-                {
-                    name: 'SubFolder1',
-                    type: 'folder',
-                    children: [{ name: 'File2.txt', type: 'file' }],
-                },
-                ],
+              name: 'SubFolder1',
+              type: 'folder',
+              children: [{ name: 'File2.txt', type: 'file' }],
             },
-            { name: 'File3.txt', type: 'file' },
-            ];
+          ],
+        },
+        { name: 'File3.txt', type: 'file' },
+      ];
+
+      const treeComponent = document.querySelector('#directoryTree');
+      treeComponent.directory = directoryData;
+
+      document.querySelector('#selectFileButton').addEventListener('click', () => {
+        const filePath = 'Folder1/SubFolder1/File2.txt';
+        treeComponent.selectFile(filePath);
+      });
+
+
+      document.querySelector('#collapseAllButton').addEventListener('click', () => {
+        treeComponent.collapseAll();
+      });
 
-            // Set the directory data to the component
-            const treeComponent = document.querySelector('qui-directory-tree');
-            treeComponent.directory = directoryData;
+      document.querySelector('#expandAllButton').addEventListener('click', () => {
+        treeComponent.expandAll();
+      });
 
-            treeComponent.addEventListener('file-select', (event) => {
-                console.log('File selected:', event.detail.file);
-            });
-        </script>
+      treeComponent.addEventListener('file-select', (event) => {
+        console.log('File selected:', event.detail.file);
+        console.log('Is it a file?', event.detail.isFile);
+        console.log('Node type:', event.detail.nodeType);
+      });
+    </script>
   </body>
 </html>