add tree sidebar to file view

Author: kerwin612

templates/repo/home.tmpl

@@ -1,4 +1,11 @@
 {{template "base/head" .}}
+{{$treeNamesLen := len .TreeNames}}
+{{$isTreePathRoot := eq $treeNamesLen 0}}
+{{$showSidebar := $isTreePathRoot}}
+{{$hasTreeSidebar := not $isTreePathRoot}}
+{{$showTreeSidebar := .RepoPreferences.ShowFileViewTreeSidebar}}
+{{$hideTreeSidebar := not $showTreeSidebar}}
+{{$hasAndShowTreeSidebar := and $hasTreeSidebar $showTreeSidebar}}
 <div role="main" aria-label="{{.Title}}" class="page-content repository file list {{if .IsBlame}}blame{{end}}">
 	{{template "repo/header" .}}
 	<div class="ui container {{if .IsBlame}}fluid padded{{end}}">
@@ -16,13 +23,6 @@
 
 		{{template "repo/code/recently_pushed_new_branches" .}}
 
-		{{$treeNamesLen := len .TreeNames}}
-		{{$isTreePathRoot := eq $treeNamesLen 0}}
-		{{$showSidebar := $isTreePathRoot}}
-		{{$hasTreeSidebar := not $isTreePathRoot}}
-		{{$showTreeSidebar := .RepoPreferences.ShowFileViewTreeSidebar}}
-		{{$hideTreeSidebar := not $showTreeSidebar}}
-		{{$hasAndShowTreeSidebar := and $hasTreeSidebar $showTreeSidebar}}
 		<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" (Iif $showTreeSidebar "repo-grid-tree-sidebar" "repo-grid-filelist-only")}}">
 			{{if $hasTreeSidebar}}
 				<div class="repo-view-file-tree-sidebar not-mobile {{if $hideTreeSidebar}}tw-hidden{{end}}">{{template "repo/view_file_tree_sidebar" .}}</div>

web_src/js/components/ViewFileTree.vue

@@ -3,15 +3,16 @@ import ViewFileTreeItem from './ViewFileTreeItem.vue';
 
 defineProps<{
   files: any,
-  selectedItem: string,
+  selectedItem: any,
   loadChildren: any,
+  loadContent: any;
 }>();
 </script>
 
 <template>
   <div class="view-file-tree-items">
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
-    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="item in files" :key="item.name" :item="item" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
   </div>
 </template>
 

web_src/js/components/ViewFileTreeItem.vue

@@ -12,13 +12,14 @@ type Item = {
 
 const props = defineProps<{
   item: Item,
+  loadContent: any;
   loadChildren: any;
-  selectedItem?: string;
+  selectedItem?: any;
 }>();
 
 const isLoading = ref(false);
-const collapsed = ref(!props.item.children);
 const children = ref(props.item.children);
+const collapsed = ref(!props.item.children);
 
 const doLoadChildren = async () => {
   collapsed.value = !collapsed.value;
@@ -32,19 +33,19 @@ const doLoadChildren = async () => {
 
 const doLoadDirContent = () => {
   doLoadChildren();
-  window.location.href = props.item.htmlUrl;
+  props.loadContent(props.item);
 };
 
 const doLoadFileContent = () => {
-  window.location.href = props.item.htmlUrl;
+  props.loadContent(props.item);
 };
 </script>
 
 <template>
   <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
   <div
     v-if="item.isFile" class="item-file"
-    :class="{'selected': selectedItem === item.path}"
+    :class="{'selected': selectedItem.value === item.path}"
     :title="item.name"
     @click.stop="doLoadFileContent"
   >
@@ -54,7 +55,7 @@ const doLoadFileContent = () => {
   </div>
   <div
     v-else class="item-directory"
-    :class="{'selected': selectedItem === item.path}"
+    :class="{'selected': selectedItem.value === item.path}"
     :title="item.name"
     @click.stop="doLoadDirContent"
   >
@@ -66,7 +67,7 @@ const doLoadFileContent = () => {
   </div>
 
   <div v-if="children?.length" v-show="!collapsed" class="sub-items">
-    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-children="loadChildren"/>
+    <ViewFileTreeItem v-for="childItem in children" :key="childItem.name" :item="childItem" :selected-item="selectedItem" :load-content="loadContent" :load-children="loadChildren"/>
   </div>
 </template>
 <style scoped>

web_src/js/features/repo-view-file-tree-sidebar.ts

@@ -1,4 +1,4 @@
-import {createApp} from 'vue';
+import {createApp, ref} from 'vue';
 import {toggleElem} from '../utils/dom.ts';
 import {GET, PUT} from '../modules/fetch.ts';
 import ViewFileTree from '../components/ViewFileTree.vue';
@@ -64,6 +64,10 @@ async function loadRecursive(treePath) {
   return root;
 }
 
+async function loadContent(item) {
+  document.querySelector('.repo-home-filelist').innerHTML = `load content of ${item.path}`;
+}
+
 export async function initViewFileTreeSidebar() {
   const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar');
   if (!sidebarElement) return;
@@ -78,10 +82,15 @@ export async function initViewFileTreeSidebar() {
 
   const fileTree = document.querySelector('#view-file-tree');
   const treePath = fileTree.getAttribute('data-tree-path');
+  const selectedItem = ref(treePath);
 
   const files = await loadRecursive(treePath);
 
   fileTree.classList.remove('center');
-  const fileTreeView = createApp(ViewFileTree, {files, selectedItem: treePath, loadChildren});
+  const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
+    window.history.pushState(null, null, item.htmlUrl);
+    selectedItem.value = item.path;
+    loadContent(item);
+  }});
   fileTreeView.mount(fileTree);
 }