twitter/bootstrap — Issue #905: Add Javascript functions to dynamically create Notifications
Author: ChrisCinelli
Created: 2012-01-06 09:49:54+00:00
State: open

I created the following javascript to use bootstrapt's notifications through Javascript.
If you like it you may consider adding it to bootstrapt. Feel free to modify if necessary.
Be sure you define a div #notification-area, where the notifications are going to be displayed by default.

I use it with jQuery 1.7.1 but it should work with older versions. Is also use jquery.hotkeys.js ( https://github.com/jeresig/jquery.hotkeys ) for block messages hotkeys

```javascript
(function( $ ){
var pub = {
/*
* Show a notification. Default value are above in notificationOptDef
*
* Ex: bootstrap.notify("Does it stink?", {closeTime: 0, actions: [
{label: "Yes", defaultAction: true, keys: "enter", extraClasses: "primary" callback: function(){console.log("Oh oh")}},
{label: "No", keys: "esc", callback: function(){console.log("Oh great! I am happy to know that!")}}
]});
*/
notify: (function(){
var notificationOptDef =
{
mode: "info", //Chose between: info(blue), warning(yellow), success(green), error(red)
attachTo: "#notification-area", //If you want the notification to appear somewhere else use this selector
closeTime: 5000, //0 is sticky, otherwise autoclose in X, if there are actions this is set to 0
actions: [], //Ex: [{label: "Ok", callback: function (){...}}, ... ]
closePrevious: false, //If true close the previous notifications.
extraClasses: "" //space separated list of extra classes to add to the notification
}

var nextNotificationId = 1; //Notification Id of the current notification.

function unbindkeys($this){
var id = $this.closest(".alert-message").attr('id');
$(document).unbind("keyup."+id);
}

return function(message, opts){
var settings = $.extend({}, notificationOptDef, opts);

//Each notification has its own id
var id = "notificationBox"+(nextNotificationId++);

var alertActions = '';
var blockMessageClass = '';
if (settings.actions.length > 0)
{
pub.modalBackdrop.show();

for(i in settings.actions){
//This extraClasses is different than the settings.extraClasses. This is for each button
alertActions += ''+settings.actions[i].label+" "
}

alertActions = '

' + alertActions + '

'
blockMessageClass = " block-message";
}

var html = '

'+
'×

' + message + '

' +
alertActions + '

';

// remove any previous notifications
if (settings.closePrevious){
$('.fl-notification').remove();
}

$(settings.attachTo).append($(html));
var $this = $("#"+id);
$this.alert();
$(".close", $this).click(function(){
unbindkeys($(this));
pub.modalBackdrop.hide();
});

for(i in settings.actions){
var _action = settings.actions[i];
(function(action, keys){
var $action = $("#"+id+" .notification-action-"+i);
if (action.defaultAction) $action.focus();
$action.click(function(e){
e.preventDefault();
if (action.callback) action.callback();
$(this).closest(".alert-message").find(".close").click();
});

if (action.keys){
$(document).bind("keyup."+id, action.keys, function(){
console.log("Action triggered:",$action);
$action.click();
});
}
})(_action);
}

if (settings.actions.length === 0 && //Only if there are no actions
settings.closeTime){
(function(id){
var timerId = setTimeout(function(){
$("#"+id).find(".close").click();
}, settings.closeTime);
})(id);
}
}
})(),
/*
* Open a block message as notification with Yes (with associated opts.yesAction) and No (with associated opts.noAction) buttons
*/
notifyYesNo: function(message, opts){
var notificationYesNo =
{
actions: [
{label: "Yes", defaultAction: true, keys:"return", callback: opts.yesAction},
{label: "No", keys:"esc", callback: opts.noAction}
]
}

var settings = $.extend({}, opts, notificationYesNo);
pub.notify(message, settings);
},

/*
* Open a block message as notification with Ok (with associated opts.okAction)
*/
notifyOk: function(message, opts){
var notificationOk =
{
actions: [
{label: "Ok", defaultAction: true, keys:"return", callback: opts.okAction}
]
}

var settings = $.extend({}, opts, notificationOk);
pub.notify(message, settings);
},

/*
* Create a very light trasparent backdrop for modal actions
*
* Example of use:
* fl.modalBackdrop.show();
* fl.modalBackdrop.hide();
* fl.modalBackdrop.css({opacity: 0.5});
* fl.modalBackdrop.css({"background-color" : "#ff0"});
*/
modalBackdrop: (function(){
var $backdrop = $('

')
.appendTo(document.body);

return $backdrop;
})()
}

window['bootstrap'] = pub;

})(window.jQuery);
```

Code is in this gist: https://gist.github.com/1569896