add tree sidebar to file view

2025-12-07 13:28:25 +00:00 · 2024-12-12 15:20:28 +00:00
parent 22bf2ca6ba
commit 181645f4ed
12 changed files with 436 additions and 3 deletions
@@ -0,0 +1,87 @@
+import {createApp} from 'vue';
+import {toggleElem} from '../utils/dom.ts';
+import {GET, PUT} from '../modules/fetch.ts';
+import ViewFileTree from '../components/ViewFileTree.vue';
+
+async function toggleSidebar(visibility) {
+  const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
+  const showBtnEl = document.querySelector('.show-tree-sidebar-button');
+  const refSelectorEl = document.querySelector('.repo-home-filelist .js-branch-tag-selector');
+  const newPrBtnEl = document.querySelector('.repo-home-filelist #new-pull-request');
+  const addFileEl = document.querySelector('.repo-home-filelist .add-file-dropdown');
+  const containerClassList = sidebarEl.parentElement.classList;
+  containerClassList.toggle('repo-grid-tree-sidebar', visibility);
+  containerClassList.toggle('repo-grid-filelist-only', !visibility);
+  toggleElem(sidebarEl, visibility);
+  toggleElem(showBtnEl, !visibility);
+  toggleElem(refSelectorEl, !visibility);
+  toggleElem(newPrBtnEl, !visibility);
+  if (addFileEl) {
+    toggleElem(addFileEl, !visibility);
+  }
+
+  // save to session
+  await PUT('/repo/preferences', {
+    data: {
+      show_file_view_tree_sidebar: visibility,
+    },
+  });
+}
+
+async function loadChildren(item?) {
+  const el = document.querySelector('#view-file-tree');
+  const apiBaseUrl = el.getAttribute('data-api-base-url');
+  const response = await GET(`${apiBaseUrl}/contents/${item ? item.path : ''}`);
+  const json = await response.json();
+  if (json instanceof Array) {
+    return json.map((i) => ({
+      name: i.name,
+      isFile: i.type === 'file',
+      htmlUrl: i.html_url,
+      path: i.path,
+    }));
+  }
+  return null;
+}
+
+async function loadRecursive(treePath) {
+  let root = null;
+  let parent = null;
+  let parentPath = '';
+  for (const i of (`/${treePath}`).split('/')) {
+    const path = `${parentPath}${parentPath ? '/' : ''}${i}`;
+    const result = await loadChildren({path});
+    if (root === null) {
+      root = result;
+      parent = root;
+    } else {
+      parent = parent.find((item) => item.path === path);
+      parent.children = result;
+      parent = result;
+    }
+    parentPath = path;
+  }
+  return root;
+}
+
+export async function initViewFileTreeSidebar() {
+  const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
+  if (!sidebarElement) return;
+
+  document.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(true);
+  });
+
+  document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
+    toggleSidebar(false);
+  });
+
+  const fileTree = document.querySelector('#view-file-tree');
+  const treePath = fileTree.getAttribute('data-tree-path');
+
+  const files = await loadRecursive(treePath);
+
+  fileTree.classList.remove('center');
+  const fileTreeView = createApp(ViewFileTree, {files, selectedItem: treePath, loadChildren});
+  fileTreeView.mount(fileTree);
+}