tyler.durden/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-07-21 21:05:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor initViewFileTreeSidebar using the new registerGlobalInitFunc

Browse Source
This commit is contained in:
Kerwin Bryant 2025-03-04 00:51:31 +00:00
parent 2d5a570faa
commit 9fc2ba3705
2 changed files with 35 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/home.tmpl
View File

@ -19,7 +19,7 @@
<div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" (Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-grid-tree-sidebar" "repo-grid-filelist-only")}}"> <div class="{{Iif $showSidebar "repo-grid-filelist-sidebar" (Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-grid-tree-sidebar" "repo-grid-filelist-only")}}">
{{if .TreeNames}} {{if .TreeNames}}
<div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div> <div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" data-global-init="initViewFileTreeSidebar" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
{{end}} {{end}}
<div class="repo-home-filelist"> <div class="repo-home-filelist">

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

@ -1,10 +1,10 @@
import {createApp, ref} from 'vue'; import {createApp, ref} from 'vue';
import {toggleElem} from '../utils/dom.ts'; import {toggleElem} from '../utils/dom.ts';
import {GET, PUT} from '../modules/fetch.ts'; import {GET, PUT} from '../modules/fetch.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
import ViewFileTree from '../components/ViewFileTree.vue'; import ViewFileTree from '../components/ViewFileTree.vue';
async function toggleSidebar(visibility: boolean, isSigned: boolean) { async function toggleSidebar(sidebarEl: HTMLElement, visibility: boolean) {
const sidebarEl = document.querySelector('.repo-view-file-tree-sidebar');
const showBtnEl = document.querySelector('.show-tree-sidebar-button'); const showBtnEl = document.querySelector('.show-tree-sidebar-button');
const containerClassList = sidebarEl.parentElement.classList; const containerClassList = sidebarEl.parentElement.classList;
containerClassList.toggle('repo-grid-tree-sidebar', visibility); containerClassList.toggle('repo-grid-tree-sidebar', visibility);
@ -12,7 +12,7 @@ async function toggleSidebar(visibility: boolean, isSigned: boolean) {
toggleElem(sidebarEl, visibility); toggleElem(sidebarEl, visibility);
toggleElem(showBtnEl, !visibility); toggleElem(showBtnEl, !visibility);
if (!isSigned) return; if (!sidebarEl.hasAttribute('data-is-signed')) return;
// save to session // save to session
await PUT('/repo/preferences', { await PUT('/repo/preferences', {
@ -40,31 +40,27 @@ async function loadChildren(path: string, recursive?: boolean) {
return null; return null;
} }
async function loadContent() { async function loadContent(sidebarEl: HTMLElement) {
// load content by path (content based on home_content.tmpl) // load content by path (content based on home_content.tmpl)
const response = await GET(`${window.location.href}?only_content=true`); const response = await GET(`${window.location.href}?only_content=true`);
const contentEl = document.querySelector('.repo-home-filelist'); const contentEl = document.querySelector('.repo-home-filelist');
contentEl.innerHTML = await response.text(); contentEl.innerHTML = await response.text();
reloadContentScript(contentEl); reloadContentScript(sidebarEl, contentEl);
} }
function reloadContentScript(contentEl: Element) { function reloadContentScript(sidebarEl: HTMLElement, contentEl: Element) {
contentEl.querySelector('.show-tree-sidebar-button').addEventListener('click', () => { contentEl.querySelector('.show-tree-sidebar-button').addEventListener('click', () => {
toggleSidebar(true, document.querySelector('.repo-view-file-tree-sidebar').hasAttribute('data-is-signed')); toggleSidebar(sidebarEl, true);
}); });
} }
export async function initViewFileTreeSidebar() { export function initViewFileTreeSidebar() {
const sidebarElement = document.querySelector('.repo-view-file-tree-sidebar'); registerGlobalInitFunc('initViewFileTreeSidebar', async (el: HTMLElement) => {
if (!sidebarElement) return;
const isSigned = sidebarElement.hasAttribute('data-is-signed');
document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => { document.querySelector('.hide-tree-sidebar-button').addEventListener('click', () => {
toggleSidebar(false, isSigned); toggleSidebar(el, false);
}); });
document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => { document.querySelector('.repo-home-filelist .show-tree-sidebar-button').addEventListener('click', () => {
toggleSidebar(true, isSigned); toggleSidebar(el, true);
}); });
const fileTree = document.querySelector('#view-file-tree'); const fileTree = document.querySelector('#view-file-tree');
@ -82,13 +78,14 @@ export async function initViewFileTreeSidebar() {
const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (path: string) => { const fileTreeView = createApp(ViewFileTree, {files, selectedItem, loadChildren, loadContent: (path: string) => {
window.history.pushState(null, null, `${baseUrl}/src${refString}/${path}`); window.history.pushState(null, null, `${baseUrl}/src${refString}/${path}`);
selectedItem.value = path; selectedItem.value = path;
loadContent(); loadContent(el);
}}); }});
fileTreeView.mount(fileTree); fileTreeView.mount(fileTree);
window.addEventListener('popstate', () => { window.addEventListener('popstate', () => {
selectedItem.value = extractPath(window.location.href); selectedItem.value = extractPath(window.location.href);
loadContent(); loadContent(el);
});
}); });
} }