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
 138                 close: function () {
 139                         var container = this._get_container();
 140
 141                         if ( !this.running ) {
 142                                 return;
 143                         }
 144
 145                         $( container ).addClass("hide")
 146                                         .removeClass("show")
 147                                         .removeClass("fix");
 148
 149                         this.running = false;
 150                 },
 151
 152                 close: function () {
 153                         var container = this._get_container();
 154
 155                         $( container ).removeClass("show")
 156                                         .removeClass("hide")
 157                                         .removeClass("fix");
 158
 159                         this._del_event();
 160
 161                         this.running = false;
 162                 },
 163
 164                 _get_container: function () {
 165                         if ( this.type === 'ticker' ) {
 166                                 return $( this.element ).find(".ui-ticker");
 167                         }
 168
 169                         return $( this.element ).find(".ui-smallpopup");
 170                 },
 171
 172                 _add_event: function () {
 173                         var self = this,
 174                                 container = this._get_container();
 175
 176                         if ( this.type === 'ticker' ) {
 177                                 container.find(".ui-ticker-btn").append( this.btn );
 178
 179                                 this.btn.bind( "vmouseup", function () {
 180                                         self.close();
 181                                 });
 182                         }
 183
 184                         container.bind( 'vmouseup', function () {
 185                                 self.close();
 186                         });
 187                 },
 188
 189                 _del_event: function () {
 190                         var container = this._get_container();
 191
 192                         if ( this.type === 'ticker' ) {
 193                                 this.btn.unbind("vmouseup");
 194                         }
 195                         container.unbind('vmouseup');
 196                 },
 197
 198                 _set_position: function () {
 199                         var container = this._get_container(),
 200                                 container_h = parseFloat( container.height() ),
 201                                 $page = $('.ui-page'),
 202                                 $footer = $page.children('.ui-footer'),
 203                                 footer_h = $footer.outerHeight() || 0,
 204                                 position = $( window ).height() - container_h - footer_h;
 205
 206                         container.css( 'top', position );
 207                 },
 208
 209                 _create: function () {
 210                         var self = this,
 211                                 elem = $( this.element ),
 212                                 i;
 213
 214                         this.btn = $("<a href='#' class='ui-input-cancel' title='close' data-theme='s'>Close</a>")
 215                                 .tap( function ( event ) {
 216                                         event.preventDefault();
 217                                 })
 218                                 .buttonMarkup({
 219                                         inline: true,
 220                                         corners: true,
 221                                         shadow: true
 222                                 });
 223
 224                         this.type = elem.jqmData('type') || 'popup';
 225
 226                         if ( this.type === 'ticker' ) {
 227                                 elem.wrapInner("<div class='ui-ticker'></div>");
 228                                 elem.find(".ui-ticker").append("<div class='ui-ticker-body'></div>" +
 229                                                         "<div class='ui-ticker-btn'></div>");
 230                                 this.text_bg = elem.find("p");
 231
 232                                 if ( this.text_bg.length < 2 ) {
 233                                         elem.find(".ui-ticker").append("<p></p><p></p>");
 234                                         this.text_bg = elem.find("p");
 235                                 } else if ( this.text_bg.length > 2 ) {
 236                                         for ( i = 2; i < this.text_bg.length; i++ ) {
 237                                                 $( this.text_bg[i] ).css( "display", "none" );
 238                                         }
 239                                 }
 240
 241                                 $( this.text_bg[0] ).addClass("ui-ticker-text1-bg");
 242                                 $( this.text_bg[1] ).addClass("ui-ticker-text2-bg");
 243
 244                                 this.icon_img = elem.find("img");
 245
 246                                 if ( this.icon_img.length ) {
 247                                         $( this.icon_img ).addClass("ui-ticker-icon");
 248
 249                                         for ( i = 1; i < this.icon_img.length; i++ ) {
 250                                                 $( this.icon_img[i] ).css( "display", "none" );
 251                                         }
 252                                 }
 253                         } else {
 254                                 elem.wrapInner("<div class='ui-smallpopup'></div>");
 255                                 this.text_bg = elem.find("p").addClass("ui-smallpopup-text-bg");
 256
 257                                 if ( this.text_bg.length < 1 ) {
 258                                         elem.find(".ui-smallpopup")
 259                                                 .append("<p class='ui-smallpopup-text-bg'></p>");
 260                                         this.text_bg = elem.find("p");
 261                                 } else if ( this.text_bg.length > 1 ) {
 262                                         for ( i = 1; i < this.text_bg.length; i++ ) {
 263                                                 $( this.text_bg[i] ).css( "display", "none" );
 264                                         }
 265                                 }
 266
 267                                 this._set_position();
 268                         }
 269
 270                         this._add_event();
 271
 272                         $( window ).bind( "resize", function () {
 273                                 if ( self.running ) {
 274                                         self._refresh();
 275                                 }
 276
 277                                 if ( self.type === 'popup' ) {
 278                                         self._set_position();
 279                                 }
 280                         });
 281                 }
 282         }); // End of widget
 283
 284         // auto self-init widgets
 285         $( document ).bind( "pagecreate create", function ( e ) {
 286                 $( e.target ).find(":jqmData(role='notification')").notification();
 287         });
 288
 289         $( document ).bind( "pagebeforehide", function ( e ) {
 290                 $( e.target ).find(":jqmData(role='notification')").notification('close');
 291         });
 292 }( jQuery, this ));