I am adopting a dashboard admin from TF. My question is, does it make sense to create components of things such as notifications or we simply use them as is (jQuery).
The notification code looks like this:
(function($) {
'use strict';
var Notification = function(container, options) {
var self = this;
// Element collection
self.container = $(container); // 'body' recommended
self.notification = $('<div class="pgn"></div>');
self.options = $.extend(true, {}, $.fn.pgNotification.defaults, options);
if (!self.container.find('.pgn-wrapper[data-position=' + this.options.position + ']').length) {
self.wrapper = $('<div class="pgn-wrapper" data-position="' + this.options.position + '"></div>');
self.container.append(self.wrapper);
} else {
self.wrapper = $('.pgn-wrapper[data-position=' + this.options.position + ']');
}
self.alert = $('<div class="alert"></div>');
self.alert.addClass('alert-' + self.options.type);
if (self.options.style == 'bar') {
new BarNotification();
} else if (self.options.style == 'flip') {
new FlipNotification();
} else if (self.options.style == 'circle') {
new CircleNotification();
} else if (self.options.style == 'simple') {
new SimpleNotification();
} else { // default = 'simple'
new SimpleNotification();
}
// Notification styles
function SimpleNotification() {
self.notification.addClass('pgn-simple');
self.alert.append(self.options.message);
if (self.options.showClose) {
var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
.append('<span aria-hidden="true">×</span>')
.append('<span class="sr-only">Close</span>');
self.alert.prepend(close);
}
}
function BarNotification() {
self.notification.addClass('pgn-bar');
self.alert.append('<span>' + self.options.message + '</span>');
self.alert.addClass('alert-' + self.options.type);
if (self.options.showClose) {
var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
.append('<span aria-hidden="true">×</span>')
.append('<span class="sr-only">Close</span>');
self.alert.prepend(close);
}
}
function CircleNotification() {
self.notification.addClass('pgn-circle');
var table = '<div>';
if (self.options.thumbnail) {
table += '<div class="pgn-thumbnail"><div>' + self.options.thumbnail + '</div></div>';
}
table += '<div class="pgn-message"><div>';
if (self.options.title) {
table += '<p class="bold">' + self.options.title + '</p>';
}
table += '<p>' + self.options.message + '</p></div></div>';
table += '</div>';
if (self.options.showClose) {
table += '<button type="button" class="close" data-dismiss="alert">';
table += '<span aria-hidden="true">×</span><span class="sr-only">Close</span>';
table += '</button>';
}
self.alert.append(table);
self.alert.after('<div class="clearfix"></div>');
}
function FlipNotification() {
self.notification.addClass('pgn-flip');
self.alert.append("<span>" + self.options.message + "</span>");
if (self.options.showClose) {
var close = $('<button type="button" class="close" data-dismiss="alert"></button>')
.append('<span aria-hidden="true">×</span>')
.append('<span class="sr-only">Close</span>');
self.alert.prepend(close);
}
}
self.notification.append(self.alert);
// bind to Bootstrap closed event for alerts
self.alert.on('closed.bs.alert', function() {
self.notification.remove();
self.options.onClosed();
// refresh layout after removal
});
return this; // enable chaining
};
Notification.VERSION = "1.0.0";
Notification.prototype.show = function() {
// TODO: add fadeOut animation on show as option
this.wrapper.prepend(this.notification);
this.options.onShown();
if (this.options.timeout != 0) {
var _this = this;
// settimeout removes scope. use .bind(this)
setTimeout(function() {
this.notification.fadeOut("slow", function() {
$(this).remove();
_this.options.onClosed();
});
}.bind(this), this.options.timeout);
}
};
$.fn.pgNotification = function(options) {
return new Notification(this, options);
};
$.fn.pgNotification.defaults = {
style: 'simple',
message: null,
position: 'top-right',
type: 'info',
showClose: true,
timeout: 4000,
onShown: function() {},
onClosed: function() {}
}
})(window.jQuery);