2023-01-17 16:13:26 +01:00
|
|
|
<script>
|
|
|
|
import { formatDataVolume } from "../../util/Formatting.svelte";
|
|
|
|
|
|
|
|
export let item = {
|
2024-01-24 14:13:26 +01:00
|
|
|
download_url: "",
|
2023-01-17 16:13:26 +01:00
|
|
|
size: 0,
|
|
|
|
children: null,
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- First get directories and render them as details collapsibles -->
|
|
|
|
{#each Object.entries(item.children) as [name, child]}
|
|
|
|
{#if child.children}
|
2024-12-04 15:06:58 +01:00
|
|
|
<details bind:open={child.details_open}>
|
2023-01-17 16:13:26 +01:00
|
|
|
<summary>
|
2024-12-04 18:56:20 +01:00
|
|
|
<div class="filename">
|
|
|
|
{name}
|
|
|
|
(
|
|
|
|
{formatDataVolume(child.size, 3)}
|
|
|
|
{#if child.download_url}
|
|
|
|
<a href={child.download_url}>download</a>
|
|
|
|
{/if}
|
|
|
|
)
|
|
|
|
</div>
|
2023-01-17 16:13:26 +01:00
|
|
|
</summary>
|
2024-12-04 15:06:58 +01:00
|
|
|
|
|
|
|
<!-- Performance optimization, only render children if details is expanded -->
|
|
|
|
{#if child.details_open}
|
|
|
|
<svelte:self item={child}></svelte:self>
|
|
|
|
{/if}
|
2023-01-17 16:13:26 +01:00
|
|
|
</details>
|
|
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
|
|
|
|
<!-- Then get files and render them as list items -->
|
|
|
|
<ul>
|
|
|
|
{#each Object.entries(item.children) as [name, child]}
|
|
|
|
{#if !child.children}
|
|
|
|
<li>
|
2024-12-04 18:56:20 +01:00
|
|
|
<div class="filename">
|
2024-01-25 00:29:41 +01:00
|
|
|
{name}
|
2024-12-04 18:56:20 +01:00
|
|
|
(
|
|
|
|
{formatDataVolume(child.size, 3)}
|
|
|
|
{#if child.download_url}
|
|
|
|
<a href={child.download_url}>download</a>
|
|
|
|
{/if}
|
|
|
|
)
|
|
|
|
</div>
|
2023-01-17 16:13:26 +01:00
|
|
|
</li>
|
|
|
|
{/if}
|
|
|
|
{/each}
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
details {
|
2024-12-04 18:56:20 +01:00
|
|
|
padding-left: 0.5em;
|
2023-01-17 16:13:26 +01:00
|
|
|
border: none;
|
|
|
|
border-left: 2px solid var(--separator);
|
|
|
|
}
|
2024-12-04 18:56:20 +01:00
|
|
|
details > summary {
|
|
|
|
list-style-type: none;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
details > summary::before {
|
|
|
|
font-family: 'Material Icons';
|
|
|
|
content: 'folder';
|
|
|
|
}
|
|
|
|
details[open] > summary::before {
|
|
|
|
font-family: 'Material Icons';
|
|
|
|
content: 'folder_open';
|
|
|
|
}
|
|
|
|
li::before {
|
|
|
|
font-family: 'Material Icons';
|
|
|
|
content: 'description';
|
|
|
|
}
|
2023-01-17 16:13:26 +01:00
|
|
|
ul {
|
2024-12-04 18:56:20 +01:00
|
|
|
list-style-type: none;
|
|
|
|
padding-left: 0.5em;
|
2023-01-17 16:13:26 +01:00
|
|
|
margin: 0;
|
|
|
|
border-left: 2px solid var(--separator);
|
|
|
|
}
|
2024-12-04 18:56:20 +01:00
|
|
|
.filename {
|
|
|
|
display: inline;
|
|
|
|
margin-left: 0.5em;
|
|
|
|
}
|
2023-01-17 16:13:26 +01:00
|
|
|
</style>
|