Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sync completed + Navigation links improved

Browse Source
This commit is contained in:
Peaceultime
2024-08-21 14:05:27 +02:00
parent a9a98b9618
commit 62ba72515b
17 changed files with 125 additions and 889 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/explorer/NavigationLink.vue
View File

@@ -11,25 +11,7 @@ const hasChildren = computed(() => {
return props.link && props.link.children && props.link.children.length > 0 || false;
});
if(hasChildren.value)
{
props.link.children?.sort((a, b) => {
if(a.order && b.order)
return a.order - b.order;
if(a.path === props.link.path)
return -1;
if(b.path === props.link.path)
return 1;
return 0;
});
}
const collapsed = ref(!useRoute().path.startsWith('/explorer' + props.link.path));
function hideLeftPanel(_: Event)
{
document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
}
const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
</script>
<template>
@@ -37,7 +19,8 @@ function hideLeftPanel(_: Event)
<template v-if="hasChildren">
<div class="tree-item-self"
:class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed"
:data-type="link.private ? 'privé' : undefined">
<div v-if="hasChildren" class="tree-item-icon collapse-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -51,8 +34,8 @@ function hideLeftPanel(_: Event)
<NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
</div>
</template>
<NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="{ path: `/explorer/${project}${link.path}`, force: true }"
:active-class="'mod-active'" :data-type="link.type === 'Canvas' ? 'graph' : undefined">
<NuxtLink v-else class="tree-item-self" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
:active-class="'mod-active'" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
<div class="tree-item-inner">{{ link.title }}</div>
</NuxtLink>
</div>