Update Edit window to operate on NodeOptions

svelte/src/filesystem/FilesystemAPI.ts

@@ -27,6 +27,8 @@ export type FSNode = {
 	abuse_type?: string,
 	abuse_report_time?: string,
 
+	custom_domain_name?: string,
+
 	file_size: number,
 	file_type: string,
 	sha256_sum: string,
@@ -72,6 +74,9 @@ export type FSContext = {
 // API parameters
 // ==============
 
+// NodeOptions are options which can be applied by sending a PUT request to a
+// filesystem node. This includes all values which can be set in
+// FSNode.properties
 export type NodeOptions = {
 	mode?: number,
 	created?: string,
@@ -82,6 +87,11 @@ export type NodeOptions = {
 	link_permissions?: FSPermissions,
 	user_permissions?: { [index: string]: FSPermissions },
 	password_permissions?: { [index: string]: FSPermissions },
+
+	// Custom domain name options
+	custom_domain_name?: string,
+	custom_domain_cert?: string,
+	custom_domain_key?: string,
 } & FSNodeProperties
 
 // API methods

svelte/src/filesystem/edit_window/AccessControl.svelte

@@ -1,36 +1,36 @@
 <script lang="ts">
 import Button from "layout/Button.svelte";
-import type { FSNode, FSPermissions } from "filesystem/FilesystemAPI";
+import type { FSPermissions, NodeOptions } from "filesystem/FilesystemAPI";
 import PermissionButton from "./PermissionButton.svelte";
 
-export let file: FSNode
+export let options: NodeOptions
 
 let new_user_id = ""
 let new_user_perms = <FSPermissions>{read: true}
 const add_user = (e: SubmitEvent) => {
 	e.preventDefault()
-	if (file.user_permissions === undefined) {
-		file.user_permissions = {} as {[index: string]: FSPermissions}
+	if (options.user_permissions === undefined) {
+		options.user_permissions = {} as {[index: string]: FSPermissions}
 	}
-	file.user_permissions[new_user_id] = structuredClone(new_user_perms)
+	options.user_permissions[new_user_id] = structuredClone(new_user_perms)
 }
 const del_user = (id: string) => {
-	delete file.user_permissions[id]
-	file.user_permissions = file.user_permissions
+	delete options.user_permissions[id]
+	options.user_permissions = options.user_permissions
 }
 
 let new_password = ""
 let new_password_perms = <FSPermissions>{read: true}
 const add_password = (e: SubmitEvent) => {
 	e.preventDefault()
-	if (file.password_permissions === undefined) {
-		file.password_permissions = {} as {[index: string]: FSPermissions}
+	if (options.password_permissions === undefined) {
+		options.password_permissions = {} as {[index: string]: FSPermissions}
 	}
-	file.password_permissions[new_password] = structuredClone(new_password_perms)
+	options.password_permissions[new_password] = structuredClone(new_password_perms)
 }
 const del_password = (pass: string) => {
-	delete file.password_permissions[pass]
-	file.password_permissions = file.password_permissions
+	delete options.password_permissions[pass]
+	options.password_permissions = options.password_permissions
 }
 </script>
 
@@ -51,7 +51,7 @@ const del_password = (pass: string) => {
 			Anyone with the link can...
 		</div>
 		<div class="perms">
-			<PermissionButton bind:permissions={file.link_permissions}/>
+			<PermissionButton bind:permissions={options.link_permissions}/>
 		</div>
 	</div>
 </fieldset>
@@ -71,15 +71,15 @@ const del_password = (pass: string) => {
 			<PermissionButton bind:permissions={new_user_perms}/>
 		</div>
 	</form>
-	{#if file.user_permissions !== undefined}
-		{#each Object.keys(file.user_permissions) as id (id)}
+	{#if options.user_permissions !== undefined}
+		{#each Object.keys(options.user_permissions) as id (id)}
 			<div class="row">
 				<Button click={() => del_user(id)} icon="delete"/>
 				<div class="grow id">
 					{id}
 				</div>
 				<div class="perms">
-					<PermissionButton bind:permissions={file.user_permissions[id]}/>
+					<PermissionButton bind:permissions={options.user_permissions[id]}/>
 				</div>
 			</div>
 		{/each}
@@ -101,15 +101,15 @@ const del_password = (pass: string) => {
 			<PermissionButton bind:permissions={new_password_perms}/>
 		</div>
 	</form>
-	{#if file.password_permissions !== undefined}
-		{#each Object.keys(file.password_permissions) as password (password)}
+	{#if options.password_permissions !== undefined}
+		{#each Object.keys(options.password_permissions) as password (password)}
 			<div class="row">
 				<Button click={() => del_password(password)} icon="delete"/>
 				<div class="grow id">
 					{password}
 				</div>
 				<div class="perms">
-					<PermissionButton bind:permissions={file.password_permissions[password]}/>
+					<PermissionButton bind:permissions={options.password_permissions[password]}/>
 				</div>
 			</div>
 		{/each}

svelte/src/filesystem/edit_window/BrandingOptions.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
 import { createEventDispatcher } from "svelte";
 import ThemePresets from "./ThemePresets.svelte";
-import { fs_update, fs_node_type, type FSNode } from "filesystem/FilesystemAPI";
+import { fs_update, fs_node_type, type FSNode, type NodeOptions } from "filesystem/FilesystemAPI";
 import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
 import HelpButton from "layout/HelpButton.svelte";
 import FilePicker from "filesystem/filemanager/FilePicker.svelte";
 let dispatch = createEventDispatcher()
 
 export let file: FSNode
-export let enabled = false
+export let options: NodeOptions
+export let enabled: boolean
 
-$: update_colors(file)
-const update_colors = (file: FSNode) => {
+$: update_colors(options)
+const update_colors = (options: NodeOptions) => {
 	if (enabled) {
-		file.properties.branding_enabled = "true"
+		options.branding_enabled = "true"
 		dispatch("style_change")
 	} else {
-		file.properties.branding_enabled = ""
+		options.branding_enabled = ""
 	}
 }
 
@@ -31,7 +32,7 @@ const handle_picker = async (e: CustomEvent<FSNode[]>) => {
 		alert("Please select one file")
 		return
 	}
-	let f = e.detail[0]
+	const f = e.detail[0]
 	let file_id = f.id
 
 	if (fs_node_type(f) !== "image") {
@@ -53,9 +54,9 @@ const handle_picker = async (e: CustomEvent<FSNode[]>) => {
 	}
 
 	if (picking === "brand_header_image") {
-		file.properties.brand_header_image = file_id
+		options.brand_header_image = file_id
 	} else if (picking === "brand_background_image") {
-		file.properties.brand_background_image = file_id
+		options.brand_background_image = file_id
 	}
 }
 
@@ -79,7 +80,7 @@ let highlight_info = false
 
 <fieldset disabled={!enabled} style="text-align: center;">
 	<legend>Theme presets</legend>
-	<ThemePresets bind:properties={file.properties}/>
+	<ThemePresets bind:properties={options}/>
 </fieldset>
 
 <fieldset class="grid" disabled={!enabled}>
@@ -88,8 +89,8 @@ let highlight_info = false
 		<div style="display: inline-block">Highlight</div>
 		<HelpButton bind:toggle={highlight_info}/>
 	</div>
-	<input type="color" bind:value={file.properties.brand_highlight_color}/>
-	<input type="text" bind:value={file.properties.brand_highlight_color}/>
+	<input type="color" bind:value={options.brand_highlight_color}/>
+	<input type="text" bind:value={options.brand_highlight_color}/>
 	{#if highlight_info}
 		<p class="span3">
 			The highlight colour is used for highlighting selected buttons and
@@ -99,20 +100,20 @@ let highlight_info = false
 		</p>
 	{/if}
 	<div>Button and input</div>
-	<input type="color" bind:value={file.properties.brand_input_color}/>
-	<input type="text" bind:value={file.properties.brand_input_color}/>
+	<input type="color" bind:value={options.brand_input_color}/>
+	<input type="text" bind:value={options.brand_input_color}/>
 	<div>Delete button</div>
-	<input type="color" bind:value={file.properties.brand_danger_color}/>
-	<input type="text" bind:value={file.properties.brand_danger_color}/>
+	<input type="color" bind:value={options.brand_danger_color}/>
+	<input type="text" bind:value={options.brand_danger_color}/>
 	<div>Background</div>
-	<input type="color" bind:value={file.properties.brand_background_color}/>
-	<input type="text" bind:value={file.properties.brand_background_color}/>
+	<input type="color" bind:value={options.brand_background_color}/>
+	<input type="text" bind:value={options.brand_background_color}/>
 	<div>Body</div>
-	<input type="color" bind:value={file.properties.brand_body_color}/>
-	<input type="text" bind:value={file.properties.brand_body_color}/>
+	<input type="color" bind:value={options.brand_body_color}/>
+	<input type="text" bind:value={options.brand_body_color}/>
 	<div>Card</div>
-	<input type="color" bind:value={file.properties.brand_card_color}/>
-	<input type="text" bind:value={file.properties.brand_card_color}/>
+	<input type="color" bind:value={options.brand_card_color}/>
+	<input type="text" bind:value={options.brand_card_color}/>
 </fieldset>
 
 <fieldset class="grid" disabled={!enabled}>
@@ -129,15 +130,15 @@ let highlight_info = false
 		<i class="icon">folder_open</i>
 		Pick
 	</button>
-	<input type="text" bind:value={file.properties.brand_header_image}/>
+	<input type="text" bind:value={options.brand_header_image}/>
 	<div>Header image link</div>
-	<input class="span2" type="text" bind:value={file.properties.brand_header_link}/>
+	<input class="span2" type="text" bind:value={options.brand_header_link}/>
 	<div>Background image ID</div>
 	<button on:click={() => pick_image("brand_background_image")}>
 		<i class="icon">folder_open</i>
 		Pick
 	</button>
-	<input type="text" bind:value={file.properties.brand_background_image}/>
+	<input type="text" bind:value={options.brand_background_image}/>
 </fieldset>
 
 <fieldset disabled={!enabled}>

svelte/src/filesystem/edit_window/EditWindow.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_rename, fs_update, type FSNode, type FSNodeProperties, type NodeOptions } from "filesystem/FilesystemAPI";
+import { fs_rename, fs_update, type FSNode, type NodeOptions } from "filesystem/FilesystemAPI";
 import Modal from "util/Modal.svelte";
 import BrandingOptions from "./BrandingOptions.svelte";
 import { branding_from_node } from "./Branding";
@@ -10,6 +10,7 @@ import type { FSNavigator } from "filesystem/FSNavigator";
 
 export let nav: FSNavigator
 let file: FSNode = {} as FSNode
+let options: NodeOptions = {} as NodeOptions
 
 let custom_css = ""
 
@@ -30,18 +31,28 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
 	// We save the name in a separate field because we need both the original
 	// name and the new name for the rename operation
 	new_name = file.name
-	shared = !(file.id === undefined || file.id === "")
 
 	if (file.properties === undefined) {
-		file.properties = {} as FSNodeProperties
+		options = {} as NodeOptions
+	} else {
+		options = file.properties
 	}
 
-	if (shared && file.link_permissions === undefined) {
-		// Default to read-only for public links
-		file.link_permissions = { owner: false, read: true, write: false, delete: false}
+	options.custom_domain_name = file.custom_domain_name
+
+	options.shared = !(file.id === undefined || file.id === "")
+	if (options.shared) {
+		if (file.link_permissions === undefined) {
+			// Default to read-only for public links
+			file.link_permissions = { owner: false, read: true, write: false, delete: false}
+		} else {
+			options.link_permissions = file.link_permissions
+		}
+		options.user_permissions = file.user_permissions
+		options.password_permissions = file.password_permissions
 	}
 
-	branding_enabled = file.properties.branding_enabled === "true"
+	branding_enabled = options.branding_enabled === "true"
 	if (branding_enabled) {
 		custom_css = branding_from_node(file)
 	} else {
@@ -55,7 +66,6 @@ let tab = "file"
 let open_after_edit = false
 
 let new_name = ""
-let shared = false
 let branding_enabled = false
 
 const save = async (keep_editing = false) => {
@@ -64,25 +74,9 @@ const save = async (keep_editing = false) => {
 	let new_file: FSNode
 	try {
 		nav.set_loading(true)
-		let opts = {
-			shared: shared,
-			branding_enabled: JSON.stringify(branding_enabled)
-		} as NodeOptions
+		options.branding_enabled = JSON.stringify(branding_enabled)
 
-		if (branding_enabled && file.properties !== undefined) {
-			for (let field of Object.keys(file.properties)) {
-				console.log("setting", field, "to", file.properties[field])
-				opts[field] = file.properties[field]
-			}
-		}
-
-		if (shared) {
-			opts.link_permissions = file.link_permissions
-			opts.user_permissions = file.user_permissions
-			opts.password_permissions = file.password_permissions
-		}
-
-		new_file = await fs_update(file.path, opts)
+		new_file = await fs_update(file.path, options)
 
 		if (new_name !== file.name) {
 			let parent = file.path.slice(0, -file.name.length)
@@ -128,7 +122,7 @@ const save = async (keep_editing = false) => {
 			<i class="icon">share</i>
 			Sharing
 		</button>
-		{#if shared && $nav.permissions.owner}
+		{#if options.shared && $nav.permissions.owner}
 			<button class:button_highlight={tab === "access"} on:click={() => tab = "access"}>
 				<i class="icon">key</i>
 				Access control
@@ -152,12 +146,13 @@ const save = async (keep_editing = false) => {
 				bind:open_after_edit
 			/>
 		{:else if tab === "share"}
-			<SharingOptions bind:file bind:shared on:save={() => save(true)} />
+			<SharingOptions bind:file bind:options on:save={() => save(true)} />
 		{:else if tab === "access"}
-			<AccessControl bind:file />
+			<AccessControl bind:options />
 		{:else if tab === "branding"}
 			<BrandingOptions
 				bind:enabled={branding_enabled}
+				bind:options={options}
 				bind:file
 				on:style_change={e => custom_css = branding_from_node(file)}
 			/>

svelte/src/filesystem/edit_window/SharingOptions.svelte

@@ -3,20 +3,19 @@ import { createEventDispatcher } from "svelte";
 import { domain_url } from "util/Util.svelte";
 import CopyButton from "layout/CopyButton.svelte";
 import { formatDate } from "util/Formatting";
-import type { FSNode } from "filesystem/FilesystemAPI";
+import type { FSNode, NodeOptions } from "filesystem/FilesystemAPI";
 
 let dispatch = createEventDispatcher()
-export let shared: boolean
 export let file: FSNode = {} as FSNode
+export let options: NodeOptions
 
 let embed_html: string
 let preview_area: HTMLDivElement
 
-$: is_shared = file.id !== undefined && file.id !== ""
 $: share_link = window.location.protocol+"//"+window.location.host+"/d/"+file.id
-$: embed_iframe(file)
-let embed_iframe = (file: FSNode) => {
-	if (!is_shared) {
+$: embed_iframe(file, options)
+let embed_iframe = (file: FSNode, options: NodeOptions) => {
+	if (!options.shared) {
 		example = false
 		embed_html = "File is not shared, can't generate embed code"
 		return
@@ -32,7 +31,7 @@ let embed_iframe = (file: FSNode) => {
 
 let example = false
 const toggle_example = () => {
-	if (is_shared) {
+	if (options.shared) {
 		example = !example
 		if (example) {
 			preview_area.innerHTML = embed_html
@@ -47,7 +46,7 @@ const update_shared = () => {
 	// the sharing link. But if the user disables sharing we don't automatically
 	// save so that the user can't accidentally discard a sharing link that's in
 	// use
-	if (shared) {
+	if (options.shared && !file.id) {
 		dispatch("save")
 	}
 }
@@ -68,7 +67,7 @@ const update_shared = () => {
 	<div>
 		<input
 			form="edit_form"
-			bind:checked={shared}
+			bind:checked={options.shared}
 			on:change={update_shared}
 			id="shared"
 			type="checkbox"
@@ -76,8 +75,8 @@ const update_shared = () => {
 		/>
 		<label for="shared">Share this file or directory</label>
 	</div>
-	<div class="form_grid">
-		{#if is_shared}
+	<div class="link_grid">
+		{#if options.shared}
 			<span>Public link: <a href={share_link}>{share_link}</a></span>
 			<CopyButton text={share_link}>Copy</CopyButton>
 		{/if}
@@ -109,7 +108,7 @@ const update_shared = () => {
 		<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
 		<br/>
 		<CopyButton text={embed_html}>Copy HTML</CopyButton>
-		<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
+		<button on:click={toggle_example} class:button_highlight={example} disabled={!options.shared}>
 			<i class="icon">visibility</i> Show example
 		</button>
 	</div>
@@ -118,14 +117,41 @@ const update_shared = () => {
 	<div bind:this={preview_area} style="text-align: center;"></div>
 </fieldset>
 
+<!-- <fieldset>
+	<legend>Custom domain</legend>
+	<p>
+		Experimental options
+	</p>
+	<div class="form_grid">
+		<label for="custom_domain_name">Domain name</label>
+		<input
+			id="custom_domain_name"
+			bind:value={options.custom_domain_name}
+			type="text"
+			disabled={!options.shared}
+		/>
+
+		<label for="custom_domain_cert">Certificate</label>
+		<textarea id="custom_domain_cert" bind:value={options.custom_domain_cert} style="height: 4em;"></textarea>
+
+		<label for="custom_domain_key">Key</label>
+		<textarea id="custom_domain_key" bind:value={options.custom_domain_key} style="height: 4em;"></textarea>
+	</div>
+</fieldset> -->
+
 <style>
 .center {
 	text-align: center;
 }
 
-.form_grid {
+.link_grid {
 	display: grid;
 	grid-template-columns: 10fr auto;
 	align-items: center;
 }
+/* .form_grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	align-items: center;
+} */
 </style>

svelte/src/filesystem/filemanager/FilePicker.svelte

@@ -7,8 +7,8 @@ import Modal from "util/Modal.svelte";
 import LoadingIndicator from "util/LoadingIndicator.svelte";
 import Breadcrumbs from "filesystem/Breadcrumbs.svelte"
 import { FSNavigator } from "filesystem/FSNavigator";
-import type { FMNodeEvent } from "./FileManager.svelte";
 import type { FSNode } from "filesystem/FilesystemAPI";
+import { FileAction, type FileEvent } from "./FileManagerLib";
 
 let nav = new FSNavigator(false)
 let modal: Modal
@@ -33,26 +33,31 @@ $: selected_files = $nav.children.reduce((acc, file) => {
 
 // Navigation functions
 
-const node_click = (e: CustomEvent<FMNodeEvent>) => {
+const file_event = (e: CustomEvent<FileEvent>) => {
 	const index = e.detail.index
 
-	if (nav.children[index].type === "dir") {
-		nav.navigate(nav.children[index].path, true)
-	} else {
-		select_node(index)
-	}
-}
-let node_context = (e: CustomEvent<FMNodeEvent>) => {
-	// If this is a touch event we will select the item
-	if (navigator.maxTouchPoints && navigator.maxTouchPoints > 0) {
+	switch (e.detail.action) {
+	case FileAction.Click:
 		e.detail.original.preventDefault()
-		node_select(e)
+		if (nav.children[index].type === "dir") {
+			nav.navigate(nav.children[index].path, true)
+		} else {
+			select_node(index)
+		}
+		break
+	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)
+		}
+		break
+	case FileAction.Select:
+		e.detail.original.preventDefault()
+		nav.children[index].fm_selected = !nav.children[index].fm_selected
+		break
 	}
 }
-const node_select = (e: CustomEvent<FMNodeEvent>) => {
-	const index = e.detail.index
-	nav.children[index].fm_selected = !nav.children[index].fm_selected
-}
 
 const toggle_view = () => {
 	if (directory_view === "list") {
@@ -171,18 +176,14 @@ onMount(() => {
 			large_icons={large_icons}
 			hide_edit
 			hide_branding
-			on:node_click={node_click}
-			on:node_context={node_context}
-			on:node_select={node_select}
+			on:file={file_event}
 		/>
 	{:else if directory_view === "gallery"}
 		<GalleryView
 			nav={nav}
 			show_hidden={show_hidden}
 			large_icons={large_icons}
-			on:node_click={node_click}
-			on:node_context={node_context}
-			on:node_select={node_select}
+			on:file={file_event}
 		/>
 	{:else if directory_view === "compact"}
 		<CompactView
@@ -190,9 +191,7 @@ onMount(() => {
 			show_hidden={show_hidden}
 			large_icons={large_icons}
 			hide_edit
-			on:node_click={node_click}
-			on:node_context={node_context}
-			on:node_select={node_select}
+			on:file={file_event}
 		/>
 	{/if}