89 lines
1.6 KiB
Svelte
89 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { addEmitter } from './AddModal.svelte';
|
|
import Icon from './utils/Icon.svelte';
|
|
|
|
let dragging = false;
|
|
|
|
function onDrop(ev: DragEvent) {
|
|
if (ev.dataTransfer?.files.length) {
|
|
addEmitter.emit('files', Array.from(ev.dataTransfer?.files || []));
|
|
} // TODO: else check for URLs
|
|
dragging = false;
|
|
}
|
|
|
|
function onDragEnter() {
|
|
// noop
|
|
}
|
|
|
|
function onDragOver(ev: DragEvent) {
|
|
if (Array.from(ev.dataTransfer?.items || []).some((it) => it.kind === 'file')) {
|
|
dragging = true;
|
|
}
|
|
}
|
|
|
|
function onDragLeave() {
|
|
dragging = false;
|
|
}
|
|
|
|
function onPaste(ev: ClipboardEvent) {
|
|
if (ev.clipboardData?.files.length) {
|
|
addEmitter.emit('files', Array.from(ev.clipboardData?.files || []));
|
|
} // TODO: else check for URLs
|
|
}
|
|
</script>
|
|
|
|
<svelte:body
|
|
on:dragenter|preventDefault={onDragEnter}
|
|
on:dragover|preventDefault={onDragOver}
|
|
on:dragleave|preventDefault={onDragLeave}
|
|
on:drop|preventDefault={onDrop}
|
|
on:paste={onPaste}
|
|
/>
|
|
|
|
<div class="dropindicator" class:dragging>
|
|
<div class="content">
|
|
<div class="icon">
|
|
<Icon name="current-location" />
|
|
</div>
|
|
<p>Drop an URL, an image or a file here!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.dropindicator {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
|
|
display: none;
|
|
}
|
|
|
|
.dragging {
|
|
display: unset;
|
|
}
|
|
|
|
.content {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
background: rgba(0, 0, 0, 0.9);
|
|
|
|
color: var(--foreground);
|
|
border: solid 0.25em var(--foreground);
|
|
border-radius: 0.5em;
|
|
padding: 1.5em;
|
|
|
|
text-align: center;
|
|
font-size: 32px;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 128px;
|
|
}
|
|
</style>
|