refactor code and add dragover visual cue

Signed-off-by: Gunwant Jain <mail@wantguns.dev>
2021-12-26 08:23:18 +05:30
parent a9dc9452fc
commit cca3a8bec9
6 changed files with 271 additions and 230 deletions
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -0,0 +1,105 @@
+const body = document.querySelector('body');
+const form = document.querySelector('form');
+const grid_form = document.querySelector('.grid_form');
+const textarea = document.querySelector('textarea');
+const select = document.querySelector('select');
+const submitButton = document.querySelector('button[type="submit"]');
+
+const onInput = () => {
+    submitButton.classList.toggle('hidden', !textarea.value);
+    select.classList.toggle('hidden', !textarea.value);
+}
+textarea.addEventListener('input', onInput);
+onInput();
+
+document.body.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.ctrlKey) {
+        form.submit();
+    }
+});
+
+async function postData(url = '', data) {
+    const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: data
+    });
+
+    const text = await response.text();
+    return text;
+}
+
+function preventDefaults(e) {
+    e.preventDefault()
+    e.stopPropagation()
+}
+
+// Prevent default drag behaviors
+['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+    form.addEventListener(eventName, preventDefaults, false);
+    document.body.addEventListener(eventName, preventDefaults, false);
+});
+
+// highlight the dragarea
+['dragenter', 'dragover'].forEach(eventName => {
+    form.addEventListener(eventName, highlight, false);
+});
+
+// unhighlight the dragarea
+['dragleave', 'drop'].forEach(eventName => {
+    form.addEventListener(eventName, unhighlight, false);
+});
+
+function highlight(e) {
+    form.classList.add('highlight');
+    grid_form.classList.add('hidden');
+}
+
+function unhighlight(e) {
+    form.classList.remove('highlight');
+    grid_form.classList.remove('hidden');
+}
+
+// Files are dropped
+function dropHandler(ev) {
+    ev.preventDefault();
+
+    if (ev.dataTransfer.items) {
+        var item = ev.dataTransfer.items[0];
+        var blob = item.getAsFile();
+        const ext = blob.name.split(".")[1];
+        var url = window.location.href;
+
+        // Give a visual cue
+        grid_form.classList.add('hidden');
+
+        postData(url, blob)
+            .then(data => {
+                window.location.href = data + "." + ext;
+            })
+            .catch(function (err) {
+                console.info(err + " url: " + url);
+            });
+    }
+}
+
+
+// pasting files from the clipboard
+document.onpaste = function (pasteEvent) {
+    var item = pasteEvent.clipboardData.items[0];
+    var blob = item.getAsFile();
+
+    if (blob !== null && blob !== '') {
+        var url = window.location.href;
+
+        postData(url, blob)
+            .then(data => {
+                window.location.href = data;
+            })
+            .catch(function (err) {
+                console.info(err + " url: " + url);
+            });
+    }
+}