jquery-notifier
Version:
jQuery Notify is a jQuery plugin that easily displays html notifications.
1 lines • 6.02 kB
JavaScript
(function(factory){if(typeof define==="function"&&define.amd){define(["jquery"],factory)}else if(typeof exports==="object"){factory(require("jquery"))}else{factory(jQuery)}})(function($){var helpers={getYPosition:function(data,queue){if(data.container.attr("data-notify-adjust")!="scroll"){return queue.getYPosition(data.notifier)}var queuePos=queue.getYPosition(data.notifier);var pos=queuePos+$(document).scrollTop()-data.container.position().top;return pos<0?queuePos:pos}};var events={show:function(){var $this=$(this);var data=$this.data("notify");if(data){data.notifier.trigger("beforeshow",{element:this,settings:data.settings});var queue=$.notify.queue[data.container.attr("data-notify-id")];if(!queue.add(data.notifier)){data.notifier.show().animate({opacity:data.settings.opacity},data.settings.animationDuration,function(){$(this).trigger("aftershow",{element:$this[0],settings:data.settings})}).css({top:helpers.getYPosition(data,queue)});if(data.settings.displayTime&&!data.settings.sticky){setTimeout(function(){$this.trigger("hide")},data.settings.displayTime)}}else{var newYPos=helpers.getYPosition(data,queue);if(data.notifier.position().top!=newYPos){data.notifier.animate({top:newYPos},{queue:false})}if(data.settings.widthAdjust){data.notifier.width("");data.settings.widthAdjust=false}}if(data.notifier.outerWidth(true)>$(document).width()){data.settings.widthAdjust=true;data.notifier.outerWidth($(window).width()-data.notifier.css("padding-left").replace("px",""))}if(data.container.attr("data-notify-adjust")=="content"&&queue.isLast(data.notifier)){data.container.animate({"padding-top":queue.getHeight()},{queue:false},data.settings.animationDuration)}}},hide:function(){var $this=$(this);var data=$this.data("notify");if(data&&data.notifier.css("opacity")){data.notifier.trigger("beforehide",{element:this,settings:data.settings});data.notifier.animate({opacity:0},data.settings.animationDuration,function(){var notifier=$(this);notifier.hide();$.notify.queue[data.container.attr("data-notify-id")].remove(data.notifier);if(data.container.attr("data-notify-adjust")=="content"){data.container.animate({"padding-top":$.notify.queue[data.container.attr("data-notify-id")].getHeight()},{queue:false},data.settings.animationDuration)}notifier.trigger("afterhide",{element:$this[0],settings:data.settings})})}}};var methods={init:function(args){var defaults={animationDuration:500,displayTime:3e3,appendTo:"body",autoShow:true,closeText:"x",sticky:false,style:"bar",type:"info",adjustContent:false,adjustScroll:false,notifyClass:"",opacity:1,beforeShow:null,beforeHide:null,afterShow:null,afterHide:null};var type=args&&args.type?args.type:defaults.type;var settings=$.extend({},defaults,$.notify.settings[type]);settings=$.extend(settings,args);settings.type=$.notify.settings[type]?type:defaults.type;return $(this).each(function(){var $this=$(this);var data=$this.data("notify");if(!data){var notifier=$("<div />",{class:"notify "+settings.style+" "+settings.type+(settings.notifyClass?" "+settings.notifyClass:""),"data-notifier-id":(new Date).getTime(),css:{display:"none",opacity:0,position:"absolute"}}).bind({update:function(){$this.trigger("show")},beforeshow:settings.beforeShow,beforehide:settings.beforeHide,aftershow:settings.afterShow,afterhide:settings.afterHide}).append($("<span />",{class:"icon"})).append($("<span />",{class:"close",text:settings.closeText,click:function(){$this.trigger("hide")}}));$this.bind({show:events.show,hide:events.hide});notifier.append($this);var container=$(settings.appendTo);if(!container.attr("data-notify-id")){var containerId=(new Date).getTime();$.notify.queue[containerId]=new Queue;container.attr("data-notify-id",containerId);var containerPosCss=container.css("position");if(containerPosCss=="static"){container.css("position","relative")}if(settings.adjustContent){container.attr("data-notify-adjust","content")}if(settings.adjustScroll){container.attr("data-notify-adjust","scroll")}}container.append(notifier);$this.data("notify",{settings:settings,notifier:notifier,container:container});if(settings.autoShow){$this.trigger("show")}}})},destroy:function(){return this.each(function(){var $this=$(this),data=$this.data("notify");if(data){data.notifier.remove()}})},show:function(){return this.each(function(){var data=$(this).data("notify");if(data){$(this).trigger("show")}})},hide:function(){return this.each(function(){var data=$(this).data("notify");if(data){$(this).trigger("hide")}})}};$.fn.notify=function(options){var method=options;if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{$.error("Method "+method+" does not exist on jQuery notify")}};function Queue(){this._items=new Array}$.extend(Queue.prototype,{add:function(element){var inQueue=$.inArray(element,this._items)>-1;if(!inQueue){this._items.push(element)}return inQueue},remove:function(element){var index=$.inArray(element,this._items);this._items.splice(index,1);this.update(index)},update:function(startIndex){var index=startIndex||0;for(var i=index;i<this._items.length;i++){var el=this._items[i];if(el&&el.length){el.trigger("update")}}},getYPosition:function(element){var yPos=0;for(var i=0;i<this._items.length;i++){var el=this._items[i];if(el==element){break}yPos+=el.outerHeight(true)}return yPos},getHeight:function(){var height=0;for(var i=0;i<this._items.length;i++){height+=this._items[i].outerHeight(true)}return height},isLast:function(element){return $.inArray(element,this._items)==this._items.length-1}});$.notify={queue:{},settings:{info:{},success:{sticky:true,type:"success"},error:{sticky:true,type:"error"},warning:{sticky:true,type:"warning"}},create:function(text,options){return $("<span />",{text:text}).notify(options)}};$(window).resize(function(){for(var key in $.notify.queue){$.notify.queue[key].update()}});$(window).scroll(function(){for(var key in $.notify.queue){$.notify.queue[key].update()}})});