42
|
1 |
/*
|
|
2 |
� Copyright 2008 Nokia Corporation. All rights reserved.
|
|
3 |
|
|
4 |
IMPORTANT: The Nokia software ("WRTKit and Example Widget files") is supplied to you by Nokia
|
|
5 |
Corporation (�Nokia�) in consideration of your agreement to the following terms. Your use, installation
|
|
6 |
and/or redistribution of the WRTKit and Example Widget files constitutes acceptance of these terms. If
|
|
7 |
you do not agree with these terms, please do not use, install, or redistribute the WRTKit and Example
|
|
8 |
Widget files.
|
|
9 |
|
|
10 |
In consideration of your agreement to abide by the following terms, and subject to these terms, Nokia
|
|
11 |
grants you a personal, non-exclusive license, under Nokia�s copyrights in the WRTKit and Example
|
|
12 |
Widget files, to use, reproduce, and redistribute the WRTKit and Example files, in text form (for HTML,
|
|
13 |
CSS, or JavaScript files) or binary form (for associated images), for the sole purpose of creating S60
|
|
14 |
Widgets.
|
|
15 |
|
|
16 |
If you redistribute the WRTKit and Example files, you must retain this entire notice in all such
|
|
17 |
redistributions of the WRTKit and Example files.
|
|
18 |
|
|
19 |
You may not use the name, trademarks, service marks or logos of Nokia to endorse or promote products
|
|
20 |
that include the WRTKit and Example files without the prior written explicit agreement with Nokia.
|
|
21 |
Except as expressly stated in this notice, no other rights or licenses, express or implied, are granted by
|
|
22 |
Nokia herein, including but not limited to any patent rights that may be infringed by your products that
|
|
23 |
incorporate the WRTKit and Example files or by other works in which the WRTKit and Example files
|
|
24 |
may be incorporated.
|
|
25 |
|
|
26 |
The WRTKit and Example files are provided on an "AS IS" basis. NOKIA MAKES NO
|
|
27 |
WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION THE IMPLIED
|
|
28 |
WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY AND FITNESS FOR A
|
|
29 |
PARTICULAR PURPOSE, REGARDING THE EXAMPLES OR ITS USE AND OPERATION
|
|
30 |
ALONE OR IN COMBINATION WITH YOUR PRODUCTS.
|
|
31 |
|
|
32 |
IN NO EVENT SHALL NOKIA BE LIABLE FOR ANY SPECIAL, INDIRECT, INCIDENTAL OR
|
|
33 |
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
34 |
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
35 |
INTERRUPTION) ARISING IN ANY WAY OUT OF THE USE, REPRODUCTION, AND/OR
|
|
36 |
DISTRIBUTION OF THE EXAMPLES, HOWEVER CAUSED AND WHETHER UNDER THEORY
|
|
37 |
OF CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR OTHERWISE,
|
|
38 |
EVEN IF NOKIA HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
39 |
|
|
40 |
*/
|
|
41 |
|
|
42 |
///////////////////////////////////////////////////////////////////////////////
|
|
43 |
// The NotificationPopup class handles the display of notifications such as
|
|
44 |
// warnings, information messages and progress indication.
|
|
45 |
|
|
46 |
// Constructor.
|
|
47 |
function NotificationPopup() {
|
|
48 |
// create notification popup
|
|
49 |
this.containerElement = document.createElement("div");
|
|
50 |
this.containerElement.className = "NotificationPopupContainer";
|
|
51 |
this.popupElement = document.createElement("div");
|
|
52 |
this.popupElement.className = "NotificationPopup";
|
|
53 |
this.typeIndicatorElement = document.createElement("div");
|
|
54 |
this.typeIndicatorElement.className = "NotificationPopupTypeIndicator";
|
|
55 |
this.textElement = document.createElement("div");
|
|
56 |
this.textElement.className = "NotificationPopupText";
|
|
57 |
this.progressBarElement = document.createElement("div");
|
|
58 |
this.progressBarElement.className = "NotificationPopupProgressBar";
|
|
59 |
|
|
60 |
// assemble popup
|
|
61 |
this.popupElement.appendChild(this.typeIndicatorElement);
|
|
62 |
this.popupElement.appendChild(this.textElement);
|
|
63 |
this.popupElement.appendChild(this.progressBarElement);
|
|
64 |
this.containerElement.appendChild(this.popupElement);
|
|
65 |
|
|
66 |
// create progress bar image element and initialize it
|
|
67 |
this.progressBarImageElement = document.createElement("img");
|
|
68 |
var self = this;
|
|
69 |
this.progressBarImageElement.addEventListener("load", function() { self.progressBarImageLoadingCompleted(); }, false);
|
|
70 |
this.progressBarImageElement.setAttribute("alt", "");
|
|
71 |
this.progressBarImageURL = this.getProgressBarImage(this.PROGRESS_BAR_IMAGE_NONE);
|
|
72 |
this.progressBarImageElement.src = this.progressBarImageURL;
|
|
73 |
this.progressBarElement.appendChild(this.progressBarImageElement);
|
|
74 |
|
|
75 |
// init the popup to be fully down
|
|
76 |
this.popupElement.style.top = "100%";
|
|
77 |
|
|
78 |
// set default popup contents
|
|
79 |
this.setPopupContents(null, null, null);
|
|
80 |
}
|
|
81 |
|
|
82 |
// Notification container element.
|
|
83 |
NotificationPopup.prototype.containerElement = null;
|
|
84 |
|
|
85 |
// Notification popup element.
|
|
86 |
NotificationPopup.prototype.popupElement = null;
|
|
87 |
|
|
88 |
// Type indicator element.
|
|
89 |
NotificationPopup.prototype.typeIndicatorElement = null;
|
|
90 |
|
|
91 |
// Notification text element.
|
|
92 |
NotificationPopup.prototype.textElement = null;
|
|
93 |
|
|
94 |
// Progress bar element.
|
|
95 |
NotificationPopup.prototype.progressBarElement = null;
|
|
96 |
|
|
97 |
// Progress bar image element.
|
|
98 |
NotificationPopup.prototype.progressBarImageElement = null;
|
|
99 |
|
|
100 |
// Progress bar image URL.
|
|
101 |
NotificationPopup.prototype.progressBarImageURL = null;
|
|
102 |
|
|
103 |
// Has the progress bar image been loaded?
|
|
104 |
NotificationPopup.prototype.progressBarImageLoaded = false;
|
|
105 |
|
|
106 |
// Flag that tracks whether we're in the middle of starting to
|
|
107 |
// show a notification popup.
|
|
108 |
NotificationPopup.prototype.processingShowNotification = false;
|
|
109 |
|
|
110 |
// Notification popup position (0 = hidden, 1 = showing).
|
|
111 |
NotificationPopup.prototype.popupPosition = 0;
|
|
112 |
|
|
113 |
// Interval for timer ticks (in milliseconds)
|
|
114 |
NotificationPopup.prototype.ANIM_TIMER_INTERVAL = 25;
|
|
115 |
|
|
116 |
// Animation timer identifier or null if no active timer.
|
|
117 |
NotificationPopup.prototype.animTimerId = null;
|
|
118 |
|
|
119 |
// Time in milliseconds for the popup animation to complete
|
|
120 |
NotificationPopup.prototype.ANIM_TIME = 300;
|
|
121 |
|
|
122 |
// Flag that determines the behavior of showNotification(). If set to true
|
|
123 |
// the popup will snap open when showNotification() is called instead of
|
|
124 |
// animation.
|
|
125 |
NotificationPopup.prototype.SHOW_SNAPS_OPEN = true;
|
|
126 |
|
|
127 |
// Animation direction (0 = no movement, -1 hiding, +1 = showing).
|
|
128 |
NotificationPopup.prototype.animDir = 0;
|
|
129 |
|
|
130 |
// Auto-hide timer identifier or null if no active timer.
|
|
131 |
NotificationPopup.prototype.autoHideTimerId = null;
|
|
132 |
|
|
133 |
// The commanded display time.
|
|
134 |
NotificationPopup.prototype.displayTime = -1;
|
|
135 |
|
|
136 |
NotificationPopup.prototype.PROGRESS_BAR_IMAGE_NONE = 0;
|
|
137 |
|
|
138 |
// Displays a notification.
|
|
139 |
NotificationPopup.prototype.showNotification = function(displayTime, type, text, progress) {
|
|
140 |
uiLogger.debug("NotificationPopup.showNotification(" + displayTime + ", " + type + ", " + text + ", " + progress + ")");
|
|
141 |
|
|
142 |
// mark that showNotification() has been called and that we are in
|
|
143 |
// the middle of starting to show the notification popup
|
|
144 |
this.processingShowNotification = true;
|
|
145 |
|
|
146 |
// remember the display time
|
|
147 |
this.displayTime = displayTime;
|
|
148 |
|
|
149 |
// attach the popup to the document if not attached
|
|
150 |
if (this.containerElement.parentNode == null) {
|
|
151 |
document.body.appendChild(this.containerElement);
|
|
152 |
uiLogger.debug("Notification popup attached to document");
|
|
153 |
}
|
|
154 |
|
|
155 |
// set popup contents and update style
|
|
156 |
this.setPopupContents(type, text, progress);
|
|
157 |
|
|
158 |
// if the progress image is loaded then we can complete the showing
|
|
159 |
// of the notification popup immediately - otherwise the image loaded
|
|
160 |
// allback will complete the process.
|
|
161 |
if (this.progressBarImageLoaded) {
|
|
162 |
this.completeShowNotification();
|
|
163 |
}
|
|
164 |
}
|
|
165 |
|
|
166 |
// Completes displaying of a notification.
|
|
167 |
// Note: Used internally - don't call this directly.
|
|
168 |
NotificationPopup.prototype.completeShowNotification = function() {
|
|
169 |
uiLogger.debug("NotificationPopup.completeShowNotification()");
|
|
170 |
|
|
171 |
// animation direction is +1 for showing the popup
|
|
172 |
if (this.popupPosition != 1) {
|
|
173 |
if (this.SHOW_SNAPS_OPEN) {
|
|
174 |
if (this.popupPosition == 0) {
|
|
175 |
this.popupPosition = 1;
|
|
176 |
}
|
|
177 |
}
|
|
178 |
this.animatePopup(1);
|
|
179 |
}
|
|
180 |
|
|
181 |
// setup auto hiding if a display time is specified
|
|
182 |
if (this.displayTime > 0) {
|
|
183 |
// stop any existing timer
|
|
184 |
if (this.autoHideTimerId != null) {
|
|
185 |
clearTimeout(this.autoHideTimerId);
|
|
186 |
uiLogger.debug("Auto hide timer stopped");
|
|
187 |
}
|
|
188 |
// set timer to hide notification
|
|
189 |
var self = this;
|
|
190 |
this.autoHideTimerId = setTimeout(function() {
|
|
191 |
if (self.displayTime > 0) {
|
|
192 |
self.hideNotification();
|
|
193 |
}
|
|
194 |
}, this.ANIM_TIME + this.displayTime);
|
|
195 |
uiLogger.debug("Auto hide timer started");
|
|
196 |
}
|
|
197 |
|
|
198 |
// mark us as no longer processing a show notification call
|
|
199 |
this.processingShowNotification = false;
|
|
200 |
}
|
|
201 |
|
|
202 |
// Hides the currently displayed notification.
|
|
203 |
NotificationPopup.prototype.hideNotification = function() {
|
|
204 |
uiLogger.debug("NotificationPopup.hideNotification()");
|
|
205 |
// mark us as no longer processing a show notification call
|
|
206 |
this.processingShowNotification = false;
|
|
207 |
|
|
208 |
// animation direction is -1 for hiding the popup
|
|
209 |
if (this.popupPosition != 0) {
|
|
210 |
this.animatePopup(-1);
|
|
211 |
}
|
|
212 |
|
|
213 |
// stop auto hide timer if one is set
|
|
214 |
if (this.autoHideTimerId != null) {
|
|
215 |
clearTimeout(this.autoHideTimerId);
|
|
216 |
this.autoHideTimerId = null;
|
|
217 |
uiLogger.debug("Auto hide timer stopped");
|
|
218 |
}
|
|
219 |
}
|
|
220 |
|
|
221 |
// Starts animation of the popup (1 to show, -1 to hide).
|
|
222 |
NotificationPopup.prototype.animatePopup = function(direction) {
|
|
223 |
uiLogger.debug("NotificationPopup.animatePopup(" + direction + ")");
|
|
224 |
// set the direction and star the animation timer
|
|
225 |
this.animDir = direction;
|
|
226 |
if (this.animTimerId == null) {
|
|
227 |
var self = this;
|
|
228 |
this.animTimerId = setInterval(function() { self.animate(); }, this.ANIM_TIMER_INTERVAL);
|
|
229 |
uiLogger.debug("Notification popup animation started");
|
|
230 |
}
|
|
231 |
}
|
|
232 |
|
|
233 |
// Callback for animation timer.
|
|
234 |
NotificationPopup.prototype.animate = function() {
|
|
235 |
// calculate new popup position and clamp
|
|
236 |
var animStep = (this.ANIM_TIMER_INTERVAL / this.ANIM_TIME) * this.animDir;
|
|
237 |
var newPos = this.popupPosition + animStep;
|
|
238 |
if (newPos < 0) {
|
|
239 |
newPos = 0;
|
|
240 |
} else if (newPos > 1) {
|
|
241 |
newPos = 1;
|
|
242 |
}
|
|
243 |
|
|
244 |
// set the new position to the popup element
|
|
245 |
this.popupPosition = newPos;
|
|
246 |
this.popupElement.style.top = (100 - Math.round(this.popupPosition * 100)) + "%";
|
|
247 |
|
|
248 |
// have we reached the end of the animation?
|
|
249 |
if (newPos == 0 || newPos == 1) {
|
|
250 |
// reset animation direction
|
|
251 |
this.animDir = 0;
|
|
252 |
|
|
253 |
// remove the popup from the body if its hidden
|
|
254 |
if (newPos == 0) {
|
|
255 |
document.body.removeChild(this.containerElement);
|
|
256 |
uiLogger.debug("Notification popup detached from document");
|
|
257 |
}
|
|
258 |
|
|
259 |
// stop timer
|
|
260 |
clearTimeout(this.animTimerId);
|
|
261 |
this.animTimerId = null;
|
|
262 |
uiLogger.debug("Notification popup animation stopped");
|
|
263 |
}
|
|
264 |
}
|
|
265 |
|
|
266 |
// Returns a URL for the progress bar image to use for the specified progress.
|
|
267 |
NotificationPopup.prototype.getProgressBarImage = function(progress) {
|
|
268 |
// path for progress bar images
|
|
269 |
var progressBarImagePath = "WRTKit/Resources/";
|
|
270 |
|
|
271 |
// unknown progress
|
|
272 |
return progressBarImagePath + "ProgressBarUnknown.gif";
|
|
273 |
}
|
|
274 |
|
|
275 |
// Sets the contents of the popup.
|
|
276 |
NotificationPopup.prototype.setPopupContents = function(type, text, progress) {
|
|
277 |
uiLogger.debug("NotificationPopup.setPopupContents(" + type + ", " + text + ", " + progress + ")");
|
|
278 |
|
|
279 |
// figure out notification type style name
|
|
280 |
var typeName = (type == null) ? "none" : type.toLowerCase();
|
|
281 |
typeName = typeName.charAt(0).toUpperCase() + typeName.substring(1);
|
|
282 |
|
|
283 |
// set type element class names
|
|
284 |
this.typeIndicatorElement.className = "NotificationPopupTypeIndicator NotificationPopupTypeIndicator" + typeName;
|
|
285 |
|
|
286 |
// set notification text
|
|
287 |
this.textElement.innerHTML = (text == null) ? "" : text;
|
|
288 |
|
|
289 |
// set progress
|
|
290 |
this.progressBarElement.style.display = (progress == null) ? "none" : "block";
|
|
291 |
if (progress != null) {
|
|
292 |
var imgURL = this.getProgressBarImage(progress);
|
|
293 |
if (imgURL != this.progressBarImageURL) {
|
|
294 |
// load new image
|
|
295 |
this.progressBarImageLoaded = false;
|
|
296 |
this.progressBarImageURL = imgURL;
|
|
297 |
this.progressBarImageElement.src = imgURL;
|
|
298 |
} else {
|
|
299 |
// the correct image is already loaded
|
|
300 |
this.progressBarImageLoaded = true;
|
|
301 |
}
|
|
302 |
} else {
|
|
303 |
// there is no progress bar so there is no need
|
|
304 |
// to load any progress bar image
|
|
305 |
this.progressBarImageLoaded = true;
|
|
306 |
}
|
|
307 |
}
|
|
308 |
|
|
309 |
// Callback for notifying the object that its progress bar image completed loading.
|
|
310 |
NotificationPopup.prototype.progressBarImageLoadingCompleted = function() {
|
|
311 |
uiLogger.debug("NotificationPopup.progressBarImageLoadingCompleted()");
|
|
312 |
|
|
313 |
// mark the progress bar image as loaded
|
|
314 |
this.progressBarImageLoaded = true;
|
|
315 |
|
|
316 |
// complete the process of displaying the notification popup
|
|
317 |
// if it has been commanded but not yet completed
|
|
318 |
if (this.processingShowNotification) {
|
|
319 |
this.completeShowNotification();
|
|
320 |
}
|
|
321 |
}
|