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

Convert multiple pages into SPA

Browse Source
This commit is contained in:
Wim Brand
2025-10-09 15:48:23 +02:00
parent c616b2da7f
commit 06d04a1abc
110 changed files with 1245 additions and 1319 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
svelte/src/filesystem/edit_window/AccessControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from "layout/Button.svelte";
import type { FSPermissions, NodeOptions } from "filesystem/FilesystemAPI";
import type { FSPermissions, NodeOptions } from "lib/FilesystemAPI";
import PermissionButton from "./PermissionButton.svelte";
export let options: NodeOptions

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

@@ -2,10 +2,38 @@ import parse from "pure-color/parse";
import rgb2hsl from "pure-color/convert/rgb2hsl";
import hsl2rgb from "pure-color/convert/hsl2rgb";
import rgb2hex from "pure-color/convert/rgb2hex";
import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI";
type Style = {
input_background: string,
input_hover_background: string,
input_text: string,
highlight_color: string,
highlight_background: string,
highlight_text_color: string,
link_color: string,
danger_color: string,
danger_text_color: string,
background_color: string,
background: string,
background_text_color: string,
background_pattern_color: string,
body_color: string,
body_background: string,
body_text_color: string,
shaded_background: string,
separator: string,
shadow_color: string,
card_color: string,
background_image: string,
background_image_size: string,
background_image_position: string,
background_image_repeat: string,
}
// Generate a branding style from a file's properties map
export const branding_from_path = path => {
let style = {}
export const branding_from_path = (path: Array<FSNode>) => {
let style = <Style>{}
for (let node of path) {
add_styles(style, node.properties)
}
@@ -15,17 +43,17 @@ export const branding_from_path = path => {
// The last style which was generated is cached, when we don't have a complete
// path to generate the style with we will use the cached style as a basis
let last_generated_style = {}
export const branding_from_node = node => {
let last_generated_style = <Style>{}
export const branding_from_node = (node: FSNode) => {
add_styles(last_generated_style, node.properties)
return gen_css(last_generated_style)
}
export const css_from_path = path => {
export const css_from_path = (path: Array<FSNode>) => {
return gen_css(branding_from_path(path))
}
const gen_css = style => {
const gen_css = (style: Style) => {
return Object.entries(style).map(([key, value]) => `--${key}:${value}`).join(';');
}
@@ -33,7 +61,7 @@ const gen_css = style => {
// existing style which is passed as the first argument. When navigating to a
// path this function is executed on every member of the path so all the styles
// get combined
const add_styles = (style, properties) => {
const add_styles = (style: Style, properties: FSNodeProperties) => {
if (!properties || !properties.branding_enabled || properties.branding_enabled !== "true") {
return
}
@@ -83,7 +111,7 @@ const add_styles = (style, properties) => {
}
}
const add_contrast = (color, amt) => {
const add_contrast = (color: string, amt: number) => {
let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
// If the lightness is less than 40 it is considered a dark colour. This
// threshold is 40 instead of 50 because overall dark text is more legible
@@ -96,20 +124,20 @@ const add_contrast = (color, amt) => {
}
// Darken and desaturate. Only used for shadows
const darken = (color, percent) => {
const darken = (color: string, percent: number) => {
let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
hsl[1] = hsl[1] * percent
hsl[2] = hsl[2] * percent
return rgb2hex(hsl2rgb(hsl)) // Convert back to hex
}
const set_alpha = (color, amt) => {
const set_alpha = (color: string, amt: number) => {
let rgb = parse(color)
rgb.push(amt)
return "rgba(" + rgb.join(", ") + ")"
}
const generate_link_color = (link_color, body_color) => {
const generate_link_color = (link_color: string, body_color: string) => {
let link = rgb2hsl(parse(link_color))
let body = rgb2hsl(parse(body_color))

2
svelte/src/filesystem/edit_window/BrandingOptions.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import ThemePresets from "./ThemePresets.svelte";
import { fs_update, fs_node_type, type FSNode, type NodeOptions, node_is_shared, type FSPermissions } from "filesystem/FilesystemAPI";
import { fs_update, fs_node_type, type FSNode, type NodeOptions, node_is_shared, type FSPermissions } from "lib/FilesystemAPI";
import CustomBanner from "filesystem/viewers/CustomBanner.svelte";
import HelpButton from "layout/HelpButton.svelte";
import FilePicker from "filesystem/filemanager/FilePicker.svelte";

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { fs_rename, fs_update, type FSNode, type NodeOptions } from "filesystem/FilesystemAPI";
import { fs_rename, fs_update, type FSNode, type NodeOptions } from "lib/FilesystemAPI";
import Modal from "util/Modal.svelte";
import BrandingOptions from "./BrandingOptions.svelte";
import { branding_from_node } from "./Branding";
@@ -39,18 +39,9 @@ export const edit = (f: FSNode, oae = false, open_tab = "") => {
}
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
}
options.link_permissions = file.link_permissions
options.user_permissions = file.user_permissions
options.password_permissions = file.password_permissions
branding_enabled = options.branding_enabled === "true"
if (branding_enabled) {
@@ -122,7 +113,7 @@ const save = async (keep_editing = false) => {
<i class="icon">share</i>
Sharing
</button>
{#if options.shared && $nav.permissions.owner}
{#if $nav.permissions.owner}
<button class:button_highlight={tab === "access"} on:click={() => tab = "access"}>
<i class="icon">key</i>
Access control

2
svelte/src/filesystem/edit_window/FileOptions.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from "layout/Button.svelte";
import { fs_delete_all, type FSNode } from "filesystem/FilesystemAPI";
import { fs_delete_all, type FSNode } from "lib/FilesystemAPI";
import PathLink from "filesystem/util/PathLink.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";

2
svelte/src/filesystem/edit_window/PermissionButton.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import ToggleButton from "layout/ToggleButton.svelte";
import type { FSPermissions } from "filesystem/FilesystemAPI";
import type { FSPermissions } from "lib/FilesystemAPI";
export let permissions = <FSPermissions>{}
</script>

50
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -1,11 +1,10 @@
<script lang="ts">
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, NodeOptions } from "filesystem/FilesystemAPI";
import { node_is_shared, type FSNode, type NodeOptions } from "lib/FilesystemAPI";
import AccessControl from "./AccessControl.svelte";
let dispatch = createEventDispatcher()
export let file: FSNode = {} as FSNode
export let options: NodeOptions
@@ -14,8 +13,8 @@ let preview_area: HTMLDivElement
$: share_link = window.location.protocol+"//"+window.location.host+"/d/"+file.id
$: embed_iframe(file, options)
let embed_iframe = (file: FSNode, options: NodeOptions) => {
if (!options.shared) {
const embed_iframe = (file: FSNode, options: NodeOptions) => {
if (!node_is_shared(file)) {
example = false
embed_html = "File is not shared, can't generate embed code"
return
@@ -24,14 +23,14 @@ let embed_iframe = (file: FSNode, options: NodeOptions) => {
let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` +
`src="${url}" ` +
`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px; "` +
`style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px;" ` +
`allowfullscreen` +
`></iframe>`
}
let example = false
const toggle_example = () => {
if (options.shared) {
if (node_is_shared(file)) {
example = !example
if (example) {
preview_area.innerHTML = embed_html
@@ -41,15 +40,6 @@ const toggle_example = () => {
}
}
const update_shared = () => {
// If sharing is enabled we automatically save the file so the user can copy
// 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 (options.shared && !file.id) {
dispatch("save")
}
}
</script>
<fieldset>
@@ -64,34 +54,14 @@ const update_shared = () => {
</div>
{/if}
<div>
<input
form="edit_form"
bind:checked={options.shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<div class="link_grid">
{#if options.shared}
<span>Public link: <a href={share_link}>{share_link}</a></span>
<a href={share_link}>{share_link}</a>
<CopyButton text={share_link}>Copy</CopyButton>
{/if}
</div>
<p>
When a file or directory is shared it can be accessed through a
unique link. You can get the URL with the 'Copy link' button on
the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also
accessible from the link.
</p>
</fieldset>
<AccessControl options={options}/>
<fieldset>
<legend>Embedding</legend>
<p>
@@ -108,7 +78,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={!options.shared}>
<button on:click={toggle_example} class:button_highlight={example} disabled={!node_is_shared(file)}>
<i class="icon">visibility</i> Show example
</button>
</div>

2
svelte/src/filesystem/edit_window/ThemePresets.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import type { FSNodeProperties } from "filesystem/FilesystemAPI";
import type { FSNodeProperties } from "lib/FilesystemAPI";
export let properties: FSNodeProperties = {} as FSNodeProperties