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

Finish PreviewContent and add ProseA icon for none markdown files

Browse Source
This commit is contained in:
Peaceultime
2024-08-20 23:51:00 +02:00
parent 04785ecf27
commit 7e318d4a12
22 changed files with 270 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/explorer/ExplorerNavigation.vue
View File

@@ -1,11 +1,14 @@
<script setup lang="ts">
const route = useRoute();
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
const project = computed(() => parseInt(route.params.projectId as string));
const { data: navigation, execute, status, error } = await useFetch(() => `/api/project/${project.value}/navigation`, {
immediate: false,
});
const { data: navigation, refresh } = await useLazyFetch(() => `/api/project/${project.value}/navigation`, { immediate: false });
if(!isNaN(project.value))
{
await refresh();
}
</script>
<template>

76
components/explorer/PreviewContent.client.vue
View File

@@ -1,76 +0,0 @@
<template>
<Teleport to="#teleports">
<div class="popover hover-popover" :class="{'is-loaded': pending === false && content !== ''}" :style="{'top': (pos?.y ?? 0) - 4, 'left': (pos?.y ?? 0) + 4}">
<template v-if="display">
<div v-if="pending" class="loading"></div>
<div class="markdown-embed" v-else-if="content !== ''">
<div class="markdown-preview-view markdown-rendered">
<div class="markdown-embed-content">
<h1>{{ title }}</h1>
<Markdown v-model="content"></Markdown>
</div>
</div>
</div>
<div class="not-found-container" v-else>
<div class="not-found-image"></div>
<div class="not-found-title">Impossible d'afficher (ou vide)</div>
<div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
</div>
</template>
</div>
</Teleport>
<span ref="el" @mouseenter="show" @mouseleave="hide">
<slot></slot>
</span>
</template>
<script setup lang="ts">
import { useDebounceFn as debounce } from '@vueuse/core';
const props = defineProps({
project: {
type: Number,
required: true,
},
path: {
type: String,
required: true,
},
anchor: {
type: String,
required: false,
}
})
const content = ref(''), title = ref(''), display = ref(false), pending = ref(false);
const el = ref(), pos = ref<DOMRect>();
watch(display, () => display.value && !pending.value && content.value === '' && fetch());
onMounted(() => {
if(el && el.value)
{
pos.value = (el.value as HTMLDivElement).getBoundingClientRect();
debugger;
}
})
async function fetch()
{
pending.value = true;
const data = await $fetch(`/api/project/${props.project}/file`, {
method: 'get',
query: {
path: props.path,
},
});
pending.value = false;
if(data && data[0])
{
content.value = data[0].content;
title.value = data[0].title;
}
}
const show = debounce(() => display.value = true, 250), hide = debounce(() => display.value = false, 250);
</script>

112
components/explorer/PreviewContent.vue Normal file
View File

@@ -0,0 +1,112 @@
<template>
<Teleport to="#teleports" v-if="display && (!fetched || loaded)">
<div class="popover hover-popover" :class="{'is-loaded': fetched}" :style="pos"
@mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
<div v-if="pending" class="loading"></div>
<template v-else-if="content !==''">
<div v-if="type === 'Markdown'" class=" markdown-embed">
<div class="markdown-embed-content">
<div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
<div class="markdown-preview-sizer markdown-preview-section">
<h1>{{ title }}</h1>
<Markdown v-model="content"></Markdown>
</div>
</div>
</div>
</div>
<div v-else-if="type === 'Canvas'" class="canvas-embed is-loaded">
<CanvasRenderer :canvas="JSON.parse(content) " />
</div>
<div class="not-found-container" v-else>
<div class="not-found-image"></div>
<div class="not-found-title">Fichier vide</div>
<div class="not-found-description">Cette page est vide</div>
</div>
</template>
<div class="not-found-container" v-else>
<div class="not-found-image"></div>
<div class="not-found-title">Impossible d'afficher</div>
<div class="not-found-description">Cette page est impossible à traiter</div>
</div>
</div>
</Teleport>
<span ref="el" @mouseenter="debounce(show, 250)" @mouseleave="debounce(() => display = false, 250)">
<slot></slot>
</span>
</template>
<script setup lang="ts">
const props = defineProps({
project: {
type: Number,
required: true,
},
path: {
type: String,
required: true,
},
anchor: {
type: String,
required: false,
}
})
const content = ref(''), title = ref(''), type = ref(''), display = ref(false), pending = ref(false), fetched = ref(false);
const el = ref(), pos = ref<Record<string, string>>();
const loaded = computed(() => !pending.value && fetched.value && content.value !== '');
async function fetch()
{
fetched.value = true;
pending.value = true;
const data = await $fetch(`/api/project/${props.project}/file`, {
method: 'get',
query: {
path: props.path,
},
});
pending.value = false;
if(data && data[0])
{
content.value = data[0].content;
title.value = data[0].title;
type.value = data[0].type;
}
}
async function show()
{
if(display.value)
return;
if(!fetched.value)
await fetch();
const rect = (el.value as HTMLDivElement)?.getBoundingClientRect();
if(!rect)
return;
const r: Record<string, string> = {};
if (rect.bottom + 450 < window.innerHeight)
r.top = (rect.bottom + 4) + "px";
else
r.bottom = (window.innerHeight - rect.top + 4) + "px";
if (rect.right + 550 < window.innerWidth)
r.left = rect.left + "px";
else
r.right = (window.innerWidth - rect.right + 4) + "px";
pos.value = r;
display.value = true;
}
let debounceFn: () => void, timeout: NodeJS.Timeout;
function debounce(fn: () => void, ms: number)
{
debounceFn = fn;
clearTimeout(timeout);
timeout = setTimeout(debounceFn, ms);
}
</script>