fix: switch highlight to global store instead of URL params
URL param timing was unreliable with SvelteKit client-side routing. Now CrossLink calls requestHighlight(id) setting a global variable before goto(), and highlightFromUrl() reads it after data loads. Double requestAnimationFrame ensures DOM has rendered after loaded=true. Falls back to ?highlight= URL param for direct links.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import MdiIcon from './MdiIcon.svelte';
|
||||
import { requestHighlight } from '$lib/highlight';
|
||||
|
||||
let {
|
||||
href,
|
||||
@@ -16,20 +17,17 @@
|
||||
title?: string;
|
||||
} = $props();
|
||||
|
||||
const targetHref = $derived(
|
||||
entityId != null
|
||||
? `${href.split('?')[0]}?highlight=${entityId}${href.includes('?') ? '&' + href.split('?')[1] : ''}`
|
||||
: href
|
||||
);
|
||||
|
||||
function navigate(e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
goto(targetHref);
|
||||
if (entityId != null) {
|
||||
requestHighlight(entityId);
|
||||
}
|
||||
goto(href);
|
||||
}
|
||||
</script>
|
||||
|
||||
<a href={targetHref} class="crosslink" title={title || label} onclick={navigate}>
|
||||
<a {href} class="crosslink" title={title || label} onclick={navigate}>
|
||||
<MdiIcon name={icon} size={12} />
|
||||
<span>{label}</span>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user