diff options
author | Pavel Grunt <pgrunt@redhat.com> | 2015-01-16 15:29:45 +0100 |
---|---|---|
committer | Jeremy White <jwhite@codeweavers.com> | 2015-01-16 10:06:34 -0600 |
commit | 8d1ea67789e9fe2ebef981f0b292fbf6dd59d3c3 (patch) | |
tree | e0f893c3744e58c92ceba297f5aae5efa783e174 | |
parent | 84171b2406056349992a3aac82c6ba8b21792764 (diff) |
Add progress bar for file transfer
-rw-r--r-- | filexfer.js | 29 | ||||
-rw-r--r-- | main.js | 4 | ||||
-rw-r--r-- | spice.html | 5 | ||||
-rw-r--r-- | spice_auto.html | 4 |
4 files changed, 42 insertions, 0 deletions
diff --git a/filexfer.js b/filexfer.js index 2ba0671..2887e14 100644 --- a/filexfer.js +++ b/filexfer.js @@ -24,6 +24,35 @@ function SpiceFileXferTask(id, file) this.file = file; } +SpiceFileXferTask.prototype.create_progressbar = function() +{ + this.progressbar_container = document.createElement("div"); + this.progressbar = document.createElement("progress"); + + this.progressbar.setAttribute('max', this.file.size); + this.progressbar.setAttribute('value', 0); + this.progressbar.style.width = '100%'; + this.progressbar.style.margin = '4px auto'; + this.progressbar.style.display = 'inline-block'; + this.progressbar_container.style.width = '90%'; + this.progressbar_container.style.margin = 'auto'; + this.progressbar_container.style.padding = '4px'; + this.progressbar_container.textContent = this.file.name; + this.progressbar_container.appendChild(this.progressbar); + document.getElementById('spice-xfer-area').appendChild(this.progressbar_container); +} + +SpiceFileXferTask.prototype.update_progressbar = function(value) +{ + this.progressbar.setAttribute('value', value); +} + +SpiceFileXferTask.prototype.remove_progressbar = function() +{ + if (this.progressbar_container && this.progressbar_container.parentNode) + this.progressbar_container.parentNode.removeChild(this.progressbar_container); +} + function handle_file_dragover(e) { e.stopPropagation(); @@ -289,6 +289,7 @@ SpiceMainConn.prototype.file_xfer_start = function(file) task_id = this.file_xfer_task_id++; task = new SpiceFileXferTask(task_id, file); + task.create_progressbar(); this.file_xfer_tasks[task_id] = task; xfer_start = new VDAgentFileXferStartMessage(task_id, file.name, file.size); this.send_agent_message(VD_AGENT_FILE_XFER_START, xfer_start); @@ -355,6 +356,7 @@ SpiceMainConn.prototype.file_xfer_read = function(file_xfer_task, start_byte) e.target.result); _this.send_agent_message(VD_AGENT_FILE_XFER_DATA, xfer_data); _this.file_xfer_read(file_xfer_task, eb); + file_xfer_task.update_progressbar(eb); }; slice = file_xfer_task.file.slice(sb, eb); @@ -368,6 +370,8 @@ SpiceMainConn.prototype.file_xfer_completed = function(file_xfer_task, error) else this.log_info("transfer of '" + file_xfer_task.file.name +"' was successful"); + file_xfer_task.remove_progressbar(); + delete this.file_xfer_tasks[file_xfer_task.id]; } @@ -113,6 +113,8 @@ document.getElementById('connectButton').onclick = connect; if (window.File && window.FileReader && window.FileList && window.Blob) { + var spice_xfer_area = document.getElementById('spice-xfer-area'); + document.getElementById('spice-area').removeChild(spice_xfer_area); document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false); document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false); } @@ -128,6 +130,9 @@ if (window.File && window.FileReader && window.FileList && window.Blob) { + var spice_xfer_area = document.createElement("div"); + spice_xfer_area.setAttribute('id', 'spice-xfer-area'); + document.getElementById('spice-area').appendChild(spice_xfer_area); document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false); document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false); } diff --git a/spice_auto.html b/spice_auto.html index 689b066..d374054 100644 --- a/spice_auto.html +++ b/spice_auto.html @@ -149,6 +149,8 @@ } if (window.File && window.FileReader && window.FileList && window.Blob) { + var spice_xfer_area = document.getElementById('spice-xfer-area'); + document.getElementById('spice-area').removeChild(spice_xfer_area); document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false); document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false); } @@ -164,6 +166,8 @@ if (window.File && window.FileReader && window.FileList && window.Blob) { + var spice_xfer_area = document.createElement("div"); + spice_xfer_area.setAttribute('id', 'spice-xfer-area'); document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false); document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false); } |