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 }