summaryrefslogtreecommitdiffhomepage
path: root/html
diff options
context:
space:
mode:
Diffstat (limited to 'html')
-rw-r--r--html/index.html4
-rw-r--r--html/webbox.css41
-rw-r--r--html/webbox.js99
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";
+}
+
generated by Reichwein.IT Webserver and cgit