diff --git a/guacamole/src/main/webapp/scripts/client-ui.js b/guacamole/src/main/webapp/scripts/client-ui.js index 5cda16d30..6df1e0bee 100644 --- a/guacamole/src/main/webapp/scripts/client-ui.js +++ b/guacamole/src/main/webapp/scripts/client-ui.js @@ -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())); }; }; diff --git a/guacamole/src/main/webapp/scripts/guac-ui.js b/guacamole/src/main/webapp/scripts/guac-ui.js index eec77a6d9..0c47b66a1 100644 --- a/guacamole/src/main/webapp/scripts/guac-ui.js +++ b/guacamole/src/main/webapp/scripts/guac-ui.js @@ -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; + }; + +}; \ No newline at end of file diff --git a/guacamole/src/main/webapp/styles/client.css b/guacamole/src/main/webapp/styles/client.css index 074502f43..974cebffb 100644 --- a/guacamole/src/main/webapp/styles/client.css +++ b/guacamole/src/main/webapp/styles/client.css @@ -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; +}