pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add file tree to menu

Browse Source
This commit is contained in:
Wim Brand
2026-01-29 23:41:30 +01:00
parent 2331d2b969
commit 5ce6b0c417
13 changed files with 199 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/filesystem/FSNavigator.ts
View File

@@ -273,3 +273,5 @@ const sort_children = (children: FSNode[], field: string, asc: boolean) => {
} }
}) })
} }
export let global_navigator = new FSNavigator(true)

4
svelte/src/filesystem/Filesystem.svelte
View File

@@ -7,7 +7,7 @@ import DetailsWindow from "./DetailsWindow.svelte";
import FilePreview from "./viewers/FilePreview.svelte"; import FilePreview from "./viewers/FilePreview.svelte";
import FSUploadWidget from "./upload_widget/FSUploadWidget.svelte"; import FSUploadWidget from "./upload_widget/FSUploadWidget.svelte";
import { type FSPath } from "lib/FilesystemAPI.svelte"; import { type FSPath } from "lib/FilesystemAPI.svelte";
import { FSNavigator } from "./FSNavigator" import { global_navigator } from "./FSNavigator"
import { css_from_path } from "filesystem/edit_window/Branding"; import { css_from_path } from "filesystem/edit_window/Branding";
import AffiliatePrompt from "user_home/AffiliatePrompt.svelte"; import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
import { current_page_store } from "wrap/RouterStore"; import { current_page_store } from "wrap/RouterStore";
@@ -20,7 +20,7 @@ let edit_window: EditWindow = $state()
let edit_visible = $state(false) let edit_visible = $state(false)
let details_window: DetailsWindow = $state() let details_window: DetailsWindow = $state()
const nav = $state(new FSNavigator(true)) const nav = global_navigator
onMount(() => { onMount(() => {
if ((window as any).intial_node !== undefined) { if ((window as any).intial_node !== undefined) {

6
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -113,9 +113,9 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
const add_contrast = (color: string, amt: number) => { const add_contrast = (color: string, amt: number) => {
let hsl = rgb2hsl(parse(color)) // Convert hex to hsl let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
// If the lightness is less than 40 it is considered a dark colour. This // If the lightness is less than 30 it is considered a dark colour. This
// threshold is 40 instead of 50 because overall dark text is more legible // threshold is 30 instead of 50 because overall dark text is more legible
if (hsl[2] < 40) { if (hsl[2] < 30) {
hsl[2] = hsl[2] + amt // Dark color, add lightness hsl[2] = hsl[2] + amt // Dark color, add lightness
} else { } else {
hsl[2] = hsl[2] - amt // Light color, remove lightness hsl[2] = hsl[2] - amt // Light color, remove lightness

12
svelte/src/filesystem/edit_window/EditWindow.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fs_rename, fs_update, type FSNode, type NodeOptions } from "lib/FilesystemAPI.svelte"; import { fs_rename, fs_update, type FSNode, type FSPermissions, type NodeOptions } from "lib/FilesystemAPI.svelte";
import Modal from "util/Modal.svelte"; import Modal from "util/Modal.svelte";
import BrandingOptions from "./BrandingOptions.svelte"; import BrandingOptions from "./BrandingOptions.svelte";
import { branding_from_props } from "./Branding"; import { branding_from_props } from "./Branding";
@@ -22,6 +22,10 @@ let {
visible: boolean; visible: boolean;
} = $props(); } = $props();
const default_permissions: FSPermissions = {
owner: false, read: false, write: false, delete: false
}
// Open the edit window. Argument 1 is the file to edit, 2 is whether the file // Open the edit window. Argument 1 is the file to edit, 2 is whether the file
// should be opened after the user finishes editing and 3 is the default tab // should be opened after the user finishes editing and 3 is the default tab
// that should be open when the window shows // that should be open when the window shows
@@ -45,9 +49,9 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
} }
options.custom_domain_name = file.custom_domain_name options.custom_domain_name = file.custom_domain_name
options.link_permissions = file.link_permissions options.link_permissions = file.link_permissions === undefined ? default_permissions : file.link_permissions
options.user_permissions = file.user_permissions options.user_permissions = file.user_permissions === undefined ? {} : file.user_permissions
options.password_permissions = file.password_permissions options.password_permissions = file.password_permissions === undefined ? {} : file.password_permissions
branding_enabled = options.branding_enabled === "true" branding_enabled = options.branding_enabled === "true"
if (branding_enabled) { if (branding_enabled) {

1
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -112,7 +112,6 @@ td {
color: var(--highlight_text_color); color: var(--highlight_text_color);
} }
td { td {
padding: 2px;
vertical-align: middle; vertical-align: middle;
} }
.node_icon { .node_icon {

22
svelte/src/filesystem/viewers/Audio.svelte
View File

@@ -3,7 +3,6 @@ import { onMount } from 'svelte'
import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte" import { fs_path_url, fs_encode_path, fs_node_icon, FSNode } from "lib/FilesystemAPI.svelte"
import TextBlock from "layout/TextBlock.svelte" import TextBlock from "layout/TextBlock.svelte"
import type { FSNavigator } from 'filesystem/FSNavigator'; import type { FSNavigator } from 'filesystem/FSNavigator';
import { branding_from_props } from 'filesystem/edit_window/Branding';
let { nav, children }: { let { nav, children }: {
nav: FSNavigator; nav: FSNavigator;
@@ -28,6 +27,7 @@ export const seek = (delta: number) => {
} }
} }
var background_div: HTMLDivElement
export const update = async () => { export const update = async () => {
if (media_session) { if (media_session) {
navigator.mediaSession.metadata = new MediaMetadata({ navigator.mediaSession.metadata = new MediaMetadata({
@@ -41,12 +41,8 @@ export const update = async () => {
for(const sib of siblings) { for(const sib of siblings) {
if (sib.name === "cover.jpg") { if (sib.name === "cover.jpg") {
console.log("found sibling", sib) console.debug("Found album cover image", sib)
if (sib.properties === undefined) { background_div.style.backgroundImage = `url("/api/filesystem/${sib.path}")`
sib.properties = {}
}
sib.properties.brand_background_image = sib.path
document.documentElement.style = branding_from_props(sib.properties)
break break
} }
} }
@@ -66,7 +62,8 @@ onMount(() => {
{@render children?.()} {@render children?.()}
<TextBlock width="1000px"> <div bind:this={background_div} class="background_div">
<TextBlock width="1000px">
<audio <audio
bind:this={player} bind:this={player}
class="player" class="player"
@@ -104,9 +101,16 @@ onMount(() => {
<br/> <br/>
</a> </a>
{/each} {/each}
</TextBlock> </TextBlock>
</div>
<style> <style>
.background_div {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 100%;
}
.player { .player {
width: 100%; width: 100%;
} }

4
svelte/src/lib/FilesystemAPI.svelte.ts
View File

@@ -59,6 +59,10 @@ export class FSNode {
(this.password_permissions !== undefined && Object.keys(this.password_permissions).length > 0) (this.password_permissions !== undefined && Object.keys(this.password_permissions).length > 0)
} }
is_hidden = (): boolean => {
return this.name.startsWith(".")
}
download = () => { download = () => {
const a = document.createElement("a") const a = document.createElement("a")

7
svelte/src/lib/HighlightCurrentPage.ts
View File

@@ -1,9 +1,10 @@
import { global_navigator } from "filesystem/FSNavigator"
import { current_page_store, type Tab } from "wrap/RouterStore" import { current_page_store, type Tab } from "wrap/RouterStore"
export const highlight_current_page = (node: HTMLAnchorElement) => { export const highlight_current_page = (node: HTMLAnchorElement) => {
const set_highlight = () => { const set_highlight = () => {
const currentpath = window.location.pathname const currentpath = window.location.pathname + "/"
const hrefpath = URL.parse(node.href).pathname const hrefpath = URL.parse(node.href).pathname + "/"
if ( if (
currentpath === hrefpath || currentpath === hrefpath ||
(hrefpath !== "" && hrefpath !== "/" && currentpath.startsWith(hrefpath)) (hrefpath !== "" && hrefpath !== "/" && currentpath.startsWith(hrefpath))
@@ -19,9 +20,11 @@ export const highlight_current_page = (node: HTMLAnchorElement) => {
// Set up a listener with the page router to catch navigation events // Set up a listener with the page router to catch navigation events
const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() }) const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() })
const unsub2 = global_navigator.subscribe(() => { set_highlight() })
return { return {
destroy() { destroy() {
unsub() unsub()
unsub2()
} }
} }
} }

212
svelte/src/user_home/dashboard/UploadLib.svelte
View File

@@ -1,212 +0,0 @@
<script>
import { preventDefault } from 'svelte/legacy';
import UploadProgressBar from "home_page/UploadProgressBar.svelte"
import { tick } from "svelte"
import UploadStats from "home_page/UploadStats.svelte";
export const pick_files = () => {
file_input_field.click()
}
// === UPLOAD LOGIC ===
let file_input_field = $state()
const file_input_change = (event) => {
// Start uploading the files async
upload_files(event.target.files)
// This resets the file input field
file_input_field.nodeValue = ""
}
const paste = (e) => {
if (e.clipboardData.files[0]) {
e.preventDefault();
e.stopPropagation();
upload_files(e.clipboardData.files)
}
}
let active_uploads = 0
let upload_queue = $state([])
let status = $state("idle") // idle, uploading, finished
let upload_stats = $state()
export const upload_files = async (files) => {
if (files.length === 0) {
return
}
// Add files to the queue
for (let i = 0; i < files.length; i++) {
if (files[i].type === "" && files[i].size === 0) {
continue
}
upload_queue.push({
file: files[i],
name: files[i].name,
status: "queued",
component: null,
id: "",
total_size: files[i].size,
loaded_size: 0,
on_finished: finish_upload,
})
}
// Reassign array and wait for tick to complete. After the tick is completed
// each upload progress bar will have bound itself to its array item
upload_queue = upload_queue
await tick()
start_upload()
}
const start_upload = () => {
let finished_count = 0
for (let i = 0; i < upload_queue.length && active_uploads < 3; i++) {
if (upload_queue[i].status == "queued") {
active_uploads++
upload_queue[i].component.start()
} else if (
upload_queue[i].status == "finished" ||
upload_queue[i].status == "error"
) {
finished_count++
}
}
if (active_uploads === 0 && finished_count != 0) {
status = "finished"
upload_stats.finish()
} else {
status = "uploading"
upload_stats.start()
}
}
const finish_upload = (file) => {
active_uploads--
start_upload()
}
const leave_confirmation = e => {
if (status === "uploading") {
e.preventDefault()
e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
return e.returnValue
} else {
return null
}
}
// === SHARING BUTTONS ===
let share_link = ""
let input_album_name = $state("")
let btn_create_list
const create_list = async (title, anonymous) => {
let files = upload_queue.reduce(
(acc, curr) => {
if (curr.status === "finished") {
acc.push({"id": curr.id})
}
return acc
},
[],
)
const resp = await fetch(
window.api_endpoint+"/list",
{
method: "POST",
headers: { "Content-Type": "application/json; charset=UTF-8" },
body: JSON.stringify({
"title": title,
"anonymous": anonymous,
"files": files
})
}
)
if(!resp.ok) {
return Promise.reject("HTTP error: "+resp.status)
}
return await resp.json()
}
const share_mail = () => window.open("mailto:please@set.address?subject=File%20on%20pixeldrain&body=" + share_link)
const share_twitter = () => window.open("https://twitter.com/share?url=" + share_link)
const share_facebook = () => window.open('https://www.facebook.com/sharer.php?u=' + share_link)
const share_reddit = () => window.open('https://www.reddit.com/submit?url=' + share_link)
const share_tumblr = () => window.open('https://www.tumblr.com/share/link?url=' + share_link)
const create_album = () => {
if (!input_album_name) {
return
}
create_list(input_album_name, false).then(resp => {
window.location = '/l/' + resp.id
}).catch(err => {
alert("Failed to create list. Server says this:\n"+err)
})
}
const keydown = (e) => {
if (e.ctrlKey || e.altKey || e.metaKey) {
return // prevent custom shortcuts from interfering with system shortcuts
}
if (document.activeElement.type && document.activeElement.type === "text") {
return // Prevent shortcuts from interfering with input fields
}
switch (e.key) {
case "u": file_input_field.click(); break
case "l": btn_create_list.click(); break
case "e": share_mail(); break
case "w": share_twitter(); break
case "f": share_facebook(); break
case "r": share_reddit(); break
case "m": share_tumblr(); break
}
}
</script>
<svelte:window onpaste={paste} onkeydown={keydown} onbeforeunload={leave_confirmation} />
<input bind:this={file_input_field} onchange={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
<UploadStats bind:this={upload_stats} upload_queue={upload_queue}/>
{#if upload_queue.length > 1}
<div class="album_widget">
Create an album<br/>
<form class="album_name_form" onsubmit={preventDefault(create_album)}>
<div>Name:</div>
<input bind:value={input_album_name} type="text" placeholder="My album"/>
<button type="submit" disabled={status !== "finished"}>
<i class="icon">create_new_folder</i> Create
</button>
</form>
</div>
{/if}
{#each upload_queue as file}
<UploadProgressBar bind:this={file.component} job={file}></UploadProgressBar>
{/each}
<style>
.album_widget {
display: block;
border-bottom: 1px solid var(--separator);
}
.album_name_form {
display: inline-flex;
flex-direction: row;
align-items: center;
}
.hide {
display: none;
}
</style>

8
svelte/src/wrap/Bookmarks.svelte
View File

@@ -19,9 +19,8 @@ const toggle_edit = () => {
<i class="icon">edit</i> <i class="icon">edit</i>
</button> </button>
</div> </div>
{/if}
{#each $bookmarks_store as bookmark} {#each $bookmarks_store as bookmark}
<div class="row"> <div class="row">
<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page> <a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
<i class="icon">{bookmark.icon}</i> <i class="icon">{bookmark.icon}</i>
@@ -33,7 +32,10 @@ const toggle_edit = () => {
</button> </button>
{/if} {/if}
</div> </div>
{/each} {/each}
<div class="title"></div>
{/if}
<style> <style>
.title { .title {

13
svelte/src/wrap/MainMenu.svelte
View File

@@ -11,6 +11,7 @@ import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading"; import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte"; import Spinner from "util/Spinner.svelte";
import { get_user } from "lib/PixeldrainAPI"; import { get_user } from "lib/PixeldrainAPI";
import Tree from "./Tree.svelte";
let menu_collapsed = false let menu_collapsed = false
@@ -34,7 +35,7 @@ onMount(async () => {
<div class="nav_container"> <div class="nav_container">
<div class="scroll_container"> <div class="scroll_container">
<nav class="nav"> <nav class="nav" class:collapse={menu_collapsed}>
<button class="button" onclick={toggle_menu}> <button class="button" onclick={toggle_menu}>
<i class="icon">menu</i> <i class="icon">menu</i>
<span class:hide={menu_collapsed}>Collapse menu</span> <span class:hide={menu_collapsed}>Collapse menu</span>
@@ -110,6 +111,10 @@ onMount(async () => {
<div class="separator"></div> <div class="separator"></div>
<Bookmarks menu_collapsed={menu_collapsed}/> <Bookmarks menu_collapsed={menu_collapsed}/>
{#if !menu_collapsed}
<Tree/>
{/if}
</nav> </nav>
</div> </div>
</div> </div>
@@ -154,8 +159,14 @@ onMount(async () => {
.nav { .nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 15em;
min-width: 10em;
max-width: 15em; max-width: 15em;
} }
.nav.collapse {
width: unset;
min-width: unset;
}
.nav > .button { .nav > .button {
background: none; background: none;
box-shadow: none; box-shadow: none;

1
svelte/src/wrap/Router.svelte
View File

@@ -37,7 +37,6 @@ let pages: Tab[] = [
title: "Filesystem", title: "Filesystem",
component: Filesystem, component: Filesystem,
footer: false, footer: false,
login: true,
}, { }, {
path: "/admin", path: "/admin",
prefix: "/admin/", prefix: "/admin/",

98
svelte/src/wrap/Tree.svelte Normal file
View File

@@ -0,0 +1,98 @@
<script lang="ts">
import { global_navigator } from "filesystem/FSNavigator";
import { fs_encode_path, FSNode } from "lib/FilesystemAPI.svelte";
import { onMount } from "svelte";
let siblings: FSNode[] = $state([])
onMount(() => {
return global_navigator.subscribe(async () => {
siblings = await global_navigator.get_siblings()
})
})
</script>
{#if $global_navigator.path.length > 1}
<div class="title">
<div>Parent directories</div>
<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
<i class="icon">north</i>
</button>
</div>
{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node}
{#if node.type === "dir"}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}">
{#if node.is_shared()}
<i class="icon">folder_shared</i>
{:else}
<i class="icon">folder</i>
{/if}
<span>{node.name}</span>
</a>
</div>
{/if}
{/each}
<div class="title"></div>
{/if}
{#if siblings.length !== 0}
<div class="title">
<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
<i class="icon">west</i>
</button>
<div>Siblings</div>
<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
<i class="icon">east</i>
</button>
</div>
{#each siblings as node}
{#if !node.is_hidden()}
<div class="row">
<a class="button" href="/d{fs_encode_path(node.path)}">
{#if node.type === "dir"}
<i class="icon">folder</i>
{:else}
<i class="icon">image</i>
{/if}
<span>{node.name}</span>
</a>
</div>
{/if}
{/each}
<div class="title"></div>
{/if}
<style>
.title {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid var(--separator);
}
.title > div {
flex: 1 1 auto;
text-align: center;
margin: 3px;
}
.row {
display: flex;
flex-direction: row;
}
.row>a {
flex: 1 1 auto;
}
.row>a>span {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.button {
background: none;
box-shadow: none;
}
</style>