commit e1dd8faaa5a4ace2854a71c10695105a7e07cf49
parent f9b4d17140c708a1d853dff0555d0ccaf7c172fd
Author: Orangerot <purple@orangerot.dev>
Date: Thu, 12 Dec 2024 02:47:17 +0100
feat: load image by dragging it into viewport
Diffstat:
2 files changed, 22 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
</head>
<body style="padding-top: 100dvh; " class="import-active">
<div class="navbar columns is-mobile is-fixed-top">
- <div class="column">
+ <div class="column" id="viewport">
<div class="hero is-fullheight" style="min-height: 100dvh;">
<div class="hero-body">
<div class="container" >
diff --git a/main.js b/main.js
@@ -21,6 +21,8 @@ document.addEventListener("DOMContentLoaded", function() {
document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");
// bind listeners
+ document.getElementById("viewport").addEventListener("drop", drop_handler);
+ document.getElementById("viewport").addEventListener("dragover", event => event.preventDefault());
document.getElementById("take-picture").addEventListener("click", use_camera);
document.getElementById("cheese").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image)
@@ -101,6 +103,25 @@ function upload_image() {
img.onload = () => draw(true);
}
+// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+function drop_handler(ev) {
+ ev.preventDefault();
+ let file;
+
+ if (ev.dataTransfer.items) {
+ const item = ev.dataTransfer.items[0];
+ if (item.kind !== "file") return;
+ file = item.getAsFile();
+ } else {
+ file = ev.dataTransfer.files[0];
+ }
+ console.log(file);
+
+ document.body.className = "editor-active";
+ img.src = URL.createObjectURL(file);
+ img.onload = () => draw(true);
+}
+
function save_image(event) {
event.preventDefault();
draw(false);
