-
-
Save theirf/b7184fe8568a34a7b41d to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* jquery-notification 1.1 | |
* | |
* Dual licensed under the MIT or GPL Version 2 licenses. | |
* http://www.opensource.org/licenses/mit-license.php | |
* http://www.gnu.org/licenses/gpl-2.0.html | |
*/ | |
;(function($) { | |
$.notificationOptions = { | |
className: '', | |
click: function() {}, | |
content: '', | |
duration: 5000, | |
fadeIn: 400, | |
fadeOut: 600, | |
limit: false, | |
queue: false, | |
slideUp: 200, | |
horizontal: 'right', | |
vertical: 'top', | |
afterShow: function(){}, | |
afterClose: function(){} | |
}; | |
var Notification = function(board, options) { | |
var that = this; | |
// build notification template | |
var htmlElement = $([ | |
'<div class="notification ' + options.className + '" style="display:none">', | |
'<div class="close"></div>', | |
options.content, | |
'</div>' | |
].join('')); | |
// getter for template | |
this.getHtmlElement = function() { | |
return htmlElement; | |
}; | |
// custom hide | |
this.hide = function() { | |
htmlElement.addClass('hiding'); | |
htmlElement.animate({ opacity: .01 }, options.fadeOut, function() { | |
var queued = queue.shift(); | |
if (queued) { | |
$.createNotification(queued); | |
} | |
}); | |
htmlElement.slideUp(options.slideUp, function() { | |
$(this).remove(); | |
options.afterClose(); | |
}); | |
}; | |
// show in board | |
this.show = function() { | |
// append to board and show | |
htmlElement[options.vertical == 'top' ? 'appendTo' : 'prependTo'](board); | |
htmlElement.fadeIn(options.fadeIn, options.afterShow()); | |
$('.notification').css('marginLeft', -$('.notification').outerWidth()/2); | |
}; | |
// set custom click callback | |
htmlElement.on('click', function() { | |
options.click.apply(that); | |
}); | |
// helper classes to avoid hide when hover | |
htmlElement.on('mouseenter', function() { | |
htmlElement.addClass('hover'); | |
if (htmlElement.hasClass('hiding')) { | |
// recover | |
htmlElement.stop(true); | |
// reset slideUp, could not find a better way to achieve this | |
htmlElement.attr('style', 'opacity: ' + htmlElement.css('opacity')); | |
htmlElement.animate({ opacity: 1 }, options.fadeIn); | |
htmlElement.removeClass('hiding'); | |
htmlElement.addClass('pending'); | |
} | |
}); | |
htmlElement.on('mouseleave', function() { | |
if (htmlElement.hasClass('pending')) { | |
// hide was pending | |
that.hide(); | |
} | |
htmlElement.removeClass('hover'); | |
}); | |
// close button bind | |
htmlElement.children('.close').on('click', function() { | |
that.hide(); | |
}); | |
if (options.duration) { | |
// hide timer | |
setTimeout(function() { | |
if (htmlElement.hasClass('hover')) { | |
// hovering, do not hide now | |
htmlElement.addClass('pending'); | |
} else { | |
that.hide(); | |
} | |
}, options.duration); | |
} | |
return this; | |
}; | |
var queue = []; | |
$.createNotification = function(options) { | |
options = $.extend({}, $.notificationOptions, options || {}); | |
// get notification container (aka board) | |
var board = $('.notification-board.' + options.horizontal + '.' + options.vertical); | |
if (!board.length) { | |
board = $('<div class="notification-board ' + options.horizontal + ' ' + options.vertical + '" />'); | |
board.appendTo('body'); | |
} | |
if (options.limit && board.children('.notification:not(.hiding)').length >= options.limit) { | |
// limit reached | |
if (options.queue) { | |
queue.push(options); | |
} | |
return; | |
} | |
// create new notification and show | |
var notification = new Notification(board, options) | |
notification.show(board); | |
return notification; | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment