301 lines
6.9 KiB
Svelte
301 lines
6.9 KiB
Svelte
<script lang="ts" module>
|
|
export let menu_is_open = writable(true)
|
|
</script>
|
|
<script lang="ts">
|
|
import { highlight_current_page } from "lib/HighlightCurrentPage";
|
|
import { user } from "lib/UserStore";
|
|
import Euro from "util/Euro.svelte";
|
|
import { formatDataVolume } from "util/Formatting";
|
|
import Router from "wrap/Router.svelte";
|
|
import Bookmarks from "./Bookmarks.svelte";
|
|
import { onMount } from "svelte";
|
|
import { fs_get_node } from "lib/FilesystemAPI.svelte";
|
|
import { css_from_path } from "filesystem/edit_window/Branding";
|
|
import { loading_run, loading_store } from "lib/Loading";
|
|
import Spinner from "util/Spinner.svelte";
|
|
import { get_user } from "lib/PixeldrainAPI";
|
|
import Tree from "./Tree.svelte";
|
|
import MenuEntry from "./MenuEntry.svelte";
|
|
import { writable } from "svelte/store";
|
|
|
|
onMount(() => {
|
|
if (document.documentElement.clientWidth < 1000) {
|
|
menu_close()
|
|
}
|
|
|
|
loading_run(async () => {
|
|
const user = await get_user()
|
|
if (user.username === undefined || user.username === "") {
|
|
return
|
|
}
|
|
const root = await fs_get_node("/me")
|
|
document.documentElement.style = css_from_path(root.path)
|
|
})
|
|
})
|
|
|
|
// Dead zone before the swipe action gets detected
|
|
const swipe_initial_offset = 50
|
|
const min_screen_size_fullscreen_menu = 500
|
|
|
|
let menu: HTMLDivElement
|
|
let nav: HTMLElement
|
|
let dragging: boolean = false
|
|
let start_x: number
|
|
let render_offset: number
|
|
let initial_offset: number
|
|
const touchstart = (e: TouchEvent) => {
|
|
start_x = e.touches[0].clientX
|
|
const rect = menu.getBoundingClientRect()
|
|
if (start_x < Math.max(swipe_initial_offset, (rect.width+rect.left))) {
|
|
dragging = true
|
|
}
|
|
|
|
render_offset = rect.left
|
|
initial_offset = rect.left
|
|
}
|
|
|
|
const touchmove = (e: TouchEvent) => {
|
|
if (!dragging) {
|
|
return
|
|
}
|
|
set_offset(initial_offset+(e.touches[0].clientX - start_x))
|
|
}
|
|
|
|
const touchend = (e: TouchEvent) => {
|
|
if (!dragging) {
|
|
return
|
|
}
|
|
dragging = false
|
|
|
|
const menu_width = menu.getBoundingClientRect().width
|
|
if (render_offset > -(menu_width/2)) {
|
|
menu_open()
|
|
} else {
|
|
menu_close()
|
|
}
|
|
}
|
|
|
|
const toggle_menu = (e: MouseEvent) => {
|
|
if (menu.style.transform === "") {
|
|
menu_close()
|
|
} else {
|
|
menu_open()
|
|
}
|
|
}
|
|
const menu_open = () => {
|
|
set_offset(0)
|
|
menu_is_open.set(true)
|
|
if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
|
|
menu.style.position = "fixed"
|
|
menu.style.width = "100%"
|
|
nav.style.width = "100%"
|
|
nav.style.maxWidth = "100%"
|
|
} else {
|
|
menu.style.position = "relative"
|
|
menu.style.width = ""
|
|
nav.style.width = ""
|
|
nav.style.maxWidth = ""
|
|
}
|
|
}
|
|
const menu_close = () => {
|
|
set_offset(-menu.getBoundingClientRect().width)
|
|
menu_is_open.set(false)
|
|
menu.style.position = "fixed"
|
|
|
|
if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
|
|
menu.style.width = ""
|
|
nav.style.width = ""
|
|
nav.style.maxWidth = ""
|
|
}
|
|
}
|
|
|
|
const set_offset = (off: number) => {
|
|
render_offset = off
|
|
|
|
if (off > -swipe_initial_offset) {
|
|
// Clear the transformation if the offset is zero
|
|
menu.style.transform = ""
|
|
} else {
|
|
menu.style.transform = "translateX(" + off + "px)"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>
|
|
|
|
<button class="button_toggle_navigation" onclick={toggle_menu}>
|
|
<i class="icon">menu</i>
|
|
</button>
|
|
|
|
<div class="nav_container" bind:this={menu}>
|
|
<div class="scroll_container">
|
|
<nav class="nav" bind:this={nav}>
|
|
<a class="button" href="/" use:highlight_current_page>
|
|
<i class="icon">home</i>
|
|
<span>Home</span>
|
|
</a>
|
|
|
|
{#if $user.username !== undefined && $user.username !== ""}
|
|
<MenuEntry id="subscription_info" collapsed={false}>
|
|
{#snippet title()}
|
|
<div class="username">{$user.username}</div>
|
|
{/snippet}
|
|
|
|
{#snippet body()}
|
|
<div class="stats_table">
|
|
<div>Subscription</div>
|
|
<div>{$user.subscription.name}</div>
|
|
|
|
{#if $user.subscription.type === "prepaid"}
|
|
<div>Credit</div>
|
|
<div><Euro amount={$user.balance_micro_eur}/></div>
|
|
{/if}
|
|
|
|
<div>Storage used</div>
|
|
<div>{formatDataVolume($user.filesystem_storage_used, 3)}</div>
|
|
<div>Transfer used</div>
|
|
<div>{formatDataVolume($user.monthly_transfer_used, 3)}</div>
|
|
</div>
|
|
{/snippet}
|
|
</MenuEntry>
|
|
|
|
<a class="button" href="/d/me" use:highlight_current_page>
|
|
<i class="icon">folder</i>
|
|
<span>Filesystem</span>
|
|
</a>
|
|
<a class="button" href="/user" use:highlight_current_page>
|
|
<i class="icon">person</i>
|
|
<span>Account</span>
|
|
</a>
|
|
{#if $user.is_admin}
|
|
<a class="button" href="/admin" use:highlight_current_page>
|
|
<i class="icon">admin_panel_settings</i>
|
|
<span>Admin Panel</span>
|
|
</a>
|
|
{/if}
|
|
{:else}
|
|
<a class="button" href="/login" use:highlight_current_page>
|
|
<i class="icon">login</i>
|
|
<span>Login</span>
|
|
</a>
|
|
<a class="button" href="/register" use:highlight_current_page>
|
|
<i class="icon">how_to_reg</i>
|
|
<span>Register</span>
|
|
</a>
|
|
{/if}
|
|
|
|
<div class="separator"></div>
|
|
|
|
<a class="button" href="/speedtest" use:highlight_current_page>
|
|
<i class="icon">speed</i>
|
|
<span>Speedtest</span>
|
|
</a>
|
|
<a class="button" href="/appearance" use:highlight_current_page>
|
|
<i class="icon">palette</i>
|
|
<span>Themes</span>
|
|
</a>
|
|
|
|
<Bookmarks menu_collapsed={false}/>
|
|
<Tree menu_collapsed={false}/>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<Router/>
|
|
</div>
|
|
|
|
|
|
{#if $loading_store !== 0}
|
|
<div class="spinner">
|
|
<Spinner/>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
:global(body) {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
color: var(--body_text_color);
|
|
background-image: var(--background_image);
|
|
background-color: var(--background_pattern_color);
|
|
background-size: var(--background_image_size, initial);
|
|
background-position: var(--background_image_position, initial);
|
|
background-repeat: var(--background_image_repeat, repeat);
|
|
background-attachment: fixed;
|
|
}
|
|
.button_toggle_navigation {
|
|
position: fixed;
|
|
backface-visibility: hidden;
|
|
z-index: 10;
|
|
top: 0;
|
|
left: 0;
|
|
background: none;
|
|
box-shadow: none;
|
|
margin: 0;
|
|
padding: 4px;
|
|
border-radius: 0;
|
|
border-bottom-right-radius: 0px;
|
|
border-bottom-right-radius: 2px;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.nav_container {
|
|
flex: 0 0 auto;
|
|
border-right: 1px solid var(--separator);
|
|
background: var(--shaded_background);
|
|
backdrop-filter: blur(6px);
|
|
z-index: 9;
|
|
}
|
|
.scroll_container {
|
|
position: sticky;
|
|
top: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 100vh;
|
|
height: 100vh;
|
|
}
|
|
.nav {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 15em;
|
|
min-width: 10em;
|
|
max-width: 15em;
|
|
padding-top: 2em;
|
|
}
|
|
.nav > .button {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
.page {
|
|
flex: 1 1 auto;
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
.username {
|
|
flex: 1 1 auto;
|
|
text-align: center;
|
|
margin: 3px;
|
|
}
|
|
|
|
.separator {
|
|
height: 1px;
|
|
width: 100%;
|
|
background-color: var(--separator);
|
|
}
|
|
.stats_table {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
gap: 0.2em 1em;
|
|
margin: 5px;
|
|
}
|
|
|
|
.spinner {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
height: 120px;
|
|
width: 120px;
|
|
}
|
|
</style>
|