OLD | NEW |
| (Empty) |
1 // Copyright 2011 (c) The Native Client Authors. All rights reserved. | |
2 // Use of this source code is governed by a BSD-style license that can be | |
3 // found in the LICENSE file. | |
4 | |
5 /** | |
6 * @file | |
7 * A load progress bar. It has some title text, a dynamic progress bar that | |
8 * shows load progress based on the values of the 'progress' event, and some | |
9 * status test that shows load progress textually. | |
10 */ | |
11 | |
12 goog.provide('LoadProgress'); | |
13 | |
14 goog.require('goog.Disposable'); | |
15 goog.require('goog.dom'); | |
16 | |
17 /** | |
18 * Constructor for the LoadProgress class. Use the run() method to populate | |
19 * the object with controllers and wire up the events. | |
20 * @constructor | |
21 * @extends {goog.Disposable} | |
22 */ | |
23 LoadProgress = function() { | |
24 goog.Disposable.call(this); | |
25 } | |
26 goog.inherits(LoadProgress, goog.Disposable); | |
27 | |
28 /** | |
29 * The ids used for elements in the DOM. | |
30 * @enum {string} | |
31 */ | |
32 LoadProgress.DomIds = { | |
33 // The <DIV> containing all the load progress elements: title text, a | |
34 // progress bar and some status text. | |
35 PROGRESS: 'progress', | |
36 // The <DIV> containing the load progress bar. | |
37 PROGRESS_BAR: 'progress_bar', | |
38 // The element containing the progress text. | |
39 PROGRESS_BAR_TEXT: 'progress_bar_text', | |
40 // The progress bar track, the width of this element tracks progress. | |
41 PROGRESS_TRACK: 'progress_track', | |
42 }; | |
43 | |
44 /** | |
45 * Label values. | |
46 * @enum {string} | |
47 */ | |
48 LoadProgress.Labels = { | |
49 TITLE_TEXT: 'Loading NaCl Module…', | |
50 PROGRESS_TEXT: 'Computing size…' | |
51 } | |
52 | |
53 /** | |
54 * Override of disposeInternal() to dispose of retained objects. | |
55 * @override | |
56 */ | |
57 LoadProgress.prototype.disposeInternal = function() { | |
58 LoadProgress.superClass_.disposeInternal.call(this); | |
59 } | |
60 | |
61 /** | |
62 * Set the visiblity of the load progress bar. | |
63 * @param {boolean} isVisible Whether the load progress bar is visible or not. | |
64 */ | |
65 LoadProgress.prototype.setVisible = function(isVisible) { | |
66 var progress = document.getElementById(LoadProgress.DomIds.PROGRESS); | |
67 progress.style.visibility = isVisible ? 'visible' : 'hidden'; | |
68 } | |
69 | |
70 /** | |
71 * Handle a progress event by the NaCl module loader. |progressEvent| contains | |
72 * a couple of interesting properties that are used in this example: | |
73 * total The size of the NaCl module in bytes. Note that this value | |
74 * is 0 until |lengthComputable| is true. In particular, this | |
75 * value is 0 for the first 'progress' event. | |
76 * loaded The number of bytes loaded so far. | |
77 * lengthComputable A boolean indicating that the |total| field | |
78 * represents a valid length. | |
79 * @param {Event} progressEvent The ProgressEvent that triggered this handler. | |
80 */ | |
81 LoadProgress.prototype.handleProgressEvent = function(progressEvent) { | |
82 var loadPercent = 0.0; | |
83 var loadPercentString; | |
84 if (event.lengthComputable && event.total > 0) { | |
85 loadPercent = event.loaded / event.total; | |
86 loadPercentString = (loadPercent * 100.0).toFixed() + '%'; | |
87 } else { | |
88 // The total length is not yet known. | |
89 loadPercent = -1.0; | |
90 loadPercentString = 'Computing size…'; | |
91 } | |
92 var progressBarText = document.getElementById( | |
93 LoadProgress.DomIds.PROGRESS_BAR_TEXT); | |
94 progressBarText.innerHTML = loadPercentString + | |
95 ' (' + event.loaded + ' of ' + event.total + ' bytes)'; | |
96 var progressTrack = document.getElementById( | |
97 LoadProgress.DomIds.PROGRESS_TRACK); | |
98 if (loadPercent >= 0.0) { | |
99 var progressBar = | |
100 document.getElementById(LoadProgress.DomIds.PROGRESS_BAR); | |
101 var paddingBox = goog.style.getPaddingBox(progressBar); | |
102 var maxTrackWidth = progressBar.clientWidth - | |
103 (paddingBox.left + paddingBox.right); | |
104 progressTrack.style.width = (loadPercent * maxTrackWidth).toFixed() + 'px'; | |
105 } else { | |
106 progressTrack.style.width = '0px'; | |
107 } | |
108 } | |
109 | |
110 /** | |
111 * Create the DOM elements for the progress bar. The progress element is a | |
112 * <DIV> that contains all the other progress bar elements. The DOM layout | |
113 * looks like this: | |
114 * <div id=LoadProgress.DomIds.PROGRESS class="progress"> | |
115 * <p class="progressstatus">Loading NaCl Module…</p> | |
116 * <div id=LoadProgress.DomIds.PROGRESS_BAR class="progressbar tall"> | |
117 * <div id=LoadProgress.DomIds.PROGRESS_TRACK class="progresstrack"> | |
118 * </div> | |
119 * </div> | |
120 * <p id=LoadProgress.DomIds.PROGRESS_BAR_TEXT class="progresstext"> | |
121 * Computing size… | |
122 * </p> | |
123 * </div> | |
124 * @return {Element} The parent DOM element that contains the progress bar. | |
125 */ | |
126 LoadProgress.prototype.createDom = function() { | |
127 var titleText = goog.dom.createDom('p', {'class': 'progressstatus'}); | |
128 titleText.innerHTML = LoadProgress.Labels.TITLE_TEXT; | |
129 // The progress bar div contains a div representing the progress bar track. | |
130 var progressBar = goog.dom.createDom( | |
131 'div', { | |
132 'id': LoadProgress.DomIds.PROGRESS_BAR, | |
133 'class': 'progressbar tall' | |
134 }, | |
135 goog.dom.createDom( | |
136 'div', { | |
137 'id': LoadProgress.DomIds.PROGRESS_TRACK, | |
138 'class': 'progresstrack' | |
139 } | |
140 ) | |
141 ); | |
142 var progressBarText = goog.dom.createDom( | |
143 'p', { | |
144 'id': LoadProgress.DomIds.PROGRESS_BAR_TEXT, | |
145 'class': 'progresstext' | |
146 } | |
147 ); | |
148 progressBarText.innerHTML = LoadProgress.Labels.PROGRESS_TEXT; | |
149 // Combine all of the above into a single <DIV>. | |
150 var progress = goog.dom.createDom( | |
151 'div', { | |
152 'id': LoadProgress.DomIds.PROGRESS, | |
153 'class': 'progress' | |
154 }, | |
155 titleText, | |
156 progressBar, | |
157 progressBarText | |
158 ) | |
159 return progress; | |
160 } | |
161 | |
OLD | NEW |