safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-10-31 00:53:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add download notification, progress indicator.

Browse Source
This commit is contained in:
Michael Jumper
2013-06-25 11:54:03 -07:00
parent 15c9ba6ab2
commit ebcf761e53
3 changed files with 103 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
guacamole/src/main/webapp/scripts/client-ui.js
View File

@@ -775,16 +775,20 @@ GuacUI.Client.attach = function(guac) {
guac.onblob = function(blob) {
var download = new GuacUI.Download(blob.name);
download.updateProgress("0");
document.body.appendChild(download.getElement());
// Update progress as data is received
blob.ondata = function() {
download.updateProgress(blob.getLength());
};
// When complete, prompt for download
blob.oncomplete = function() {
var url = window.URL || window.webkitURL;
var a = document.createElement("a");
a.href = url.createObjectURL(blob.getBlob());
a.download = blob.name;
a.type = blob.mimetype;
a.click();
download.complete(blob.mimetype, url.createObjectURL(blob.getBlob()));
};
};

37
guacamole/src/main/webapp/scripts/guac-ui.js
View File

@@ -690,3 +690,40 @@ GuacUI.Pager = function(container) {
};
GuacUI.Download = function(filename) {
var element = GuacUI.createElement("div", "download notification");
GuacUI.createChildElement(element, "div", "caption").textContent =
filename + " ";
var progress = GuacUI.createChildElement(element, "div", "progress");
this.updateProgress = function(text) {
progress.textContent = text;
};
this.complete = function(mimetype, url) {
element.removeChild(progress);
GuacUI.addClass(element, "complete");
var link = GuacUI.createChildElement(
GuacUI.createChildElement(element, "div", "download"),
"a");
link.href = url;
link.download = filename;
link.type = mimetype;
link.textContent = "Download";
};
/**
* Returns the element representing this notification.
*/
this.getElement = function() {
return element;
};
};

55
guacamole/src/main/webapp/styles/client.css
View File

@@ -286,3 +286,58 @@ p.hint {
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.75);
}
.download.notification {
font-size: 0.9em;
position: fixed;
right: 0.5em;
bottom: 0.5em;
border: 1px solid rgba(255, 255, 255, 0.25);
background: black;
opacity: 0.9;
color: white;
padding: 0.5em;
margin: 1em;
box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.75);
}
.download.notification div {
display: inline-block;
}
.download.notification .caption {
color: silver;
}
.download.notification .progress {
margin-left: 0.75em;
padding: 0.25em;
min-width: 5em;
border: 1px solid gray;
background: #444;
border-radius: 0.2em;
text-align: center;
}
.download.notification .download {
margin-left: 0.75em;
padding: 0.25em;
min-width: 5em;
border: 1px solid gray;
background: rgb(16, 87, 153);
border-radius: 0.2em;
text-align: center;
}
.download.notification .download a[href] {
color: white;
font-weight: bold;
text-decoration: none;
}