2 Author: Minkyu Kang <mk7.kang@samsung.com>
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.
19 * show(): show the notification.
20 * hide(): hide the notification.
24 * tapped: When you tap or click the smallpopup, this event will be raised.
29 * <div data-role="notification" id="notification" data-type="ticker" data-text1="text1" data-text2="text2" data-param="parameters" data-interval="3000"></div>
32 * <div data-role="notification" id="notification" data-type="popup" data-text1="text1" data-param="parameters" data-interval="3000"></div>
35 * $('#notification-demo').bind('tapped', function (e, m) {
36 * alert('notification is tapped\nparameter:"' + m + '"');
41 (function ( $, window ) {
42 $.widget( "tizen.notification", $.mobile.widget, {
49 _refresh: function () {
54 $( this.html ).addClass("fix");
68 $( this.html ).addClass("show");
72 if ( !this.running ) {
76 $( this.html ).addClass("hide");
77 $( this.html ).removeClass("show").removeClass("fix");
84 $( this.html ).removeClass("show").removeClass("hide").removeClass("fix");
90 _get_container: function () {
91 if ( this.type === 'ticker' ) {
92 return $( this.element ).find(".ui-ticker");
94 return $( this.element ).find(".ui-smallpopup");
98 _add_event: function () {
100 container = this._get_container();
102 if ( this.type === 'ticker' ) {
103 var btn_container = container.find(".ui-ticker-btn");
105 btn_container.append( this.btn );
107 this.btn.bind( "vmouseup", function () {
112 container.bind( 'vmouseup', function () {
113 self.element.trigger( 'tapped', self.param );
117 if ( this.seconds !== undefined && this.second !== 0 ) {
118 this.interval = setInterval( function () {
124 _del_event: function () {
125 var container = this._get_container();
127 if ( this.type === 'ticker' ) {
128 this.btn.unbind("vmouseup");
130 container.unbind('vmouseup');
131 clearInterval( this.interval );
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;
143 _update: function () {
144 var text = new Array(2);
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';
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">' +
161 '<div class="ui-ticker-text2-bg">' +
163 '<div class="ui-ticker-body"></div>' +
164 '<div class="ui-ticker-btn"></div>' +
168 $( this.element ).append( this.html );
170 this.html = $('<div class="ui-smallpopup">' +
171 '<div class="ui-smallpopup-text-bg">' +
175 $( this.element ).append( this.html );
177 var container = $( this.element ).find(".ui-smallpopup"),
178 container_h = parseFloat( container.css('height') );
180 container.css( 'top', this._get_position(container_h) );
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();
196 this.running = false;
200 // auto self-init widgets
201 $( document ).bind( "pagecreate create", function ( e ) {
202 $( e.target ).find(":jqmData(role='notification')").notification();
205 $( document ).bind( "pagebeforehide", function ( e ) {
206 $( e.target ).find(":jqmData(role='notification')").notification('close');