12a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// Copyright (c) 2013 The Chromium Authors. All rights reserved. 22a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// Use of this source code is governed by a BSD-style license that can be 32a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)// found in the LICENSE file. 42a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 52a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 62a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Monitor the downloading progress of a XMLHttpRequest |xhr_| and shows the 72a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * progress on |progressBar_|. 82a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @constructor 92a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 102a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)function ProgressManager() { 112a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_ = null; 122a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.progressBar_ = document.querySelector('.progress-bar'); 132a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.selectedGridItem_ = null; 142a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)} 152a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 172a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Sets the XMLHttpRequest |xhr| to monitor, and the wallpaper thumbnail grid 182a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * item |selectedGridItem| to show a progress bar for. Cancels previous xhr and 192a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * hides/removes previous progress bar if any. 202a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Note: this must be called before xhr.send() function. Otherwise, we wont get 212a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * loadstart event. 222a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {XMLHttpRequest} xhr The XMLHttpRequest. 232a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail 242a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * grid item. It extends from cr.ui.ListItem. 252a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 262a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.reset = function(xhr, selectedGridItem) { 272a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (this.xhr_) 282a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.removeEventListeners_(); 292a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.hideProgressBar(this.selectedGridItem_); 302a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_ = xhr; 312a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.selectedGridItem_ = selectedGridItem; 322a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhrListeners_ = { 332a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 'loadstart': this.onDownloadStart_.bind(this), 342a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 'progress': this.onDownloadProgress_.bind(this), 352a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 'abort': this.onDownloadErrorOrAbort_.bind(this), 362a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 'error': this.onDownloadErrorOrAbort_.bind(this), 372a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 'load': this.onDownloadComplete_.bind(this) 382a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) }; 392a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) for (var eventType in this.xhrListeners_) 402a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_.addEventListener(eventType, this.xhrListeners_[eventType]); 412a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 422a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 432a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 442a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Removes all event listeners progress manager currently registered. 452a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 462a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 472a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.removeEventListeners_ = function() { 482a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) for (var eventType in this.xhrListeners_) 492a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_.removeEventListener(eventType, this.xhrListeners_[eventType]); 502a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 512a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 522a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 532a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Removes the progress bar in |selectedGridItem| if any. May be called 542a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * asynchronously. 552a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail 562a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) grid item. It extends from cr.ui.ListItem. 572a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 582a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.hideProgressBar = function(selectedGridItem) { 592a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (selectedGridItem && selectedGridItem.querySelector('.progress-bar')) { 602a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.progressBar_.hidden = true; 612a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) selectedGridItem.removeChild(this.progressBar_); 622a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) } 632a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 642a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 652a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 662a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Calculates and updates the width of progress track. 672a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 682a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {float} percentComplete The percent of loaded content. 692a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 702a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.setProgress_ = function(percentComplete) { 712a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.progressBar_.querySelector('.progress-track').style.width = 722a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) (percentComplete * 100) + '%'; 732a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 742a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 752a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 762a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Shows a 0% progress bar to indicate downloading starts. 772a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 782a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {Event} e A loadstart ProgressEvent from XMLHttpRequest. 792a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 802a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.onDownloadStart_ = function(e) { 812a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.setProgress_(0); 822a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.selectedGridItem_.appendChild(this.progressBar_); 832a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.progressBar_.hidden = false; 842a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 852a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 862a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 872a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Hides progress bar when progression is terminated. 882a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 892a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {Event} e An error/abort ProgressEvent from XMLHttpRequest. 902a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 912a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.onDownloadErrorOrAbort_ = function(e) { 922a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.removeEventListeners_(); 932a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_ = null; 942a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.hideProgressBar(this.selectedGridItem_); 952a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 962a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 972a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 982a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Download completed successfully. Shows a 100% progress bar and clears |xhr_|. 992a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 1002a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {Event} e A load ProgressEvent from XMLHttpRequest. 1012a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 1022a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.onDownloadComplete_ = function(e) { 1032a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.setProgress_(1); 1042a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.removeEventListeners_(); 1052a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.xhr_ = null; 1062a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 1072a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) 1082a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)/** 1092a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * Calculates downloading percentage and shows downloading progress. 1102a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @private 1112a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) * @param {Event} e A progress ProgressEvent from XMLHttpRequest. 1122a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) */ 1132a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)ProgressManager.prototype.onDownloadProgress_ = function(e) { 1142a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) if (e.lengthComputable) 1152a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) this.setProgress_(e.loaded / e.total); 1162a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles)}; 117