diff --git a/README.md b/README.md index d06ac76..a2f5293 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ bootstrap-notify ================ -Bootstrap alert system made better. [See Demo](http://goodybag.github.com/bootstrap-notify) +Bootstrap alert system made better. [See Demo](http://goodybag.github.io/bootstrap-notify) ### Contributors diff --git a/component.json b/component.json index 03639e7..7b1fd74 100644 --- a/component.json +++ b/component.json @@ -1,8 +1,10 @@ { "name": "bootstrap-notify", - "version": "0.2.0", + "keywords": ["bootstrap", "notification", "alert"], + "version": "0.2.1", "main": "js/bootstrap-notify.js", - "dependencies": {}, + "dependencies": { "jquery": "*"}, + "license": "GPL-3.0", "description": "Bootstrap alert system made better.", "repository": { "type": "git", diff --git a/css/styles/alert-blackgloss.css b/css/styles/alert-blackgloss.css index 89c3d8b..cbb75a6 100644 --- a/css/styles/alert-blackgloss.css +++ b/css/styles/alert-blackgloss.css @@ -32,7 +32,7 @@ 100% { -webkit-transform: rotateY(-0deg); opacity: 1; } } -keyframes notification { +@keyframes notification { 0% { -webkit-transform: rotateY(-90deg); opacity: 0; } 70% { -webkit-transform: rotateY(20deg); opacity: .8; } 90% { -webkit-transform: rotateY(-10deg); opacity: 1; } diff --git a/js/bootstrap-notify.js b/js/bootstrap-notify.js index e58c6c5..e04e5e7 100644 --- a/js/bootstrap-notify.js +++ b/js/bootstrap-notify.js @@ -17,66 +17,77 @@ */ (function ($) { - var Notification = function (element, options) { - // Element collection - this.$element = $(element); - this.$note = $('
'); - this.options = $.extend(true, {}, $.fn.notify.defaults, options); + var CLASS_ALERT = 'alert'; + var CLASS_FADE = 'fade'; + var CLASS_IN = 'in'; + var CLASS_CLOSE = 'close'; + var ATTR_MESSAGE = 'message'; + + class Notification { + constructor(element, options) { + this.$element = $(element); + this.$note = $('
'); + this.options = $.extend(true, {}, $.fn.notify.defaults, options); + + + // Setup from options + if (this.options.transition) { + if (this.options.transition === 'fade') + this.$note.addClass(CLASS_IN).addClass(this.options.transition) + + else + this.$note.addClass(this.options.transition); + } + else + this.$note.addClass(CLASS_FADE).addClass(CLASS_IN); + + if (this.options.type) + this.$note.addClass(`${CLASS_ALERT}-${this.options.type}`); - // Setup from options - if(this.options.transition) { - if(this.options.transition == 'fade') - this.$note.addClass('in').addClass(this.options.transition); else - this.$note.addClass(this.options.transition); - } else - this.$note.addClass('fade').addClass('in'); + this.$note.addClass(`${CLASS_ALERT}-success`); - if(this.options.type) - this.$note.addClass('alert-' + this.options.type); - else - this.$note.addClass('alert-success'); + if (!this.options.message && this.$element.data(ATTR_MESSAGE) !== '') // dom text + this.$note.html(this.$element.data(ATTR_MESSAGE)); - if(!this.options.message && this.$element.data("message") !== '') // dom text - this.$note.html(this.$element.data("message")); - else - if(typeof this.options.message === 'object') { - if(this.options.message.html) + else if (typeof this.options.message === 'object') { + if (this.options.message.html) this.$note.html(this.options.message.html); - else if(this.options.message.text) + else if (this.options.message.text) this.$note.text(this.options.message.text); - } else + } + else this.$note.html(this.options.message); - if(this.options.closable) { - var link = $('×'); - $(link).on('click', $.proxy(onClose, this)); - this.$note.prepend(link); + if (this.options.closable) { + const link = $(`×`); + link.on('click', $.proxy(this.onClose, this)); + this.$note.prepend(link); + } + + return this; } + show() { + if (this.options.fadeOut.enabled) + this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(this.onClose, this)); - return this; - }; + this.$element.append(this.$note); + this.$note.alert(); + } + hide() { + if (this.options.fadeOut.enabled) + this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(this.onClose, this)); + else this.onClose(); + } + } var onClose = function() { this.options.onClose(); - $(this.$note).remove(); + this.$note.remove(); this.options.onClosed(); return false; }; - Notification.prototype.show = function () { - if(this.options.fadeOut.enabled) - this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); - - this.$element.append(this.$note); - this.$note.alert(); - }; - - Notification.prototype.hide = function () { - if(this.options.fadeOut.enabled) - this.$note.delay(this.options.fadeOut.delay || 3000).fadeOut('slow', $.proxy(onClose, this)); - else onClose.call(this); - }; $.fn.notify = function (options) { return new Notification(this, options); @@ -93,5 +104,6 @@ message: null, onClose: function () {}, onClosed: function () {} - } + console.log('Notification fully closed'); + }; })(window.jQuery);