Skip to content

Commit

Permalink
added ability to choose the template you want to use when creating a …
Browse files Browse the repository at this point in the history 
…notification. exposed widget() method in "instance" object. better demos
  • Loading branch information
Eric Hynds committed May 14, 2010
1 parent 6c587a9 commit ec67945
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 55 deletions.
2 changes: 1 addition & 1 deletion README.markdown
View file
Expand Up @@ -7,7 +7,7 @@ Uses RGBA, border-radius, and box-shadow, so they're not as pretty as they could
## Features

- No images, all CSS
- Roughly 100 lines of code
- Lightweight. Barely 2.5kb in size
- Built on top of the jQuery UI widget factory
- Templating system: include whatever you want inside notifications (images, links, etc.)
- beforeopen, open, close, and click events
Expand Down
102 changes: 59 additions & 43 deletions index.htm
View file
Expand Up @@ -10,39 +10,10 @@
<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="src/jquery.notify.js" type="text/javascript"></script>
<script type="text/javascript">
// 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. Close me by clicking on the "x" icon 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.");
}
});
<script type="text/javascript">
function create( template, vars, opts ){
return $container.notify("create", template, vars, opts);
}

$(function(){
Expand All @@ -53,14 +24,43 @@
$container = $("#container").notify();

// create two when the pg loads
basic();
sticky();
create(undefined, { title:'Default Notification', text:'Example of a default notification. I will fade out after 5 seconds'});
create(undefined, { title:'Sticky Notification', text:'Example of a "sticky" notification. Click on the X above to close me.'},{ expires:false });



// bindings for the examples
$("#default").click(function(){
create(undefined, { title:'Default Notification', text:'Example of a default notification. I will fade out after 5 seconds'});
});

$("#sticky").click(function(){
create(undefined, { title:'Sticky Notification', text:'Example of a "sticky" notification. Click on the X above to close me.'},{ expires:false });
});

// bindings
$("#default").click( basic );
$("#sticky").click( sticky );
$("#warning").click( warning );
$("#clickable").click( clickable );
$("#warning").click(function(){
create("withIcon", { 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" alt="warning">' },{
expires:false
});
});

$("#clickable").click(function(){
create(undefined, { 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.");
}
});
});

$("#buttons").click(function(){
var n = create("buttons", { title:'Confirm some action', text:'This template has a button.' },{
expires:false
});

n.widget().delegate("input","click", function(){
n.close();
});
});
});
</script>

Expand All @@ -77,17 +77,33 @@ <h1>jQuery UI Notify Widget</h1>
<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="warning" value="Use icons in your templates" />
<input type="button" id="buttons" value="Or buttons even" />
<input type="button" id="clickable" value="The entire notification can be clicked on" />
</form>

<!--- container to hold notifications --->
<!--- container to hold notifications, and default templates --->
<div id="container">
<div>
<div class="icon" style="float:left">#{icon}</div>

<div id="default">
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
<h1>#{title}</h1>
<p>#{text}</p>
</div>

<div id="withIcon">
<a class="ui-notify-close ui-notify-cross" href="#">x</a>
<div style="float:left;margin:0 10px 0 0">#{icon}</div>
<h1>#{title}</h1>
<p>#{text}</p>
</div>

<div id="buttons">
<h1>#{title}</h1>
<p>#{text}</p>
<p style="margin-top:10px;text-align:center">
<input type="button" class="confirm" value="Close Dialog" />
</p>
</div>
</div>

Expand Down
53 changes: 44 additions & 9 deletions src/jquery.notify.js
View file
@@ -1,3 +1,18 @@
/*
* jQuery Notify UI Widget 1.0
* Copyright (c) 2010 Eric Hynds
*
* http://www.erichynds.com/jquery/a-jquery-ui-growl-ubuntu-notification-widget/
*
* Depends:
* - jQuery 1.4
* - jQuery UI 1.8 (core, widget factory)
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){

$.widget("ui.notify", {
Expand All @@ -6,11 +21,27 @@ $.widget("ui.notify", {
expires: 5000
},
_create: function(){
this.template = this.element.children().addClass("ui-notify-padding").wrap('<div class="ui-notify-message"></div>').end().html();
this.element.empty().addClass("ui-notify");
var self = this;
this.templates = {};
this.keys = [];

// build and save templates
this.element.addClass("ui-notify").children().addClass('ui-notify-message').each(function(i){
var key = this.id || i;
self.keys.push(key);
self.templates[key] = $(this).removeAttr("id").wrap("<div></div>").parent().html(); // because $(this).andSelf().html() no workie
}).end().empty();

},
create: function(msg, opts){
return new $.ui.notify.instance(this)._create(msg, $.extend({}, this.options, opts));
create: function(template, msg, opts){
if(typeof template === "object"){
opts = msg;
msg = template;
template = null;
}

// return a new notification instance
return new $.ui.notify.instance(this)._create(msg, $.extend({}, this.options, opts), this.templates[ template || this.keys[0]]);
},
_setOption: function(key, value){
this.options[key] = value;
Expand All @@ -20,19 +51,20 @@ $.widget("ui.notify", {
// instance constructor
$.extend($.ui.notify, {
instance: function(widget){
this.widget = widget;
this.parent = widget;
this.isOpen = false;
}
});

// instance methods
$.extend($.ui.notify.instance.prototype, {
_create: function(params, options){
_create: function(params, options, template){
this.options = options;

var self = this,

// build html template
html = this.widget.template.replace(/#\{(.*?)\}/g, function($1, $2){
html = template.replace(/#\{(.*?)\}/g, function($1, $2){
return ($2 in params) ? params[$2] : '';
}),

Expand Down Expand Up @@ -88,14 +120,17 @@ $.extend($.ui.notify.instance.prototype, {
var self = this;
this.isOpen = true;

this.element.appendTo(this.widget.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){
this.element.appendTo(this.parent.element).css({ display:"none", opacity:"" }).fadeIn(this.options.speed, function(){
self._trigger("open");
});

return this;
},
widget: function(){
return this.element;
},
_trigger: function(type, e, instance){
return this.widget._trigger.call( this, type, e, instance );
return this.parent._trigger.call( this, type, e, instance );
}
});

Expand Down
3 changes: 1 addition & 2 deletions ui.notify.css
View file
@@ -1,6 +1,5 @@
.ui-notify { width:350px; position:absolute; top:10px; right:10px; }
.ui-notify-padding { padding:10px }
.ui-notify-message { margin-bottom:15px; background:#000; background:rgba(0,0,0,0.8); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; }
.ui-notify-message { padding:10px; margin-bottom:15px; background:#000; background:rgba(0,0,0,0.8); -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow: 0 0 6px #000; -webkit-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; }
.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:3px 0; padding:0; line-height:18px }
Expand Down

0 comments on commit ec67945

Please sign in to comment.