add router event cancelling

This commit is contained in:
Break27 2024-09-21 14:50:52 +08:00
parent 48fa39ed64
commit 520040a6bf
3 changed files with 11 additions and 12 deletions

View File

@ -59,7 +59,7 @@ export class Engine {
this.setupInteraction(); this.setupInteraction();
this.setupGraphStyle(); this.setupGraphStyle();
let path = router.last('retrieve')?.params?.path; let path = router.recall('retrieve')?.params?.path;
setTimeout(() => router.emit('retrieve', { path }), 500); setTimeout(() => router.emit('retrieve', { path }), 500);
return container; return container;

View File

@ -184,7 +184,7 @@ export class Folder extends BaseNode {
data-[active=true]:border-red-600 hover:border-neutral-800" data-[active=true]:border-red-600 hover:border-neutral-800"
> >
<a class="truncate md:text-base text-lg" href="/${node.path}" <a class="truncate md:text-base text-lg" href="/${node.path}"
@click="router.emit('navigate'); router.from($event)" @click="navigate = true; router.from($event)"
>${node.name}</a> >${node.name}</a>
</div> </div>
`; `;
@ -217,14 +217,13 @@ export class Folder extends BaseNode {
return ` return `
<div x-data="{ active: null, navigate: false }" <div x-data="{ active: null, navigate: false }"
x-init="let react = () => { x-init="let react = () => {
let isFromNav = navigate;
let path = window.location.pathname; let path = window.location.pathname;
active?.setAttribute('data-active', false); active?.setAttribute('data-active', false);
active = $el.querySelector(\`[data-path=&quot;\${path}&quot;]\`); active = $el.querySelector(\`[data-path=&quot;\${path}&quot;]\`);
active?.setAttribute('data-active', true); active?.setAttribute('data-active', true);
if (isFromNav) return; if (navigate) return navigate = false;
let node = active; let node = active;
if (node) while ((node = node.parentElement) !== $el) { if (node) while ((node = node.parentElement) !== $el) {
@ -238,10 +237,6 @@ export class Folder extends BaseNode {
router.on('ready', () => { router.on('ready', () => {
$nextTick(() => react()); $nextTick(() => react());
}); });
router.on('navigate', () => {
navigate = true;
$nextTick(() => navigate = false);
});
$nextTick(() => react())" $nextTick(() => react())"
>${html}</div> >${html}</div>
`; `;

View File

@ -5,7 +5,7 @@ const Routes = {
const Events = { const Events = {
entries: { /* eventName: [callbacks], */ }, entries: { /* eventName: [callbacks], */ },
history: [ /* { eventName, params, }, */ ] history: [ /* { eventName, params, }, */ ],
} }
export default { export default {
@ -47,11 +47,15 @@ export default {
Events.entries[event]?.forEach(fn => fn(params)); Events.entries[event]?.forEach(fn => fn(params));
}, },
last(event) {
return Events.history.find(e => e.event === event);
},
on(event, callback) { on(event, callback) {
if (! Events.entries[event]) Events.entries[event] = []; if (! Events.entries[event]) Events.entries[event] = [];
Events.entries[event]?.push(callback); Events.entries[event]?.push(callback);
},
recall(event) {
return Events.history.find(e => e.event === event);
},
cancel(event) {
let callbacks = Events.entries[event]?.splice(0, 50);
this.on(event, () => Events.entries[event] = callbacks);
} }
} }