Skip to content

Instantly share code, notes, and snippets.

@vmosoti
Created May 16, 2013 16:34
Show Gist options
  • Save vmosoti/5593073 to your computer and use it in GitHub Desktop.
Save vmosoti/5593073 to your computer and use it in GitHub Desktop.
/*
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
*/
(function( $ ){
var pub = {
/*
* Show a notification. Default value are above in notificationOptDef
*
* Ex: bootstrap.notify("Your item has been successfully saved");
* Ex: bootstrap.notify("Your script cannot be saved. Please retry later.", {mode: "error"})
* 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 msec, if there are actions this is set to 0 by default
actions: [], //Optional if you want to use a message block. Ex: [{label: "Ok", callback: function (){...}}, ... ]
closePrevious: false, //If true close the previous notifications if there are any still open on the screen.
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 += '<a class="btn small '+(settings.actions[i].extraClasses ? settings.actions[i].extraClasses : '') +' notification-action-'+i+'" href="#">'+settings.actions[i].label+"</a> "
}
alertActions = '<div class="alert-actions">' + alertActions + '</div>'
blockMessageClass = " block-message";
}
var html = '<div id="'+id+'" class="fl-notification alert-message fade in ' +
settings.mode + blockMessageClass +" "+ settings.extraClasses+ '" data-alert="alert">'+
'<a class="close" href="#">×</a><p>' + message + '</p>' +
alertActions + '</div>';
// 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:
* bootstrap.modalBackdrop.show();
* bootstrap.modalBackdrop.hide();
* bootstrap.modalBackdrop.css({opacity: 0.5});
* bootstrap.modalBackdrop.css({"background-color" : "#ff0"});
*/
modalBackdrop: (function(){
var $backdrop = $('<div class="fl-modalBackdrop" style="position: fixed;top:0;left:0;right:0;bottom:0;z-index:9998;opacity: 0.15;background-color:#fff;display:none"/>')
.appendTo(document.body);
return $backdrop;
})()
}
window['bootstrap'] = pub;
})(window.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment