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  *
  34  * APIs
  35  *
  36  *  open(): open the notification.
  37  *  close(): close the notification.
  38  *  text(text0, text1): set texts or get texts
  39  *  icon(src): set the icon (tickernoti only)
  40  *
  41  * Events
  42  *
  43  *  N/A
  44  *
  45  * Examples
  46  *
  47  * // tickernoti
  48  * <div data-role="notification" id="notification" data-type="ticker">
  49  *      <img src="icon01.png">
  50  *      <p>Hello World</p>
  51  *      <p>Denis</p>
  52  * </div>
  53  *
  54  * // smallpopup
  55  * <div data-role="notification" id="notification" data-type="popup">
  56  *      <p>Hello World</p>
  57  * </div>
  58  *
  59  */
  60
  61 (function ( $, window ) {
  62         $.widget( "tizen.notification", $.mobile.widget, {
  63                 btn: null,
  64                 text_bg: [],
  65                 icon_img: [],
  66                 running: false,
  67
  68                 _get_text: function () {
  69                         var text = new Array( 2 );
  70
  71                         if ( this.type === 'ticker' ) {
  72                                 text[0] = $( this.text_bg[0] ).text();
  73                                 text[1] = $( this.text_bg[1] ).text();
  74                         } else {
  75                                 text[0] = $( this.text_bg[0] ).text();
  76                         }
  77
  78                         return text;
  79                 },
  80
  81                 _set_text: function ( text0, text1 ) {
  82                         var _set = function ( elem, text ) {
  83                                 if ( !text ) {
  84                                         return;
  85                                 }
  86                                 elem.text( text );
  87                         };
  88
  89                         if ( this.type === 'ticker' ) {
  90                                 _set( $( this.text_bg[0] ), text0 );
  91                                 _set( $( this.text_bg[1] ), text1 );
  92                         } else {
  93                                 _set( $( this.text_bg[0] ), text0 );
  94                         }
  95                 },
  96
  97                 text: function ( text0, text1 ) {
  98                         if ( text0 === undefined && text1 === undefined ) {
  99                                 return this._get_text();
 100                         }
 101
 102                         this._set_text( text0, text1 );
 103                 },
 104
 105                 icon: function ( src ) {
 106                         if ( src === undefined ) {
 107                                 return;
 108                         }
 109
 110                         this.icon_img.detach();
 111                         this.icon_img = $( "<img src='" + src + "' class='ui-ticker-icon'>" );
 112                         $( this.element ).find(".ui-ticker").append( this.icon_img );
 113                 },
 114
 115                 _refresh: function () {
 116                         var container = this._get_container();
 117
 118                         $( container ).addClass("fix")
 119                                         .removeClass("show")
 120                                         .removeClass("hide");
 121                 },
 122
 123                 open: function () {
 124                         var container = this._get_container();
 125
 126                         if ( this.running ) {
 127                                 this._refresh();
 128                                 return;
 129                         }
 130
 131                         $( container ).addClass("show")
 132                                         .removeClass("hide")
 133                                         .removeClass("fix");
 134
 135                         this.running = true;
 136
 137                         if ( this.type === 'popup' ) {
 138                                 this._set_position();
 139                         }
 140                 },
 141
 142                 close: function () {
 143                         var container = this._get_container();
 144
 145                         if ( !this.running ) {
 146                                 return;
 147                         }
 148
 149                         $( container ).addClass("hide")
 150                                         .removeClass("show")
 151                                         .removeClass("fix");
 152
 153                         this.running = false;
 154                 },
 155
 156                 distroy: function () {
 157                         var container = this._get_container();
 158
 159                         $( container ).removeClass("show")
 160                                         .removeClass("hide")
 161                                         .removeClass("fix");
 162
 163                         this._del_event();
 164
 165                         this.running = false;
 166                 },
 167
 168                 _get_container: function () {
 169                         if ( this.type === 'ticker' ) {
 170                                 return $( this.element ).find(".ui-ticker");
 171                         }
 172
 173                         return $( this.element ).find(".ui-smallpopup");
 174                 },
 175
 176                 _add_event: function () {
 177                         var self = this,
 178                                 container = this._get_container();
 179
 180                         if ( this.type === 'ticker' ) {
 181                                 container.find(".ui-ticker-btn").append( this.btn );
 182
 183                                 this.btn.bind( "vmouseup", function () {
 184                                         self.close();
 185                                 });
 186                         }
 187
 188                         container.bind( 'vmouseup', function () {
 189                                 self.close();
 190                         });
 191                 },
 192
 193                 _del_event: function () {
 194                         var container = this._get_container();
 195
 196                         if ( this.type === 'ticker' ) {
 197                                 this.btn.unbind("vmouseup");
 198                         }
 199                         container.unbind('vmouseup');
 200                 },
 201
 202                 _set_position: function () {
 203                         var container = this._get_container(),
 204                                 container_h = parseFloat( container.height() ),
 205                                 $page = $('.ui-page'),
 206                                 $footer = $page.children('.ui-footer'),
 207                                 footer_h = $footer.outerHeight() || 0,
 208                                 position = $( window ).height() - container_h - footer_h;
 209
 210                         container.css( 'top', position );
 211                 },
 212
 213                 _create: function () {
 214                         var self = this,
 215                                 elem = $( this.element ),
 216                                 i;
 217
 218                         this.btn = $("<a href='#' class='ui-input-cancel' title='close' data-theme='s'>Close</a>")
 219                                 .tap( function ( event ) {
 220                                         event.preventDefault();
 221                                 })
 222                                 .buttonMarkup({
 223                                         inline: true,
 224                                         corners: true,
 225                                         shadow: true
 226                                 });
 227
 228                         this.type = elem.jqmData('type') || 'popup';
 229
 230                         if ( this.type === 'ticker' ) {
 231                                 elem.wrapInner("<div class='ui-ticker'></div>");
 232                                 elem.find(".ui-ticker").append("<div class='ui-ticker-body'></div>" +
 233                                                         "<div class='ui-ticker-btn'></div>");
 234                                 this.text_bg = elem.find("p");
 235
 236                                 if ( this.text_bg.length < 2 ) {
 237                                         elem.find(".ui-ticker").append("<p></p><p></p>");
 238                                         this.text_bg = elem.find("p");
 239                                 } else if ( this.text_bg.length > 2 ) {
 240                                         for ( i = 2; i < this.text_bg.length; i++ ) {
 241                                                 $( this.text_bg[i] ).css( "display", "none" );
 242                                         }
 243                                 }
 244
 245                                 $( this.text_bg[0] ).addClass("ui-ticker-text1-bg");
 246                                 $( this.text_bg[1] ).addClass("ui-ticker-text2-bg");
 247
 248                                 this.icon_img = elem.find("img");
 249
 250                                 if ( this.icon_img.length ) {
 251                                         $( this.icon_img ).addClass("ui-ticker-icon");
 252
 253                                         for ( i = 1; i < this.icon_img.length; i++ ) {
 254                                                 $( this.icon_img[i] ).css( "display", "none" );
 255                                         }
 256                                 }
 257                         } else {
 258                                 elem.wrapInner("<div class='ui-smallpopup'></div>");
 259                                 this.text_bg = elem.find("p").addClass("ui-smallpopup-text-bg");
 260
 261                                 if ( this.text_bg.length < 1 ) {
 262                                         elem.find(".ui-smallpopup")
 263                                                 .append("<p class='ui-smallpopup-text-bg'></p>");
 264                                         this.text_bg = elem.find("p");
 265                                 } else if ( this.text_bg.length > 1 ) {
 266                                         for ( i = 1; i < this.text_bg.length; i++ ) {
 267                                                 $( this.text_bg[i] ).css( "display", "none" );
 268                                         }
 269                                 }
 270
 271                                 this._set_position();
 272                         }
 273
 274                         this._add_event();
 275
 276                         $( window ).bind( "resize", function () {
 277                                 if ( !self.running ) {
 278                                         return;
 279                                 }
 280
 281                                 self._refresh();
 282
 283                                 if ( self.type === 'popup' ) {
 284                                         self._set_position();
 285                                 }
 286                         });
 287                 }
 288         }); // End of widget
 289
 290         // auto self-init widgets
 291         $( document ).bind( "pagecreate create", function ( e ) {
 292                 $( e.target ).find(":jqmData(role='notification')").notification();
 293         });
 294
 295         $( document ).bind( "pagebeforehide", function ( e ) {
 296                 $( e.target ).find(":jqmData(role='notification')").notification('destroy');
 297         });
 298 }( jQuery, this ));