Break27/sprachbund
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new router event 'ready'

Browse Source
This commit is contained in:
Break27
2024-09-21 01:47:04 +08:00
parent 4db1bc8244
commit 48fa39ed64
4 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@@ -13,7 +13,7 @@
<body class="antialiased md:subpixel-antialiased"> <body class="antialiased md:subpixel-antialiased">
<div x-data="app" class="relative flex flex-col md:flex-row lg:justify-center justify-normal"> <div x-data="app" class="relative flex flex-col md:flex-row lg:justify-center justify-normal">
<div class="2xl:min-w-80 min-w-72 min-h-12 max-h-screen"> <div class="2xl:min-w-80 min-w-72 min-h-12 max-h-screen">
<div x-data="{ open: false }" x-init="router.on('ready', () => open = false)" <div x-data="{ open: false }" x-init="router.on('active', () => open = false)"
class="flex flex-col fixed 2xl:w-80 md:w-72 size-full md:border-r border-0 pointer-events-none z-20" class="flex flex-col fixed 2xl:w-80 md:w-72 size-full md:border-r border-0 pointer-events-none z-20"
> >
<div class="md:block flex items-center gap-x-4 px-5 md:pt-8 py-3 md:border-0 border-b bg-white pointer-events-auto select-none"> <div class="md:block flex items-center gap-x-4 px-5 md:pt-8 py-3 md:border-0 border-b bg-white pointer-events-auto select-none">

8
src/scripts/app.js
View File

@@ -83,10 +83,10 @@ export default () => ({
<div class="uppercase text-sm font-semibold mb-3">Interactive graph</div> <div class="uppercase text-sm font-semibold mb-3">Interactive graph</div>
<div x-data="{ expand: false, <div x-data="{ expand: false,
anchor: $el.parentElement, anchor: $el.parentElement,
destroy: () => $el.remove(), remove: () => $el.remove(),
collapse: () => { $data.expand = false; collapse: () => { $data.expand = false;
$data.anchor.appendChild($el); $data.anchor.appendChild($el);
$data.toggleGlobal(false) $data.toggleGlobal(false);
}, },
toggleGlobal: (value) => router.emit('graphview toggle global', { value }) toggleGlobal: (value) => router.emit('graphview toggle global', { value })
}" }"
@@ -95,8 +95,8 @@ export default () => ({
> >
<div class="relative rounded-md border size-full p-1 bg-white" <div class="relative rounded-md border size-full p-1 bg-white"
x-data="{ ready: false }" x-data="{ ready: false }"
x-init="if (graph.value?.nodeType) { ready = true; $el.appendChild(graph.value) } else ready = false;" x-init="if (graph.value?.nodeType) { ready = true; $el.appendChild(graph.value) }"
@click="if (expand && !ready) { destroy(); toggleGlobal(false) }" @click="if ($el.children.length < 4) { remove(); toggleGlobal(false) }"
> >
<template x-if="ready"> <template x-if="ready">
<div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600"> <div class="flex items-center gap-x-1 mr-1 mt-1 absolute top-0 right-0 z-20 text-neutral-600">

6
src/scripts/object.js
View File

@@ -236,7 +236,7 @@ export class Folder extends BaseNode {
{ behavior: 'smooth', block: 'center' }), 150); { behavior: 'smooth', block: 'center' }), 150);
}; };
router.on('ready', () => { router.on('ready', () => {
react(); $nextTick(() => react());
}); });
router.on('navigate', () => { router.on('navigate', () => {
navigate = true; navigate = true;
@@ -305,7 +305,9 @@ export class Document extends BaseNode {
`; `;
return ` return `
<div class="flex flex-col w-full md:mx-12 m-6 md:mt-8"> <div x-init="$nextTick(() => router.emit('ready'))"
class="flex flex-col w-full md:mx-12 m-6 md:mt-8"
>
<div class="font-bold text-4xl mb-6">${title}</div> <div class="font-bold text-4xl mb-6">${title}</div>
<div x-ref="page" class="prose prose-neutral max-w-none w-full <div x-ref="page" class="prose prose-neutral max-w-none w-full
${this.metadata['no_sidebar'] ? '' : 'md:max-w-prose'}" ${this.metadata['no_sidebar'] ? '' : 'md:max-w-prose'}"

2
src/scripts/router.js
View File

@@ -22,7 +22,7 @@ export default {
else this.goto(Routes.error); else this.goto(Routes.error);
} }
this.emit('ready'); this.emit('active');
}, },
route(path) { route(path) {
return true; return true;