1 /**

     2  * Copyright (c) 2009-2010 Symbian Foundation and/or its subsidiary(-ies).

     3  * All rights reserved.

     4  * This component and the accompanying materials are made available

     5  * under the terms of the License "Eclipse Public License v1.0"

     6  * which accompanies this distribution, and is available

     7  * at the URL "http://www.eclipse.org/legal/epl-v10.html".

     8  *

     9  * Initial Contributors:

    10  * Nokia Corporation - initial contribution.

    11  * 

    12  * Contributors:

    13  * 

    14  * Description:

    15  * 

    16  */

    17 

    18 ///////////////////////////////////////////////////////////////////////////////

    19 // The NotificationPopup class handles the display of notifications such as

    20 // warnings, information messages and progress indication.

    21 

    22 // Constructor.

    23 function NotificationPopup() {

    24     // create notification popup

    25     this.containerElement = document.createElement("div");

    26     this.containerElement.className = "NotificationPopupContainer";

    27     this.popupElement = document.createElement("div");

    28     this.popupElement.className = "NotificationPopup";

    29     this.typeIndicatorElement = document.createElement("div");

    30     this.typeIndicatorElement.className = "NotificationPopupTypeIndicator";

    31     this.textElement = document.createElement("div");

    32     this.textElement.className = "NotificationPopupText";

    33     this.progressBarElement = document.createElement("div");

    34     this.progressBarElement.className = "NotificationPopupProgressBar";

    35     

    36     // assemble popup

    37     this.popupElement.appendChild(this.typeIndicatorElement);

    38     this.popupElement.appendChild(this.textElement);

    39     this.popupElement.appendChild(this.progressBarElement);

    40     this.containerElement.appendChild(this.popupElement);

    41     

    42     // create progress bar image element and initialize it

    43     this.progressBarImageElement = document.createElement("img");

    44     var self = this;

    45     this.progressBarImageElement.addEventListener("load", function() { self.progressBarImageLoadingCompleted(); }, false);

    46     this.progressBarImageElement.setAttribute("alt", "");

    47     this.progressBarImageURL = this.getProgressBarImage(0);

    48     this.progressBarImageElement.src = this.progressBarImageURL;

    49     this.progressBarElement.appendChild(this.progressBarImageElement);

    50     

    51     // init the popup to be fully down

    52     this.popupElement.style.top = "100%";

    53     

    54     // set default popup contents

    55     this.setPopupContents(null, null, null);

    56 }

    57 

    58 // Notification container element.

    59 NotificationPopup.prototype.containerElement = null;

    60 

    61 // Notification popup element.

    62 NotificationPopup.prototype.popupElement = null;

    63 

    64 // Type indicator element.

    65 NotificationPopup.prototype.typeIndicatorElement = null;

    66 

    67 // Notification text element.

    68 NotificationPopup.prototype.textElement = null;

    69 

    70 // Progress bar element.

    71 NotificationPopup.prototype.progressBarElement = null;

    72 

    73 // Progress bar image element.

    74 NotificationPopup.prototype.progressBarImageElement = null;

    75 

    76 // Progress bar image URL.

    77 NotificationPopup.prototype.progressBarImageURL = null;

    78 

    79 // Has the progress bar image been loaded?

    80 NotificationPopup.prototype.progressBarImageLoaded = false;

    81 

    82 // Flag that tracks whether we're in the middle of starting to

    83 // show a notification popup.

    84 NotificationPopup.prototype.processingShowNotification = false;

    85 

    86 // Notification popup position (0 = hidden, 1 = showing).

    87 NotificationPopup.prototype.popupPosition = 0;

    88 

    89 // Interval for timer ticks (in milliseconds)

    90 NotificationPopup.prototype.ANIM_TIMER_INTERVAL = 25;

    91 

    92 // Animation timer identifier or null if no active timer.

    93 NotificationPopup.prototype.animTimerId = null;

    94 

    95 // Time in milliseconds for the popup animation to complete

    96 NotificationPopup.prototype.ANIM_TIME = 300;

    97 

    98 // Flag that determines the behavior of showNotification(). If set to true

    99 // the popup will snap open when showNotification() is called instead of

   100 // animation.

   101 NotificationPopup.prototype.SHOW_SNAPS_OPEN = true;

   102 

   103 // Animation direction (0 = no movement, -1 hiding, +1 = showing).

   104 NotificationPopup.prototype.animDir = 0;

   105 

   106 // Auto-hide timer identifier or null if no active timer.

   107 NotificationPopup.prototype.autoHideTimerId = null;

   108 

   109 // The commanded display time.

   110 NotificationPopup.prototype.displayTime = -1;

   111 

   112 // Displays a notification.

   113 NotificationPopup.prototype.showNotification = function(displayTime, type, text, progress) {

   114     uiLogger.debug("NotificationPopup.showNotification(" + displayTime + ", " + type + ", " + text + ", " + progress + ")");

   115     

   116     // mark that showNotification() has been called and that we are in

   117     // the middle of starting to show the notification popup

   118     this.processingShowNotification = true;

   119     

   120     // remember the display time

   121     this.displayTime = displayTime;

   122     

   123     // attach the popup to the document if not attached

   124     if (this.containerElement.parentNode == null) {

   125         document.body.appendChild(this.containerElement);

   126         uiLogger.debug("Notification popup attached to document");

   127     }

   128     

   129     // set popup contents and update style

   130     this.setPopupContents(type, text, progress);

   131     

   132     // if the progress image is loaded then we can complete the showing

   133     // of the notification popup immediately - otherwise the image loaded

   134     // allback will complete the process.

   135     if (this.progressBarImageLoaded) {

   136         this.completeShowNotification();

   137     }

   138 };

   139 

   140 // Completes displaying of a notification.

   141 // Note: Used internally - don't call this directly.

   142 NotificationPopup.prototype.completeShowNotification = function() {

   143     uiLogger.debug("NotificationPopup.completeShowNotification()");

   144     

   145     // animation direction is +1 for showing the popup

   146     if (this.popupPosition != 1) {

   147         if (this.SHOW_SNAPS_OPEN) {

   148             if (this.popupPosition == 0) {

   149                 this.popupPosition = 1;

   150             }

   151         }

   152         this.animatePopup(1);

   153     }

   154     

   155     // setup auto hiding if a display time is specified

   156     if (this.displayTime > 0) {

   157         // stop any existing timer

   158         if (this.autoHideTimerId != null) {

   159             clearTimeout(this.autoHideTimerId);

   160             uiLogger.debug("Auto hide timer stopped");

   161         }

   162         // set timer to hide notification

   163         var self = this;

   164         this.autoHideTimerId = setTimeout(function() {

   165                                               if (self.displayTime > 0) {

   166                                                   self.hideNotification();

   167                                               }

   168                                           }, this.ANIM_TIME + this.displayTime);

   169         uiLogger.debug("Auto hide timer started");

   170     }

   171     

   172     // mark us as no longer processing a show notification call

   173     this.processingShowNotification = false;

   174 };

   175 

   176 // Hides the currently displayed notification.

   177 NotificationPopup.prototype.hideNotification = function() {

   178     uiLogger.debug("NotificationPopup.hideNotification()");

   179     // mark us as no longer processing a show notification call

   180     this.processingShowNotification = false;

   181     

   182     // animation direction is -1 for hiding the popup

   183     if (this.popupPosition != 0) {

   184         this.animatePopup(-1);

   185     }

   186     

   187     // stop auto hide timer if one is set

   188     if (this.autoHideTimerId != null) {

   189         clearTimeout(this.autoHideTimerId);

   190         this.autoHideTimerId = null;

   191         uiLogger.debug("Auto hide timer stopped");

   192     }

   193 };

   194 

   195 // Starts animation of the popup (1 to show, -1 to hide).

   196 NotificationPopup.prototype.animatePopup = function(direction) {

   197     uiLogger.debug("NotificationPopup.animatePopup(" + direction + ")");

   198     // set the direction and star the animation timer

   199     this.animDir = direction;

   200     if (this.animTimerId == null) {

   201         var self = this;

   202         this.animTimerId = setInterval(function() { self.animate(); }, this.ANIM_TIMER_INTERVAL);

   203         uiLogger.debug("Notification popup animation started");

   204     }

   205 };

   206 

   207 // Callback for animation timer.

   208 NotificationPopup.prototype.animate = function() {

   209     // calculate new popup position and clamp

   210     var animStep = (this.ANIM_TIMER_INTERVAL / this.ANIM_TIME) * this.animDir;

   211     var newPos = this.popupPosition + animStep;

   212     if (newPos < 0) {

   213         newPos = 0;

   214     } else if (newPos > 1) {

   215         newPos = 1;

   216     }

   217     

   218     // set the new position to the popup element

   219     this.popupPosition = newPos;

   220     this.popupElement.style.top = (100 - Math.round(this.popupPosition * 100)) + "%";

   221     

   222     // have we reached the end of the animation?

   223     if (newPos == 0 || newPos == 1) {

   224         // reset animation direction

   225         this.animDir = 0;

   226         

   227         // remove the popup from the body if its hidden

   228         if (newPos == 0) {

   229             document.body.removeChild(this.containerElement);

   230             uiLogger.debug("Notification popup detached from document");

   231         }

   232         

   233         // stop timer

   234         clearTimeout(this.animTimerId);

   235         this.animTimerId = null;

   236         uiLogger.debug("Notification popup animation stopped");

   237     }

   238 };

   239 

   240 // Returns a URL for the progress bar image to use for the specified progress.

   241 NotificationPopup.prototype.getProgressBarImage = function(progress) {

   242     // path for progress bar images

   243     var progressBarImagePath = "WRTKit/Resources/";

   244     

   245     if (progress < 0) {

   246         // unknown progress

   247         return progressBarImagePath + "ProgressBarUnknown.gif";

   248     } else {

   249         // known progress (should be between 0 and 1)

   250         var progPct = Math.round(progress * 10) * 10;

   251         if (progPct < 0) {

   252             progPct = 0;

   253         } else if (progPct > 100) {

   254             progPct = 100;

   255         }

   256         return progressBarImagePath + "ProgressBar" + progPct + ".png";

   257     }

   258 };

   259 

   260 // Sets the contents of the popup.

   261 NotificationPopup.prototype.setPopupContents = function(type, text, progress) {

   262     uiLogger.debug("NotificationPopup.setPopupContents(" + type + ", " + text + ", " + progress + ")");

   263     

   264     // figure out notification type style name

   265     var typeName = (type == null) ? "none" : type.toLowerCase();

   266     typeName = typeName.charAt(0).toUpperCase() + typeName.substring(1);

   267     

   268     // set type element class names

   269     this.typeIndicatorElement.className = "NotificationPopupTypeIndicator NotificationPopupTypeIndicator" + typeName;

   270     

   271     // set notification text

   272     this.textElement.innerHTML = (text == null) ? "" : text;

   273     

   274     // set progress

   275     this.progressBarElement.style.display = (progress == null) ? "none" : "block";

   276     if (progress != null) {

   277         var imgURL = this.getProgressBarImage(progress);

   278         if (imgURL != this.progressBarImageURL) {

   279             // load new image

   280             this.progressBarImageLoaded = false;

   281             this.progressBarImageURL = imgURL;

   282             this.progressBarImageElement.src = imgURL;

   283         } else {

   284             // the correct image is already loaded

   285             this.progressBarImageLoaded = true;

   286         }

   287     } else {

   288         // there is no progress bar so there is no need

   289         // to load any progress bar image

   290         this.progressBarImageLoaded = true;

   291     }

   292 };

   293 

   294 // Callback for notifying the object that its progress bar image completed loading.

   295 NotificationPopup.prototype.progressBarImageLoadingCompleted = function() {

   296     uiLogger.debug("NotificationPopup.progressBarImageLoadingCompleted()");

   297     

   298     // mark the progress bar image as loaded

   299     this.progressBarImageLoaded = true;

   300     

   301     // complete the process of displaying the notification popup

   302     // if it has been commanded but not yet completed

   303     if (this.processingShowNotification) {

   304         this.completeShowNotification();

   305     }

   306 };