fix

Author: kerwin612

templates/repo/home.tmpl

@@ -1,13 +1,4 @@
 {{template "base/head" .}}
-<script id="view-data-script" type="module">
-	let viewFileInfo = window.config.pageData.viewFileInfo || {
-		files:[],
-		fileTreeIsVisible: false,
-		selectedItem: '',
-		apiBaseUrl: {{.RepoLink}},
-	};
-	window.config.pageData.viewFileInfo = viewFileInfo;
-</script>
 {{$n := len .TreeNames}}
 {{$l := Eval $n "-" 1}}
 {{$isHomepage := (eq $n 0)}}
@@ -57,7 +48,7 @@
 		{{template "repo/sub_menu" .}}
 		<div class="tree-container">
 			{{if $showTree}}
-			<div id="view-file-tree" class="file-tree tree-left tw-hidden not-mobile"></div>
+			<div id="view-file-tree" class="file-tree tree-left tw-hidden not-mobile" data-api-base-url="{{.RepoLink}}"></div>
 			{{end}}
 			<div class="tree-right">
 		<div class="repo-button-row" data-is-homepage="{{$isHomepage}}">

web_src/js/components/FileTree.vue

@@ -5,7 +5,7 @@ import FileTreeItem from './FileTreeItem.vue';
 defineProps<{
   id: string,
   files: any[],
-  selected: string,
+  selected?: string,
   isLoading: boolean,
   collapsed: boolean,
   fileUrlGetter: any,

web_src/js/components/FileTreeItem.vue

@@ -11,7 +11,7 @@ type Item = {
 
 const props = defineProps<{
   item: Item,
-  selected: string,
+  selected?: string,
   collapsed: boolean,
   fileUrlGetter: any,
   fileClassGetter?: any,

web_src/js/components/ViewFileTree.vue

@@ -2,57 +2,34 @@
 import FileTree from './FileTree.vue';
 import {GET} from '../modules/fetch.ts';
 import {toggleElem} from '../utils/dom.ts';
-import {viewTreeStore} from '../modules/stores.ts';
-import {setFileFolding} from '../features/file-fold.ts';
 import {ref, onMounted, onUnmounted} from 'vue';
 
-const LOCAL_STORAGE_KEY = 'view_file_tree_visible';
-
-const store = viewTreeStore();
-
+const files = ref(null);
+const visible = ref(false);
 const isLoading = ref(false);
 
 onMounted(async () => {
   // Default to false
   updateVisibility(false);
   document.querySelector('.view-toggle-file-tree-button').addEventListener('click', toggleVisibility);
 
-  hashChangeListener();
-  window.addEventListener('hashchange', hashChangeListener);
-
   isLoading.value = true;
-  const files = await loadChildren();
-  store.files = files;
+  const children = await loadChildren();
+  files.value = children;
   isLoading.value = false;
 });
 
 onUnmounted(() => {
   document.querySelector('.view-toggle-file-tree-button').removeEventListener('click', toggleVisibility);
-  window.removeEventListener('hashchange', hashChangeListener);
 });
 
-function hashChangeListener() {
-  store.selectedItem = window.location.hash;
-  expandSelectedFile();
-}
-
-function expandSelectedFile() {
-  // expand file if the selected file is folded
-  if (store.selectedItem) {
-    const box = document.querySelector(store.selectedItem);
-    const folded = box?.getAttribute('data-folded') === 'true';
-    if (folded) setFileFolding(box, box.querySelector('.fold-file'), false);
-  }
-}
-
 function toggleVisibility() {
-  updateVisibility(!store.fileTreeIsVisible);
+  updateVisibility(!visible.value);
 }
 
-function updateVisibility(visible) {
-  store.fileTreeIsVisible = visible;
-  localStorage.setItem(LOCAL_STORAGE_KEY, store.fileTreeIsVisible);
-  updateState(store.fileTreeIsVisible);
+function updateVisibility(_visible) {
+  visible.value = _visible;
+  updateState(visible.value);
 }
 
 function updateState(visible) {
@@ -67,7 +44,9 @@ function updateState(visible) {
 }
 
 async function loadChildren(item?) {
-  const response = await GET(`/api/v1/repos/${window.config.pageData.viewFileInfo.apiBaseUrl}/contents/${item ? item.file.path : ''}`);
+  const el = document.querySelector('#view-file-tree');
+  const apiBaseUrl = el.getAttribute('data-api-base-url');
+  const response = await GET(`/api/v1/repos/${apiBaseUrl}/contents/${item ? item.file.path : ''}`);
   const json = await response.json();
   return json.map((i) => ({
     file: i,
@@ -79,12 +58,11 @@ async function loadChildren(item?) {
 
 <template>
   <FileTree
-    v-if="store.fileTreeIsVisible"
+    v-if="visible"
     id="view-file-tree"
     :is-loading="isLoading"
-    :files="store.files"
+    :files="files"
     :collapsed="true"
-    :selected="store.selectedItem"
     :file-url-getter="item => item.file.html_url"
     :load-children="loadChildren"
   />

web_src/js/modules/stores.ts

@@ -9,12 +9,3 @@ export function diffTreeStore() {
   }
   return diffTreeStoreReactive;
 }
-
-let viewTreeStoreReactive: Reactive<Record<string, any>>;
-export function viewTreeStore() {
-  if (!viewTreeStoreReactive) {
-    viewTreeStoreReactive = reactive(window.config.pageData.viewFileInfo);
-    window.config.pageData.viewFileInfo = viewTreeStoreReactive;
-  }
-  return viewTreeStoreReactive;
-}