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

   1 /*
   2         Author: Minkyu Kang <mk7.kang@samsung.com>
   3 */
   4
   5 /*
   6  * Notification widget
   7  *
   8  * HTML Attributes
   9  *
  10  *  data-role: set to 'notification'.
  11  *  data-type: 'ticker' or 'popup'.
  12  *  data-text1: top text for tickernoti, text to show for smallpopup.
  13  *  data-text2: bottom text for tickernoti, smallpopup will ignore this text.
  14  *  data-param: parameter for 'tapped' event.
  15  *  data-interval: time to showing. If don't set, will show infinitely.
  16  *
  17  * APIs
  18  *
  19  *  show(): show the notification.
  20  *  hide(): hide the notification.
  21  *
  22  * Events
  23  *
  24  *  tapped: When you tap or click the smallpopup, this event will be raised.
  25  *
  26  * Examples
  27  *
  28  * // tickernoti
  29  * <div data-role="notification" id="notification" data-type="ticker" data-text1="text1" data-text2="text2" data-param="parameters" data-interval="3000"></div>
  30  *
  31  * // smallpopup
  32  * <div data-role="notification" id="notification" data-type="popup" data-text1="text1" data-param="parameters" data-interval="3000"></div>
  33  *
  34  * // event
  35  * $('#notification-demo').bind('tapped', function (e, m) {
  36  *      alert('notification is tapped\nparameter:"' + m + '"');
  37  * });
  38  *
  39  */
  40
  41 (function ( $, window ) {
  42         $.widget( "tizen.notification", $.mobile.widget, {
  43                 btn: null,
  44                 param: null,
  45                 interval: null,
  46                 seconds: null,
  47                 running: false,
  48
  49                 _refresh: function () {
  50                         this._del_event();
  51                         this._update();
  52                         this._add_event();
  53
  54                         $( this.html ).addClass("fix");
  55                 },
  56
  57                 show: function () {
  58                         if ( this.running ) {
  59                                 this._refresh();
  60                                 return;
  61                         }
  62
  63                         this._update();
  64
  65                         this._add_event();
  66
  67                         this.running = true;
  68                         $( this.html ).addClass("show");
  69                 },
  70
  71                 hide: function () {
  72                         if ( !this.running ) {
  73                                 return;
  74                         }
  75
  76                         $( this.html ).addClass("hide");
  77                         $( this.html ).removeClass("show").removeClass("fix");
  78                         this._del_event();
  79
  80                         this.running = false;
  81                 },
  82
  83                 close: function () {
  84                         $( this.html ).removeClass("show").removeClass("hide").removeClass("fix");
  85                         this._del_event();
  86
  87                         this.running = false;
  88                 },
  89
  90                 _get_container: function () {
  91                         if ( this.type === 'ticker' ) {
  92                                 return $( this.element ).find(".ui-ticker");
  93                         } else {
  94                                 return $( this.element ).find(".ui-smallpopup");
  95                         }
  96                 },
  97
  98                 _add_event: function () {
  99                         var self = this,
 100                                 container = this._get_container();
 101
 102                         if ( this.type === 'ticker' ) {
 103                                 var btn_container = container.find(".ui-ticker-btn");
 104
 105                                 btn_container.append( this.btn );
 106
 107                                 this.btn.bind( "vmouseup", function () {
 108                                         self.hide();
 109                                 });
 110                         }
 111
 112                         container.bind( 'vmouseup', function () {
 113                                 self.element.trigger( 'tapped', self.param );
 114                                 self.hide();
 115                         });
 116
 117                         if ( this.seconds !== undefined && this.second !== 0 ) {
 118                                 this.interval = setInterval( function () {
 119                                         self.hide();
 120                                 }, this.seconds );
 121                         }
 122                 },
 123
 124                 _del_event: function () {
 125                         var container = this._get_container();
 126
 127                         if ( this.type === 'ticker' ) {
 128                                 this.btn.unbind("vmouseup");
 129                         }
 130                         container.unbind('vmouseup');
 131                         clearInterval( this.interval );
 132                 },
 133
 134                 _get_position: function ( height ) {
 135                         var $page = $('.ui-page'),
 136                                 $footer = $page.children('.ui-footer'),
 137                                 footer_h = $footer.outerHeight() || 0,
 138                                 position = window.innerHeight - height - footer_h;
 139
 140                         return position;
 141                 },
 142
 143                 _update: function () {
 144                         var text = new Array(2);
 145
 146                         if ( this.html ) {
 147                                 this.html.detach();
 148                         }
 149
 150                         text[0] = $(this.element).attr('data-text1');
 151                         text[1] = $(this.element).attr('data-text2');
 152                         this.param = $(this.element).attr('data-param');
 153                         this.seconds = $(this.element).attr('data-interval');
 154                         this.type = $(this.element).attr('data-type') || 'popup';
 155
 156                         if ( this.type === 'ticker' ) {
 157                                 this.html = $('<div class="ui-ticker">' +
 158                                                 '<div class="ui-ticker-icon"></div>' +
 159                                                 '<div class="ui-ticker-text1-bg">' +
 160                                                 text[0] + '</div>' +
 161                                                 '<div class="ui-ticker-text2-bg">' +
 162                                                 text[1] + '</div>' +
 163                                                 '<div class="ui-ticker-body"></div>' +
 164                                                 '<div class="ui-ticker-btn"></div>' +
 165                                                 '</div>' +
 166                                                 '</div>');
 167
 168                                 $( this.element ).append( this.html );
 169                         } else {
 170                                 this.html = $('<div class="ui-smallpopup">' +
 171                                                 '<div class="ui-smallpopup-text-bg">' +
 172                                                 text[0] + '</div>' +
 173                                                 '</div>');
 174
 175                                 $( this.element ).append( this.html );
 176
 177                                 var container = $( this.element ).find(".ui-smallpopup"),
 178                                         container_h = parseFloat( container.css('height') );
 179
 180                                 container.css( 'top', this._get_position(container_h) );
 181                         }
 182                 },
 183
 184                 _create: function () {
 185                         this.btn = $("<a href='#' class='ui-input-cancel' title='close' data-theme='s'>Close</a>")
 186                                 .tap( function( event ) {
 187                                         event.preventDefault();
 188                                 })
 189                                 .buttonMarkup({
 190                                         inline: true,
 191                                         corners: true,
 192                                         shadow: true
 193                                 });
 194
 195                         this._update();
 196                         this.running = false;
 197                 }
 198         }); // End of widget
 199
 200         // auto self-init widgets
 201         $( document ).bind( "pagecreate create", function ( e ) {
 202                 $( e.target ).find(":jqmData(role='notification')").notification();
 203         });
 204
 205         $( document ).bind( "pagebeforehide", function ( e ) {
 206                 $( e.target ).find(":jqmData(role='notification')").notification('close');
 207         });
 208 }( jQuery, this ));