jquery-archive · martinkou · Feb 27, 2011
diff --git 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
@@ -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
@@ -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
@@ -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 = $( "<h1></h1>" );
+		$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 = $( "<div></div>" );
+
+	// 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
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery Mobile Page Test Suite</title>
+
+	<script type="text/javascript" src="../../../js/jquery.js"></script>
+	<script type="text/javascript" src="../../../js/"></script>
+	<script type="text/javascript" src="../../../tests/jquery.testHelper.js"></script>
+
+	<link rel="stylesheet" href="../../../external/qunit.css" type="text/css"/>
+	<script type="text/javascript" src="../../../external/qunit.js"></script>
+
+	<script type="text/javascript" src="notification_core.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Notification Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture">
+	<div data-role="page">
+		<div data-role="content">
+			<p>Here goes some dummy content</p>
+		</div>
+	</div>
+</div>
+</body>
+</html>
diff --git a/tests/unit/notification/notification_core.js 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);