Merge branch 'add-file-tree-to-file-view-page' of github.com:kerwin612/gitea into kerwin612-add-file-tree-to-file-view-page

Author: lunny

routers/web/repo/blame.go

@@ -96,9 +96,16 @@ func RefBlame(ctx *context.Context) {
 	ctx.Data["FileSize"] = fileSize
 	ctx.Data["FileName"] = blob.Name()
 
+	var tplName templates.TplName
+	if ctx.FormBool("only_content") {
+		tplName = tplRepoHomeContent
+	} else {
+		tplName = tplRepoHome
+	}
+
 	if fileSize >= setting.UI.MaxDisplayFileSize {
 		ctx.Data["IsFileTooLarge"] = true
-		ctx.HTML(http.StatusOK, tplRepoHome)
+		ctx.HTML(http.StatusOK, tplName)
 		return
 	}
 
@@ -126,7 +133,7 @@ func RefBlame(ctx *context.Context) {
 
 	renderBlame(ctx, result.Parts, commitNames)
 
-	ctx.HTML(http.StatusOK, tplRepoHome)
+	ctx.HTML(http.StatusOK, tplName)
 }
 
 type blameResult struct {

routers/web/repo/view.go

@@ -46,12 +46,13 @@ import (
 )
 
 const (
-	tplRepoEMPTY    templates.TplName = "repo/empty"
-	tplRepoHome     templates.TplName = "repo/home"
-	tplRepoViewList templates.TplName = "repo/view_list"
-	tplWatchers     templates.TplName = "repo/watchers"
-	tplForks        templates.TplName = "repo/forks"
-	tplMigrating    templates.TplName = "repo/migrate/migrating"
+	tplRepoEMPTY    		templates.TplName = "repo/empty"
+	tplRepoHome     		templates.TplName = "repo/home"
+	tplRepoHomeContent  templates.TplName = "repo/home_content"
+	tplRepoViewList 		templates.TplName = "repo/view_list"
+	tplWatchers     		templates.TplName = "repo/watchers"
+	tplForks        		templates.TplName = "repo/forks"
+	tplMigrating    		templates.TplName = "repo/migrate/migrating"
 )
 
 type fileInfo struct {

routers/web/repo/view_home.go

@@ -379,5 +379,9 @@ func Home(ctx *context.Context) {
 		}
 	}
 
-	ctx.HTML(http.StatusOK, tplRepoHome)
+	if ctx.FormBool("only_content") {
+		ctx.HTML(http.StatusOK, tplRepoHomeContent)
+	} else {
+		ctx.HTML(http.StatusOK, tplRepoHome)
+	}
 }

templates/repo/home.tmpl

@@ -101,7 +101,7 @@
 
 						{{if not $isTreePathRoot}}
 							{{$treeNameIdxLast := Eval $treeNamesLen "-" 1}}
-							<span class="breadcrumb repo-path tw-ml-1">
+							<span id="repo_path" class="breadcrumb repo-path tw-ml-1">
 								<a class="section" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}" title="{{.Repository.Name}}">{{StringUtils.EllipsisString .Repository.Name 30}}</a>
 								{{- range $i, $v := .TreeNames -}}
 									<span class="breadcrumb-divider">/</span>
@@ -122,25 +122,16 @@
 							{{template "repo/clone_panel" .}}
 						{{end}}
 						{{if and (not $isTreePathRoot) (not .IsViewFile) (not .IsBlame)}}{{/* IsViewDirectory (not home), TODO: split the templates, avoid using "if" tricks */}}
-							<a class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
+							<a id="path_history" class="ui button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">
 								{{svg "octicon-history" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_history"}}
 							</a>
 						{{end}}
 					</div>
 				</div>
-				{{if .IsViewFile}}
-					{{template "repo/view_file" .}}
-				{{else if .IsBlame}}
-					{{template "repo/blame" .}}
-				{{else}}{{/* IsViewDirectory */}}
-					{{if $isTreePathRoot}}
-						{{template "repo/code/upstream_diverging_info" .}}
-					{{end}}
-					{{template "repo/view_list" .}}
-					{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
-						{{template "repo/view_file" .}}
-					{{end}}
-				{{end}}
+
+				<div id="path_content">
+					{{template "repo/home_content" .}}
+				</div>
 			</div>
 
 			{{if $showSidebar}}

templates/repo/home_content.tmpl

@@ -0,0 +1,16 @@
+{{$treeNamesLen := len .TreeNames}}
+{{$isTreePathRoot := eq $treeNamesLen 0}}
+
+{{if .IsViewFile}}
+	{{template "repo/view_file" .}}
+{{else if .IsBlame}}
+	{{template "repo/blame" .}}
+{{else}}{{/* IsViewDirectory */}}
+	{{if $isTreePathRoot}}
+		{{template "repo/code/upstream_diverging_info" .}}
+	{{end}}
+	{{template "repo/view_list" .}}
+	{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
+		{{template "repo/view_file" .}}
+	{{end}}
+{{end}}

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

@@ -31,13 +31,12 @@ async function toggleSidebar(visibility) {
 async function loadChildren(item, recursive?: boolean) {
   const el = document.querySelector('#view-file-tree');
   const apiBaseUrl = el.getAttribute('data-api-base-url');
-  const response = await GET(`${apiBaseUrl}/tree/${item ? item.path : ''}?recursive=${recursive ?? false}`);
+  const response = await GET(`${apiBaseUrl}/tree/${item ? item.path : ''}?ref=&recursive=${recursive ?? false}`);
   const json = await response.json();
   if (json instanceof Array) {
     return json.map((i) => ({
       name: i.name,
       isFile: i.isFile,
-      htmlUrl: i.html_url,
       path: i.path,
       children: i.children,
     }));
@@ -46,7 +45,10 @@ async function loadChildren(item, recursive?: boolean) {
 }
 
 async function loadContent(item) {
-  document.querySelector('.repo-home-filelist').innerHTML = `load content of ${item.path}`;
+  // todo: change path of `repo_path` `path_history`
+  // load content by path (content based on home_content.tmpl)
+  const response = await GET(`${window.location.href}?only_content=true`);
+  document.querySelector('#path_content').innerHTML = await response.text();
 }
 
 export async function initViewFileTreeSidebar() {
@@ -63,13 +65,14 @@ export async function initViewFileTreeSidebar() {
 
   const fileTree = document.querySelector('#view-file-tree');
   const treePath = fileTree.getAttribute('data-tree-path');
+  const basePath = window.location.href.replace(treePath, '');
   const selectedItem = ref(treePath);
 
   const files = await loadChildren({path: treePath}, true);
 
   fileTree.classList.remove('is-loading');
   const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (item) => {
-    window.history.pushState(null, null, item.htmlUrl);
+    window.history.pushState(null, null, `${basePath}${item.path}`);
     selectedItem.value = item.path;
     loadContent(item);
   }});