Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add a progress bar underneath the spinner during data downloads (XHR 2).

  • Loading branch information...
commit 2c56bf53c4373e0e027724400055efc793a7c70e 1 parent 97be3d6
@yonran authored
View
15 static/js/views/languageview.js
@@ -94,13 +94,26 @@ define([
this.mainResultsView.startSpinner();
var self = this;
this.collection.fetch({
+ xhr: function() {
+ var xhr = jQuery.ajaxSettings.xhr();
+ if (xhr instanceof window.XMLHttpRequest) {
+ // XMLHttpRequest 2
+ xhr.addEventListener("progress", function(evt) {
+ if (evt.lengthComputable) {
+ self.mainResultsView.setDownloadProgress(evt.loaded, evt.total);
+ }
+ }, false);
+ }
+ return xhr;
+ },
success: function(coll, resp) {
console.log('[Success fetching ' + self.languageName + '.]');
self.searchHeaderView.lastQuery = null; // TODO: use abstractions
self.searchHeaderView.onSearch();
self.mainResultsView.spinner.stop();
+ self.mainResultsView.removeDownlaodProgress();
self.active = true;
- }
+ },
});
}
} else if (!active && this.active) {
View
25 static/js/views/searchresults.js
@@ -35,6 +35,31 @@ define([
}
},
+ setDownloadProgress: function(receivedB, totalB) {
+ if (!this.options.spinner)
+ return;
+ if (!this.progressEl) {
+ this.progressEl = $(
+ '<div style="text-align:center; width:100%; max-width: 100%;">' +
+ ' <progress></progress>' +
+ ' <br>' +
+ ' <span class="progress-text"></span>' +
+ '</div>').get(0);
+ $(this.el).append(this.progressEl);
+ }
+ var receivedMB = Math.round(receivedB/1024/1024*10)/10
+ , totalMB = Math.round(totalB/1024/1024*10)/10;
+ $(this.progressEl)
+ .find("progress").prop("max", totalB).prop("value", receivedB).end()
+ .find(".progress-text").text(receivedMB + "MB/" + totalMB + "MB");
+ },
+ removeDownlaodProgress: function() {
+ if (this.progressEl) {
+ $(this.progressEl).remove();
+ this.progressEl = undefined;
+ }
+ },
+
render: function() {
console.log('[Data loaded, rendering models.]');
// render a subview for each model in the collection
Please sign in to comment.
Something went wrong with that request. Please try again.