mirror of
https://github.com/go-gitea/gitea
synced 2025-07-04 09:37:19 +00:00
Add file tree to file view page (#32721)
Resolve #29328 This pull request introduces a file tree on the left side when reviewing files of a repository. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
37
web_src/js/features/repo-view-file-tree.ts
Normal file
37
web_src/js/features/repo-view-file-tree.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import {createApp} from 'vue';
|
||||
import {toggleElem} from '../utils/dom.ts';
|
||||
import {POST} from '../modules/fetch.ts';
|
||||
import ViewFileTree from '../components/ViewFileTree.vue';
|
||||
import {registerGlobalEventFunc} from '../modules/observer.ts';
|
||||
|
||||
const {appSubUrl} = window.config;
|
||||
|
||||
async function toggleSidebar(btn: HTMLElement) {
|
||||
const elToggleShow = document.querySelector('.repo-view-file-tree-toggle-show');
|
||||
const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container');
|
||||
const shouldShow = btn.getAttribute('data-toggle-action') === 'show';
|
||||
toggleElem(elFileTreeContainer, shouldShow);
|
||||
toggleElem(elToggleShow, !shouldShow);
|
||||
|
||||
// FIXME: need to remove "full height" style from parent element
|
||||
|
||||
if (!elFileTreeContainer.hasAttribute('data-user-is-signed-in')) return;
|
||||
await POST(`${appSubUrl}/user/settings/update_preferences`, {
|
||||
data: {codeViewShowFileTree: shouldShow},
|
||||
});
|
||||
}
|
||||
|
||||
export async function initRepoViewFileTree() {
|
||||
const sidebar = document.querySelector<HTMLElement>('.repo-view-file-tree-container');
|
||||
const repoViewContent = document.querySelector('.repo-view-content');
|
||||
if (!sidebar || !repoViewContent) return;
|
||||
|
||||
registerGlobalEventFunc('click', 'onRepoViewFileTreeToggle', toggleSidebar);
|
||||
|
||||
const fileTree = sidebar.querySelector('#view-file-tree');
|
||||
createApp(ViewFileTree, {
|
||||
repoLink: fileTree.getAttribute('data-repo-link'),
|
||||
treePath: fileTree.getAttribute('data-tree-path'),
|
||||
currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'),
|
||||
}).mount(fileTree);
|
||||
}
|
Reference in New Issue
Block a user