-
-
Save theirf/422f1c7e903b3074877b 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
;(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('')); | |
htmlElement.style.marginLeft = htmlElement.offsetWidth/2; | |
alert(htmlElement.offsetWidth); | |
// 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()); | |
}; | |
// 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