リファクタリングと再設計

Signed-off-by: Izuru Yakumo <yakumo.izuru@chaotic.ninja>

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

example/static/dz.js

@@ -1,98 +0,0 @@
-// 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 uploadtext = document.createElement("textarea");
-	let formData = new FormData(), xhr = new XMLHttpRequest();
-
-	// used for clipboard only
-	uploadtext.style.display = "none";
-
-	uploads.appendChild(progressbar);
-	uploads.appendChild(uploadlist);
-	uploads.appendChild(uploadtext);
-
-	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);
-			});
-			let clippy = document.createElement("button");
-			uploads.appendChild(clippy);
-			clippy.innerText = " 📋 copy ";
-			clippy.onclick = function(e) {
-				uploadtext.select();
-				document.execCommand("copy");
-			}
-		}
-	}
-
-	xhr.open('POST', window.location.href, true); // async = true
-	xhr.send(formData);
-}

example/static/marisa.css

@@ -0,0 +1,17 @@
+body {
+    background-color: #282c37;
+    color: #f8f8f2;
+    font-family: sans-serif;
+}
+a {
+    color: #272822;
+}
+a:hover, a:link {
+    color: #e6db74;
+}
+a:visited {
+    color: #66d9ef;
+}
+table {
+    border-color: rgb(128, 0, 0);
+}

example/static/marisa_98.css

@@ -1,90 +0,0 @@
-body {
-    padding: 5%;
-    margin: auto;
-    max-width: 540px;
-    font-family: sans-serif;
-    font-size: 1.5rem;
-    text-align: center;
-    background-color: #550000;
-    color: #ff4444;
-}
-
-header {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap-reverse;
-    align-items: center;
-    align-content: center;
-}
-
-section {
-    display: flex;
-    justify-content: flex-end;
-    font-size: initial;
-}
-
-section#formsettings > * {
-    margin-top: 20px;
-    margin-left: 20px;
-}
-
-img#logo {
-    height: 100%;
-    max-height: 30vh;
-}
-
-h1 {
-    font-size: 4.0rem;
-}
-
-#uploads {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-#uploads > ul {
-    list-style: none;
-    text-align: left;
-    padding: 0;
-}
-
-#uploads > button {
-    align-self: flex-end;
-    margin-right: 10%;
-}
-
-.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 {
-    text-align: inherit;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-@media (min-aspect-ratio: 18/9) {
-    header {
-	flex-direction: row;
-    }
-    h1 { font-size: 3rem; margin-right: 10px; }
-    img#logo {
-	height: 50%;
-	max-height: 20vh;
-	order: 2;
-    }
-}