feat: Update sidebar layout and add explorer panel, replacing the fil…

…e_tree.html panel
khiemgluong · May 22, 2024 · bc4ebd6 · bc4ebd6
1 parent 3a17a1d
commit bc4ebd6
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 110 deletions.
diff --git a/assets/includes/explorer.html b/assets/includes/explorer.html
@@ -0,0 +1,109 @@
+<body>
+    <!-- <div id="container"> -->
+    <div id="vault-name">{{ site.obsidian_vault }}</div>
+    <div id="file-tree"></div>
+    <!-- </div> -->
+</body>
+
+<script lang="text/javascript">
+    function buildFileTree(element, tree) {
+        const ul = document.createElement('ul');
+        element.appendChild(ul);
+
+        tree.forEach(child => {
+            const li = document.createElement('li');
+            ul.appendChild(li);
+
+            const button = document.createElement('button');
+            button.textContent = child.name;
+            li.appendChild(button);
+
+            if (child.type === 'dir') {
+                li.classList.add('dir');
+                const svgCollapsed = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>';
+                const svgExpanded = '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';
+                button.innerHTML = svgCollapsed + button.textContent;
+
+                var expanded = false;
+                button.addEventListener('click', () => {
+                    expanded = !expanded;
+                    button.innerHTML = (expanded ? svgExpanded : svgCollapsed) + button.textContent;
+
+                    if (expanded) {
+                        // Check if the child nodes have already been created
+                        if (!li.querySelector('ul')) {
+                            buildFileTree(li, child.children);
+                        }
+                    } else {
+                        const nestedUl = li.querySelector('ul');
+                        if (nestedUl) {
+                            li.removeChild(nestedUl);
+                        }
+                    }
+                });
+            } else if (child.type === 'file') {
+                li.classList.add('file');
+                button.addEventListener('click', () => {
+                    console.log(child.path);
+                    var vaultpath = '/' + '{{ site.obsidian_vault | escape }}'
+                    var event = new CustomEvent('obisidianFileSelected', { detail: vaultpath + child.path });
+                    document.dispatchEvent(event);
+                });
+            }
+        });
+    }
+
+    var obsidianFilesJson = '{{ site.data.obsidian_files_json | escape }}';
+    var parsedObsidianFilesJson = JSON.parse(obsidianFilesJson.replace(/&quot;/g, '"'));
+
+    function sortObsidianFiles(tree) {
+        tree.sort((a, b) => {
+            if (a.type === 'dir' && b.type === 'file') {
+                return -1;
+            } else if (a.type === 'file' && b.type === 'dir') {
+                return 1;
+            } else {
+                return a.name.localeCompare(b.name);
+            }
+        });
+        tree.forEach(child => {
+            if (child.type === 'dir') {
+                sortObsidianFiles(child.children);
+            }
+        });
+        return tree;
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+        const rootElement = document.getElementById('file-tree');
+        const sortedFiles = sortObsidianFiles(parsedObsidianFilesJson);
+        buildFileTree(rootElement, sortedFiles);
+    });
+    console.log(parsedObsidianFilesJson);
+    console.log("DIR root " + '{{ site.obsidian_vault | escape }}')
+</script>
+
+<style>
+    /* #container {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 20%;
+    }
+
+    #file-tree {
+        overflow-y: auto;
+        max-height: 100vh;
+        width: 100%;
+    } */
+
+    ul {
+        list-style-type: none;
+        padding-left: 5px;
+        margin-left: 5px;
+    }
+
+    ul ul {
+        padding-left: 10px;
+    }
+</style>
diff --git a/assets/includes/file_tree.html b/assets/includes/file_tree.html
diff --git a/assets/includes/sidebar.html b/assets/includes/sidebar.html
@@ -0,0 +1,4 @@
+<body>
+    <div>
+        amogus</div>
+</body>
diff --git a/assets/layouts/obsidian.html b/assets/layouts/obsidian.html
@@ -13,7 +13,12 @@
 
     <main class="page-content" aria-label="Content">
         <div id="obsidian">
-            {% include _obsidian/file_tree.html %}
+            <div id="sidebar">
+                {% include _obsidian/sidebar.html -%}
+            </div>
+            <div id="explorer">
+                {% include _obsidian/explorer.html %}
+            </div>
             {% include _obsidian/file_read.html %}
         </div>
     </main>
@@ -37,6 +42,20 @@
         max-height: 88vh;
     }
 
+    #obsidian #sidebar {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        width: 5%;
+        background-color: aqua;
+    }
+
+    #obsidian #explorer {
+        overflow-y: auto;
+        max-height: 100vh;
+        width: 20%;
+    }
+
     #file-tree::-webkit-scrollbar,
     #file-read::-webkit-scrollbar {
         display: none;