Progress indicatorv1.2

3 files changed, 128 insertions, 16 deletions

diff --git a/html/index.html b/html/index.html
index 6885bd4..40390e0 100644
--- a/html/index.html
+++ b/html/index.html
@@ -53,6 +53,10 @@
 			</div>
 		</div>
 
+		<div class="progresswindow" id="progresswindow" hidden>
+			<canvas id="progresscanvas" class="progresscanvas" width="100" height="100"></canvas>
+		</div>
+
 		<div id="create-dir-dialog" hidden>
 			New folder:<br>
 			<input type="text" id="newdir" class="textinput"></input>
diff --git a/html/webbox.css b/html/webbox.css
index dbed171..b9421a5 100644
--- a/html/webbox.css
+++ b/html/webbox.css
@@ -79,6 +79,28 @@ div, td, h1 {
 	box-sizing: border-box;
 }
 
+
+.progresswindow {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0);
+	opacity: 1;
+	z-index: 20;
+	border-width: 0;
+	border-collapse: collapse;
+	box-sizing: border-box;
+}
+
+.progresscanvas {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	background-color: rgba(0, 0, 0, 0);
+}
 table.menudialog {
 	width: 100%;
 }
@@ -205,6 +227,15 @@ table.list td.name {
 		margin: 0;
 	}
 
+	.progresswindow {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+	}
+
 	table.list td {
 		padding: 5px;
 	}
@@ -244,3 +275,13 @@ table.list td.name {
 	padding: 0;
 	border-collapse: collapse;
 }
+
+::-moz-selection { /* Firefox */
+	color: #000000;
+	background: #FFFFFF;
+}
+
+::selection {
+	color: #000000;
+	background: #FFFFFF;
+}
diff --git a/html/webbox.js b/html/webbox.js
index fa24e29..5a55010 100644
--- a/html/webbox.js
+++ b/html/webbox.js
@@ -296,8 +296,15 @@ function initMainpage() {
 		if (this.status == 401) { // login error: goto login page
 			var authheader = this.getResponseHeader("WWW-Authenticate");
 			var title = "Webbox";
+			// For web servers with standard AUTH BASIC, triggering problems in
+			// client browsers, popping up the browser's "Authenticate" window
+			// but we want our own
 			if (authheader.startsWith("Basic realm=\"") && authheader.endsWith("\"")) {
 				title = authheader.substr(13, authheader.length - 14);
+			} else
+			// Fixed up Apache server
+			if (authheader.startsWith("SR_Basic realm=\"") && authheader.endsWith("\"")) {
+				title = authheader.substr(16, authheader.length - 17);
 			}
 			login(title);
 			return;
@@ -322,22 +329,6 @@ function initMainpage() {
 	xhrTitle.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrTitle.send();
 
-	// default action for "Cancel" button: hide dialog window
-	document.getElementById("cancelbutton").onclick = hideDialog;
-
-	// on click outside of menu, close menu
-	document.getElementById("greyout").onclick = function() {
-		hideDialog();
-		hideMenu();
-	}
-	
-	// on Escape, globally hide dialog and menu window
-	document.onkeydown = function(evt) {
-		if (evt.key == "Escape") {
-			hideDialog();
-			hideMenu();
-		}
-	}
 }
 
 // deferred initialization after successful login
@@ -358,6 +349,23 @@ function initMainpage2() {
 	xhrFooter.open("GET", "/bin/query?command=version", true);
 	xhrFooter.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 	xhrFooter.send();
+	
+	// default action for "Cancel" button: hide dialog window
+	document.getElementById("cancelbutton").onclick = hideDialog;
+
+	// on click outside of menu, close menu
+	document.getElementById("greyout").onclick = function() {
+		hideDialog();
+		hideMenu();
+	}
+	
+	// on Escape, globally hide dialog and menu window
+	document.onkeydown = function(evt) {
+		if (evt.key == "Escape") {
+			hideDialog();
+			hideMenu();
+		}
+	}
 }
 
 function setCurrentDir(newDir) {
@@ -404,8 +412,10 @@ function download(filename) {
 				var file = new Blob([this.response]);
 				a.href = window.URL.createObjectURL(file);
 				a.click();
+				progressOff();
 			}
 
+			progressOn();
 			var files = getSelectedFiles();
 			var parser = new DOMParser();
 			var xmlDocument = parser.parseFromString("<files></files>", "text/xml");
@@ -436,12 +446,14 @@ function download(filename) {
 			var file = new Blob([this.response]);
 			a.href = window.URL.createObjectURL(file);
 			a.click();
+			progressOff();
 		}
 
 		var dir = currentDir;
 		if (dir != "/") {
 			dir += "/"
 		}
+		progressOn();
 		xhr.open("GET", "/bin/query" + dir + filename, true);
 		xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
 		xhr.responseType = 'blob';
@@ -529,12 +541,15 @@ function onUploadFile() {
 			document.getElementById("cancelbutton").style.display = "block";
 		}
 		document.getElementById("okbutton").focus();
+		progressOff();
 	}
 
         var uploadfile = document.getElementById("uploadfile");
         var formData = new FormData();
         formData.append("uploadfile", uploadfile.files[0]);
 
+	progressOn();
+
         xhr.open("POST", "/bin/query" + currentDir + "?command=upload", true);
 	xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
         xhr.send(formData);
@@ -815,3 +830,55 @@ function logout() {
 	document.getElementById("dialog").innerHTML = document.getElementById("logout-dialog").innerHTML;
 }
 
+// Progress indication
+
+function drawDot(c, offsetx, offsety, radius, distance, phase) {
+        c.beginPath();
+        c.arc(distance * Math.sin(phase) + offsetx,
+                - distance * Math.cos(phase) + offsety, radius, 0, 2 * Math.PI);
+        c.fill();
+}
+
+function drawLogo(canvasid, rotation) {
+        var canvas = document.getElementById(canvasid);
+
+        var height = canvas.height;
+        var width = canvas.width;
+        var radius = height * 0.1;
+        var distance = height * 0.1 * 4 / 3;
+        
+        var c = canvas.getContext("2d");
+
+        c.clearRect(0, 0, width, height);
+        c.fillStyle = "#AAAADD";
+        drawDot(c, width / 2, height / 2, radius, distance, rotation);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance, rotation + 2 * Math.PI / 3 * 2);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3);
+        drawDot(c, width / 2, height / 2, radius, distance * 2, rotation + Math.PI + 2 * Math.PI / 3 * 2);
+}
+
+var progressState = 0;
+
+function drawAni(timeStamp) {
+        var rotation = timeStamp / 1000 * 6;
+
+        drawLogo("progresscanvas", rotation);
+
+	if (progressState == 1) {
+	        requestAnimationFrame(drawAni);
+	}
+}
+
+function progressOn() {
+	progressState = 1;
+	document.getElementById("progresswindow").style.display = "block";
+        requestAnimationFrame(drawAni);
+}
+
+function progressOff() {
+	progressState = 0;
+	document.getElementById("progresswindow").style.display = "none";
+}
+