better codes, better docs

Author: Eric Hynds

README.markdown

@@ -1,14 +1,16 @@
 # jQuery UI Notify Widget
 
-Create Growl/Ubuntu-like notifications.  Uses RGBA, border-radius, and box-shadow, so they're not as pretty in IE as they could be right now.
+Create Growl/Ubuntu-like notifications.
+
+Uses RGBA, border-radius, and box-shadow, so they're not as pretty as they could be in IE at the moment.
 
 ## Features
 
 - No images, all CSS
-- Less than 100 lines of code
-- Built on jQuery UI widget factory
+- Roughly 100 lines of code
+- Built on top of the jQuery UI widget factory
 - Templating system: include whatever you want inside notifications (images, links, etc.)
-- beforeopen, open, and close callbacks
+- beforeopen, open, close, and click events
 - Show completely different notifications in different containers
 - Ability to customize options on a notification-by-notification basis
 - Ability to programatically call `open` and `close` methods
@@ -86,3 +88,44 @@ instance.close();
 instance.open();
 </pre>
 
+## Options
+
+Two options are available:
+
+### speed
+The amount of time in MS to fade in/out notifications.
+
+### expires
+The notification will automatically close after this amount of time, in MS.  Set to `0` or `false` to create "sticky" notifications.
+
+## Events
+
+Four events are available to you:
+
+### beforeopen
+Fires before the notification opens.  If `false` is returned inside this callback, the notification will not open.
+
+### open
+Fires after the notifcation opens.
+
+### close 
+Fires after the notification closes.
+
+### click
+Fires if the user clicks anywhere in the notification itself (not on the close link(s), if present).  Useful
+if you want to close the notification or perform some other action once the user has acknowledged the notice.
+
+An example here:
+
+	$("#container").notify("create", {
+		title: 'Clickable Notification',
+		text: 'Click on me to fire a callback'
+	},{
+		click: function(e,instance){
+			// close the notice if the user clicks anywhere inside it
+			instance.close();
+		}
+	});
+
+
+

alert.png

@@ -6,34 +6,61 @@
 <link type="text/css" rel="stylesheet" href="http://www.erichynds.com/examples/style.css" />
 <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" />
 <link type="text/css" rel="stylesheet" href="ui.notify.css" />
+<style type="text/css">form input { display:block; width:250px; margin-bottom:5px }</style>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js" type="text/javascript"></script>
-<script src="http://jqueryui.com/themeroller/themeswitchertool/" type="text/javascript"></script> 
 <script src="src/jquery.notify.js" type="text/javascript"></script>
 <script type="text/javascript">
-$(function(){
+// create a test notification
+function basic(){
+	$container.notify("create", {
+		title: 'Default Notification',
+		text: 'This is an example of the default config.  I will disappear up after five seconds.'
+	});
+}
+
+function sticky(){
+	$container.notify("create", {
+		title: 'Sticky Notification',
+		text: 'This is an example of a "sticky" notification.  The only way to close me is to click on the X above.'
+	},{ expires:false });
+}
+
+function warning(){
+	$container.notify("create", {
+		title: 'Warning!',
+		text: 'OMG the quick brown fox jumped over the lazy dog.  You\'ve been warned.  <a href="#" class="ui-notify-close">Close me.</a>',
+		icon: '<img src="alert.png" style="margin:0 10px 0 0" />'
+	},{ expires:false });
+}
+
+function clickable(){
+	$container.notify("create", {
+		title: 'Clickable Notification',
+		text: 'Click on me to fire a callback. Do it quick though because I will fade out after 5 seconds.'
+	}, {
+		click: function(e,instance){
+			alert("Click triggered!\n\nTwo options are passed into the click callback: the original event obj and the instance object.");
+		}
+	});
+}
 
+$(function(){
 	// initialize widget on a container, passing in all the defaults.
 	// the defaults will apply to any notification created within this
 	// container, but can be overwritten on notification-by-notification
 	// basis.
 	$container = $("#container").notify();
 
-	// create a test notification
-	$container.notify("create", {
-		title: 'Test Notification',
-		text: 'This is an example of the default config, and will slide up after five seconds.'
-	});
-
-	// create another, and save the obj into the var instance.
-	instance = $container.notify("create", {
-		title: 'Sticky Notification',
-		text: 'This is an example of a "sticky" notification.  The only way to close me is to click on the X above.'
-	},{ 
-		expires:false
-	});
+	// create two when the pg loads
+	basic();
+	sticky();
 
-	// since the above instance is "sticky", it can be manually closed by calling instance.close();
+	// bindings
+	$("#default").click( basic );
+	$("#sticky").click( sticky );
+	$("#warning").click( warning );
+	$("#clickable").click( clickable );
 });
 </script>
 
@@ -46,10 +73,18 @@ <h1>jQuery UI Notify Widget</h1>
 	<p>This is a growl/ubuntu-like notification system built on top of jQuery UI.</p>
 	<p>Download &amp; docs @ <a href="http://github.com/ehynds/jquery-notify">http://github.com/ehynds/jquery-notify</a>.</p>
 
+	<form style="margin:20px 0">
+		<input type="button" id="default" value="Open with default configuration" />
+		<input type="button" id="sticky" value="Create a &quot;sticky&quot; notification" />
+		<input type="button" id="warning" value="A more custom template" />
+		<input type="button" id="clickable" value="The entire notification can be clicked on" />
+	</form>
+	
 	<!--- container to hold notifications --->
 	<div id="container">
 		<div>
-			<a class="ui-notify-close" href="#">x</a>
+			<div class="icon" style="float:left">#{icon}</div>
+			<a class="ui-notify-close ui-notify-cross" href="#">x</a>
 			<h1>#{title}</h1>
 			<p>#{text}</p>
 		</div>

index.htm

@@ -29,7 +29,6 @@ $.extend($.ui.notify, {
 $.extend($.ui.notify.instance.prototype, {
 	_create: function(params, options){
 		this.options = options;
-		
 		var self = this,
 
 			// build html template
@@ -38,7 +37,9 @@ $.extend($.ui.notify.instance.prototype, {
 			}),
 
 			// the actual message
-			m = (this.element = $(html)),
+			m = (this.element = $(html).bind("click", function(e){
+				self._trigger("click", e, self);
+			})),
 
 			// close link
 			closelink = m.find("a.ui-notify-close");
@@ -58,11 +59,10 @@ $.extend($.ui.notify.instance.prototype, {
 			});
 		}
 
-		// open plz
 		this.open();
 
 		// auto expire?
-		if(typeof this.options.expires === "number"){
+		if(typeof options.expires === "number"){
 			window.setTimeout(function(){
 				self.close();
 			}, options.expires);
@@ -94,8 +94,8 @@ $.extend($.ui.notify.instance.prototype, {
 
 		return this;
 	},
-	_trigger: function(type){
-		return this.widget._trigger.call( this, type );
+	_trigger: function(type, e, instance){
+		return this.widget._trigger.call( this, type, e, instance );
 	}
 });
 

src/jquery.notify.js

@@ -2,10 +2,12 @@
 .ui-notify-padding { padding:10px }
 .ui-notify-message:last-child { margin-bottom:0 }
 .ui-notify-message h1 { color:#fff; font-size:14px; font-weight:bold; margin:0; padding:0 }
-.ui-notify-message p { color:#fff; margin:5px 0; padding:0; line-height:18px }
-.ui-notify-close { margin-top:-4px; float:right; color:#fff; cursor:pointer; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px }
-.ui-notify-close:hover { text-decoration:none; color:#ffffab }
-.ui-notify-close:active { position:relative; top:1px }
+.ui-notify-message p { color:#fff; margin:3px 0; padding:0; line-height:18px }
+.ui-notify-close { color:#fff; text-decoration:underline }
+.ui-notify-cross { margin-top:-4px; float:right; cursor:pointer; text-decoration:none; font-size:12px; font-weight:bold; text-shadow:0 1px 1px #fff; padding:2px }
+.ui-notify-cross:hover { color:#ffffab }
+.ui-notify-cross:active { position:relative; top:1px }
+
 
 .ui-notify-message {
 	margin-bottom:15px;