refactor code and add dragover visual cue

Signed-off-by: Gunwant Jain <mail@wantguns.dev>

static/css/index.css

@@ -0,0 +1,72 @@
+html,
+body {
+    overflow-y: hidden;
+}
+
+body {
+    height: 95vh;
+    font-family: monospace;
+
+    display: grid;
+}
+
+form.highlight {
+    border: 1vh dashed #F29718;
+}
+
+.grid_form {
+    display: grid;
+    grid-template-columns: 4fr 1fr 1fr;
+    height: 100vh;
+    margin-top: 1vh;
+    align-items: start;
+    justify-items: center;
+}
+
+textarea {
+    height: 90%;
+    width: 100%;
+
+    background: none;
+    border: none;
+
+    resize: none;
+    overflow: auto;
+
+    color: inherit;
+    font-family: monospace;
+    line-height: inherit;
+}
+
+select {
+    color: inherit;
+    background-color: #0f1419;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    width: 80%;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: inherit;
+    line-height: inherit;
+}
+
+button[type="submit"] {
+    background-color: #F29718;
+    border: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    width: 50%;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+    cursor: pointer;
+}
+
+*:focus {
+    outline: none;
+}
+
+*.hidden {
+    display: none;
+}

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);
+            });
+    }
+}