Skip to content

Instantly share code, notes, and snippets.

@federicobond
Last active December 19, 2015 03:19
Show Gist options
  • Save federicobond/5889447 to your computer and use it in GitHub Desktop.
Save federicobond/5889447 to your computer and use it in GitHub Desktop.
Client-side messages for Bootstrap
// messages.js - Client-side messages for Bootstrap
// (c) 2013 Federico Bond
// messages.js may be freely distributed under the MIT License.
!function ($) {
"use strict";
var templateString = '<div class="alert alert-{{ cls }}">{{ msg }}' +
'<a class="close" data-dismiss="alert" href="#">&times;</a>' +
'</div>';
var template, partial;
if (window._) {
var _ = window._;
template = _.template;
partial = _.partial;
} else {
template = function (string) {
return function (context) {
return string.replace(/{{\s*(\w+)\s*}}/,
function (match, variable) {
return context[variable];
});
};
};
partial = function (func) {
var slice = Array.prototype.slice,
args = slice.call(arguments, 1);
return function () {
return func.apply(this, args.concat(slice.call(arguments)));
};
};
}
var settings = {
container: $('body > .container'),
template: template,
templateString: templateString,
closeButton: false,
append: false
};
var message = function (cls, msg) {
var container = settings.container,
template = settings.template;
templateString = settings.templateString;
// Render message template
var elem = $(template(templateString)({'cls': cls, 'msg': msg}));
if (!settings.closeButton) {
elem.find('.close').remove();
}
if (!settings.append) {
// Remove previous messages
container.find('.alert').remove();
}
// Add current message
elem.hide().prependTo(container).fadeIn();
};
var setup = function (obj) {
$.extend(settings, obj);
};
var messages = {
setup: setup,
success: partial(message, 'success'),
warning: partial(message, 'warning'),
error: partial(message, 'error'),
info: partial(message, 'info')
};
window.messages = messages;
}(window.jQuery);
@federicobond
Copy link
Author

TODO:

  • Turn it into a component
  • Remove jQuery dependency and enable configurable selector engines via setSelectorEngine
  • Remove Underscore check and enable configurable templates
  • Add configurable parameters for the rest of the fixed values

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment