diff --git a/Makefile b/Makefile index c90e9cba802..dfa71992a32 100755 --- a/Makefile +++ b/Makefile @@ -32,6 +32,7 @@ FILES = js/jquery.ui.widget.js \ js/jquery.mobile.dialog.js \ js/jquery.mobile.navbar.js \ js/jquery.mobile.grid.js \ + js/jquery.mobile.notification.js \ js/jquery.mobile.init.js CSSFILES = themes/default/jquery.mobile.theme.css \ diff --git a/build.xml b/build.xml index e80b1e12937..712909d8eb5 100644 --- a/build.xml +++ b/build.xml @@ -43,6 +43,7 @@ jquery.mobile.dialog.js, jquery.mobile.navbar.js, jquery.mobile.grid.js, + jquery.mobile.notification.js, jquery.mobile.init.js /> diff --git a/js/index.php b/js/index.php index 89b77b3bada..4783ee7b711 100644 --- a/js/index.php +++ b/js/index.php @@ -25,6 +25,7 @@ 'jquery.mobile.dialog.js', 'jquery.mobile.navbar.js', 'jquery.mobile.grid.js', + 'jquery.mobile.notification.js', 'jquery.mobile.init.js' ); diff --git a/js/jquery.mobile.notification.js b/js/jquery.mobile.notification.js new file mode 100644 index 00000000000..9457b4fd311 --- /dev/null +++ b/js/jquery.mobile.notification.js @@ -0,0 +1,70 @@ +/* +* jQuery Mobile Framework : Growl-like notification widget +* Copyright (c) jQuery Project +* Dual licensed under the MIT or GPL Version 2 licenses. +* http://jquery.org/license +*/ +(function( $, undefined ) { + +var $messageBox = null; + +$.widget( "mobile.notification", $.mobile.widget, { + options: { + fadeDelay : 800, + text : "" + }, + + _create: function() { + var $el = this.element; + + $el.addClass( "ui-loader ui-overlay-shadow ui-body-e ui-corner-all" ); + $el.attr( "data-role", "message-box" ); + + this._text = $( "

" ); + $el.append( this._text ); + + this.option( this.options ); + }, + + _setOption: function( name, value ) { + if ( ( name in this.options ) && ( name in this ) ) + this[name]( value ); + }, + + fadeDelay: function( delay ) { + if ( delay === undefined ) + return this.options.fadeDelay; + this.options.fadeDelay = delay; + }, + + text: function( text ) { + if ( text === undefined ) + return this.options.text; + + this._text.text( text ); + this.options.text = text; + }, + + show: function() { + this.element.clearQueue(); + + this.element.css( { "display" : "block", "opacity" : 0.96, "top" : $(window).scrollTop() + 100 } ) + .appendTo( $.mobile.pageContainer ) + .delay( this.options.fadeDelay ) + .fadeOut( 400, function(){ $(this).css( "display", "none" ); } ); + } +}); + +$.mobile.messageBox = function( message, delay ) { + if ( $messageBox === null) + $messageBox = $( "
" ); + + // 800ms delay before fade out is default. + if ( delay === undefined ) + delay = 800; + + $messageBox.notification( { "text" : message, "fadeDelay" : delay } ); + $messageBox.notification( "show" ); +}; + +})(jQuery); diff --git a/tests/unit/notification/index.html b/tests/unit/notification/index.html new file mode 100644 index 00000000000..495e51513a5 --- /dev/null +++ b/tests/unit/notification/index.html @@ -0,0 +1,32 @@ + + + + + jQuery Mobile Page Test Suite + + + + + + + + + + + + +

jQuery Mobile Notification Test Suite

+

+

+
    +
+ +
+
+
+

Here goes some dummy content

+
+
+
+ + diff --git a/tests/unit/notification/notification_core.js b/tests/unit/notification/notification_core.js new file mode 100644 index 00000000000..45126a3710e --- /dev/null +++ b/tests/unit/notification/notification_core.js @@ -0,0 +1,19 @@ +(function($){ + module("jquery.mobile.notification.js"); + + test( "messageBox appears and removes itself", function() { + same( $( "div[data-role='message-box']" ).length, 0, "no message box to begin with" ); + $.mobile.messageBox( "Baba yetu" ); + same( $( "div[data-role='message-box']" ).length, 1, "added one message box"); + same( $( "div[data-role='message-box'] h1" ).text(), "Baba yetu", "message is correct" ); + $.mobile.messageBox( "yetu uliye" ); + same( $( "div[data-role='message-box']" ).length, 1, "no duplicate message boxes" ); + same( $( "div[data-role='message-box'] h1" ).text(), "yetu uliye", "message is correct" ); + stop(); + + setTimeout( function(){ + same( $( "div[data-role='message-box']" ).css( "display" ), "none", "message box removed after 1.5s" ); + start(); + }, 1500); + }); +})(jQuery);