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="smallpopup">
  69                                 <p>text1</p>
  70                         </div>
  71                         <div data-role="header"></div>
  72                         <div data-role="content"></div>
  73                         <div data-role="footer"></div>
  74                 </div>
  75 */
  76 /**
  77         @property {String} data-type
  78         Defines the notification type. The type options are tickernoti and smallpopup. <br/>The default value is smallpopup.
  79
  80 */
  81 /**
  82         @property {Integer} data-interval
  83         Defines the time to showing a notification widget. <br/>The default is infinitely.
  84
  85 */
  86 /**
  87         @method open
  88         The open method is used to open the notification widget:
  89
  90                 <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
  91                 $('#notification').notification('open');
  92 */
  93 /**
  94         @method close
  95         The close method is used to close the notification widget:
  96
  97                 <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
  98                 $('#notification').notification('close');
  99 */
 100 /**
 101         @method text
 102         The text method is used to set or get the notification text:
 103
 104                 <div data-role="notification" data-type="smallpopup" data-interval="3000"></div>
 105                 // Set notification text
 106                 $('#notification').notification('text', 'setThisText');
 107                 // Get notification text
 108                 texts = $('#notification').notification('text');
 109         @since Tizen2.0
 110 */
 111 /**
 112         @method icon
 113         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.
 114
 115                 <div data-role="notification" data-type="ticker" data-interval="3000"></div>
 116                 $('#notification').notification('icon', './test.png');
 117 */
 118 (function ( $, window ) {
 119         $.widget( "tizen.notification", $.mobile.widget, {
 120                 btn: null,
 121                 text_bg: [],
 122                 icon_img: [],
 123                 interval: null,
 124                 seconds: null,
 125                 running: false,
 126
 127                 _get_text: function () {
 128                         var text = new Array( 2 );
 129
 130                         if ( this.type === 'ticker' ) {
 131                                 text[0] = $( this.text_bg[0] ).text();
 132                                 text[1] = $( this.text_bg[1] ).text();
 133                         } else {
 134                                 text[0] = $( this.text_bg[0] ).text();
 135                         }
 136
 137                         return text;
 138                 },
 139
 140                 _set_text: function ( text0, text1 ) {
 141                         var _set = function ( elem, text ) {
 142                                 if ( !text ) {
 143                                         return;
 144                                 }
 145                                 elem.text( text );
 146                         };
 147
 148                         if ( this.type === 'ticker' ) {
 149                                 _set( $( this.text_bg[0] ), text0 );
 150                                 _set( $( this.text_bg[1] ), text1 );
 151                         } else {
 152                                 _set( $( this.text_bg[0] ), text0 );
 153                         }
 154                 },
 155
 156                 text: function ( text0, text1 ) {
 157                         if ( text0 === undefined && text1 === undefined ) {
 158                                 return this._get_text();
 159                         }
 160
 161                         this._set_text( text0, text1 );
 162                 },
 163
 164                 icon: function ( src ) {
 165                         if ( src === undefined ) {
 166                                 return;
 167                         }
 168
 169                         this.icon_img.detach();
 170                         this.icon_img = $( "<img src='" + src + "' class='ui-ticker-icon'>" );
 171                         $( this.element ).find(".ui-ticker").append( this.icon_img );
 172                 },
 173
 174                 _refresh: function () {
 175                         var container = this._get_container();
 176
 177                         $( container ).addClass("fix")
 178                                         .removeClass("show")
 179                                         .removeClass("hide");
 180
 181                         this._set_interval();
 182                 },
 183
 184                 open: function () {
 185                         var container = this._get_container();
 186
 187                         if ( this.running ) {
 188                                 this._refresh();
 189                                 return;
 190                         }
 191
 192                         $( container ).addClass("show")
 193                                         .removeClass("hide")
 194                                         .removeClass("fix");
 195
 196                         this.running = true;
 197
 198                         if ( this.type === 'popup' ) {
 199                                 this._set_position();
 200                         }
 201
 202                         this._set_interval();
 203                 },
 204
 205                 close: function () {
 206                         var container = this._get_container();
 207
 208                         if ( !this.running ) {
 209                                 return;
 210                         }
 211
 212                         $( container ).addClass("hide")
 213                                         .removeClass("show")
 214                                         .removeClass("fix");
 215
 216                         this.running = false;
 217                         clearInterval( this.interval );
 218                 },
 219
 220                 destroy: function () {
 221                         var container = this._get_container();
 222
 223                         $( container ).removeClass("show")
 224                                         .removeClass("hide")
 225                                         .removeClass("fix");
 226
 227                         this._del_event();
 228
 229                         this.running = false;
 230                 },
 231
 232                 _get_container: function () {
 233                         if ( this.type === 'ticker' ) {
 234                                 return $( this.element ).find(".ui-ticker");
 235                         }
 236
 237                         return $( this.element ).find(".ui-smallpopup");
 238                 },
 239
 240                 _set_interval: function () {
 241                         var self = this;
 242
 243                         clearInterval( this.interval );
 244
 245                         if ( this.seconds !== undefined && this.second !== 0 ) {
 246                                 this.interval = setInterval( function () {
 247                                         self.close();
 248                                 }, this.seconds );
 249                         }
 250                 },
 251
 252                 _add_event: function () {
 253                         var self = this,
 254                                 container = this._get_container();
 255
 256                         if ( this.type === 'ticker' ) {
 257                                 container.find(".ui-ticker-btn").append( this.btn ).trigger("create");
 258
 259                                 this.btn.bind( "vmouseup", function () {
 260                                         self.close();
 261                                 });
 262                         }
 263
 264                         container.bind( 'vmouseup', function () {
 265                                 self.close();
 266                         });
 267                 },
 268
 269                 _del_event: function () {
 270                         var container = this._get_container();
 271
 272                         if ( this.type === 'ticker' ) {
 273                                 this.btn.unbind("vmouseup");
 274                         }
 275                         container.unbind('vmouseup');
 276                         clearInterval( this.interval );
 277                 },
 278
 279                 _set_position: function () {
 280                         var container = this._get_container(),
 281                                 $footer = $('.ui-page-active').children('.ui-footer'),
 282                                 footer_h = $footer.outerHeight() || 0;
 283
 284                         container.css( 'bottom', footer_h);
 285                 },
 286
 287                 _create: function () {
 288                         var self = this,
 289                                 elem = $( this.element ),
 290                                 i;
 291
 292                         this.btn = $('<div data-role="button" data-inline="true">Close</div>');
 293
 294                         this.seconds = elem.jqmData('interval');
 295                         this.type = elem.jqmData('type') || 'popup';
 296
 297                         if ( this.type === 'ticker' ) {
 298                                 elem.wrapInner("<div class='ui-ticker'></div>");
 299                                 elem.find(".ui-ticker").append("<div class='ui-ticker-body'></div>" +
 300                                                         "<div class='ui-ticker-btn'></div>");
 301                                 this.text_bg = elem.find("p");
 302
 303                                 if ( this.text_bg.length < 2 ) {
 304                                         elem.find(".ui-ticker").append("<p></p><p></p>");
 305                                         this.text_bg = elem.find("p");
 306                                 } else if ( this.text_bg.length > 2 ) {
 307                                         for ( i = 2; i < this.text_bg.length; i++ ) {
 308                                                 $( this.text_bg[i] ).css( "display", "none" );
 309                                         }
 310                                 }
 311
 312                                 $( this.text_bg[0] ).addClass("ui-ticker-text1-bg");
 313                                 $( this.text_bg[1] ).addClass("ui-ticker-text2-bg");
 314
 315                                 this.icon_img = elem.find("img");
 316
 317                                 if ( this.icon_img.length ) {
 318                                         $( this.icon_img ).addClass("ui-ticker-icon");
 319
 320                                         for ( i = 1; i < this.icon_img.length; i++ ) {
 321                                                 $( this.icon_img[i] ).css( "display", "none" );
 322                                         }
 323                                 }
 324                         } else {
 325                                 elem.wrapInner("<div class='ui-smallpopup'></div>");
 326                                 this.text_bg = elem.find("p").addClass("ui-smallpopup-text-bg");
 327
 328                                 if ( this.text_bg.length < 1 ) {
 329                                         elem.find(".ui-smallpopup")
 330                                                 .append("<p class='ui-smallpopup-text-bg'></p>");
 331                                         this.text_bg = elem.find("p");
 332                                 } else if ( this.text_bg.length > 1 ) {
 333                                         for ( i = 1; i < this.text_bg.length; i++ ) {
 334                                                 $( this.text_bg[i] ).css( "display", "none" );
 335                                         }
 336                                 }
 337
 338                                 this._set_position();
 339                         }
 340
 341                         this._add_event();
 342
 343                         $( window ).bind( "resize", function () {
 344                                 if ( !self.running ) {
 345                                         return;
 346                                 }
 347
 348                                 self._refresh();
 349
 350                                 if ( self.type === 'popup' ) {
 351                                         self._set_position();
 352                                 }
 353                         });
 354                 }
 355         }); // End of widget
 356
 357         // auto self-init widgets
 358         $( document ).bind( "pagecreate create", function ( e ) {
 359                 $( e.target ).find(":jqmData(role='notification')").notification();
 360         });
 361
 362         $( document ).bind( "pagebeforehide", function ( e ) {
 363                 $( e.target ).find(":jqmData(role='notification')").notification('destroy');
 364         });
 365 }( jQuery, this ));