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

Split filesystem up in components

Browse Source 
Also thumbnails work now
This commit is contained in:
Fornax
2023-05-17 15:34:56 +02:00
parent c4cd2e1ee5
commit 277637511c
18 changed files with 711 additions and 595 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
svelte/src/filesystem/Breadcrumbs.svelte Normal file
View File

@@ -0,0 +1,24 @@
<script>
export let state = {}
export let navigator
</script>
{#each state.path as node, i (node.path)}
<a
href={state.path_root+node.path}
class="breadcrumb button"
class:button_highlight={state.base_index === i}
on:click|preventDefault={() => {navigator.navigate(node.path, true)}}>
{node.name}
</a>
{/each}
<style>
.breadcrumb {
min-width: 1em;
text-align: center;
padding: 6px 8px;
margin: 4px;
word-break: break-all;
}
</style>

50
svelte/src/filesystem/DetailsWindow.svelte Normal file
View File

@@ -0,0 +1,50 @@
<script>
import { formatDataVolume, formatDate } from "../util/Formatting.svelte";
import Modal from "../util/Modal.svelte";
import { fs_path_url } from "./FilesystemUtil";
export let state
export let visible = false
export const toggle = () => {visible = !visible}
</script>
<Modal bind:visible={visible} title="Details" width="800px" role="prompt">
<table style="min-width: 100%;">
<tr><td colspan="2"><h3>Node details</h3></td></tr>
<tr><td>Name</td><td>{state.base.name}</td></tr>
<tr><td>Path</td><td>{state.base.path}</td></tr>
<tr><td>Type</td><td>{state.base.type}</td></tr>
<tr><td>Date created</td><td>{formatDate(state.base.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(state.base.date_modified, true, true, true)}</td></tr>
<tr><td>Mode</td><td>{state.base.mode_string}</td></tr>
{#if state.base.id}
<tr>
<td>Public ID</td>
<td><a href="/d/{state.base.id}">{state.base.id}</a></td>
</tr>
{/if}
{#if state.base.type === "file"}
<tr><td>File type</td><td>{state.base.file_type}</td></tr>
<tr><td>File size</td><td>{formatDataVolume(state.base.file_size)}</td></tr>
<tr><td>SHA256 sum</td><td>{state.base.sha256_sum}</td></tr>
{/if}
<tr>
<td>Stat</td>
<td>
<a href="{fs_path_url(state.root.id, state.base.path)}?stat">Open stat API</a>
</td>
</tr>
<tr>
<td>Direct link</td>
<td>
<a href="{fs_path_url(state.root.id, state.base.path)}">Open direct link</a>
</td>
</tr>
<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
<tr><td>ID</td><td>{state.root.id}</td></tr>
<tr><td>Name</td><td>{state.root.name}</td></tr>
<tr><td>Date created</td><td>{formatDate(state.root.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(state.root.date_modified, true, true, true)}</td></tr>
</table>
</Modal>

18
svelte/src/filesystem/filemanager/EditWindow.svelte → svelte/src/filesystem/EditWindow.svelte
View File

@@ -1,6 +1,6 @@
<script>
import { fs_rename, fs_update } from "../FilesystemAPI";
import Modal from "../../util/Modal.svelte";
import { fs_rename, fs_update } from "./FilesystemAPI";
import Modal from "../util/Modal.svelte";
import { createEventDispatcher } from "svelte";
let dispatch = createEventDispatcher()
@@ -13,7 +13,7 @@ let file = {
mode_octal: "",
};
let window;
export let visible
export const edit = (f) => {
console.log("Editing file", f)
file = f
@@ -23,7 +23,7 @@ export const edit = (f) => {
read_password = file.read_password ? file.read_password : ""
write_password = file.write_password ? file.write_password : ""
mode = file.mode_octal
window.show()
visible = true
}
let file_name = ""
@@ -50,6 +50,7 @@ const save = async () => {
console.log("Moving", file.path, "to", parent+file_name)
await fs_rename(bucket, file.path, parent+file_name)
file.path = parent+file_name
}
} catch (err) {
console.error(err)
@@ -57,14 +58,13 @@ const save = async () => {
return
}
dispatch("reload")
window.hide()
}
dispatch("navigate", {path: file.path, push_history: false})
visible = false
}
</script>
<Modal bind:this={window} title="Edit" width="700px">
<Modal bind:visible={visible} title="Edit" width="700px">
<form on:submit|preventDefault={save} style="display: flex; padding: 8px;">
<div class="form">
<label for="file_name">Name:</label>

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

@@ -1,52 +1,31 @@
<script>
import { onMount } from 'svelte';
import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
import { fs_get_file_url, fs_get_node, fs_split_path } from './FilesystemAPI.js'
import Sharebar from './Sharebar.svelte'
import Modal from '../util/Modal.svelte'
import FileManager from './filemanager/FileManager.svelte';
import Audio from './viewers/Audio.svelte';
import Image from './viewers/Image.svelte';
import Video from './viewers/Video.svelte';
import PDF from './viewers/PDF.svelte';
import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
import LoadingIndicator from '../util/LoadingIndicator.svelte';
import EditWindow from './filemanager/EditWindow.svelte';
import EditWindow from './EditWindow.svelte';
import { fs_file_url } from './FilesystemUtil';
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';
let toolbar_visible = (window.innerWidth > 600)
let toolbar_toggle = () => {
toolbar_visible = !toolbar_visible
if (!toolbar_visible) {
sharebar_visible = false
}
}
let sharebar
let sharebar_visible = false
$: {
if (typeof(sharebar) !== "undefined") {
sharebar.setVisible(sharebar_visible)
}
}
let details
let download_frame
let details_visible = false
let edit_window
let download_frame
let edit_visible = false
// State
let navigator
let state = {
path: window.initial_node.path,
base: window.initial_node.path[window.initial_node.base_index],
base_index: window.initial_node.base_index,
root: window.initial_node.path[0],
children: window.initial_node.children,
permissions: {
create: window.initial_node.permissions.create,
read: window.initial_node.permissions.read,
update: window.initial_node.permissions.update,
delete: window.initial_node.permissions.delete,
},
permissions: window.initial_node.permissions,
// Shortcuts
base: window.initial_node.path[window.initial_node.base_index],
root: window.initial_node.path[0],
// Passwords for accessing this bucket. Passwords are not always required
// but sometimes they are
@@ -70,194 +49,7 @@ let state = {
shuffle: false,
}
// Tallys
$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
const sort_children = children => {
children.sort((a, b) => {
// Sort directories before files
if (a.type !== b.type) {
return a.type === "dir" ? -1 : 1
}
return a.name.localeCompare(b.name)
})
}
const navigate = async (path, push_history) => {
state.loading = true
console.debug("Navigating to path", path, push_history)
try {
let resp = await fs_get_node(state.root.id, path)
open_node(resp, push_history)
} catch (err) {
let errj = JSON.parse(err)
if (errj.value === "path_not_found") {
if (path !== "/" && path !== "") {
console.debug("Path", path, "was not found, trying to navigate to parent")
navigate(fs_split_path(path).parent, push_history)
}
} else {
console.error(err)
alert("Error: "+err)
}
} finally {
state.loading = false
}
}
const reload = () => { navigate(state.base.path, false) }
const open_node = (node, push_history) => {
// We need to properly URL encode the file paths so they don't cause
// issues.. but we also want the slashes to stay clean. So here we encode
// the whole path, then decode the slashes
let cleanup_func = p => p.path_uri = encodeURIComponent(p.path).replaceAll("%2F", "/")
node.path.forEach(cleanup_func)
node.children.forEach(cleanup_func)
// Update window title and navigation history
window.document.title = node.path[node.base_index].name+" ~ pixeldrain"
if (push_history) {
window.history.pushState(
{}, window.document.title,
"/d/"+node.path[0].id+node.path[node.base_index].path,
)
}
// If the new node is a child of the previous node we save the parent's
// children array
if (node.path.length > 0 && node.path[node.path.length-1].path === state.base.path) {
console.debug("Current parent path and new node path match. Saving siblings")
state.siblings_path = node.path[node.path.length-1].path
state.siblings = state.children
}
// Sort directory children
sort_children(node.children)
// Update shared state
state.path = node.path
state.base = node.path[node.base_index]
state.base_index = node.base_index
state.root = node.path[0]
state.children = node.children
state.permissions = node.permissions
// Update the viewer area with the right viewer type
if (state.base.type === "bucket" || state.base.type === "dir") {
state.viewer_type = "dir"
} else if (state.base.file_type.startsWith("image")) {
state.viewer_type = "image"
} else if (
state.base.file_type.startsWith("audio") ||
state.base.file_type === "application/ogg" ||
state.base.name.endsWith(".mp3")
) {
state.viewer_type = "audio"
} else if (
state.base.file_type.startsWith("video") ||
state.base.file_type === "application/matroska" ||
state.base.file_type === "application/x-matroska"
) {
state.viewer_type = "video"
} else if (
state.base.file_type === "application/pdf" ||
state.base.file_type === "application/x-pdf"
) {
state.viewer_type = "pdf"
} else {
state.viewer_type = ""
}
console.debug("Opened node", node)
// Remove spinner
state.loading = false
}
onMount(() => open_node(window.initial_node, false))
// Opens a sibling of the currently open file. The offset is relative to the
// file which is currently open. Give a positive number to move forward and a
// negative number to move backward
const open_sibling = async offset => {
if (state.path.length <= 1) {
return
}
state.loading = true
// Check if we already have siblings cached
if (state.siblings != null && state.siblings_path == state.path[state.path.length - 2].path) {
console.debug("Using cached siblings")
} else {
console.debug("Cached siblings not available. Fetching new")
try {
let resp = await fs_get_node(state.root.id, state.path[state.path.length - 2].path)
// Sort directory children to make sure the order is consistent
sort_children(resp.children)
// Save new siblings in global state
state.siblings_path = state.path[state.path.length - 2].path
state.siblings = resp.children
} catch (err) {
console.error(err)
alert(err)
state.loading = false
return
}
}
let next_sibling = null
if (state.shuffle) {
// Shuffle is on, pick a random sibling
for (let i = 0; i < 10; i++) {
next_sibling = state.siblings[Math.floor(Math.random()*state.siblings.length)]
// If we selected the same sibling we already have open we try
// again. Else we break the loop
if (next_sibling.name !== state.base.name) {
break
}
}
} else {
// Loop over the parent node's children to find the one which is
// currently open. Then, if possible, we save the one which comes before
// or after it
for (let i = 0; i < state.siblings.length; i++) {
if (
state.siblings[i].name === state.base.name &&
i+offset >= 0 && // Prevent underflow
i+offset < state.siblings.length // Prevent overflow
) {
next_sibling = state.siblings[i+offset]
break
}
}
}
// If we found a sibling we open it
if (next_sibling !== null) {
console.debug("Opening sibling", next_sibling)
navigate(next_sibling.path, true)
} else {
console.debug("No siblings found")
state.loading = false
}
}
// Capture browser back and forward navigation buttons
window.onpopstate = (e) => {
// Get the part of the URL after the bucket ID and navigate to it
let path = document.location.pathname.replace("/d/"+state.root.id, "")
navigate(decodeURIComponent(path), false)
};
onMount(() => navigator.open_node(window.initial_node, false))
const keydown = e => {
if (e.ctrlKey || e.altKey || e.metaKey) {
@@ -268,11 +60,15 @@ const keydown = e => {
}
switch (e.key) {
case "Escape":
hide();
break;
case "i":
details.toggle()
details_visible = !details_visible
break;
case "e":
if (edit_visible) {
edit_visible = false
} else {
edit_window.edit(state.base)
}
break;
case "s":
download()
@@ -280,150 +76,83 @@ const keydown = e => {
case "r":
state.shuffle = !state.shuffle
break;
case "a", "ArrowLeft":
open_sibling(-1)
case "a":
case "ArrowLeft":
navigator.open_sibling(-1)
break;
case "d", "ArrowRight":
open_sibling(1)
case "d":
case "ArrowRight":
navigator.open_sibling(1)
break;
}
};
const download = () => {
download_frame.src = fs_get_file_url(state.root.id, state.base.path) + "?attach"
download_frame.src = fs_file_url(state.root.id, state.base.path) + "?attach"
}
const share = () => {
}
</script>
<svelte:window on:keydown={keydown} />
<LoadingIndicator loading={state.loading}/>
<Navigator bind:this={navigator} bind:state/>
<div class="file_viewer">
<div class="file_viewer_headerbar">
<button on:click={toolbar_toggle} class="button_toggle_toolbar round" class:button_highlight={toolbar_visible}>
<div class="headerbar">
<button
on:click={() => toolbar_visible = !toolbar_visible}
class="button_toggle_toolbar round"
class:button_highlight={toolbar_visible}
>
<i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home round">
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"></PixeldrainLogo>
<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 0.2em 0 0; color: currentColor;"/>
</a>
<div class="file_viewer_headerbar_title">
{#each state.path as node, i}
<a
href={state.path_root+node.path}
class="breadcrumb button"
class:button_highlight={state.base_index === i}
on:click|preventDefault={() => {navigate(node.path, true)}}>
{node.name}
</a>
{/each}
<div class="breadcrumbs">
<Breadcrumbs state={state} navigator={navigator}/>
</div>
</div>
<div class="list_navigator"></div>
<div class="file_viewer_window">
<div class="toolbar" class:toolbar_visible>
{#if state.base.type === "file"}
<div class="toolbar_label">Size</div>
<div class="toolbar_statistic">{formatDataVolume(state.base.file_size, 3)}</div>
{:else if state.base.type === "dir" || state.base.type === "bucket"}
<div class="toolbar_label">Directories</div>
<div class="toolbar_statistic">{formatThousands(total_directories, 3)}</div>
<div class="toolbar_label">Files</div>
<div class="toolbar_statistic">{formatThousands(total_files, 3)}</div>
<div class="toolbar_label">Total size</div>
<div class="toolbar_statistic">{formatDataVolume(total_file_size, 3)}</div>
{/if}
<div class="separator"></div>
<div class="file_preview">
<Toolbar
visible={toolbar_visible}
navigator={navigator}
state={state}
bind:details_visible={details_visible}
edit_window={edit_window}
bind:edit_visible={edit_visible}
on:download={download}
/>
<div class="button_row">
<button on:click={() => {open_sibling(-1)}}>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
<i class="icon">shuffle</i>
</button>
<button on:click={() => {open_sibling(1)}}>
<i class="icon">skip_next</i>
</button>
</div>
{#if state.base.type === "file"}
<button on:click={download} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={details.toggle} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
{#if state.base.path !== "/"}
<button on:click={() => edit_window.edit(state.base)} class="toolbar_button">
<i class="icon">edit</i> <u>E</u>dit
</button>
{/if}
</div>
<Sharebar bind:this={sharebar}></Sharebar>
<div class="file_viewer_file_preview checkers" class:toolbar_visible>
{#if state.viewer_type === "dir"}
<FileManager state={state} on:navigate={e => {navigate(e.detail, true)}} on:loading={e => {state.loading = e.detail}}></FileManager>
{:else if state.viewer_type === "audio"}
<Audio state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Audio>
{:else if state.viewer_type === "image"}
<Image state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Image>
{:else if state.viewer_type === "video"}
<Video state={state} on:open_sibling={e => {open_sibling(e.detail)}}></Video>
{:else if state.viewer_type === "pdf"}
<PDF state={state}></PDF>
{/if}
</div>
<FilePreview
navigator={navigator}
state={state}
toolbar_visible={toolbar_visible}
edit_window={edit_window}
on:loading={e => {state.loading = e.detail}}
/>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
<iframe bind:this={download_frame} title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
<iframe
bind:this={download_frame}
title="Frame for downloading files"
style="display: none; width: 1px; height: 1px;">
</iframe>
<Modal bind:this={details} title="Details" width="800px" role="prompt">
<table style="min-width: 100%;">
<tr><td colspan="2"><h3>Node details</h3></td></tr>
<tr><td>Name</td><td>{state.base.name}</td></tr>
<tr><td>Path</td><td>{state.base.path}</td></tr>
<tr><td>Type</td><td>{state.base.type}</td></tr>
<tr><td>Date created</td><td>{formatDate(state.base.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(state.base.date_modified, true, true, true)}</td></tr>
<tr><td>Mode</td><td>{state.base.mode_string}</td></tr>
{#if state.base.id}
<tr>
<td>Public ID</td>
<td><a href="/d/{state.base.id}">{state.base.id}</a></td>
</tr>
{/if}
{#if state.base.type === "file"}
<tr><td>File type</td><td>{state.base.file_type}</td></tr>
<tr><td>File size</td><td>{formatDataVolume(state.base.file_size)}</td></tr>
<tr><td>SHA256 sum</td><td>{state.base.sha256_sum}</td></tr>
{/if}
<DetailsWindow
state={state}
bind:visible={details_visible}
/>
<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
<tr><td>ID</td><td>{state.root.id}</td></tr>
<tr><td>Name</td><td>{state.root.name}</td></tr>
<tr><td>Date created</td><td>{formatDate(state.root.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(state.root.date_modified, true, true, true)}</td></tr>
</table>
</Modal>
<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
<EditWindow
bind:this={edit_window}
bind:visible={edit_visible}
bucket={state.root.id}
on:navigate={e => navigator.navigate(e.path, e.push_history)}
/>
</div>
<style>
@@ -441,7 +170,7 @@ const share = () => {
}
/* Headerbar (row 1) */
.file_viewer > .file_viewer_headerbar {
.headerbar {
flex-grow: 0;
flex-shrink: 0;
display: flex;
@@ -453,7 +182,7 @@ const share = () => {
}
/* Headerbar components */
.file_viewer > .file_viewer_headerbar > * {
.headerbar > * {
flex-grow: 0;
flex-shrink: 0;
margin-left: 4px;
@@ -461,10 +190,10 @@ const share = () => {
display: inline;
align-self: center;
}
.file_viewer > .file_viewer_headerbar > .button_toggle_toolbar > .icon {
.button_toggle_toolbar > .icon {
font-size: 1.6em;
}
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
.breadcrumbs {
flex-grow: 1;
flex-shrink: 1;
display: flex;
@@ -473,14 +202,6 @@ const share = () => {
flex-wrap: wrap;
flex-direction: row;
}
.breadcrumb {
min-width: 1em;
text-align: center;
padding: 6px 8px;
margin: 4px;
word-break: break-all;
}
.button_home::after {
content: "pixeldrain";
}
@@ -489,27 +210,8 @@ const share = () => {
content: "pd";
}
}
/* List Navigator (row 2) */
.file_viewer > .list_navigator {
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
text-align: center;
line-height: 1em;
overflow-x: auto;
overflow-y: hidden;
z-index: 50;
white-space: nowrap;
}
/* .file_viewer > .list_navigator > .list_item{
height: 2.6em !important;
width: 220px !important;
} */
/* File preview area (row 3) */
.file_viewer > .file_viewer_window {
/* File preview area (row 2) */
.file_preview {
flex-grow: 1;
flex-shrink: 1;
position: relative;
@@ -519,66 +221,4 @@ const share = () => {
margin: 0;
z-index: 9;
}
.file_viewer > .file_viewer_window > .file_viewer_file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block;
min-height: 100px;
min-width: 100px;
text-align: center;
vertical-align: middle;
transition: left 0.5s;
overflow: hidden;
border-radius: 12px;
border: 2px solid var(--separator);
}
/* Toolbar */
.toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
left: -8em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.5s;
}
.toolbar.toolbar_visible { left: 0; }
.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 4px 0;
background-color: var(--separator);
}
.toolbar_button {
text-align: left;
width: calc(100% - 6px);
}
.toolbar_label {
text-align: left;
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
margin-top: 0.5em;
}
.toolbar_statistic {
text-align: center;
}
.button_row {
display: flex;
flex-direction: row;
}
.button_row > * {
flex: 1 1 auto;
}
</style>

25
svelte/src/filesystem/FilesystemAPI.js
View File

@@ -1,15 +1,4 @@
const path_url = (bucket, path) => {
return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path)
}
export const fs_get_file_url = (bucket, path) => {
return path_url(bucket, path)
}
export const fs_split_path = (path) => {
let patharr = path.split("/")
return { base: patharr.pop(), parent: patharr.join("/") }
}
import { fs_path_url } from './FilesystemUtil.js'
export const fs_mkdir = async (bucket, path, opts = null) => {
const form = new FormData()
@@ -19,14 +8,14 @@ export const fs_mkdir = async (bucket, path, opts = null) => {
form.append("mode", opts.mode)
}
const resp = await fetch(path_url(bucket, path), { method: "POST", body: form });
const resp = await fetch(fs_path_url(bucket, path), { method: "POST", body: form });
if (resp.status >= 400) {
throw new Error(await resp.text())
}
}
export const fs_get_node = async (bucket, path) => {
const resp = await fetch(path_url(bucket, path) + "?stat");
const resp = await fetch(fs_path_url(bucket, path) + "?stat");
if (resp.status >= 400) {
throw await resp.text()
}
@@ -63,7 +52,7 @@ export const fs_update = async (bucket, path, opts) => {
form.append("write_password", opts.write_password)
}
const resp = await fetch(path_url(bucket, path), { method: "POST", body: form })
const resp = await fetch(fs_path_url(bucket, path), { method: "POST", body: form })
if (resp.status >= 400) {
throw new Error(await resp.text())
}
@@ -75,20 +64,20 @@ export const fs_rename = async (bucket, old_path, new_path) => {
form.append("action", "rename")
form.append("target", new_path)
const resp = await fetch(path_url(bucket, old_path), { method: "POST", body: form })
const resp = await fetch(fs_path_url(bucket, old_path), { method: "POST", body: form })
if (resp.status >= 400) {
throw new Error(await resp.text())
}
}
export const fs_delete = async (bucket, path) => {
const resp = await fetch(path_url(bucket, path), { method: "DELETE" });
const resp = await fetch(fs_path_url(bucket, path), { method: "DELETE" });
if (resp.status >= 400) {
throw new Error(await resp.text())
}
}
export const fs_delete_all = async (bucket, path) => {
const resp = await fetch(path_url(bucket, path) + "?recursive", { method: "DELETE" });
const resp = await fetch(fs_path_url(bucket, path) + "?recursive", { method: "DELETE" });
if (resp.status >= 400) {
throw new Error(await resp.text())
}

62
svelte/src/filesystem/FilesystemUtil.js Normal file
View File

@@ -0,0 +1,62 @@
export const fs_split_path = (path) => {
let patharr = path.split("/")
return { base: patharr.pop(), parent: patharr.join("/") }
}
export const fs_path_url = (bucket, path) => {
return window.api_endpoint + "/filesystem/" + bucket + encodeURIComponent(path)
}
export const fs_file_url = (bucket, path) => {
return fs_path_url(bucket, path)
}
export const fs_thumbnail_url = (bucket, path, width = 128, height = 128) => {
return fs_path_url(bucket, path) + "?thumbnail&width=" + width + "&height=" + height
}
export const fs_node_type = node => {
if (node.file_type === "application/bittorrent" || node.file_type === "application/x-bittorrent") {
return "torrent"
} else if (node.file_type === "application/zip") {
return "zip"
} else if (node.file_type.startsWith("image")) {
return "image"
} else if (
node.file_type.startsWith("video") ||
node.file_type === "application/matroska" ||
node.file_type === "application/x-matroska"
) {
return "video"
} else if (
node.file_type.startsWith("audio") ||
node.file_type === "application/ogg" ||
node.name.endsWith(".mp3")
) {
return "audio"
} else if (
node.file_type === "application/pdf" ||
node.file_type === "application/x-pdf"
) {
return "pdf"
} else if (
node.file_type.startsWith("text")
) {
return "text"
} else {
return "file"
}
}
export const fs_node_icon = (bucket, node) => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
return fs_thumbnail_url(bucket, node.path)
}

220
svelte/src/filesystem/Navigator.svelte Normal file
View File

@@ -0,0 +1,220 @@
<script>
import { fs_get_node } from "./FilesystemAPI";
import { fs_split_path } from "./FilesystemUtil";
export let state = {
// Parts of the raw API response
path: [],
base_index: 0,
children: [],
permissions: {},
// The part of the path that base_index points to
base: {},
// First node in the path
root: {},
// Passwords for accessing this bucket. Passwords are not always required
// but sometimes they are
read_password: "",
write_password: "",
// These are used to navigate forward and backward within a directory (using
// the previous and next buttons on the toolbar). The cached siblings will
// be used so that we don't need to make an extra request to the parent
// directory. The siblings_path variable is used to verify that the parent
// directory is still the same. If it's sifferent the siblings array is not
// used
siblings_path: "",
siblings: null,
// Root path of the bucket. Used for navigation by prepending it to a file
// path
path_root: "",
loading: false,
viewer_type: "",
shuffle: false,
}
export const navigate = async (path, push_history) => {
state.loading = true
console.debug("Navigating to path", path, push_history)
try {
let resp = await fs_get_node(state.root.id, path)
open_node(resp, push_history)
} catch (err) {
let errj = JSON.parse(err)
if (errj.value === "path_not_found") {
if (path !== "/" && path !== "") {
console.debug("Path", path, "was not found, trying to navigate to parent")
navigate(fs_split_path(path).parent, push_history)
}
} else {
console.error(err)
alert("Error: "+err)
}
} finally {
state.loading = false
}
}
export const open_node = (node, push_history) => {
// We need to properly URL encode the file paths so they don't cause
// issues.. but we also want the slashes to stay clean. So here we encode
// the whole path, then decode the slashes
let cleanup_func = p => p.path_uri = encodeURIComponent(p.path).replaceAll("%2F", "/")
node.path.forEach(cleanup_func)
node.children.forEach(cleanup_func)
// Update window title and navigation history
window.document.title = node.path[node.base_index].name+" ~ pixeldrain"
if (push_history) {
window.history.pushState(
{}, window.document.title,
"/d/"+node.path[0].id+node.path[node.base_index].path,
)
}
// If the new node is a child of the previous node we save the parent's
// children array
if (node.path.length > 0 && node.path[node.path.length-1].path === state.base.path) {
console.debug("Current parent path and new node path match. Saving siblings")
state.siblings_path = node.path[node.path.length-1].path
state.siblings = state.children
}
// Sort directory children
sort_children(node.children)
// Update shared state
state.path = node.path
state.base = node.path[node.base_index]
state.base_index = node.base_index
state.root = node.path[0]
state.children = node.children
state.permissions = node.permissions
// Update the viewer area with the right viewer type
if (state.base.type === "bucket" || state.base.type === "dir") {
state.viewer_type = "dir"
} else if (state.base.file_type.startsWith("image")) {
state.viewer_type = "image"
} else if (
state.base.file_type.startsWith("audio") ||
state.base.file_type === "application/ogg" ||
state.base.name.endsWith(".mp3")
) {
state.viewer_type = "audio"
} else if (
state.base.file_type.startsWith("video") ||
state.base.file_type === "application/matroska" ||
state.base.file_type === "application/x-matroska"
) {
state.viewer_type = "video"
} else if (
state.base.file_type === "application/pdf" ||
state.base.file_type === "application/x-pdf"
) {
state.viewer_type = "pdf"
} else {
state.viewer_type = ""
}
console.debug("Opened node", node)
// Remove spinner
state.loading = false
}
// Opens a sibling of the currently open file. The offset is relative to the
// file which is currently open. Give a positive number to move forward and a
// negative number to move backward
export const open_sibling = async offset => {
if (state.path.length <= 1) {
return
}
state.loading = true
// Check if we already have siblings cached
if (state.siblings != null && state.siblings_path == state.path[state.path.length - 2].path) {
console.debug("Using cached siblings")
} else {
console.debug("Cached siblings not available. Fetching new")
try {
let resp = await fs_get_node(state.root.id, state.path[state.path.length - 2].path)
// Sort directory children to make sure the order is consistent
sort_children(resp.children)
// Save new siblings in global state
state.siblings_path = state.path[state.path.length - 2].path
state.siblings = resp.children
} catch (err) {
console.error(err)
alert(err)
state.loading = false
return
}
}
let next_sibling = null
if (state.shuffle) {
// Shuffle is on, pick a random sibling
for (let i = 0; i < 10; i++) {
next_sibling = state.siblings[Math.floor(Math.random()*state.siblings.length)]
// If we selected the same sibling we already have open we try
// again. Else we break the loop
if (next_sibling.name !== state.base.name) {
break
}
}
} else {
// Loop over the parent node's children to find the one which is
// currently open. Then, if possible, we save the one which comes before
// or after it
for (let i = 0; i < state.siblings.length; i++) {
if (
state.siblings[i].name === state.base.name &&
i+offset >= 0 && // Prevent underflow
i+offset < state.siblings.length // Prevent overflow
) {
next_sibling = state.siblings[i+offset]
break
}
}
}
// If we found a sibling we open it
if (next_sibling !== null) {
console.debug("Opening sibling", next_sibling)
navigate(next_sibling.path, true)
} else {
console.debug("No siblings found")
state.loading = false
}
}
const sort_children = children => {
children.sort((a, b) => {
// Sort directories before files
if (a.type !== b.type) {
return a.type === "dir" ? -1 : 1
}
return a.name.localeCompare(b.name)
})
}
// Capture browser back and forward navigation buttons
window.onpopstate = (e) => {
// Get the part of the URL after the bucket ID and navigate to it
let path = document.location.pathname.replace("/d/"+state.root.id, "")
navigate(decodeURIComponent(path), false)
};
</script>

13
svelte/src/filesystem/Sharebar.svelte
View File

@@ -1,8 +1,5 @@
<script>
let sharebar
export let visible = false
export const setVisible = (v) => visible = v
export const toggle = () => setVisible(!visible)
const share_email = () => {
window.open(
@@ -23,7 +20,7 @@ const share_tumblr = () => {
}
</script>
<div bind:this={sharebar} class="sharebar" class:visible>
<div class="sharebar" class:visible>
Share on:<br/>
<button class="button_full_width" on:click={share_email}>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
@@ -76,11 +73,15 @@ const share_tumblr = () => {
text-align: center;
z-index: 48;
overflow: hidden;
transition: left 0.5s;
opacity: 0;
transition: left 0.4s, opacity 0.5s;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.visible { left: 8em; }
.visible {
left: 8em;
opacity: 1;
}
.button_full_width {
width: calc(100% - 6px);
}

133
svelte/src/filesystem/Toolbar.svelte Normal file
View File

@@ -0,0 +1,133 @@
<script>
import { createEventDispatcher } from "svelte";
import Sharebar from "./Sharebar.svelte";
import { formatDataVolume, formatThousands } from "../util/Formatting.svelte";
let dispatch = createEventDispatcher()
export let navigator
export let state = {
base: {
type: "",
path: "",
},
children: [],
shuffle: false
}
export let details_visible = false
export let edit_window
export let edit_visible = false
export let visible = true
let sharebar_visible = false
$: {
if (!visible) {
sharebar_visible = false
}
}
// Tallys
$: total_directories = state.children.reduce((acc, cur) => cur.type === "dir" ? acc + 1 : acc, 0)
$: total_files = state.children.reduce((acc, cur) => cur.type === "file" ? acc + 1 : acc, 0)
$: total_file_size = state.children.reduce((acc, cur) => acc + cur.file_size, 0)
</script>
<div class="toolbar" class:toolbar_visible={visible}>
{#if state.base.type === "file"}
<div class="toolbar_label">Size</div>
<div class="toolbar_statistic">{formatDataVolume(state.base.file_size, 3)}</div>
{:else if state.base.type === "dir" || state.base.type === "bucket"}
<div class="toolbar_label">Directories</div>
<div class="toolbar_statistic">{formatThousands(total_directories, 3)}</div>
<div class="toolbar_label">Files</div>
<div class="toolbar_statistic">{formatThousands(total_files, 3)}</div>
<div class="toolbar_label">Total size</div>
<div class="toolbar_statistic">{formatDataVolume(total_file_size, 3)}</div>
{/if}
<div class="separator"></div>
<div class="button_row">
<button on:click={() => {navigator.open_sibling(-1)}}>
<i class="icon">skip_previous</i>
</button>
<button on:click={() => {state.shuffle = !state.shuffle}} class:button_highlight={state.shuffle}>
<i class="icon">shuffle</i>
</button>
<button on:click={() => {navigator.open_sibling(1)}}>
<i class="icon">skip_next</i>
</button>
</div>
{#if state.base.type === "file"}
<button on:click={() => dispatch("download")} class="toolbar_button">
<i class="icon">save</i> Download
</button>
{/if}
<button id="btn_download_list" class="toolbar_button" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={() => sharebar_visible = !sharebar_visible} class="toolbar_button" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={() => details_visible = !details_visible} class="toolbar_button" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
{#if state.base.path !== "/"}
<button on:click={() => edit_window.edit(state.base)} class="toolbar_button" class:button_highlight={edit_visible}>
<i class="icon">edit</i> <u>E</u>dit
</button>
{/if}
</div>
<Sharebar visible={sharebar_visible}/>
<style>
.toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
left: -8em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.5s;
}
.toolbar_visible { left: 0; }
.toolbar > .separator {
height: 2px;
width: 100%;
margin: 4px 0;
background-color: var(--separator);
}
.toolbar_button {
text-align: left;
width: calc(100% - 6px);
}
.toolbar_label {
text-align: left;
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
margin-top: 0.5em;
}
.toolbar_statistic {
text-align: center;
}
.button_row {
display: flex;
flex-direction: row;
}
.button_row > * {
flex: 1 1 auto;
}
</style>

48
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -1,15 +1,16 @@
<script>
import { fs_delete } from './../FilesystemAPI.js'
import { createEventDispatcher } from 'svelte'
import { createEventDispatcher, onMount } from 'svelte'
import CreateDirectory from './CreateDirectory.svelte'
import FileUploader from './FileUploader.svelte'
import ListView from './ListView.svelte'
import GalleryView from './GalleryView.svelte'
import EditWindow from './EditWindow.svelte';
let dispatch = createEventDispatcher()
export let navigator
export let state
export let directory_view = "list"
export let edit_window
export let directory_view = ""
let uploader
let mode = "viewing"
let creating_dir = false
@@ -27,13 +28,12 @@ const node_click = e => {
// We prefix our custom state properties with fm_ to not interfere with
// other modules
if (mode === "viewing") {
dispatch("navigate", state.children[index].path)
navigator.navigate(state.children[index].path, true)
} else if (mode === "selecting") {
state.children[index].fm_selected = !state.children[index].fm_selected
}
}
let edit_window;
const node_settings = e => {
edit_window.edit(state.children[e.detail])
}
@@ -42,10 +42,10 @@ const navigate_up = () => {
// Go to the path of the last parent
if (state.path.length > 1) {
dispatch("navigate", state.path[state.path.length-2].path)
navigator.navigate(state.path[state.path.length-2].path, true)
}
}
const reload = () => { dispatch("navigate", state.base.path) }
const reload = () => { navigator.navigate(state.base.path) }
const delete_selected = () => {
if (mode !== "selecting") {
@@ -98,6 +98,24 @@ const toggle_select = () => {
})
mode = "viewing"
}
const toggle_view = () => {
if (directory_view === "list") {
directory_view = "gallery"
} else {
directory_view = "list"
}
localStorage.setItem("directory_view", directory_view)
}
onMount(() => {
if(typeof Storage !== "undefined") {
directory_view = localStorage.getItem("directory_view")
}
if (directory_view === "" || directory_view === null) {
directory_view = "list"
}
})
</script>
<div class="container">
@@ -109,15 +127,13 @@ const toggle_select = () => {
<button on:click={reload} title="Refresh directory listing">
<i class="icon">refresh</i>
</button>
{#if directory_view === "list"}
<button on:click={() => {directory_view = "gallery"}} title="Switch to gallery view">
<i class="icon">collections</i>
<button on:click={() => toggle_view()} title="Switch between gallery view and list view">
{#if directory_view === "list"}
<i class="icon">collections</i>
{:else if directory_view === "gallery"}
<i class="icon">list</i>
{/if}
</button>
{:else if directory_view === "gallery"}
<button on:click={() => {directory_view = "list"}} title="Switch to list view">
<i class="icon">list</i>
</button>
{/if}
<button on:click={() => {show_hidden = !show_hidden}} title="Toggle hidden files">
{#if show_hidden}
@@ -187,8 +203,6 @@ const toggle_select = () => {
{/if}
</div>
<EditWindow bind:this={edit_window} bucket={state.root.id} on:reload={() => reload()}/>
<style>
.container {
height: 100%;

46
svelte/src/filesystem/filemanager/GalleryView.svelte
View File

@@ -1,48 +1,10 @@
<script>
import { createEventDispatcher } from "svelte"
import { fs_node_icon, fs_node_type } from "../FilesystemUtil";
let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
const node_icon = node => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="gallery">
@@ -56,7 +18,8 @@ const node_icon = node => {
>
<div
class="icon_container"
style="background-image: url('{node_icon(child)}?width=256&height=256');">
class:cover={fs_node_type(child) === "image" || fs_node_type(child) === "video"}
style='background-image: url("{fs_node_icon(state.root.id, child)}");'>
</div>
{child.name}
</a>
@@ -106,6 +69,9 @@ const node_icon = node => {
font-size: 22px;
text-align: left;
}
.icon_container.cover {
background-size: cover;
}
.hidden {
display: none;
}

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

@@ -1,49 +1,12 @@
<script>
import { createEventDispatcher } from "svelte";
import { formatDataVolume } from "../../util/Formatting.svelte";
import { fs_node_icon } from "../FilesystemUtil";
let dispatch = createEventDispatcher()
export let state
export let show_hidden = false
const node_icon = node => {
if (node.type === "dir") {
// Folders with an ID are publically shared, use the shared folder icon
if (node.id) {
return "/res/img/mime/folder-remote.png"
} else {
return "/res/img/mime/folder.png"
}
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
case "application/ogg":
return "/res/img/mime/audio.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="directory">
@@ -62,7 +25,7 @@ const node_icon = node => {
class:hidden={child.name.startsWith(".") && !show_hidden}
>
<td>
<img src={node_icon(child)} class="node_icon" alt="icon"/>
<img src={fs_node_icon(state.root.id, child)} class="node_icon" alt="icon"/>
</td>
<td class="node_name">
{child.name}

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

@@ -1,6 +1,6 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.js";
import { createEventDispatcher, onMount } from 'svelte'
import { fs_file_url } from "../FilesystemUtil.js";
let dispatch = createEventDispatcher()
export let state
@@ -53,7 +53,7 @@ onMount(() => {
<audio
bind:this={player}
class="player"
src={fs_get_file_url(state.root.id, state.base.path)}
src={fs_file_url(state.root.id, state.base.path)}
autoplay="autoplay"
controls="controls"
on:pause={() => playing = false }

54
svelte/src/filesystem/viewers/FilePreview.svelte Normal file
View File

@@ -0,0 +1,54 @@
<script>
import FileManager from "../filemanager/FileManager.svelte";
import Audio from "./Audio.svelte";
import Image from "./Image.svelte";
import Pdf from "./PDF.svelte";
import Video from "./Video.svelte";
export let navigator
export let state
export let toolbar_visible
export let edit_window
</script>
<div class="file_preview checkers" class:toolbar_visible>
{#if state.viewer_type === "dir"}
<FileManager
navigator={navigator}
state={state}
edit_window={edit_window}
on:loading
/>
{:else if state.viewer_type === "audio"}
<Audio state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
{:else if state.viewer_type === "image"}
<Image state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
{:else if state.viewer_type === "video"}
<Video state={state} on:open_sibling={e => {navigator.open_sibling(e.detail)}}/>
{:else if state.viewer_type === "pdf"}
<Pdf state={state}/>
{/if}
</div>
<style>
.file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block;
min-height: 100px;
min-width: 100px;
text-align: center;
vertical-align: middle;
transition: left 0.5s;
overflow: hidden;
border-radius: 12px;
border: 2px solid var(--separator);
}
.file_preview.toolbar_visible {
left: 8em;
}
</style>

5
svelte/src/filesystem/viewers/Image.svelte
View File

@@ -1,6 +1,5 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.js";
import { fs_file_url } from "../FilesystemUtil.js";
export let state
let container
@@ -51,7 +50,7 @@ const mouseup = (e) => {
on:doubletap={() => {zoom = !zoom}}
on:mousedown={mousedown}
class="image" class:zoom
src={fs_get_file_url(state.root.id, state.base.path)}
src={fs_file_url(state.root.id, state.base.path)}
alt="no description available" />
</div>

4
svelte/src/filesystem/viewers/PDF.svelte
View File

@@ -1,11 +1,11 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.js";
import { fs_file_url } from "../FilesystemUtil.js";
export let state
</script>
<iframe
class="container"
src={"/res/misc/pdf-viewer/web/viewer.html?file="+encodeURIComponent(fs_get_file_url(state.root.id, state.base.path))}
src={"/res/misc/pdf-viewer/web/viewer.html?file="+encodeURIComponent(fs_file_url(state.root.id, state.base.path))}
title="PDF viewer">
</iframe>

4
svelte/src/filesystem/viewers/Video.svelte
View File

@@ -1,5 +1,5 @@
<script>
import { fs_get_file_url } from "../FilesystemAPI.js";
import { fs_file_url } from "../FilesystemUtil.js";
import { createEventDispatcher, onMount } from 'svelte'
let dispatch = createEventDispatcher()
@@ -38,7 +38,7 @@ onMount(() => {
<video
bind:this={player}
class="player"
src={fs_get_file_url(state.root.id, state.base.path)}
src={fs_file_url(state.root.id, state.base.path)}
autoplay="autoplay"
controls="controls"
on:ended={() => { dispatch("open_sibling", 1) }}>

35
svelte/src/util/Modal.svelte
View File

@@ -11,7 +11,7 @@ export let title = "";
export let width = "800px";
export let height = "auto";
export let padding = false;
let visible = false;
export let visible = false;
const load_bg = background => {
background.style.zIndex = global_index.valueOf();
@@ -36,9 +36,10 @@ const keydown = e => {
if (document.activeElement.type && document.activeElement.type === "text") {
return // Prevent shortcuts from interfering with input fields
}
if (e.key === 'Escape') {
if (e.key === 'Escape' && visible) {
set_visible(false);
e.preventDefault()
e.stopPropagation()
return;
}
};
@@ -47,23 +48,23 @@ const keydown = e => {
<svelte:window on:keydown={keydown}/>
{#if visible}
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}} on:keydown={keydown}>
<div class="top_padding"></div>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true" on:keydown={keydown}>
<div class="header">
<slot name="title">
<div class="title">{title}</div>
<button class="button round" on:click={hide}>
<i class="icon">close</i>
</button>
</slot>
</div>
<div class="body" class:padding>
<slot></slot>
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}} on:keydown={keydown}>
<div class="top_padding"></div>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true" on:keydown={keydown}>
<div class="header">
<slot name="title">
<div class="title">{title}</div>
<button class="button round" on:click={hide}>
<i class="icon">close</i>
</button>
</slot>
</div>
<div class="body" class:padding>
<slot></slot>
</div>
</div>
<div class="bottom_padding"></div>
</div>
<div class="bottom_padding"></div>
</div>
{/if}
<style>