1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
// Copyright (c) 2013 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Monitor the downloading progress of a XMLHttpRequest |xhr_| and shows the
* progress on |progressBar_|.
* @constructor
*/
function ProgressManager() {
this.xhr_ = null;
this.progressBar_ = document.querySelector('.progress-bar');
this.selectedGridItem_ = null;
}
/**
* Sets the XMLHttpRequest |xhr| to monitor, and the wallpaper thumbnail grid
* item |selectedGridItem| to show a progress bar for. Cancels previous xhr and
* hides/removes previous progress bar if any.
* Note: this must be called before xhr.send() function. Otherwise, we wont get
* loadstart event.
* @param {XMLHttpRequest} xhr The XMLHttpRequest.
* @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail
* grid item. It extends from cr.ui.ListItem.
*/
ProgressManager.prototype.reset = function(xhr, selectedGridItem) {
if (this.xhr_)
this.removeEventListeners_();
this.hideProgressBar(this.selectedGridItem_);
this.xhr_ = xhr;
this.selectedGridItem_ = selectedGridItem;
this.xhrListeners_ = {
'loadstart': this.onDownloadStart_.bind(this),
'progress': this.onDownloadProgress_.bind(this),
'abort': this.onDownloadErrorOrAbort_.bind(this),
'error': this.onDownloadErrorOrAbort_.bind(this),
'load': this.onDownloadComplete_.bind(this)
};
for (var eventType in this.xhrListeners_)
this.xhr_.addEventListener(eventType, this.xhrListeners_[eventType]);
};
/**
* Removes all event listeners progress manager currently registered.
* @private
*/
ProgressManager.prototype.removeEventListeners_ = function() {
for (var eventType in this.xhrListeners_)
this.xhr_.removeEventListener(eventType, this.xhrListeners_[eventType]);
};
/**
* Removes the progress bar in |selectedGridItem| if any. May be called
* asynchronously.
* @param {WallpaperThumbnailsGridItem} selectedGridItem The wallpaper thumbnail
grid item. It extends from cr.ui.ListItem.
*/
ProgressManager.prototype.hideProgressBar = function(selectedGridItem) {
if (selectedGridItem && selectedGridItem.querySelector('.progress-bar')) {
this.progressBar_.hidden = true;
selectedGridItem.removeChild(this.progressBar_);
}
};
/**
* Calculates and updates the width of progress track.
* @private
* @param {float} percentComplete The percent of loaded content.
*/
ProgressManager.prototype.setProgress_ = function(percentComplete) {
this.progressBar_.querySelector('.progress-track').style.width =
(percentComplete * 100) + '%';
};
/**
* Shows a 0% progress bar to indicate downloading starts.
* @private
* @param {Event} e A loadstart ProgressEvent from XMLHttpRequest.
*/
ProgressManager.prototype.onDownloadStart_ = function(e) {
this.setProgress_(0);
this.selectedGridItem_.appendChild(this.progressBar_);
this.progressBar_.hidden = false;
};
/**
* Hides progress bar when progression is terminated.
* @private
* @param {Event} e An error/abort ProgressEvent from XMLHttpRequest.
*/
ProgressManager.prototype.onDownloadErrorOrAbort_ = function(e) {
this.removeEventListeners_();
this.xhr_ = null;
this.hideProgressBar(this.selectedGridItem_);
};
/**
* Download completed successfully. Shows a 100% progress bar and clears |xhr_|.
* @private
* @param {Event} e A load ProgressEvent from XMLHttpRequest.
*/
ProgressManager.prototype.onDownloadComplete_ = function(e) {
this.setProgress_(1);
this.removeEventListeners_();
this.xhr_ = null;
};
/**
* Calculates downloading percentage and shows downloading progress.
* @private
* @param {Event} e A progress ProgressEvent from XMLHttpRequest.
*/
ProgressManager.prototype.onDownloadProgress_ = function(e) {
if (e.lengthComputable)
this.setProgress_(e.loaded / e.total);
};
|
