96 lines
2.4 KiB
Svelte
96 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { global_navigator } from "filesystem/FSNavigator";
|
|
import { fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte";
|
|
import { highlight_current_page } from "lib/HighlightCurrentPage";
|
|
import { onMount } from "svelte";
|
|
import MenuEntry from "./MenuEntry.svelte";
|
|
|
|
let { menu_collapsed }: { menu_collapsed: boolean } = $props();
|
|
let siblings: FSNode[] = $state([])
|
|
|
|
onMount(() => {
|
|
return global_navigator.subscribe(async () => {
|
|
siblings = await global_navigator.get_siblings()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
|
|
{#snippet title()}
|
|
<div class="title">Parent directories</div>
|
|
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
|
|
<i class="icon">north</i>
|
|
</button>
|
|
{/snippet}
|
|
|
|
{#snippet body()}
|
|
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
|
|
{#if node.type === "dir"}
|
|
<div class="row">
|
|
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
|
|
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
|
|
<span class:hide={menu_collapsed}>{node.name}</span>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
{/snippet}
|
|
</MenuEntry>
|
|
|
|
<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
|
|
{#snippet title()}
|
|
<div class="title">Siblings</div>
|
|
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
|
|
<i class="icon">west</i>
|
|
</button>
|
|
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
|
|
<i class="icon">east</i>
|
|
</button>
|
|
{/snippet}
|
|
|
|
{#snippet body()}
|
|
{#each siblings as node (node.id)}
|
|
{#if !node.is_hidden()}
|
|
<div class="row">
|
|
<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
|
|
<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
|
|
<span class:hide={menu_collapsed}>{node.name}</span>
|
|
</a>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
{/snippet}
|
|
</MenuEntry>
|
|
|
|
<style>
|
|
.title {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
margin: 3px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.row>a {
|
|
flex: 1 1 auto;
|
|
}
|
|
.row>a>span {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.button {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
.thumbnail {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
border-radius: 2px;
|
|
}
|
|
.hide {
|
|
display: none;
|
|
}
|
|
</style>
|