src/widgets/notification/js/jquery.mobile.tizen.notification.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  *      Author: Minkyu Kang <mk7.kang@samsung.com>
  24  */
  25
  26 /*
  27  * Notification widget
  28  *
  29  * HTML Attributes
  30  *
  31  *  data-role: set to 'notification'.
  32  *  data-type: 'ticker' or 'popup'.
  33  *  data-interval: time to showing. If don't set, will show infinitely.
  34  *
  35  * APIs
  36  *
  37  *  open(): open the notification.
  38  *  close(): close the notification.
  39  *  text(text0, text1): set texts or get texts
  40  *  icon(src): set the icon (tickernoti only)
  41  *
  42  * Events
  43  *
  44  *  N/A
  45  *
  46  * Examples
  47  *
  48  * // tickernoti
  49  * <div data-role="notification" id="notification" data-type="ticker" data-interval="3000">
  50  *      <img src="icon01.png">
  51  *      <p>Hello World</p>
  52  *      <p>Denis</p>
  53  * </div>
  54  *
  55  * // smallpopup
  56  * <div data-role="notification" id="notification" data-type="popup" data-interval="3000">
  57  *      <p>Hello World</p>
  58  * </div>
  59  *
  60  */
  61
  62 /**
  63         @class Notification
  64         The notification widget shows a pop-up window on the screen to provide notifications.
  65         To add a notification widget to the application, use the following code:
  66
  67                 <div data-role="page">
  68                         <div data-role="notification" data-type="tickernoti">
  69                                 <p>text1</p>
  70                                 <p>text2</p>
  71                         </div>
  72                         <div data-role="header"></div>
  73                         <div data-role="content"></div>
  74                         <div data-role="footer"></div>
  75                 </div>
  76                 <script type="text/javascript">
  77                 $('#notification-demo').bind('tapped', function (e, m)
  78                 {
  79                         // Notification is tapped with parameter m
  80                 });
  81 */
  82 /**
  83         @property {String} data-type
  84         Defines the notification type. The type options are tickernoti and smallpopup. <br/>The default value is smallpopup.
  85
  86 */
  87 /**
  88         @method show
  89         The show method is used to show the notification widget:
  90
  91                 <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
  92                 $('#notification').notification('show');
  93 */
  94 /**
  95         @method hide
  96         The hide method is used to hide the notification widget:
  97
  98                 <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
  99                 $('#notification').notification('hide');
 100 */
 101 /**
 102         @method text
 103         The text method is used to set or get the notification text:
 104
 105                 <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
 106                 // Set notification text
 107                 $('#notification').notification('text', 'setThisText');
 108                 // Get notification text
 109                 texts = $('#notification').notification('text');
 110         @since Tizen2.0
 111 */
 112 /**
 113         @method setIcon
 114         The setIcon method is used to set the ticker notification icon. The icon can be set only if the notification type is set to tickernoti.
 115
 116                 <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
 117                 $('#notification').notification('setIcon', './test.png');
 118 */
 119 (function ( $, window ) {
 120         $.widget( "tizen.notification", $.mobile.widget, {
 121                 btn: null,
 122                 text_bg: [],
 123                 icon_img: [],
 124                 interval: null,
 125                 seconds: null,
 126                 running: false,
 127
 128                 _get_text: function () {
 129                         var text = new Array( 2 );
 130
 131                         if ( this.type === 'ticker' ) {
 132                                 text[0] = $( this.text_bg[0] ).text();
 133                                 text[1] = $( this.text_bg[1] ).text();
 134                         } else {
 135                                 text[0] = $( this.text_bg[0] ).text();
 136                         }
 137
 138                         return text;
 139                 },
 140
 141                 _set_text: function ( text0, text1 ) {
 142                         var _set = function ( elem, text ) {
 143                                 if ( !text ) {
 144                                         return;
 145                                 }
 146                                 elem.text( text );
 147                         };
 148
 149                         if ( this.type === 'ticker' ) {
 150                                 _set( $( this.text_bg[0] ), text0 );
 151                                 _set( $( this.text_bg[1] ), text1 );
 152                         } else {
 153                                 _set( $( this.text_bg[0] ), text0 );
 154                         }
 155                 },
 156
 157                 text: function ( text0, text1 ) {
 158                         if ( text0 === undefined && text1 === undefined ) {
 159                                 return this._get_text();
 160                         }
 161
 162                         this._set_text( text0, text1 );
 163                 },
 164
 165                 icon: function ( src ) {
 166                         if ( src === undefined ) {
 167                                 return;
 168                         }
 169
 170                         this.icon_img.detach();
 171                         this.icon_img = $( "<img src='" + src + "' class='ui-ticker-icon'>" );
 172                         $( this.element ).find(".ui-ticker").append( this.icon_img );
 173                 },
 174
 175                 _refresh: function () {
 176                         var container = this._get_container();
 177
 178                         $( container ).addClass("fix")
 179                                         .removeClass("show")
 180                                         .removeClass("hide");
 181
 182                         this._set_interval();
 183                 },
 184
 185                 open: function () {
 186                         var container = this._get_container();
 187
 188                         if ( this.running ) {
 189                                 this._refresh();
 190                                 return;
 191                         }
 192
 193                         $( container ).addClass("show")
 194                                         .removeClass("hide")
 195                                         .removeClass("fix");
 196
 197                         this.running = true;
 198
 199                         if ( this.type === 'popup' ) {
 200                                 this._set_position();
 201                         }
 202
 203                         this._set_interval();
 204                 },
 205
 206                 close: function () {
 207                         var container = this._get_container();
 208
 209                         if ( !this.running ) {
 210                                 return;
 211                         }
 212
 213                         $( container ).addClass("hide")
 214                                         .removeClass("show")
 215                                         .removeClass("fix");
 216
 217                         this.running = false;
 218                         clearInterval( this.interval );
 219                 },
 220
 221                 destroy: function () {
 222                         var container = this._get_container();
 223
 224                         $( container ).removeClass("show")
 225                                         .removeClass("hide")
 226                                         .removeClass("fix");
 227
 228                         this._del_event();
 229
 230                         this.running = false;
 231                 },
 232
 233                 _get_container: function () {
 234                         if ( this.type === 'ticker' ) {
 235                                 return $( this.element ).find(".ui-ticker");
 236                         }
 237
 238                         return $( this.element ).find(".ui-smallpopup");
 239                 },
 240
 241                 _set_interval: function () {
 242                         var self = this;
 243
 244                         clearInterval( this.interval );
 245
 246                         if ( this.seconds !== undefined && this.second !== 0 ) {
 247                                 this.interval = setInterval( function () {
 248                                         self.close();
 249                                 }, this.seconds );
 250                         }
 251                 },
 252
 253                 _add_event: function () {
 254                         var self = this,
 255                                 container = this._get_container();
 256
 257                         if ( this.type === 'ticker' ) {
 258                                 container.find(".ui-ticker-btn").append( this.btn ).trigger("create");
 259
 260                                 this.btn.bind( "vmouseup", function () {
 261                                         self.close();
 262                                 });
 263                         }
 264
 265                         container.bind( 'vmouseup', function () {
 266                                 self.close();
 267                         });
 268                 },
 269
 270                 _del_event: function () {
 271                         var container = this._get_container();
 272
 273                         if ( this.type === 'ticker' ) {
 274                                 this.btn.unbind("vmouseup");
 275                         }
 276                         container.unbind('vmouseup');
 277                         clearInterval( this.interval );
 278                 },
 279
 280                 _set_position: function () {
 281                         var container = this._get_container(),
 282                                 $footer = $('.ui-page-active').children('.ui-footer'),
 283                                 footer_h = $footer.outerHeight() || 0;
 284
 285                         container.css( 'bottom', footer_h);
 286                 },
 287
 288                 _create: function () {
 289                         var self = this,
 290                                 elem = $( this.element ),
 291                                 i;
 292
 293                         this.btn = $('<div data-role="button" data-inline="true">Close</div>');
 294
 295                         this.seconds = elem.jqmData('interval');
 296                         this.type = elem.jqmData('type') || 'popup';
 297
 298                         if ( this.type === 'ticker' ) {
 299                                 elem.wrapInner("<div class='ui-ticker'></div>");
 300                                 elem.find(".ui-ticker").append("<div class='ui-ticker-body'></div>" +
 301                                                         "<div class='ui-ticker-btn'></div>");
 302                                 this.text_bg = elem.find("p");
 303
 304                                 if ( this.text_bg.length < 2 ) {
 305                                         elem.find(".ui-ticker").append("<p></p><p></p>");
 306                                         this.text_bg = elem.find("p");
 307                                 } else if ( this.text_bg.length > 2 ) {
 308                                         for ( i = 2; i < this.text_bg.length; i++ ) {
 309                                                 $( this.text_bg[i] ).css( "display", "none" );
 310                                         }
 311                                 }
 312
 313                                 $( this.text_bg[0] ).addClass("ui-ticker-text1-bg");
 314                                 $( this.text_bg[1] ).addClass("ui-ticker-text2-bg");
 315
 316                                 this.icon_img = elem.find("img");
 317
 318                                 if ( this.icon_img.length ) {
 319                                         $( this.icon_img ).addClass("ui-ticker-icon");
 320
 321                                         for ( i = 1; i < this.icon_img.length; i++ ) {
 322                                                 $( this.icon_img[i] ).css( "display", "none" );
 323                                         }
 324                                 }
 325                         } else {
 326                                 elem.wrapInner("<div class='ui-smallpopup'></div>");
 327                                 this.text_bg = elem.find("p").addClass("ui-smallpopup-text-bg");
 328
 329                                 if ( this.text_bg.length < 1 ) {
 330                                         elem.find(".ui-smallpopup")
 331                                                 .append("<p class='ui-smallpopup-text-bg'></p>");
 332                                         this.text_bg = elem.find("p");
 333                                 } else if ( this.text_bg.length > 1 ) {
 334                                         for ( i = 1; i < this.text_bg.length; i++ ) {
 335                                                 $( this.text_bg[i] ).css( "display", "none" );
 336                                         }
 337                                 }
 338
 339                                 this._set_position();
 340                         }
 341
 342                         this._add_event();
 343
 344                         $( window ).bind( "resize", function () {
 345                                 if ( !self.running ) {
 346                                         return;
 347                                 }
 348
 349                                 self._refresh();
 350
 351                                 if ( self.type === 'popup' ) {
 352                                         self._set_position();
 353                                 }
 354                         });
 355                 }
 356         }); // End of widget
 357
 358         // auto self-init widgets
 359         $( document ).bind( "pagecreate create", function ( e ) {
 360                 $( e.target ).find(":jqmData(role='notification')").notification();
 361         });
 362
 363         $( document ).bind( "pagebeforehide", function ( e ) {
 364                 $( e.target ).find(":jqmData(role='notification')").notification('destroy');
 365         });
 366 }( jQuery, this ));