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

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