implement directory navigator in svelte
This commit is contained in:
61
svelte/src/util/Formatting.svelte
Normal file
61
svelte/src/util/Formatting.svelte
Normal file
@@ -0,0 +1,61 @@
|
||||
<script context="module">
|
||||
export const formatNumber = (amt, precision) => {
|
||||
if (precision < 3) { precision = 3; }
|
||||
if (amt >= 1e6) {
|
||||
return (amt/1e6).toPrecision(precision) + "M";
|
||||
} else if (amt >= 1e3) {
|
||||
return (amt/1e3).toPrecision(precision) + "k";
|
||||
}
|
||||
return amt
|
||||
}
|
||||
|
||||
export const formatThousands = (x) => {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
|
||||
}
|
||||
|
||||
export const formatDataVolume = (amt, precision) => {
|
||||
if (precision < 3) { precision = 3; }
|
||||
if (amt >= 1e18) {
|
||||
return (amt/1e18).toPrecision(precision) + " EB";
|
||||
}else if (amt >= 1e15) {
|
||||
return (amt/1e15).toPrecision(precision) + " PB";
|
||||
}else if (amt >= 1e12) {
|
||||
return (amt/1e12).toPrecision(precision) + " TB";
|
||||
} else if (amt >= 1e9) {
|
||||
return (amt/1e9).toPrecision(precision) + " GB";
|
||||
} else if (amt >= 1e6) {
|
||||
return (amt/1e6).toPrecision(precision) + " MB";
|
||||
} else if (amt >= 1e3) {
|
||||
return (amt/1e3).toPrecision(precision) + " kB";
|
||||
}
|
||||
return amt + " B"
|
||||
}
|
||||
|
||||
const second = 1000
|
||||
const minute = second*60
|
||||
const hour = minute*60
|
||||
const day = hour*24
|
||||
|
||||
export const formatDuration = (ms) => {
|
||||
let res = ""
|
||||
if (ms >= day) { res += Math.floor(ms/day) + "d " }
|
||||
if (ms >= hour) { res += Math.floor((ms%day)/hour) + "h " }
|
||||
if (ms >= minute) { res += Math.floor((ms%hour)/minute) + "m " }
|
||||
return res + ((ms%minute)/second).toFixed(3) + "s"
|
||||
}
|
||||
|
||||
export const formatDate = (date, hours, minutes, seconds) => {
|
||||
if (!(date instanceof Date)) {
|
||||
date = new Date(date)
|
||||
}
|
||||
|
||||
let dateStr = date.getFullYear()
|
||||
+"-"+("00"+(date.getMonth()+1)).slice(-2)
|
||||
+"-"+("00"+date.getDate()).slice(-2)
|
||||
|
||||
if (hours) { dateStr += " "+("00"+date.getHours()).slice(-2) }
|
||||
if (minutes) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
|
||||
if (seconds) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
|
||||
return dateStr
|
||||
}
|
||||
</script>
|
||||
117
svelte/src/util/Modal.svelte
Normal file
117
svelte/src/util/Modal.svelte
Normal file
@@ -0,0 +1,117 @@
|
||||
<script context="module">
|
||||
// This makes sure new modals always show up on top of older modals. It is
|
||||
// incremented every time a modal is shown
|
||||
let global_index = 10000;
|
||||
</script>
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let title = "";
|
||||
export let width = "800px";
|
||||
export let height = "auto";
|
||||
let visible = false;
|
||||
|
||||
const load_bg = background => {
|
||||
background.style.zIndex = global_index.valueOf();
|
||||
global_index++;
|
||||
}
|
||||
const load_modal = modal => {
|
||||
modal.style.width = width;
|
||||
modal.style.height = height;
|
||||
}
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
export const show = () => { visible = true; dispatch("shown"); }
|
||||
export const hide = () => { visible = false; dispatch("hidden"); }
|
||||
export const toggle = () => {
|
||||
if (visible) {
|
||||
hide()
|
||||
} else {
|
||||
show()
|
||||
}
|
||||
}
|
||||
|
||||
const keydown = e => {
|
||||
if (e.key === 'Escape') {
|
||||
hide();
|
||||
return;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={keydown}/>
|
||||
|
||||
{#if visible}
|
||||
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
|
||||
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
|
||||
<div class="header highlight_1">
|
||||
<div class="title">{title}</div>
|
||||
<button class="button_close button_red" on:click={hide}>
|
||||
<i class="icon">close</i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="body">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.background {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.window {
|
||||
position: absolute;
|
||||
z-index: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--layer_2_color);
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -20%);
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
text-align: left;
|
||||
box-shadow: var(--shadow_color) 0px 0px 50px;
|
||||
}
|
||||
.header {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1px;
|
||||
}
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.2em;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.button_close {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.body {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
39
svelte/src/util/Spinner.svelte
Normal file
39
svelte/src/util/Spinner.svelte
Normal file
@@ -0,0 +1,39 @@
|
||||
<svg version="1.1"
|
||||
class="svg_spinner"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 80 80"
|
||||
xml:space="preserve">
|
||||
<path
|
||||
d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
|
||||
c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
|
||||
c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
|
||||
l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
|
||||
c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
|
||||
c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
|
||||
c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
|
||||
c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
|
||||
c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
|
||||
c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
|
||||
c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
|
||||
c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
|
||||
c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
|
||||
<animateTransform
|
||||
attributeType="xml"
|
||||
attributeName="transform"
|
||||
type="rotate"
|
||||
from="0 40 40"
|
||||
to="360 40 40"
|
||||
dur="0.6s"
|
||||
repeatCount="indefinite"/>
|
||||
</path>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
color: var(--highlight_color);
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
Reference in New Issue
Block a user