implement directory navigator in svelte
This commit is contained in:
322
svelte/src/filesystem/Filesystem.svelte
Normal file
322
svelte/src/filesystem/Filesystem.svelte
Normal file
@@ -0,0 +1,322 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
|
||||
import Sharebar from './Sharebar.svelte'
|
||||
import Spinner from '../util/Spinner.svelte'
|
||||
import Modal from '../util/Modal.svelte'
|
||||
import Directory from './viewers/Directory.svelte';
|
||||
|
||||
let file = {
|
||||
views: 6,
|
||||
downloads: 12,
|
||||
size: 24,
|
||||
}
|
||||
|
||||
// Elements
|
||||
let file_viewer
|
||||
let header_bar
|
||||
|
||||
let toolbar_visible = (window.innerWidth > 800)
|
||||
let toolbar_toggle = () => {
|
||||
toolbar_visible = !toolbar_visible
|
||||
if (!toolbar_visible) {
|
||||
sharebar.setVisible(false)
|
||||
}
|
||||
}
|
||||
|
||||
let sharebar
|
||||
let sharebar_visible = false
|
||||
let details;
|
||||
let details_visible = false
|
||||
let preview
|
||||
|
||||
// State
|
||||
let currentNode = initialNode
|
||||
let loading = true
|
||||
let viewer_type = ""
|
||||
|
||||
const download = () => {
|
||||
file.downloads++
|
||||
}
|
||||
|
||||
const navigate = (path) => {
|
||||
fetch(
|
||||
apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
|
||||
).then(resp => resp.json()).then(resp => {
|
||||
window.history.pushState(
|
||||
"page2",
|
||||
resp.base.name+" in "+resp.bucket.name+" ~ pixeldrain",
|
||||
"/d/"+resp.bucket.id+resp.base.path,
|
||||
)
|
||||
currentNode = resp
|
||||
openPath()
|
||||
}).catch(err => {
|
||||
loading = false
|
||||
alert(err)
|
||||
})
|
||||
}
|
||||
|
||||
const openPath = () => {
|
||||
console.log(currentNode.base.type)
|
||||
if (currentNode.base.type === "bucket" || currentNode.base.type === "dir") {
|
||||
viewer_type = "dir"
|
||||
}
|
||||
loading = false
|
||||
}
|
||||
|
||||
const keydown = e => {
|
||||
switch (e.key) {
|
||||
case 'Escape':
|
||||
hide();
|
||||
return;
|
||||
case 'i':
|
||||
details_window.toggle()
|
||||
}
|
||||
console.log(e.key)
|
||||
};
|
||||
|
||||
onMount(openPath)
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keydown}/>
|
||||
|
||||
<div bind:this={file_viewer} class="file_viewer">
|
||||
<div bind:this={header_bar} class="file_viewer_headerbar highlight_1">
|
||||
<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
|
||||
<i class="icon">menu</i>
|
||||
</button>
|
||||
<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
|
||||
<div class="file_viewer_headerbar_title">
|
||||
<div>
|
||||
{#if currentNode.parents.length > 0}
|
||||
{currentNode.parents[currentNode.parents.length-1].path}
|
||||
{/if}
|
||||
/{currentNode.base.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_navigator"></div>
|
||||
<div class="file_viewer_window">
|
||||
<div class="toolbar" class:toolbar_visible><div><div>
|
||||
<div class="toolbar_label">Views</div>
|
||||
<div class="toolbar_statistic">{formatThousands(file.views)}</div>
|
||||
<div class="toolbar_label">Downloads</div>
|
||||
<div class="toolbar_statistic">{formatThousands(file.downloads)}</div>
|
||||
<div class="toolbar_label">Size</div>
|
||||
<div class="toolbar_statistic">{formatDataVolume(file.size)}</div>
|
||||
|
||||
<button on:click={download} class="toolbar_button button_full_width">
|
||||
<i class="icon">save</i> Download
|
||||
</button>
|
||||
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
|
||||
<i class="icon">save</i> DL all files
|
||||
</button>
|
||||
<button id="btn_copy" class="toolbar_button button_full_width">
|
||||
<i class="icon">content_copy</i> <u>C</u>opy Link
|
||||
</button>
|
||||
<button on:click={sharebar.toggle} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
|
||||
<i class="icon">share</i> Share
|
||||
</button>
|
||||
<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
|
||||
<i class="icon">help</i> Deta<u>i</u>ls
|
||||
</button>
|
||||
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
|
||||
<i class="icon">edit</i> <u>E</u>dit
|
||||
</button>
|
||||
</div></div></div>
|
||||
<Sharebar bind:this={sharebar}></Sharebar>
|
||||
|
||||
<div bind:this={preview} class="file_viewer_file_preview" class:toolbar_visible>
|
||||
{#if loading}
|
||||
<div class="center" style="width: 128px; height: 128px;">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
{:else if viewer_type === "dir"}
|
||||
<Directory bind:this={preview} node={currentNode} on:navigate={e => {navigate(e.detail)}}></Directory>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- This frame will load the download URL when a download button is pressed -->
|
||||
<iframe title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
|
||||
|
||||
<Modal bind:this={details} title="Details" width="600px">
|
||||
<table style="min-width: 100%;">
|
||||
<tr><td colspan="2"><h3>Node details</h3></td></tr>
|
||||
<tr><td>Name</td><td>{currentNode.base.name}</td></tr>
|
||||
<tr><td>Path</td><td>{currentNode.base.path}</td></tr>
|
||||
<tr><td>Type</td><td>{currentNode.base.type}</td></tr>
|
||||
<tr><td>Date created</td><td>{formatDate(currentNode.base.date_created, true, true, true)}</td></tr>
|
||||
<tr><td>Date modified</td><td>{formatDate(currentNode.base.date_modified, true, true, true)}</td></tr>
|
||||
{#if currentNode.base.type === "file"}
|
||||
<tr><td>File type</td><td>{currentNode.base.file_type}</td></tr>
|
||||
<tr><td>File size</td><td>{formatDataVolume(currentNode.base.file_size)}</td></tr>
|
||||
{/if}
|
||||
<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
|
||||
<tr><td>ID</td><td>{currentNode.bucket.id}</td></tr>
|
||||
<tr><td>Name</td><td>{currentNode.bucket.name}</td></tr>
|
||||
<tr><td>Date created</td><td>{formatDate(currentNode.bucket.date_created, true, true, true)}</td></tr>
|
||||
<tr><td>Date modified</td><td>{formatDate(currentNode.bucket.date_modified, true, true, true)}</td></tr>
|
||||
</table>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Viewer container */
|
||||
.file_viewer {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Headerbar (row 1) */
|
||||
.file_viewer > .file_viewer_headerbar {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: left;
|
||||
z-index: 10;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Headerbar components */
|
||||
.file_viewer > .file_viewer_headerbar > * {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
display: inline;
|
||||
}
|
||||
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
justify-content: center;
|
||||
}
|
||||
.button_home::after {
|
||||
content: "pixeldrain";
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.button_home::after {
|
||||
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%;
|
||||
background-color: var(--layer_1_color);
|
||||
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 {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
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;
|
||||
box-shadow: inset 2px 2px 8px var(--shadow_color);
|
||||
}
|
||||
|
||||
.file_viewer > .file_viewer_window > .file_viewer_file_preview > .center{
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
width: 8em;
|
||||
z-index: 49;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
background-color: var(--layer_1_color);
|
||||
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; }
|
||||
|
||||
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
|
||||
.toolbar > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -30px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.toolbar > div > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 8em;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.toolbar_button{
|
||||
text-align: left;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
</style>
|
||||
45
svelte/src/filesystem/Sharebar.svelte
Normal file
45
svelte/src/filesystem/Sharebar.svelte
Normal file
@@ -0,0 +1,45 @@
|
||||
<script>
|
||||
let sharebar
|
||||
export let visible = false
|
||||
export const setVisible = (v) => { visible = v }
|
||||
export const toggle = () => { setVisible(!visible) }
|
||||
</script>
|
||||
|
||||
<div bind:this={sharebar} class="sharebar" class:visible>
|
||||
Share on:<br/>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
|
||||
E-Mail
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
|
||||
Reddit
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
|
||||
Twitter
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
|
||||
Facebook
|
||||
</button>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
|
||||
Tumblr
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sharebar{
|
||||
position: absolute;
|
||||
width: 7em;
|
||||
left: -8em;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
float: left;
|
||||
background-color: var(--layer_1_color);
|
||||
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
|
||||
text-align: center;
|
||||
z-index: 48;
|
||||
overflow: hidden;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.visible { left: 8em; }
|
||||
</style>
|
||||
112
svelte/src/filesystem/Toolbar.svelte
Normal file
112
svelte/src/filesystem/Toolbar.svelte
Normal file
@@ -0,0 +1,112 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { formatDataVolume, formatThousands } from '../util/Formatting.svelte'
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
let toolbar
|
||||
export let file
|
||||
export let sharebar
|
||||
export let visible = false
|
||||
|
||||
|
||||
export const setVisible = (v) => {
|
||||
visible = v
|
||||
if (!visible) {
|
||||
sharebar.setVisible(false)
|
||||
}
|
||||
}
|
||||
export const toggle = () => { setVisible(!visible) }
|
||||
</script>
|
||||
|
||||
<div bind:this={toolbar} class="toolbar" class:visible><div><div>
|
||||
<div class="label">Views</div>
|
||||
<div class="statistic">{formatThousands(file.views)}</div>
|
||||
<div class="label">Downloads</div>
|
||||
<div class="statistic">{formatThousands(file.downloads)}</div>
|
||||
<div class="label">Size</div>
|
||||
<div class="statistic">{formatDataVolume(file.size)}</div>
|
||||
|
||||
<button on:click={()=>{dispatch("download")}} class="toolbar_button button_full_width">
|
||||
<i class="icon">save</i>
|
||||
<span>Download</span>
|
||||
</button>
|
||||
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
|
||||
<i class="icon">save</i>
|
||||
<span>DL all files</span>
|
||||
</button>
|
||||
<button id="btn_copy" class="toolbar_button button_full_width">
|
||||
<i class="icon">content_copy</i>
|
||||
<span><u>C</u>opy Link</span>
|
||||
</button>
|
||||
<button on:click={sharebar.toggle} class="toolbar_button button_full_width">
|
||||
<i class="icon">share</i>
|
||||
<span>Share</span>
|
||||
</button>
|
||||
<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;">
|
||||
<i class="icon">shuffle</i>
|
||||
<span>Shuffle ☐</span>
|
||||
</button>
|
||||
<button on:click={()=>{dispatch("details")}} class="toolbar_button button_full_width">
|
||||
<i class="icon">help</i>
|
||||
<span>Deta<u>i</u>ls</span>
|
||||
</button>
|
||||
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
|
||||
<i class="icon">edit</i>
|
||||
<span><u>E</u>dit</span>
|
||||
</button>
|
||||
</div></div></div>
|
||||
|
||||
<style>
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
width: 8em;
|
||||
z-index: 49;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
background-color: var(--layer_1_color);
|
||||
left: -9em;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.visible { left: 0; }
|
||||
|
||||
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
|
||||
.toolbar > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -30px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.toolbar > div > div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 8em;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar_button{
|
||||
text-align: left;
|
||||
}
|
||||
.toolbar_button > span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.label {
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
font-size: 0.8em;
|
||||
line-height: 0.7em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.statistic {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
127
svelte/src/filesystem/viewers/Directory.svelte
Normal file
127
svelte/src/filesystem/viewers/Directory.svelte
Normal file
@@ -0,0 +1,127 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
let dispatch = createEventDispatcher()
|
||||
|
||||
export let node;
|
||||
|
||||
const navigate_to = (path) => {
|
||||
dispatch("navigate", path)
|
||||
}
|
||||
const navigate_up = () => {
|
||||
if (node.parents.length !== 0) {
|
||||
navigate_to(node.parents[node.parents.length-1].path)
|
||||
}
|
||||
}
|
||||
|
||||
const node_icon = node => {
|
||||
if (node.type === "dir") {
|
||||
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"
|
||||
}
|
||||
|
||||
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="container">
|
||||
<div class="toolbar">
|
||||
<button on:click={navigate_up}><i class="icon">arrow_upward</i> up</button>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="directory">
|
||||
{#if Array.isArray(node.base.children)}
|
||||
{#each node.base.children as child}
|
||||
<div on:click={navigate_to(child.path)} class="node">
|
||||
<img src={node_icon(child)} alt="icon"/>
|
||||
<div>{child.name}</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.toolbar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 20px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.directory {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
margin: 20px 0 40px 0;
|
||||
text-align: left;
|
||||
background-color: var(--layer_2_color);
|
||||
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.node {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
}
|
||||
.node:hover:not(.node_selected) {
|
||||
background-color: var(--input_color_dark);
|
||||
color: var(--input_text_color);
|
||||
text-decoration: none;
|
||||
}
|
||||
/* .node_selected {
|
||||
background-color: var(--highlight_color);
|
||||
color: var(--highlight_text_color);
|
||||
} */
|
||||
.node > div {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
line-height: 32px;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.node > img {
|
||||
max-height: 100%;
|
||||
margin-right: 6px;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user