The following Svelte file produces a tree in which elements can be clicked.
The problem I have is that when I click on the div-element, the element is focused, but the previous elements are not focused.
Only one div is active at the same time.
I've tried several re-writings of this code, but it seems like I need to keep track of some kind of history, to undo focus.
<script lang="ts">
import type { FrontendFile } from '$lib/front';
export let content: FrontendFile;
export let history: FrontendFile[];
let text: string;
function focusUnfocus() {
for (let i=0; i++; i < history.length) {
history[i].status.focused = false;
}
content.status.focused = !content.status.focused;
history.push(content);
if (content.status.focused) {
text = 'font-black';
} else {
text = '';
}
}
</script>
<div class="{text}" on:click={focusUnfocus}>
{content.name}
</div>
...
{#each content.children as sub}
<svelte:self bind:history bind:content={sub} />
{/each}
...
I solved it with the following
<script lang="ts">
import type { FrontendFile } from '$lib/front';
export let content: FrontendFile;
export let lastFocused: FrontendFile;
function focusUnfocus() {
if (lastFocused) {
lastFocused.status.focused = false;
}
content.status.focused = true;
lastFocused = content;
}
let text: string = '';
$: if (content.status.focused) {
text = 'font-black';
} else {
text = '';
}
</script>
<div class=" {text}" on:click={focusUnfocus}>
{content.name}
</div>
{#each content.children as sub}
<svelte:self bind:lastFocused bind:content={sub} />
{/each}
I switched to 1-object history and changed the binding in the top level index.svelte file as follows.
<script lang="ts">
export let lastFocused;
</script>
...
{#each filesystems as system}
<RenderTree {lastFocused} bind:content={system}
{/each}
...