Replace event dispatcher with a callback in filemanager

svelte/src/filesystem/filemanager/CompactView.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte";
-import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI"
+import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
 import type { FSNavigator } from "filesystem/FSNavigator";
-import { FileAction } from "./FileManagerLib";
-
-let dispatch = createEventDispatcher()
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let {
 	nav,
+	file_event,
 	show_hidden = false,
 	large_icons = false,
 	hide_edit = false
 }: {
 	nav: FSNavigator;
-	show_hidden?: boolean;
-	large_icons?: boolean;
-	hide_edit?: boolean;
+	file_event: FileActionHandler
+	show_hidden?: boolean
+	large_icons?: boolean
+	hide_edit?: boolean
 } = $props();
 </script>
 
@@ -23,8 +22,8 @@ let {
 	{#each $nav.children as child, index (child.path)}
 		<a
 			href={"/d"+fs_encode_path(child.path)}
-			onclick={e => dispatch("file", {index: index, action: FileAction.Click, original: e})}
-			oncontextmenu={e => dispatch("file", {index: index, action: FileAction.Context, original: e})}
+			onclick={e => file_event(FileAction.Click, index, e)}
+			oncontextmenu={e => file_event(FileAction.Context, index, e)}
 			class="node"
 			class:node_selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -34,14 +33,14 @@ let {
 				{child.name}
 			</div>
 
-			{#if node_is_shared(child)}
+			{#if child.is_shared()}
 				<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 			{/if}
 
 			{#if !hide_edit}
 			<button
 				class="action_button flat"
-				onclick={e => dispatch("file", {index: index, action: FileAction.Menu, original: e})}
+				onclick={e => file_event(FileAction.Menu, index, e)}
 			>
 				<i class="icon">menu</i>
 			</button>
@@ -66,8 +65,8 @@ let {
 	color: var(--body_text-color);
 	padding: 2px;
 	align-items: center;
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	background: var(--body_background);
+	/* backdrop-filter: blur(4px); */
 	border-radius: 4px;
 	gap: 6px;
 }

svelte/src/filesystem/filemanager/CreateDirectory.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { preventDefault } from 'svelte/legacy';
 import { onMount } from "svelte";
-import { fs_mkdir } from "lib/FilesystemAPI";
+import { fs_mkdir } from "lib/FilesystemAPI.svelte";
 import Button from "layout/Button.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { loading_finish, loading_start } from "lib/Loading";

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import { run } from 'svelte/legacy';
-import { fs_delete_all, fs_download, fs_rename, type FSNode } from "lib/FilesystemAPI"
+import { fs_delete_all, fs_rename, type FSNode } from "lib/FilesystemAPI.svelte"
 import { onMount } from "svelte"
 import CreateDirectory from "./CreateDirectory.svelte"
 import ListView from "./ListView.svelte"
@@ -13,7 +13,7 @@ import SearchBar from "./SearchBar.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
 import EditWindow from "filesystem/edit_window/EditWindow.svelte";
-import { FileAction, type FileEvent } from "./FileManagerLib";
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 import FileMenu from "./FileMenu.svelte";
 import { loading_finish, loading_start } from "lib/Loading";
 
@@ -43,13 +43,12 @@ export const upload = (files: File[]) => {
 }
 
 // Navigation functions
-const file_event = (e: CustomEvent<FileEvent>) => {
-	const index = e.detail.index
+const file_event: FileActionHandler = (action: FileAction, index: number, orig: Event) => {
+	orig.preventDefault()
+	orig.stopPropagation()
 
-	switch (e.detail.action) {
+	switch (action) {
 	case FileAction.Click:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
 		creating_dir = false
 
 		if (mode === "viewing") {
@@ -68,40 +67,26 @@ const file_event = (e: CustomEvent<FileEvent>) => {
 	case FileAction.Context:
 		// If this is a touch event we will select the item
 		if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
-			e.detail.original.preventDefault()
 			select_node(index)
+		} else {
+			file_menu.open(nav.children[index], orig.target)
 		}
 		break
 	case FileAction.Edit:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
 		edit_window.edit(nav.children[index], false, "file")
 		break
 	case FileAction.Share:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
 		creating_dir = false
 		edit_window.edit(nav.children[index], false, "share")
 		break
 	case FileAction.Branding:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
 		edit_window.edit(nav.children[index], false, "branding")
 		break
 	case FileAction.Select:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
 		select_node(index)
 		break
-	case FileAction.Download:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
-		fs_download(nav.children[index])
-		break
 	case FileAction.Menu:
-		e.detail.original.preventDefault()
-		e.detail.original.stopPropagation()
-		file_menu.open(nav.children[index], e.detail.original.target)
+		file_menu.open(nav.children[index], orig.target)
 		break
 	}
 }
@@ -423,11 +408,11 @@ run(() => {
 	{@render children?.()}
 
 	{#if directory_view === "list"}
-		<ListView nav={nav} show_hidden={show_hidden} large_icons={large_icons} on:file={file_event} />
+		<ListView nav={nav} file_event={file_event} show_hidden={show_hidden} large_icons={large_icons}/>
 	{:else if directory_view === "gallery"}
-		<GalleryView nav={nav} show_hidden={show_hidden} large_icons={large_icons} on:file={file_event} />
+		<GalleryView nav={nav} file_event={file_event} show_hidden={show_hidden} large_icons={large_icons}/>
 	{:else if directory_view === "compact"}
-		<CompactView nav={nav} show_hidden={show_hidden} large_icons={large_icons} on:file={file_event} />
+		<CompactView nav={nav} file_event={file_event} show_hidden={show_hidden} large_icons={large_icons}/>
 	{/if}
 </div>
 
@@ -447,8 +432,8 @@ run(() => {
 	width: 100%;
 	margin: auto;
 	padding: 0;
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	background: var(--body_background);
+	/* backdrop-filter: blur(4px); */
 }
 .toolbar {
 	display: flex;

svelte/src/filesystem/filemanager/FileManagerLib.ts

@@ -3,4 +3,18 @@ export type FileEvent = {
 	action: FileAction,
 	original: MouseEvent,
 }
-export enum FileAction { Click, Context, Edit, Share, Branding, Select, Download, Menu }
+export enum FileAction {
+	Click,
+	Context,
+	Edit,
+	Share,
+	Branding,
+	Select,
+	Download,
+	Menu,
+}
+export type FileActionHandler = (
+	action: FileAction,
+	file_index: number,
+	original_event: Event,
+) => void

svelte/src/filesystem/filemanager/FileMenu.svelte

@@ -4,7 +4,8 @@ import type { FSNavigator } from "filesystem/FSNavigator";
 import Button from "layout/Button.svelte";
 import Dialog from "layout/Dialog.svelte";
 import { bookmark_add, bookmark_del, bookmarks_store, is_bookmark } from "lib/Bookmarks";
-import { fs_download, type FSNode } from "lib/FilesystemAPI";
+import { fs_delete, fs_download, type FSNode } from "lib/FilesystemAPI.svelte";
+import { loading_finish, loading_start } from "lib/Loading";
 import { tick } from "svelte";
 
 let {
@@ -20,10 +21,26 @@ let node: FSNode = $state(null)
 
 export const open = async (n: FSNode, target: EventTarget) => {
 	node = n
+	let el: HTMLElement = (target as Element).closest("button")
+	if (el === null) {
+		el = (target as Element).closest("a")
+	}
 
 	// Wait for the view to update, so the dialog gets the proper measurements
 	await tick()
-	dialog.open((target as Element).closest("button").getBoundingClientRect())
+	dialog.open(el.getBoundingClientRect())
+}
+
+const delete_node = async () => {
+	try {
+		loading_start()
+		await fs_delete(node.path)
+		nav.reload()
+	} catch (err) {
+		alert(JSON.stringify(err))
+	} finally {
+		loading_finish()
+	}
 }
 </script>
 
@@ -36,6 +53,7 @@ export const open = async (n: FSNode, target: EventTarget) => {
 			<Button click={() => {dialog.close(); bookmark_add(node)}} icon="bookmark_add" label="Add bookmark"/>
 		{/if}
 		{#if $nav.permissions.write}
+			<Button click={() => {dialog.close(); delete_node()}} icon="delete" label="Delete"/>
 			<Button click={() => {dialog.close(); edit_window.edit(node, false, "file")}} icon="edit" label="Edit"/>
 			<Button click={() => {dialog.close(); edit_window.edit(node, false, "share")}} icon="share" label="Share"/>
 			<Button click={() => {dialog.close(); edit_window.edit(node, false, "branding")}} icon="palette" label="Branding"/>

svelte/src/filesystem/filemanager/FilePicker.svelte

@@ -6,8 +6,8 @@ import CompactView from "./CompactView.svelte"
 import Modal from "util/Modal.svelte";
 import Breadcrumbs from "filesystem/Breadcrumbs.svelte"
 import { FSNavigator } from "filesystem/FSNavigator";
-import type { FSNode } from "lib/FilesystemAPI";
-import { FileAction, type FileEvent } from "./FileManagerLib";
+import type { FSNode } from "lib/FilesystemAPI.svelte";
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let nav = $state(new FSNavigator(false))
 let modal: Modal = $state()
@@ -34,12 +34,10 @@ let selected_files = $derived($nav.children.reduce((acc, file) => {
 
 // Navigation functions
 
-const file_event = (e: CustomEvent<FileEvent>) => {
-	const index = e.detail.index
-
-	switch (e.detail.action) {
+const file_event: FileActionHandler = (action: FileAction, index: number, orig: Event) => {
+	switch (action) {
 	case FileAction.Click:
-		e.detail.original.preventDefault()
+		orig.preventDefault()
 		if (nav.children[index].type === "dir") {
 			nav.navigate(nav.children[index].path, true)
 		} else {
@@ -49,12 +47,12 @@ const file_event = (e: CustomEvent<FileEvent>) => {
 	case FileAction.Context:
 		// If this is a touch event we will select the item
 		if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
-			e.detail.original.preventDefault()
+			orig.preventDefault()
 			select_node(index)
 		}
 		break
 	case FileAction.Select:
-		e.detail.original.preventDefault()
+		orig.preventDefault()
 		nav.children[index].fm_selected = !nav.children[index].fm_selected
 		break
 	}
@@ -134,7 +132,7 @@ onMount(() => {
 <svelte:window onkeydown={detect_shift} onkeyup={detect_shift} />
 
 <Modal bind:this={modal} width="900px">
-	{#snippet title()}
+	{#snippet header()}
 		<div class="header" >
 			<button class="button round" onclick={modal.hide}>
 				<i class="icon">close</i>
@@ -175,26 +173,26 @@ onMount(() => {
 	{#if directory_view === "list"}
 		<ListView
 			nav={nav}
+			file_event={file_event}
 			show_hidden={show_hidden}
 			large_icons={large_icons}
 			hide_edit
 			hide_branding
-			on:file={file_event}
 		/>
 	{:else if directory_view === "gallery"}
 		<GalleryView
 			nav={nav}
+			file_event={file_event}
 			show_hidden={show_hidden}
 			large_icons={large_icons}
-			on:file={file_event}
 		/>
 	{:else if directory_view === "compact"}
 		<CompactView
 			nav={nav}
+			file_event={file_event}
 			show_hidden={show_hidden}
 			large_icons={large_icons}
 			hide_edit
-			on:file={file_event}
 		/>
 	{/if}
 </Modal>

svelte/src/filesystem/filemanager/GalleryView.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte"
-import { fs_node_icon, fs_node_type, fs_encode_path } from "lib/FilesystemAPI";
+import { fs_node_icon, fs_node_type, fs_encode_path } from "lib/FilesystemAPI.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
-import { FileAction } from "./FileManagerLib";
-let dispatch = createEventDispatcher()
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let {
 	nav,
+	file_event,
 	show_hidden = false,
 	large_icons = false
 }: {
-	nav: FSNavigator;
-	show_hidden?: boolean;
-	large_icons?: boolean;
+	nav: FSNavigator
+	file_event: FileActionHandler
+	show_hidden?: boolean
+	large_icons?: boolean
 } = $props();
 </script>
 
@@ -20,8 +20,8 @@ let {
 	{#each $nav.children as child, index (child.path)}
 		<a class="file"
 		href={"/d"+fs_encode_path(child.path)}
-			onclick={e => dispatch("file", {index: index, action: FileAction.Click, original: e})}
-			oncontextmenu={e => dispatch("file", {index: index, action: FileAction.Context, original: e})}
+			onclick={e => file_event(FileAction.Click, index, e)}
+			oncontextmenu={e => file_event(FileAction.Context, index, e)}
 			class:selected={child.fm_selected}
 			class:hidden={child.name.startsWith(".") && !show_hidden}
 			class:large_icons
@@ -52,8 +52,8 @@ let {
 	width: 150px;
 	height: 150px;
 	overflow: hidden;
-	background: var(--shaded_background);
-	backdrop-filter: blur(4px);
+	background: var(--body_background);
+	/* backdrop-filter: blur(4px); */
 	border-radius: 4px;
 	color: var(--input_text);
 	display: flex;

svelte/src/filesystem/filemanager/ListView.svelte

@@ -1,25 +1,24 @@
 <script lang="ts">
-import { createEventDispatcher } from "svelte";
 import { formatDataVolume } from "util/Formatting";
-import { fs_encode_path, fs_node_icon, node_is_shared } from "lib/FilesystemAPI"
+import { fs_encode_path, fs_node_icon } from "lib/FilesystemAPI.svelte"
 import type { FSNavigator } from "filesystem/FSNavigator";
 import SortButton from "layout/SortButton.svelte";
-import { FileAction } from "./FileManagerLib";
-
-let dispatch = createEventDispatcher()
+import { FileAction, type FileActionHandler } from "./FileManagerLib";
 
 let {
 	nav,
+	file_event,
 	show_hidden = false,
 	large_icons = false,
 	hide_edit = false,
 	hide_branding = false
 }: {
-	nav: FSNavigator;
-	show_hidden?: boolean;
-	large_icons?: boolean;
-	hide_edit?: boolean;
-	hide_branding?: boolean;
+	nav: FSNavigator
+	file_event: FileActionHandler
+	show_hidden?: boolean
+	large_icons?: boolean
+	hide_edit?: boolean
+	hide_branding?: boolean
 } = $props();
 </script>
 
@@ -35,8 +34,8 @@ let {
 	<tbody>
 		{#each $nav.children as child, index (child.path)}
 			<tr
-				onclick={e => dispatch("file", {index: index, action: FileAction.Click, original: e})}
-				oncontextmenu={e => dispatch("file", {index: index, action: FileAction.Context, original: e})}
+				onclick={e => file_event(FileAction.Click, index, e)}
+				oncontextmenu={e => file_event(FileAction.Context, index, e)}
 				class="node"
 				class:node_selected={child.fm_selected}
 				class:hidden={child.name.startsWith(".") && !show_hidden}
@@ -45,7 +44,7 @@ let {
 					<img src={fs_node_icon(child, 64, 64)} class="node_icon" class:large_icons alt="icon"/>
 				</td>
 				<td class="node_name">
-					<a href={"/d"+fs_encode_path(child.path)}>
+					<a class="title_link" href={"/d"+fs_encode_path(child.path)}>
 						{child.name}
 					</a>
 				</td>
@@ -58,22 +57,22 @@ let {
 					<div class="icons_wrap">
 						{#if child.abuse_type !== undefined}
 							<i class="icon" title="This file / directory has received an abuse report. It cannot be shared">block</i>
-						{:else if node_is_shared(child)}
+						{:else if child.is_shared()}
 							<a
 								href="/d/{child.id}"
-								onclick={e => dispatch("file", {index: index, action: FileAction.Share, original: e})}
+								onclick={e => file_event(FileAction.Share, index, e)}
 								class="button action_button"
 							>
 								<i class="icon" title="This file / directory is shared. Click to open public link">share</i>
 							</a>
 						{/if}
 						{#if child.properties !== undefined && child.properties.branding_enabled === "true" && !hide_branding}
-							<button class="action_button" onclick={e => dispatch("file", {index: index, action: FileAction.Branding, original: e})}>
+							<button class="action_button" onclick={e => file_event(FileAction.Branding, index, e)}>
 								<i class="icon">palette</i>
 							</button>
 						{/if}
 						{#if !hide_edit}
-							<button class="action_button" onclick={e => dispatch("file", {index: index, action: FileAction.Menu, original: e})}>
+							<button class="action_button" onclick={e => file_event(FileAction.Menu, index, e)}>
 								<i class="icon">menu</i>
 							</button>
 						{/if}
@@ -87,9 +86,9 @@ let {
 <style>
 .directory {
 	display: table;
-	background: var(--shaded_background);
+	background: var(--body_background);
 	border-collapse: collapse;
-	backdrop-filter: blur(4px);
+	/* backdrop-filter: blur(4px); */
 	max-width: 1200px;
 	margin: auto; /* center */
 }
@@ -99,11 +98,14 @@ let {
 .directory > * > * {
 	display: table-cell;
 }
+td {
+	padding: 0;
+}
 .node {
 	display: table-row;
 	text-decoration: none;
 	color: var(--body_text-color);
-	padding: 6px;
+	cursor: pointer;
 }
 .node:not(:last-child) {
 	border-bottom: 1px solid var(--separator);
@@ -118,6 +120,7 @@ let {
 	color: var(--highlight_text_color);
 }
 td {
+	padding: 2px;
 	vertical-align: middle;
 }
 .node_icon {
@@ -132,6 +135,10 @@ td {
 	line-height: 1.2em;
 	word-break: break-all;
 }
+.title_link {
+	text-decoration: none;
+	color: var(--body_text_color);
+}
 .node_size {
 	min-width: 5em;
 	white-space: nowrap;

svelte/src/filesystem/filemanager/SearchBar.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import { preventDefault } from 'svelte/legacy';
-
 import { onMount } from "svelte";
-import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI";
+import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
 import type { FSNavigator } from "filesystem/FSNavigator";
 import { loading_finish, loading_start } from "lib/Loading";
 
@@ -118,13 +116,17 @@ const input_keyup = (e: KeyboardEvent) => {
 }
 
 // Submitting opens the selected result
-const submit_search = () => {
+const submit_search = (e: Event) => {
+	e.preventDefault()
 	if (search_results.length !== 0) {
 		open_result(selected_result)
 	}
 }
 
-const open_result = (index: number) => {
+const open_result = (index: number, e?: MouseEvent) => {
+	if (e !== undefined) {
+		e.preventDefault()
+	}
 	nav.navigate(search_results[index], true)
 	clear_search(false)
 }
@@ -164,7 +166,7 @@ const window_keydown = (e: KeyboardEvent) => {
 {/if}
 
 <div class="center">
-	<form class="search_form" onsubmit={preventDefault(submit_search)}>
+	<form class="search_form" onsubmit={submit_search}>
 		<i class="icon">search</i>
 		<input
 			bind:this={search_bar}
@@ -192,7 +194,7 @@ const window_keydown = (e: KeyboardEvent) => {
 		{#each search_results as result, index}
 			<a
 				href={"/d"+fs_encode_path(result)}
-				onclick={preventDefault(() => open_result(index))}
+				onclick={(e) => open_result(index, e)}
 				class="node"
 				class:node_selected={selected_result === index}
 			>