tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-04 09:37:19 +00:00
Code Releases Activity

Add repo file tree item link behavior (#34730)

Browse Source 
Converts the repo file tree items into `<a>` elements to have default
link behavior. Dynamic content load is still done when no special key is
pressed while clicking on an item.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
bytedream
2025-06-19 20:28:19 +02:00
committed by GitHub
parent 0ea958dc58
commit 7346ae7cd4
5 changed files with 86 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web_src/js/components/ViewFileTree.vue
View File

@ -1,9 +1,7 @@
<script lang="ts" setup>
import ViewFileTreeItem from './ViewFileTreeItem.vue';
import {onMounted, ref} from 'vue';
import {pathEscapeSegments} from '../utils/url.ts';
import {GET} from '../modules/fetch.ts';
import {createElementFromHTML} from '../utils/dom.ts';
import {createViewFileTreeStore} from './ViewFileTreeStore.ts';
const elRoot = ref<HTMLElement | null>(null);
@ -13,52 +11,20 @@ const props = defineProps({
currentRefNameSubURL: {type: String, required: true},
});
const files = ref([]);
const selectedItem = ref('');
async function loadChildren(treePath: string, subPath: string = '') {
const response = await GET(`${props.repoLink}/tree-view/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}?sub_path=${encodeURIComponent(subPath)}`);
const json = await response.json();
const poolSvgs = [];
for (const [svgId, svgContent] of Object.entries(json.renderedIconPool ?? {})) {
if (!document.querySelector(`.global-svg-icon-pool #${svgId}`)) poolSvgs.push(svgContent);
}
if (poolSvgs.length) {
const svgContainer = createElementFromHTML('<div class="global-svg-icon-pool tw-hidden"></div>');
svgContainer.innerHTML = poolSvgs.join('');
document.body.append(svgContainer);
}
return json.fileTreeNodes ?? null;
}
async function loadViewContent(url: string) {
url = url.includes('?') ? url.replace('?', '?only_content=true') : `${url}?only_content=true`;
const response = await GET(url);
document.querySelector('.repo-view-content').innerHTML = await response.text();
}
async function navigateTreeView(treePath: string) {
const url = `${props.repoLink}/src/${props.currentRefNameSubURL}/${pathEscapeSegments(treePath)}`;
window.history.pushState({treePath, url}, null, url);
selectedItem.value = treePath;
await loadViewContent(url);
}
const store = createViewFileTreeStore(props);
onMounted(async () => {
selectedItem.value = props.treePath;
files.value = await loadChildren('', props.treePath);
store.rootFiles = await store.loadChildren('', props.treePath);
elRoot.value.closest('.is-loading')?.classList?.remove('is-loading');
window.addEventListener('popstate', (e) => {
selectedItem.value = e.state?.treePath || '';
if (e.state?.url) loadViewContent(e.state.url);
store.selectedItem = e.state?.treePath || '';
if (e.state?.url) store.loadViewContent(e.state.url);
});
});
</script>
<template>
<div class="view-file-tree-items" ref="elRoot">
<!-- 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" :navigate-view-content="navigateTreeView" :load-children="loadChildren"/>
<ViewFileTreeItem v-for="item in store.rootFiles" :key="item.name" :item="item" :store="store"/>
</div>
</template>