init
This commit is contained in:
commit
7fc8feb0cc
11
Makefile
Executable file
11
Makefile
Executable file
@ -0,0 +1,11 @@
|
||||
MAKEFLAGS += -j2
|
||||
|
||||
export PORT = 8080
|
||||
|
||||
dev: dev-server dev-view
|
||||
|
||||
dev-server:
|
||||
cd server && gin run main.go
|
||||
dev-view:
|
||||
cd view && npm run dev
|
||||
|
||||
1
server/.gitignore
vendored
Normal file
1
server/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
gin-bin
|
||||
5
server/go.mod
Executable file
5
server/go.mod
Executable file
@ -0,0 +1,5 @@
|
||||
module git.jim-fx.com/max/karl-server
|
||||
|
||||
go 1.16
|
||||
|
||||
require github.com/gin-gonic/gin v1.6.3
|
||||
42
server/go.sum
Executable file
42
server/go.sum
Executable file
@ -0,0 +1,42 @@
|
||||
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||
github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
|
||||
github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
|
||||
github.com/gin-gonic/gin v1.6.3 h1:ahKqKTFpO5KTPHxWZjEdPScmYaGtLo8Y4DMHoEsnp14=
|
||||
github.com/gin-gonic/gin v1.6.3/go.mod h1:75u5sXoLsGZoRN5Sgbi1eraJ4GU3++wFwWzhwvtwp4M=
|
||||
github.com/go-playground/assert/v2 v2.0.1/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
|
||||
github.com/go-playground/locales v0.13.0 h1:HyWk6mgj5qFqCT5fjGBuRArbVDfE4hi8+e8ceBS/t7Q=
|
||||
github.com/go-playground/locales v0.13.0/go.mod h1:taPMhCMXrRLJO55olJkUXHZBHCxTMfnGwq/HNwmWNS8=
|
||||
github.com/go-playground/universal-translator v0.17.0 h1:icxd5fm+REJzpZx7ZfpaD876Lmtgy7VtROAbHHXk8no=
|
||||
github.com/go-playground/universal-translator v0.17.0/go.mod h1:UkSxE5sNxxRwHyU+Scu5vgOQjsIJAF8j9muTVoKLVtA=
|
||||
github.com/go-playground/validator/v10 v10.2.0 h1:KgJ0snyC2R9VXYN2rneOtQcw5aHQB1Vv0sFl1UcHBOY=
|
||||
github.com/go-playground/validator/v10 v10.2.0/go.mod h1:uOYAAleCW8F/7oMFd6aG0GOhaH6EGOAJShg8Id5JGkI=
|
||||
github.com/golang/protobuf v1.3.3 h1:gyjaxf+svBWX08ZjK86iN9geUJF0H6gp2IRKX6Nf6/I=
|
||||
github.com/golang/protobuf v1.3.3/go.mod h1:vzj43D7+SQXF/4pzW/hwtAqwc6iTitCiVSaWz5lYuqw=
|
||||
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||
github.com/json-iterator/go v1.1.9 h1:9yzud/Ht36ygwatGx56VwCZtlI/2AD15T1X2sjSuGns=
|
||||
github.com/json-iterator/go v1.1.9/go.mod h1:KdQUCv79m/52Kvf8AW2vK1V8akMuk1QjK/uOdHXbAo4=
|
||||
github.com/leodido/go-urn v1.2.0 h1:hpXL4XnriNwQ/ABnpepYM/1vCLWNDfUNts8dX3xTG6Y=
|
||||
github.com/leodido/go-urn v1.2.0/go.mod h1:+8+nEpDfqqsY+g338gtMEUOtuK+4dEMhiQEgxpxOKII=
|
||||
github.com/mattn/go-isatty v0.0.12 h1:wuysRhFDzyxgEmMf5xjvJ2M9dZoWAXNNr5LSBS7uHXY=
|
||||
github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
|
||||
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421 h1:ZqeYNhU3OHLH3mGKHDcjJRFFRrJa6eAM5H+CtDdOsPc=
|
||||
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742 h1:Esafd1046DLDQ0W1YjYsBW+p8U2u7vzgW2SQVmlNazg=
|
||||
github.com/modern-go/reflect2 v0.0.0-20180701023420-4b7aa43c6742/go.mod h1:bx2lNnkwVCuqBIxFjflWJWanXIb3RllmbCylyMrvgv0=
|
||||
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
||||
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
|
||||
github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
|
||||
github.com/ugorji/go v1.1.7 h1:/68gy2h+1mWMrwZFeD1kQialdSzAb432dtpeJ42ovdo=
|
||||
github.com/ugorji/go v1.1.7/go.mod h1:kZn38zHttfInRq0xu/PH0az30d+z6vm202qpg1oXVMw=
|
||||
github.com/ugorji/go/codec v1.1.7 h1:2SvQaVZ1ouYrrKKwoSk2pzd4A9evlKJb9oTL+OaLUSs=
|
||||
github.com/ugorji/go/codec v1.1.7/go.mod h1:Ax+UKWsSmolVDwsd+7N3ZtXu+yMGCf907BLYF3GoBXY=
|
||||
golang.org/x/sys v0.0.0-20200116001909-b77594299b42 h1:vEOn+mP2zCOVzKckCZy6YsCtDblrpj/w7B9nxGNELpg=
|
||||
golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
|
||||
golang.org/x/text v0.3.2/go.mod h1:bEr9sfX3Q8Zfm5fL9x+3itogRgK3+ptLWKqgva+5dAk=
|
||||
golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
|
||||
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
|
||||
gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
||||
gopkg.in/yaml.v2 v2.2.8 h1:obN1ZagJSUGI0Ek/LBmuj4SNLPfIny3KsKFopxRdj10=
|
||||
gopkg.in/yaml.v2 v2.2.8/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
|
||||
33
server/main.go
Executable file
33
server/main.go
Executable file
@ -0,0 +1,33 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"os"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
)
|
||||
|
||||
var db = make(map[string]string)
|
||||
|
||||
func setupRouter() *gin.Engine {
|
||||
// Disable Console Color
|
||||
// gin.DisableConsoleColor()
|
||||
r := gin.Default()
|
||||
|
||||
r.Static("/", "../view/public")
|
||||
|
||||
return r
|
||||
}
|
||||
|
||||
func main() {
|
||||
r := setupRouter()
|
||||
|
||||
port := os.Getenv("PORT")
|
||||
if port == "" {
|
||||
port = "8080"
|
||||
}
|
||||
|
||||
fmt.Print("PORT: " + port)
|
||||
|
||||
r.Run(":" + port)
|
||||
}
|
||||
4
view/.gitignore
vendored
Executable file
4
view/.gitignore
vendored
Executable file
@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
2342
view/package-lock.json
generated
Executable file
2342
view/package-lock.json
generated
Executable file
File diff suppressed because it is too large
Load Diff
32
view/package.json
Executable file
32
view/package.json
Executable file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public",
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"idb": "^6.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^1.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^1.0.0",
|
||||
"svelte-file-dropzone": "^0.0.15"
|
||||
}
|
||||
}
|
||||
BIN
view/public/favicon.png
Executable file
BIN
view/public/favicon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
62
view/public/global.css
Executable file
62
view/public/global.css
Executable file
@ -0,0 +1,62 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
-webkit-padding: 0.4em 0;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
23
view/public/index.html
Executable file
23
view/public/index.html
Executable file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Karls Analyzer</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;900&display=swap" rel="stylesheet">
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
56
view/rollup.config.js
Executable file
56
view/rollup.config.js
Executable file
@ -0,0 +1,56 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
export default {
|
||||
input: 'src/main.ts',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({ sourceMap: !production }),
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({ output: 'bundle.css' }),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
typescript({
|
||||
sourceMap: !production,
|
||||
inlineSources: !production
|
||||
}),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
chokidar: {
|
||||
followSymlinks: true
|
||||
}
|
||||
}
|
||||
};
|
||||
25
view/src/App.svelte
Executable file
25
view/src/App.svelte
Executable file
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import * as routes from "./routes";
|
||||
import ToastWrapper from "./components/Toast/ToastWrapper.svelte";
|
||||
import { route as currentRoute } from "./stores";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
{#if $currentRoute in routes}
|
||||
<svelte:component this={routes[$currentRoute]} />
|
||||
{/if}
|
||||
|
||||
<ToastWrapper />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
main {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
80
view/src/components/AnimatedNumber.svelte
Normal file
80
view/src/components/AnimatedNumber.svelte
Normal file
@ -0,0 +1,80 @@
|
||||
<script>
|
||||
export let num;
|
||||
let prevNumber = num;
|
||||
let dirUp;
|
||||
|
||||
let isAnimating = false;
|
||||
let startAnimate = false;
|
||||
|
||||
const duration = 500;
|
||||
|
||||
$: if (num !== undefined) {
|
||||
if (num !== prevNumber) {
|
||||
isAnimating = true;
|
||||
dirUp = prevNumber < num;
|
||||
|
||||
setTimeout(() => {
|
||||
startAnimate = true;
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
isAnimating = false;
|
||||
startAnimate = false;
|
||||
prevNumber = num;
|
||||
}, duration);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper" class:isAnimating>
|
||||
<span>
|
||||
{num}
|
||||
</span>
|
||||
|
||||
{#if isAnimating}
|
||||
<span
|
||||
style={`transition: transform ${duration}ms ease, opacity ${duration}ms ease;`}
|
||||
class:down={startAnimate && dirUp}
|
||||
class:up={startAnimate && !dirUp}
|
||||
>
|
||||
{prevNumber}
|
||||
</span>
|
||||
|
||||
<span
|
||||
style={`transition: transform ${duration}ms ease, opacity ${duration}ms ease;`}
|
||||
class:down={!startAnimate && !dirUp}
|
||||
class:up={!startAnimate && dirUp}
|
||||
>
|
||||
{num}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wrapper.isAnimating > span:nth-child(1) {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.up {
|
||||
transform: translateY(-10px) !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.down {
|
||||
transform: translateY(10px) !important;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
.wrapper > span:nth-child(2),
|
||||
.wrapper > span:nth-child(3) {
|
||||
position: absolute;
|
||||
opacity: 1;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
350
view/src/components/DropZone/index.svelte
Executable file
350
view/src/components/DropZone/index.svelte
Executable file
@ -0,0 +1,350 @@
|
||||
<script>
|
||||
import { fromEvent } from "file-selector";
|
||||
import {
|
||||
allFilesAccepted,
|
||||
composeEventHandlers,
|
||||
fileAccepted,
|
||||
fileMatchSize,
|
||||
isEvtWithFiles,
|
||||
isIeOrEdge,
|
||||
isPropagationStopped,
|
||||
onDocumentDragOver,
|
||||
TOO_MANY_FILES_REJECTION,
|
||||
} from "./utils";
|
||||
import { onMount, onDestroy, createEventDispatcher } from "svelte";
|
||||
|
||||
//props
|
||||
/**
|
||||
* Set accepted file types.
|
||||
* See https://github.com/okonet/attr-accept for more information.
|
||||
*/
|
||||
export let accept; // string or string[]
|
||||
export let disabled = false;
|
||||
export let getFilesFromEvent = fromEvent;
|
||||
export let maxSize = Infinity;
|
||||
export let minSize = 0;
|
||||
export let multiple = true;
|
||||
export let preventDropOnDocument = true;
|
||||
export let noClick = false;
|
||||
export let noKeyboard = false;
|
||||
export let noDrag = false;
|
||||
export let noDragEventsBubbling = false;
|
||||
export let containerClasses = "";
|
||||
export let containerStyles = "";
|
||||
export let disableDefaultStyles = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
//state
|
||||
|
||||
let state = {
|
||||
isFocused: false,
|
||||
isFileDialogActive: false,
|
||||
isDragActive: false,
|
||||
isDragAccept: false,
|
||||
isDragReject: false,
|
||||
draggedFiles: [],
|
||||
acceptedFiles: [],
|
||||
fileRejections: [],
|
||||
};
|
||||
|
||||
let rootRef;
|
||||
let inputRef;
|
||||
|
||||
function resetState() {
|
||||
state.isFileDialogActive = false;
|
||||
state.isDragActive = false;
|
||||
state.draggedFiles = [];
|
||||
state.acceptedFiles = [];
|
||||
state.fileRejections = [];
|
||||
}
|
||||
|
||||
// Fn for opening the file dialog programmatically
|
||||
function openFileDialog() {
|
||||
if (inputRef) {
|
||||
inputRef.value = null; // TODO check if null needs to be set
|
||||
state.isFileDialogActive = true;
|
||||
inputRef.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Cb to open the file dialog when SPACE/ENTER occurs on the dropzone
|
||||
function onKeyDownCb(event) {
|
||||
// Ignore keyboard events bubbling up the DOM tree
|
||||
if (!rootRef || !rootRef.isEqualNode(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.keyCode === 32 || event.keyCode === 13) {
|
||||
event.preventDefault();
|
||||
openFileDialog();
|
||||
}
|
||||
}
|
||||
|
||||
// Update focus state for the dropzone
|
||||
function onFocusCb() {
|
||||
state.isFocused = true;
|
||||
}
|
||||
function onBlurCb() {
|
||||
state.isFocused = false;
|
||||
}
|
||||
|
||||
// Cb to open the file dialog when click occurs on the dropzone
|
||||
function onClickCb() {
|
||||
if (noClick) {
|
||||
return;
|
||||
}
|
||||
|
||||
// In IE11/Edge the file-browser dialog is blocking, therefore, use setTimeout()
|
||||
// to ensure React can handle state changes
|
||||
// See: https://github.com/react-dropzone/react-dropzone/issues/450
|
||||
if (isIeOrEdge()) {
|
||||
setTimeout(openFileDialog, 0);
|
||||
} else {
|
||||
openFileDialog();
|
||||
}
|
||||
}
|
||||
|
||||
function onDragEnterCb(event) {
|
||||
event.preventDefault();
|
||||
stopPropagation(event);
|
||||
|
||||
dragTargetsRef = [...dragTargetsRef, event.target];
|
||||
|
||||
if (isEvtWithFiles(event)) {
|
||||
Promise.resolve(getFilesFromEvent(event)).then((draggedFiles) => {
|
||||
if (isPropagationStopped(event) && !noDragEventsBubbling) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.draggedFiles = draggedFiles;
|
||||
state.isDragActive = true;
|
||||
|
||||
dispatch("dragenter", {
|
||||
dragEvent: event,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onDragOverCb(event) {
|
||||
event.preventDefault();
|
||||
stopPropagation(event);
|
||||
|
||||
if (event.dataTransfer) {
|
||||
try {
|
||||
event.dataTransfer.dropEffect = "copy";
|
||||
} catch {} /* eslint-disable-line no-empty */
|
||||
}
|
||||
|
||||
if (isEvtWithFiles(event)) {
|
||||
dispatch("dragover", {
|
||||
dragEvent: event,
|
||||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function onDragLeaveCb(event) {
|
||||
event.preventDefault();
|
||||
stopPropagation(event);
|
||||
|
||||
// Only deactivate once the dropzone and all children have been left
|
||||
const targets = dragTargetsRef.filter(
|
||||
(target) => rootRef && rootRef.contains(target)
|
||||
);
|
||||
// Make sure to remove a target present multiple times only once
|
||||
// (Firefox may fire dragenter/dragleave multiple times on the same element)
|
||||
const targetIdx = targets.indexOf(event.target);
|
||||
if (targetIdx !== -1) {
|
||||
targets.splice(targetIdx, 1);
|
||||
}
|
||||
dragTargetsRef = targets;
|
||||
if (targets.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.isDragActive = false;
|
||||
state.draggedFiles = [];
|
||||
|
||||
if (isEvtWithFiles(event)) {
|
||||
dispatch("dragleave", {
|
||||
dragEvent: event,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onDropCb(event) {
|
||||
event.preventDefault();
|
||||
stopPropagation(event);
|
||||
|
||||
dragTargetsRef = [];
|
||||
|
||||
if (isEvtWithFiles(event)) {
|
||||
Promise.resolve(getFilesFromEvent(event)).then((files) => {
|
||||
if (isPropagationStopped(event) && !noDragEventsBubbling) {
|
||||
return;
|
||||
}
|
||||
|
||||
const acceptedFiles = [];
|
||||
const fileRejections = [];
|
||||
|
||||
files.forEach((file) => {
|
||||
const [accepted, acceptError] = fileAccepted(file, accept);
|
||||
const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
|
||||
if (accepted && sizeMatch) {
|
||||
acceptedFiles.push(file);
|
||||
} else {
|
||||
const errors = [acceptError, sizeError].filter((e) => e);
|
||||
fileRejections.push({ file, errors });
|
||||
}
|
||||
});
|
||||
|
||||
if (!multiple && acceptedFiles.length > 1) {
|
||||
// Reject everything and empty accepted files
|
||||
acceptedFiles.forEach((file) => {
|
||||
fileRejections.push({ file, errors: [TOO_MANY_FILES_REJECTION] });
|
||||
});
|
||||
acceptedFiles.splice(0);
|
||||
}
|
||||
|
||||
state.acceptedFiles = acceptedFiles;
|
||||
state.fileRejections = fileRejections;
|
||||
|
||||
dispatch("drop", {
|
||||
acceptedFiles,
|
||||
fileRejections,
|
||||
event,
|
||||
});
|
||||
|
||||
if (fileRejections.length > 0) {
|
||||
dispatch("droprejected", {
|
||||
fileRejections,
|
||||
event,
|
||||
});
|
||||
}
|
||||
|
||||
if (acceptedFiles.length > 0) {
|
||||
dispatch("dropaccepted", {
|
||||
acceptedFiles,
|
||||
event,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
resetState();
|
||||
}
|
||||
|
||||
function composeHandler(fn) {
|
||||
return disabled ? null : fn;
|
||||
}
|
||||
|
||||
function composeKeyboardHandler(fn) {
|
||||
return noKeyboard ? null : composeHandler(fn);
|
||||
}
|
||||
|
||||
function composeDragHandler(fn) {
|
||||
return noDrag ? null : composeHandler(fn);
|
||||
}
|
||||
|
||||
function stopPropagation(event) {
|
||||
if (noDragEventsBubbling) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
let dragTargetsRef = [];
|
||||
function onDocumentDrop(event) {
|
||||
if (rootRef && rootRef.contains(event.target)) {
|
||||
// If we intercepted an event for our instance, let it propagate down to the instance's onDrop handler
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
dragTargetsRef = [];
|
||||
}
|
||||
|
||||
// Update file dialog active state when the window is focused on
|
||||
function onWindowFocus() {
|
||||
// Execute the timeout only if the file dialog is opened in the browser
|
||||
if (state.isFileDialogActive) {
|
||||
setTimeout(() => {
|
||||
if (inputRef) {
|
||||
const { files } = inputRef;
|
||||
|
||||
if (!files.length) {
|
||||
state.isFileDialogActive = false;
|
||||
dispatch("filedialogcancel");
|
||||
}
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener("focus", onWindowFocus, false);
|
||||
if (preventDropOnDocument) {
|
||||
document.addEventListener("dragover", onDocumentDragOver, false);
|
||||
document.addEventListener("drop", onDocumentDrop, false);
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
window.removeEventListener("focus", onWindowFocus, false);
|
||||
if (preventDropOnDocument) {
|
||||
document.removeEventListener("dragover", onDocumentDragOver);
|
||||
document.removeEventListener("drop", onDocumentDrop);
|
||||
}
|
||||
});
|
||||
|
||||
function onInputElementClick(event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={rootRef}
|
||||
tabindex="0"
|
||||
class="{disableDefaultStyles ? '' : 'dropzone'}
|
||||
{containerClasses}"
|
||||
style={containerStyles}
|
||||
on:keydown={composeKeyboardHandler(onKeyDownCb)}
|
||||
on:focus={composeKeyboardHandler(onFocusCb)}
|
||||
on:blur={composeKeyboardHandler(onBlurCb)}
|
||||
on:click={composeHandler(onClickCb)}
|
||||
on:dragenter={composeDragHandler(onDragEnterCb)}
|
||||
on:dragover={composeDragHandler(onDragOverCb)}
|
||||
on:dragleave={composeDragHandler(onDragLeaveCb)}
|
||||
on:drop={composeDragHandler(onDropCb)}
|
||||
>
|
||||
<input
|
||||
{accept}
|
||||
{multiple}
|
||||
type="file"
|
||||
autocomplete="off"
|
||||
tabindex="-1"
|
||||
on:change={onDropCb}
|
||||
on:click={onInputElementClick}
|
||||
bind:this={inputRef}
|
||||
style="display: none;"
|
||||
/>
|
||||
<slot>
|
||||
<p>Drag 'n' drop some files here, or click to select files</p>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.dropzone {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-width: 2px;
|
||||
outline: solid thin black;
|
||||
width: 300px;
|
||||
}
|
||||
.dropzone:focus {
|
||||
border-color: #2196f3;
|
||||
}
|
||||
</style>
|
||||
33
view/src/components/DropZone/utils/attr-accept.ts
Normal file
33
view/src/components/DropZone/utils/attr-accept.ts
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* Check if the provided file type should be accepted by the input with accept attribute.
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
|
||||
*
|
||||
* Inspired by https://github.com/enyo/dropzone
|
||||
*
|
||||
* @param file {File} https://developer.mozilla.org/en-US/docs/Web/API/File
|
||||
* @param acceptedFiles {string}
|
||||
* @returns {boolean}
|
||||
*/
|
||||
|
||||
export default function(file, acceptedFiles) {
|
||||
if (file && acceptedFiles) {
|
||||
const acceptedFilesArray = Array.isArray(acceptedFiles)
|
||||
? acceptedFiles
|
||||
: acceptedFiles.split(",");
|
||||
const fileName = file.name || "";
|
||||
const mimeType = (file.type || "").toLowerCase();
|
||||
const baseMimeType = mimeType.replace(/\/.*$/, "");
|
||||
|
||||
return acceptedFilesArray.some((type) => {
|
||||
const validType = type.trim().toLowerCase();
|
||||
if (validType.charAt(0) === ".") {
|
||||
return fileName.toLowerCase().endsWith(validType);
|
||||
} else if (validType.endsWith("/*")) {
|
||||
// This is something like a image/* mime type
|
||||
return baseMimeType === validType.replace(/\/.*$/, "");
|
||||
}
|
||||
return mimeType === validType;
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
151
view/src/components/DropZone/utils/index.ts
Normal file
151
view/src/components/DropZone/utils/index.ts
Normal file
@ -0,0 +1,151 @@
|
||||
import accepts from "./attr-accept";
|
||||
|
||||
// Error codes
|
||||
export const FILE_INVALID_TYPE = "file-invalid-type";
|
||||
export const FILE_TOO_LARGE = "file-too-large";
|
||||
export const FILE_TOO_SMALL = "file-too-small";
|
||||
export const TOO_MANY_FILES = "too-many-files";
|
||||
|
||||
// File Errors
|
||||
export const getInvalidTypeRejectionErr = (accept) => {
|
||||
accept = Array.isArray(accept) && accept.length === 1 ? accept[0] : accept;
|
||||
const messageSuffix = Array.isArray(accept)
|
||||
? `one of ${accept.join(", ")}`
|
||||
: accept;
|
||||
return {
|
||||
code: FILE_INVALID_TYPE,
|
||||
message: `File type must be ${messageSuffix}`,
|
||||
};
|
||||
};
|
||||
|
||||
export const getTooLargeRejectionErr = (maxSize) => {
|
||||
return {
|
||||
code: FILE_TOO_LARGE,
|
||||
message: `File is larger than ${maxSize} bytes`,
|
||||
};
|
||||
};
|
||||
|
||||
export const getTooSmallRejectionErr = (minSize) => {
|
||||
return {
|
||||
code: FILE_TOO_SMALL,
|
||||
message: `File is smaller than ${minSize} bytes`,
|
||||
};
|
||||
};
|
||||
|
||||
export const TOO_MANY_FILES_REJECTION = {
|
||||
code: TOO_MANY_FILES,
|
||||
message: "Too many files",
|
||||
};
|
||||
|
||||
// Firefox versions prior to 53 return a bogus MIME type for every file drag, so dragovers with
|
||||
// that MIME type will always be accepted
|
||||
export function fileAccepted(file, accept) {
|
||||
const isAcceptable =
|
||||
file.type === "application/x-moz-file" || accepts(file, accept);
|
||||
return [
|
||||
isAcceptable,
|
||||
isAcceptable ? null : getInvalidTypeRejectionErr(accept),
|
||||
];
|
||||
}
|
||||
|
||||
export function fileMatchSize(file, minSize, maxSize) {
|
||||
if (isDefined(file.size)) {
|
||||
if (isDefined(minSize) && isDefined(maxSize)) {
|
||||
if (file.size > maxSize) return [false, getTooLargeRejectionErr(maxSize)];
|
||||
if (file.size < minSize) return [false, getTooSmallRejectionErr(minSize)];
|
||||
} else if (isDefined(minSize) && file.size < minSize)
|
||||
return [false, getTooSmallRejectionErr(minSize)];
|
||||
else if (isDefined(maxSize) && file.size > maxSize)
|
||||
return [false, getTooLargeRejectionErr(maxSize)];
|
||||
}
|
||||
return [true, null];
|
||||
}
|
||||
|
||||
function isDefined(value) {
|
||||
return value !== undefined && value !== null;
|
||||
}
|
||||
|
||||
export function allFilesAccepted({
|
||||
files,
|
||||
accept,
|
||||
minSize,
|
||||
maxSize,
|
||||
multiple,
|
||||
}) {
|
||||
if (!multiple && files.length > 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return files.every((file) => {
|
||||
const [accepted] = fileAccepted(file, accept);
|
||||
const [sizeMatch] = fileMatchSize(file, minSize, maxSize);
|
||||
return accepted && sizeMatch;
|
||||
});
|
||||
}
|
||||
|
||||
// React's synthetic events has event.isPropagationStopped,
|
||||
// but to remain compatibility with other libs (Preact) fall back
|
||||
// to check event.cancelBubble
|
||||
export function isPropagationStopped(event) {
|
||||
if (typeof event.isPropagationStopped === "function") {
|
||||
return event.isPropagationStopped();
|
||||
} else if (typeof event.cancelBubble !== "undefined") {
|
||||
return event.cancelBubble;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export function isEvtWithFiles(event) {
|
||||
if (!event.dataTransfer) {
|
||||
return !!event.target && !!event.target.files;
|
||||
}
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types#file
|
||||
return Array.prototype.some.call(
|
||||
event.dataTransfer.types,
|
||||
(type) => type === "Files" || type === "application/x-moz-file"
|
||||
);
|
||||
}
|
||||
|
||||
export function isKindFile(item) {
|
||||
return typeof item === "object" && item !== null && item.kind === "file";
|
||||
}
|
||||
|
||||
// allow the entire document to be a drag target
|
||||
export function onDocumentDragOver(event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function isIe(userAgent) {
|
||||
return (
|
||||
userAgent.indexOf("MSIE") !== -1 || userAgent.indexOf("Trident/") !== -1
|
||||
);
|
||||
}
|
||||
|
||||
function isEdge(userAgent) {
|
||||
return userAgent.indexOf("Edge/") !== -1;
|
||||
}
|
||||
|
||||
export function isIeOrEdge(userAgent = window.navigator.userAgent) {
|
||||
return isIe(userAgent) || isEdge(userAgent);
|
||||
}
|
||||
|
||||
/**
|
||||
* This is intended to be used to compose event handlers
|
||||
* They are executed in order until one of them calls `event.isPropagationStopped()`.
|
||||
* Note that the check is done on the first invoke too,
|
||||
* meaning that if propagation was stopped before invoking the fns,
|
||||
* no handlers will be executed.
|
||||
*
|
||||
* @param {Function} fns the event hanlder functions
|
||||
* @return {Function} the event handler to add to an element
|
||||
*/
|
||||
export function composeEventHandlers(...fns) {
|
||||
return (event, ...args) =>
|
||||
fns.some((fn) => {
|
||||
if (!isPropagationStopped(event) && fn) {
|
||||
fn(event, ...args);
|
||||
}
|
||||
return isPropagationStopped(event);
|
||||
});
|
||||
}
|
||||
8
view/src/components/Toast/Toast.d.ts
vendored
Normal file
8
view/src/components/Toast/Toast.d.ts
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
interface Toast {
|
||||
type: string;
|
||||
msg: string;
|
||||
time: number;
|
||||
|
||||
res?: () => void;
|
||||
rej?: () => void;
|
||||
}
|
||||
65
view/src/components/Toast/Toast.svelte
Normal file
65
view/src/components/Toast/Toast.svelte
Normal file
@ -0,0 +1,65 @@
|
||||
<script lang="ts">
|
||||
import { fly } from "svelte/transition";
|
||||
export let msg;
|
||||
export let time;
|
||||
export let type;
|
||||
export let res;
|
||||
export let rej;
|
||||
</script>
|
||||
|
||||
<div transition:fly={{ duration: 500, x: -50 }} class={`wrapper type-${type}`}>
|
||||
<p>{@html msg}</p>
|
||||
|
||||
{#if type === "confirm"}
|
||||
<div class="button-wrapper">
|
||||
<button on:click={res}>okay</button>
|
||||
<button on:click={rej}>nope</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
outline: solid thin black;
|
||||
padding-top: 2.5px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.wrapper.type-warn {
|
||||
background-color: rgb(255, 255, 132);
|
||||
}
|
||||
|
||||
.wrapper.type-warn > p::before,
|
||||
.wrapper.type-warn > p::after {
|
||||
content: " ! ";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.button-wrapper > button {
|
||||
border-radius: 0px;
|
||||
background: none;
|
||||
height: 100%;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
color: black;
|
||||
outline: solid thin black;
|
||||
}
|
||||
|
||||
.button-wrapper > button:first-child {
|
||||
background-color: rgb(131, 255, 131);
|
||||
}
|
||||
.button-wrapper > button:last-child {
|
||||
background-color: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
19
view/src/components/Toast/ToastWrapper.svelte
Normal file
19
view/src/components/Toast/ToastWrapper.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
import Toast from "./Toast.svelte";
|
||||
import toasts from "./store";
|
||||
</script>
|
||||
|
||||
<div class="toast-wrapper">
|
||||
{#each $toasts as toast}
|
||||
<Toast {...toast} />
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toast-wrapper {
|
||||
padding: 1em;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
</style>
|
||||
44
view/src/components/Toast/index.ts
Normal file
44
view/src/components/Toast/index.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import store from "./store";
|
||||
|
||||
function add(type, msg, duration) {
|
||||
|
||||
let prom: Promise<boolean>;
|
||||
|
||||
const toast: Toast = {
|
||||
type,
|
||||
msg,
|
||||
time: duration
|
||||
}
|
||||
|
||||
if (type === "confirm") {
|
||||
prom = new Promise((res, rej) => {
|
||||
toast.res = () => {
|
||||
store.update(toasts => toasts.filter(t => t !== toast));
|
||||
res(true);
|
||||
};
|
||||
toast.rej = () => {
|
||||
store.update(toasts => toasts.filter(t => t !== toast));
|
||||
res(false);
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
store.update(toasts => [...toasts, toast])
|
||||
|
||||
setTimeout(() => {
|
||||
store.update(toasts => toasts.filter(t => t !== toast));
|
||||
if (type === "confirm") {
|
||||
toast.rej();
|
||||
}
|
||||
}, duration);
|
||||
|
||||
return prom;
|
||||
|
||||
}
|
||||
|
||||
export default {
|
||||
info: msg => add("info", msg, 3000),
|
||||
warn: msg => add("warn", msg, 3000),
|
||||
error: msg => add("error", msg, 3000),
|
||||
confirm: msg => add("confirm", msg, 10000),
|
||||
}
|
||||
3
view/src/components/Toast/store.ts
Normal file
3
view/src/components/Toast/store.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export default writable<Toast[]>([]);
|
||||
13
view/src/icons/Cross.svelte
Normal file
13
view/src/icons/Cross.svelte
Normal file
@ -0,0 +1,13 @@
|
||||
<svg
|
||||
width="82"
|
||||
height="82"
|
||||
viewBox="0 0 82 82"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M41 0V81.5M81.75 40.75L0.25 40.75"
|
||||
stroke="black"
|
||||
stroke-width="0.75px"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 214 B |
7
view/src/main.ts
Executable file
7
view/src/main.ts
Executable file
@ -0,0 +1,7 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body
|
||||
});
|
||||
|
||||
export default app;
|
||||
2
view/src/routes/index.ts
Executable file
2
view/src/routes/index.ts
Executable file
@ -0,0 +1,2 @@
|
||||
export { default as main } from "./main.svelte"
|
||||
export { default as list } from "./list.svelte"
|
||||
24
view/src/routes/list.svelte
Normal file
24
view/src/routes/list.svelte
Normal file
@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { store as imageStore } from "../stores/images";
|
||||
|
||||
let images = [];
|
||||
const urlCreator = window.URL || window.webkitURL;
|
||||
|
||||
$: if ($imageStore.length) {
|
||||
images = $imageStore.map((img) => {
|
||||
const blob = new Blob([img.data], { type: img.type });
|
||||
const imageUrl = urlCreator.createObjectURL(blob);
|
||||
return {
|
||||
...img,
|
||||
imageUrl,
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each images as img}
|
||||
<p>{img.filename}</p>
|
||||
<img src={img.imageUrl} />
|
||||
{/each}
|
||||
|
||||
<h3>List</h3>
|
||||
168
view/src/routes/main.svelte
Executable file
168
view/src/routes/main.svelte
Executable file
@ -0,0 +1,168 @@
|
||||
<script lang="ts">
|
||||
import DropZone from "../components/DropZone/index.svelte";
|
||||
import AnimatedNumber from "../components/AnimatedNumber.svelte";
|
||||
import Cross from "../icons/Cross.svelte";
|
||||
import Toast from "../components/Toast";
|
||||
import { route as currentRoute, images } from "../stores";
|
||||
let acceptedFiles: File[] = [];
|
||||
let hovering = false;
|
||||
|
||||
async function handleFilesSelect(e) {
|
||||
if (e.detail.acceptedFiles) {
|
||||
const addedFiles: File[] = e.detail.acceptedFiles;
|
||||
|
||||
const newFiles: File[] = [];
|
||||
const dupes: File[] = [];
|
||||
|
||||
addedFiles.forEach((f) => {
|
||||
const isNew = !acceptedFiles.find((_f) => {
|
||||
return (
|
||||
_f.lastModified === f.lastModified &&
|
||||
_f.name === f.name &&
|
||||
_f.type === f.type &&
|
||||
_f.size === f.size
|
||||
);
|
||||
});
|
||||
|
||||
if (isNew) {
|
||||
newFiles.push(f);
|
||||
} else {
|
||||
dupes.push(f);
|
||||
}
|
||||
});
|
||||
|
||||
acceptedFiles = [...acceptedFiles, ...newFiles];
|
||||
|
||||
if (dupes.length) {
|
||||
const loadDupes = await Toast.confirm(
|
||||
`Add <b> ${dupes.length}</b> duplicate file${
|
||||
dupes.length > 1 ? "s" : ""
|
||||
}?`
|
||||
);
|
||||
|
||||
if (loadDupes) {
|
||||
acceptedFiles = [...acceptedFiles, ...dupes];
|
||||
}
|
||||
}
|
||||
}
|
||||
hovering = false;
|
||||
}
|
||||
|
||||
async function handleLoadingImages(e) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
|
||||
const img = await Promise.all(
|
||||
acceptedFiles.map(async (f) => {
|
||||
return {
|
||||
name: f.name,
|
||||
filename: f.name,
|
||||
type: f.type,
|
||||
lastModified: f.lastModified,
|
||||
data: await f.arrayBuffer(),
|
||||
};
|
||||
})
|
||||
);
|
||||
|
||||
images.add(img);
|
||||
|
||||
await currentRoute.set("list");
|
||||
}
|
||||
|
||||
function handleClearingImages(e) {
|
||||
e.preventDefault();
|
||||
e.stopImmediatePropagation();
|
||||
e.stopPropagation();
|
||||
acceptedFiles = [];
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
<DropZone
|
||||
accept="image/*"
|
||||
on:drop={handleFilesSelect}
|
||||
on:dragenter={() => (hovering = true)}
|
||||
on:dragleave={() => (hovering = false)}
|
||||
on:dragenter={() => (hovering = false)}
|
||||
>
|
||||
<div class="inner-wrapper">
|
||||
<div class="icon-wrapper" class:hovering>
|
||||
<Cross />
|
||||
</div>
|
||||
<p>Drop an image here to get started</p>
|
||||
|
||||
<div class="button-wrapper" class:visible={acceptedFiles.length > 0}>
|
||||
<button on:click={handleLoadingImages}>
|
||||
load <b><AnimatedNumber num={acceptedFiles.length} /></b>
|
||||
</button>
|
||||
<button on:click={handleClearingImages}> clear </button>
|
||||
</div>
|
||||
</div>
|
||||
</DropZone>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.wrapper {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Roboto;
|
||||
margin-left: 20px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.button-wrapper > button {
|
||||
border-radius: 0px;
|
||||
background: none;
|
||||
height: 100%;
|
||||
border: none;
|
||||
color: black;
|
||||
outline: solid thin black;
|
||||
}
|
||||
|
||||
.button-wrapper > button:first-child {
|
||||
background-color: rgb(131, 255, 131);
|
||||
}
|
||||
.button-wrapper > button:last-child {
|
||||
background-color: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
.button-wrapper {
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
transform: translateY(100%);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-wrapper.hovering {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.button-wrapper.visible {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
</style>
|
||||
7
view/src/stores/activeImage.ts
Normal file
7
view/src/stores/activeImage.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
const r = "route" in localStorage ? localStorage.getItem("route"):"main";
|
||||
|
||||
const store = writable<string>(r);
|
||||
|
||||
export default store;
|
||||
63
view/src/stores/images.ts
Normal file
63
view/src/stores/images.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { openDB, DBSchema } from 'idb';
|
||||
|
||||
interface Image {
|
||||
name: string,
|
||||
filename: string
|
||||
lastModified: number
|
||||
type: string
|
||||
data: ArrayBuffer
|
||||
}
|
||||
|
||||
interface ImageDB extends DBSchema {
|
||||
images: {
|
||||
value: Image;
|
||||
key: string;
|
||||
indexes: { 'filename': string };
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
const db = openDB<ImageDB>('Images', 1, {
|
||||
upgrade(db) {
|
||||
// Create a store of objects
|
||||
const store = db.createObjectStore('images', {
|
||||
// The 'id' property of the object will be the key.
|
||||
keyPath: 'id',
|
||||
// If it isn't explicitly set, create a value by auto incrementing.
|
||||
autoIncrement: true,
|
||||
});
|
||||
// Create an index on the 'date' property of the objects.
|
||||
store.createIndex('filename', 'filename');
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
const store = writable<Image[]>([]);
|
||||
|
||||
async function add(img: Image | Image[]) {
|
||||
|
||||
const images = Array.isArray(img) ? [...img] : [img];
|
||||
|
||||
const tx = (await db).transaction('images', 'readwrite');
|
||||
|
||||
await Promise.all(images.map(img => tx.store.add(img)));
|
||||
|
||||
await tx.done;
|
||||
|
||||
}
|
||||
|
||||
async function get(name: string): Promise<Image> {
|
||||
return new Promise((res, rej) => {
|
||||
res({} as Image);
|
||||
})
|
||||
}
|
||||
|
||||
async function getAll(): Promise<Image[]> {
|
||||
return (await db).getAll("images");
|
||||
}
|
||||
|
||||
(async () => store.set(await getAll()))()
|
||||
|
||||
export { store, add, get, getAll };
|
||||
3
view/src/stores/index.ts
Normal file
3
view/src/stores/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import * as images from "./images";
|
||||
export { images }
|
||||
export { default as route } from "./route";
|
||||
18
view/src/stores/route.ts
Normal file
18
view/src/stores/route.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
let r = "main";
|
||||
|
||||
if (window.location.hash.length) {
|
||||
r = window.location.hash.replace("#", "");
|
||||
} else {
|
||||
r = "main";
|
||||
}
|
||||
|
||||
const store = writable<string>(r);
|
||||
|
||||
store.subscribe(s => {
|
||||
if (s === "main") s = ""
|
||||
window.location.hash = s;
|
||||
})
|
||||
|
||||
export default store;
|
||||
6
view/tsconfig.json
Executable file
6
view/tsconfig.json
Executable file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user