Permalink
Browse files

Merge pull request #17 from yonran/progress-bar

Progress bar
  • Loading branch information...
2 parents 6d8c302 + 2c56bf5 commit bc2bab8a27f3150410d200ec6719f3e2071da4f2 @rgarcia committed Apr 5, 2012
Showing with 43 additions and 3 deletions.
  1. +14 −1 static/js/views/languageview.js
  2. +29 −2 static/js/views/searchresults.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) {
@@ -27,12 +27,39 @@ define([
shadow : false // Whether to render a shadow
};
this.spinner = new Spinner(opts).spin();
- $(this.spinner.el).css('margin-top', $(window).height()/4);
- $(this.spinner.el).css('margin-left', $(window).width()/4);
+ var halfHeight = opts.radius + opts.length + opts.width;
+ $(this.spinner.el).css('margin-top', $(window).height()/4 + halfHeight);
+ $(this.spinner.el).css('margin-left', "50%");
+ $(this.spinner.el).css("height", halfHeight + "px");
$(this.el).append(this.spinner.el);
}
},
+ 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

0 comments on commit bc2bab8

Please sign in to comment.