From 69744e41a6f2c9d32c5d631c6fe5a9ad960ac0ec Mon Sep 17 00:00:00 2001 From: Wim Brand Date: Fri, 9 Aug 2024 13:02:07 +0200 Subject: [PATCH] Change filesystem navigator into a class with a svelte store implementation --- svelte/src/filesystem/Breadcrumbs.svelte | 11 +- svelte/src/filesystem/DetailsWindow.svelte | 42 ++-- svelte/src/filesystem/FileStats.svelte | 49 ++-- svelte/src/filesystem/Filesystem.svelte | 84 +++---- svelte/src/filesystem/FilesystemUtil.js | 3 + svelte/src/filesystem/Navigator.js | 237 ++++++++++++++++++ svelte/src/filesystem/Navigator.svelte | 202 --------------- svelte/src/filesystem/SearchView.svelte | 11 +- svelte/src/filesystem/Toolbar.svelte | 36 ++- .../filesystem/edit_window/EditWindow.svelte | 8 +- .../filesystem/edit_window/FileOptions.svelte | 8 +- .../filemanager/CreateDirectory.svelte | 37 ++- .../filemanager/FileImporter.svelte | 4 +- .../filesystem/filemanager/FileManager.svelte | 81 +++--- .../filesystem/filemanager/FilePicker.svelte | 54 ++-- .../filesystem/filemanager/GalleryView.svelte | 4 +- .../filesystem/filemanager/ListView.svelte | 6 +- .../upload_widget/UploadWidget.svelte | 11 +- svelte/src/filesystem/viewers/Audio.svelte | 25 +- svelte/src/filesystem/viewers/File.svelte | 10 +- .../src/filesystem/viewers/FilePreview.svelte | 54 ++-- svelte/src/filesystem/viewers/Image.svelte | 8 +- svelte/src/filesystem/viewers/PDF.svelte | 4 +- svelte/src/filesystem/viewers/Text.svelte | 17 +- svelte/src/filesystem/viewers/Torrent.svelte | 8 +- svelte/src/filesystem/viewers/Video.svelte | 18 +- svelte/src/filesystem/viewers/Zip.svelte | 20 +- .../src/user_home/dashboard/CardFSHome.svelte | 12 +- 28 files changed, 534 insertions(+), 530 deletions(-) create mode 100644 svelte/src/filesystem/Navigator.js delete mode 100644 svelte/src/filesystem/Navigator.svelte diff --git a/svelte/src/filesystem/Breadcrumbs.svelte b/svelte/src/filesystem/Breadcrumbs.svelte index 87e881e..b9f5971 100644 --- a/svelte/src/filesystem/Breadcrumbs.svelte +++ b/svelte/src/filesystem/Breadcrumbs.svelte @@ -1,25 +1,24 @@
- {#each state.path as node, i (node.path)} + {#each $nav.path as node, i (node.path)} {@const shared = node.id !== undefined && node.id !== "me"} {fs_navigator.navigate(node.path, true)}} + class:button_highlight={$nav.base_index === i} + on:click|preventDefault={() => {nav.navigate(node.path, true)}} > {#if node.abuse_type !== undefined} block {:else if shared} share {/if} -
+
{node.name}
diff --git a/svelte/src/filesystem/DetailsWindow.svelte b/svelte/src/filesystem/DetailsWindow.svelte index 72ba9fa..560d9fc 100644 --- a/svelte/src/filesystem/DetailsWindow.svelte +++ b/svelte/src/filesystem/DetailsWindow.svelte @@ -9,20 +9,20 @@ import { color_by_name } from "../util/Util.svelte"; import { tick } from "svelte"; import CopyButton from "../layout/CopyButton.svelte"; -export let state +export let nav export let visible = false export const toggle = () => visible = !visible $: visibility_change(visible) const visibility_change = visible => { if (visible) { - update_chart(state.base, 0, 0) + update_chart(nav.base, 0, 0) } } -$: direct_url = window.location.origin+fs_path_url(state.base.path) -$: share_url = generate_share_url(state.path) -$: direct_share_url = window.location.origin+fs_path_url(generate_share_path(state.path)) +$: direct_url = window.location.origin+fs_path_url($nav.base.path) +$: share_url = generate_share_url($nav.path) +$: direct_share_url = window.location.origin+fs_path_url(generate_share_path($nav.path)) let chart let chart_timespan = 0 @@ -40,7 +40,7 @@ let chart_timespans = [ let total_downloads = 0 let total_transfer_paid = 0 -$: update_chart(state.base, chart_timespan, chart_interval) +$: update_chart($nav.base, chart_timespan, chart_interval) let update_chart = async (base, timespan, interval) => { if (chart === undefined) { // Wait for the chart element to render, if it's not rendered already @@ -121,42 +121,42 @@ let update_chart = async (base, timespan, interval) => { } - + - + - + - + - + - + - {#if state.base.id} + {#if $nav.base.id} - + {/if} - {#if state.base.type === "file"} + {#if $nav.base.type === "file"} - + - + @@ -167,10 +167,10 @@ let update_chart = async (base, timespan, interval) => { - + {/if} @@ -197,13 +197,13 @@ let update_chart = async (base, timespan, interval) => { {/if}
Name{state.base.name}{$nav.base.name}
Path{state.base.path}{$nav.base.path}
Created{formatDate(state.base.created, true, true, true)}{formatDate($nav.base.created, true, true, true)}
Modified{formatDate(state.base.modified, true, true, true)}{formatDate($nav.base.modified, true, true, true)}
Mode{state.base.mode_string}{$nav.base.mode_string}
Public ID{state.base.id}{$nav.base.id}
File type{state.base.file_type}{$nav.base.file_type}
File size{formatDataVolume(state.base.file_size, 4)} ( {formatThousands(state.base.file_size)} B ){formatDataVolume($nav.base.file_size, 4)} ( {formatThousands($nav.base.file_size)} B )
Downloads {formatDataVolume(total_transfer_paid, 4)} ( {formatThousands(total_transfer_paid)} B ), - {(total_transfer_paid/state.base.file_size).toFixed(1)}x file size + {(total_transfer_paid/$nav.base.file_size).toFixed(1)}x file size
SHA256 sum{state.base.sha256_sum}
SHA256 sum{$nav.base.sha256_sum}
Direct link
- {#if state.base.type === "file"} + {#if $nav.base.type === "file"}

Download statistics

{#each chart_timespans as ts} diff --git a/svelte/src/filesystem/FileStats.svelte b/svelte/src/filesystem/FileStats.svelte index 8b60edb..1f02934 100644 --- a/svelte/src/filesystem/FileStats.svelte +++ b/svelte/src/filesystem/FileStats.svelte @@ -1,9 +1,9 @@ -{#if state.base.type === "file"} +{#if $nav.base.type === "file"} {#if error_msg !== ""} {error_msg} {:else} @@ -101,10 +110,10 @@ onDestroy(close_socket)
Size
-
{formatDataVolume(state.base.file_size, 3)}
+
{formatDataVolume($nav.base.file_size, 3)}
-{:else if state.base.type === "dir" || state.base.type === "bucket"} +{:else if $nav.base.type === "dir" || $nav.base.type === "bucket"}
Directories
diff --git a/svelte/src/filesystem/Filesystem.svelte b/svelte/src/filesystem/Filesystem.svelte index 8be2ac6..2aa10b6 100644 --- a/svelte/src/filesystem/Filesystem.svelte +++ b/svelte/src/filesystem/Filesystem.svelte @@ -5,13 +5,13 @@ import EditWindow from './edit_window/EditWindow.svelte'; import Toolbar from './Toolbar.svelte'; import Breadcrumbs from './Breadcrumbs.svelte'; import DetailsWindow from './DetailsWindow.svelte'; -import Navigator from './Navigator.svelte'; import FilePreview from './viewers/FilePreview.svelte'; import SearchView from './SearchView.svelte'; import UploadWidget from './upload_widget/UploadWidget.svelte'; import { fs_path_url } from './FilesystemUtil.js'; import { branding_from_path } from './edit_window/Branding.js' import Menu from './Menu.svelte'; +import { Navigator } from "./Navigator.js" let loading = true let file_viewer @@ -24,20 +24,25 @@ let edit_window let edit_visible = false let view = "file" -let fs_navigator -let state = { - path: window.initial_node.path, - base_index: window.initial_node.base_index, - children: window.initial_node.children, - permissions: window.initial_node.permissions, +const nav = new Navigator() - // Shortcuts - base: window.initial_node.path[window.initial_node.base_index], +onMount(() => { + nav.open_node(window.initial_node, false) - shuffle: false, -} + // Subscribe to navigation updates. This function returns a deconstructor + // which we can conveniently return from our mount function as well + return nav.subscribe(nav => { + if (!nav.initialized) { + return + } -onMount(() => fs_navigator.open_node(window.initial_node, false)) + // Custom CSS rules for the whole viewer + document.documentElement.style = branding_from_path(nav.path) + + // Turn off loading spinner when the navigator is done + loading = false + }) +}) const keydown = e => { if (e.ctrlKey || e.altKey || e.metaKey) { @@ -58,14 +63,14 @@ const keydown = e => { if (edit_visible) { edit_visible = false } else { - edit_window.edit(state.base, true, "file") + edit_window.edit(nav.base, true, "file") } break; case "s": download() break; case "r": - state.shuffle = !state.shuffle + nav.shuffle = !nav.shuffle break; case "/": case "f": @@ -73,11 +78,11 @@ const keydown = e => { break case "a": case "ArrowLeft": - fs_navigator.open_sibling(-1) + nav.open_sibling(-1) break; case "d": case "ArrowRight": - fs_navigator.open_sibling(1) + nav.open_sibling(1) break; case " ": // Spacebar pauses / unpauses video and audio playback if (file_preview) { @@ -94,10 +99,10 @@ const keydown = e => { }; const download = () => { - if (state.base.type === "file") { - download_frame.src = fs_path_url(state.base.path) + "?attach" - } else if (state.base.type === "dir") { - download_frame.src = fs_path_url(state.base.path) + "?bulk_download" + if (nav.base.type === "file") { + download_frame.src = fs_path_url(nav.base.path) + "?attach" + } else if (nav.base.type === "dir") { + download_frame.src = fs_path_url(nav.base.path) + "?bulk_download" } } @@ -107,40 +112,30 @@ const search = async () => { return } - if (state.base.type !== "dir") { - await fs_navigator.navigate(state.path[state.path.length-2].path) + // If we are not currently in a directory, then we navigate up to the parent + // directory + if (nav.base.type !== "dir") { + await nav.navigate_up() } view = "search" } const loading_evt = e => loading = e.detail - -// Custom CSS rules for the whole viewer. This is updated by either the -// navigation_complete event or the style_change event -$: update_css(state.path) -const update_css = path => document.documentElement.style = branding_from_path(path) - -
- +
document.documentElement.style = branding_from_path(p {#if view === "file"} fs_navigator.open_sibling(e.detail)} + on:open_sibling={e => nav.open_sibling(e.detail)} on:download={download} on:upload_picker={() => upload_widget.pick_files()} /> {:else if view === "search"} {view = "file"}} /> @@ -181,25 +174,24 @@ const update_css = path => document.documentElement.style = branding_from_path(p fs_navigator.reload()} /> - +