Popups

Intro

This is a pre-built utility implementation for managing and assigning File System Access API's handles. This allows for cached and organized access to directories and files. Currently the File System Access API is only supported on Chromium.

/routes/+layout.svelte

<script lang="ts">
	import {
		dictEn,
		popupFSManager,
		popupFSPickerMultiple,
		popupFSPickerSingle,
		type FSHandleEntry,
		type FSHandleType,
	} from '@leon8ix/jhana-ui/fs-handles';

	let handles: FSHandleEntry<FSHandleType>[] = $state.raw([]);

	function showManager() {
		popupFSManager({ dict: dictEn, type: 'all' });
	}
	async function pickFile() {
		const result = await popupFSPickerSingle({ dict: dictEn, type: 'file' }).promise;
		if (result.ok) handles = result.value ? [result.value] : [];
	}
	async function pickDirectories() {
		const dirs = handles.filter(handle => handle.type === 'dir');
		const result = await popupFSPickerMultiple({ dict: dictEn, type: 'dir' }, dirs).promise;
		if (result.ok) handles = result.value;
	}
</script>

<div class="btn-group">
	<button class="btn" onclick={showManager}>Open manager</button>
	<button class="btn" onclick={pickFile}>Pick file</button>
	<button class="btn" onclick={pickDirectories}>Pick directories</button>
</div>
{#each handles as handle (handle.id)}
	<div class="note">{handle.name || handle.id}</div>
{/each}