Improve interface with simple drag and drop capability

git-svn-id: file:///srv/svn/repo/marisa/trunk@47 d6811dac-2434-b64a-9ddc-f563ab233461

static/dz.js

@@ -0,0 +1,85 @@
+// Handle drag and drop into a dropzone_element div:
+// send the files as a POST request to the server
+"use strict";
+
+// Only start once the DOM tree is ready
+if(document.readyState === "complete") {
+    setupzone();
+} else {
+    document.addEventListener("DOMContentLoaded", setupzone);
+}
+
+function setupzone() {
+    let dropzone = document.getElementById("dropzone");
+    let fileinput = document.getElementById("filebox");
+    let fallbackform = document.getElementById("fallbackform");
+
+    fallbackform.style.display = "none";
+
+    dropzone.className = "dropzone";
+    dropzone.innerHTML = "Click or drop file(s)";
+
+    dropzone.onclick = function() {
+        fileinput.click()
+	return false;
+    }
+
+    dropzone.ondragover = function() {
+        this.className = "dropzone dragover";
+        return false;
+    }
+    
+    dropzone.ondragleave = function() {
+        this.className = "dropzone";
+        return false;
+    }
+
+    dropzone.ondrop = function(e) {
+        // Stop browser from simply opening that was just dropped
+        e.preventDefault();  
+        // Restore original dropzone appearance
+        this.className = "dropzone";
+        sendfiles(e.dataTransfer.files)
+    }
+
+    fileinput.onchange = function(e) {
+        sendfiles(this.files)
+    }
+}
+
+function sendfiles(files) {
+    let uploads = document.getElementById("uploads");
+    let progressbar = document.createElement("progress");
+    let uploadlist = document.createElement("ul");
+    let formData = new FormData(), xhr = new XMLHttpRequest();
+
+    uploads.appendChild(progressbar);
+    uploads.appendChild(uploadlist);
+
+    formData.append("expiry", 10);
+    for(let i=0; i < files.length; i++) {
+        formData.append("file", files[i]);
+    }
+
+    // triggers periodically
+    xhr.upload.onprogress = function(e) {
+        // e.loaded - how many bytes downloaded
+        // e.lengthComputable = true if the server sent Content-Length header
+        // e.total - total number of bytes (if lengthComputable)
+
+    }
+
+    xhr.onreadystatechange = function() {
+        if(xhr.readyState === XMLHttpRequest.DONE) {
+		progressbar.remove();
+		this.response.split(/\r?\n/).forEach(function(link) {
+			let li = document.createElement("li");
+			li.innerHTML = `<a href="${link}">${link}</a>`;
+			uploadlist.appendChild(li);
+		});
+        }
+    }
+
+    xhr.open('POST', window.location.href, true); // async = true
+    xhr.send(formData); 
+}

static/partage.css

@@ -2,9 +2,9 @@ body {
 	padding: 5%;
 	margin: auto;
 	max-width: 540px;
-	text-align: center;
 	font-family: serif;
 	font-size: 1.5rem;
+	text-align: center;
 	background-color: #eeeeee;
 	color: #222222;
 }
@@ -17,10 +17,46 @@ header {
 	align-content: center;
 }
 
+section {
+	display: flex;
+	justify-content: flex-end;
+	font-size: initial;
+}
 
-img#logo { height: 100%; max-height: 30vh; }
-h1 { font-size: 4.5rem; }
-ul { list-style: none; padding: 0; }
+section#formsettings > * {
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+img#logo {
+	height: 100%;
+	max-height: 30vh;
+}
+
+h1 {
+	font-size: 4.0rem;
+}
+
+ul {
+	list-style: none;
+	text-align: left;
+	display: inline-block;
+}
+
+.dropzone {
+	padding-top: 60px;
+	padding-bottom: 60px;
+	border: 2px dashed #888888;
+	border-radius: 8px;
+	text-align: center;
+	margin: auto;
+	color: #888888;
+}
+
+.dropzone.dragover {
+	color: #222222;
+	border-color: #222222;
+}
 
 /* font attributes are not inherited by default */
 input, input::file-selector-button {
@@ -56,4 +92,3 @@ input, input::file-selector-button {
 		background-color: #222222;
 	}
 }
-