├── jshintrc.json ├── bower.json ├── Gruntfile.js ├── package.json ├── LICENSE ├── README.md ├── test ├── bootstrap-growl.min.js └── bootstrap-growl.js ├── bootstrap-growl.min.js ├── dist ├── bootstrap-growl.min.js └── bootstrap-growl.js └── bootstrap-growl.js /jshintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "forin": true, 6 | "freeze": true, 7 | "immed": true, 8 | "latedef": true, 9 | "noarg": true, 10 | "noempty": true, 11 | "nonbsp": true, 12 | "nonew": true, 13 | "undef": true, 14 | "unused": true, 15 | "strict": false, 16 | "trailing": true, 17 | "maxparams": 5, 18 | "sub": true, 19 | "devel": true, 20 | "browser": true, 21 | 22 | "globals": { 23 | "jQuery": false 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-growl", 3 | "main": "bootstrap-growl.js", 4 | "version": "2.0.0", 5 | "homepage": "http://bootstrap-growl.remabledesigns.com/", 6 | "authors": [ 7 | "mouse0270 " 8 | ], 9 | "description": "This is a simple plugin that turns standard Bootstrap alerts into \"Growl-like\" notifications.", 10 | "keywords": [ 11 | "bootstrap", 12 | "growl", 13 | "notification", 14 | "notifications", 15 | "message" 16 | ], 17 | "dependencies": { 18 | "jquery": ">=1.10.2", 19 | "bootstrap": ">=2.0.0" 20 | }, 21 | "license": "MIT", 22 | "ignore": [ 23 | "test" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | // Project configuration. 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | uglify: { 6 | options: { 7 | compress: { 8 | drop_console: true 9 | }, 10 | preserveComments: 'some' 11 | }, 12 | default: { 13 | files: { 14 | 'bootstrap-growl.min.js': ['bootstrap-growl.js'] 15 | } 16 | } 17 | }, 18 | jshint: { 19 | options: { 20 | jshintrc: 'jshintrc.json' 21 | }, 22 | default: { 23 | src: 'bootstrap-growl.js' 24 | } 25 | } 26 | }); 27 | 28 | grunt.loadNpmTasks('grunt-contrib-uglify'); 29 | grunt.loadNpmTasks('grunt-contrib-jshint'); 30 | 31 | grunt.registerTask('test', ['jshint']); 32 | grunt.registerTask('default', ['uglify']); 33 | }; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-growl", 3 | "version": "2.0.0", 4 | "description": "This is a simple plugin that turns standard Bootstrap alerts into \"Growl-like\" notifications.", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/mouse0270/bootstrap-growl.git" 8 | }, 9 | "keywords": [ 10 | "bootstrap", 11 | "growl" 12 | ], 13 | "author": "mouse0270 ", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/mouse0270/bootstrap-growl/issues" 17 | }, 18 | "homepage": "http://bootstrap-growl.remabledesigns.com/", 19 | "main": "bootstrap-growl.js", 20 | "directories": { 21 | "dist": "dist" 22 | }, 23 | "dependencies": { 24 | "grunt": "~0.4.4", 25 | "grunt-contrib-uglify": "~0.4.0" 26 | }, 27 | "devDependencies": { 28 | "grunt": "~0.4.4", 29 | "grunt-contrib-uglify": "^0.4.0", 30 | "grunt-contrib-jshint": "^0.10.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Robert McIntosh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Growl 2 | This is a simple pluging that turns standard Bootstrap alerts into "Growl-like" notifications. 3 | 4 | 5 | ## Bower Officially Supported 6 | I would like to thank [Błażej Krysiak](https://github.com/IjinPL) for doing this! 7 | ``` 8 | bower install bootstrap.growl 9 | ``` 10 | 11 | ## Changelog 12 | ##### Version 2.0.0a3 13 | - Fixed issue with growl not closing if there was no CSS animations 14 | 15 | ##### [Version 2.0.0a2](http://bootstrap-growl.remabledesigns.com/2.0.0a2/) (with IE8 Support) 16 | - Changed animate.in to animate.enter for IE8 compatibility 17 | - Changed animate.out to animate.exit for IE8 compatibility 18 | - Modified .is(':hover') for IE8 compatibility 19 | 20 | ##### [Version 2.0.0a1](http://bootstrap-growl.remabledesigns.com/2.0.0a1/) 21 | - Better Minification 22 | 23 | ##### [Version 2.0.0a](http://bootstrap-growl.remabledesigns.com/2.0.0a1/) 24 | - Major rewright of the plugin file. 25 | - Added the ability to pass the growl a link making it clickable. 26 | - Added the ability to control the growl animations in and out using css. 27 | - Added the ability to set growl settings globally. 28 | - Removed jQuery fadeIn (use css to control growl animations) 29 | 30 | ##### [Version 1.0.6](http://bootstrap-growl.remabledesigns.com/1.0.6/) 31 | - Added onGrowlShow and onGrowlShown callback functionality. 32 | 33 | ##### Version 1.0.5 34 | - Better positioning when using CSS animations after growl closes. 35 | 36 | ##### Version 1.0.4 37 | - Updated $.growl() to return a wrapper object with a small API to let you control individual notifications after they have been created. 38 | - Added onGrowlClose and onGrowlClosed callback functionality. 39 | 40 | ##### Version 1.0.3 41 | - Made jQuery $.extend() Recursive so when you change just one option under position or template the script wont fail 42 | 43 | ##### Version 1.0.2 44 | - Fixed an issue where $.growl("message") would thrown an exception | Provided by [DannyJo](https://github.com/DannyJo/bootstrap-growl) 45 | 46 | ##### Version 1.0.0 47 | - Initial Release 48 | 49 | ## Demo 50 | I have created a small demo to show off some of the features that you can use with this plugin. http://bootstrap-growl.remabledesigns.com/ 51 | 52 | ## Dependencies 53 | - [jQuery v1.10.2](http://jquery.com/) 54 | - [Bootstrap v2.0.0 - 3.2.0](http://getbootstrap.com/) 55 | 56 | 57 | ## Documentation 58 | There is alot of documentation on the website. Click the link below to read it. 59 | - [Documentation](http://bootstrap-growl.remabledesigns.com/#growl-documentation) 60 | 61 | ## Copyright and License 62 | The MIT License (MIT) 63 | Copyright (c) 2014 Robert McIntosh 64 | 65 | Permission is hereby granted, free of charge, to any person obtaining a copy of 66 | this software and associated documentation files (the "Software"), to deal in 67 | the Software without restriction, including without limitation the rights to 68 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 69 | the Software, and to permit persons to whom the Software is furnished to do so, 70 | subject to the following conditions: 71 | 72 | The above copyright notice and this permission notice shall be included in all 73 | copies or substantial portions of the Software. 74 | 75 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 76 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 77 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 78 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 79 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 80 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 81 | -------------------------------------------------------------------------------- /test/bootstrap-growl.min.js: -------------------------------------------------------------------------------- 1 | /* Project: Bootstrap Growl - v2.0.0 | Author: Mouse0270 aka Robert McIntosh | License: MIT License | Website: https://github.com/mouse0270/bootstrap-growl */ 2 | (function(e,t,n,r){var i="growl",s="plugin_"+i,o={element:"body",type:"info",allow_dismiss:true,placement:{from:"top",align:"right"},offset:20,spacing:10,z_index:1031,delay:5e3,timer:1e3,url_target:"_blank",mouse_over:false,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},icon_type:"class",template:''};var u=function(t,n){o=e.extend(true,{},o,n)},a=function(t,n,r){var n={content:{message:typeof n=="object"?n.message:n,title:n.title?n.title:null,icon:n.icon?n.icon:null,url:n.url?n.url:null}};r=e.extend(true,{},n,r);this.settings=e.extend(true,{},o,r);plugin=this;f(r,this.settings,plugin);this.$template=$template},f=function(t,n,r){var i={settings:n,$element:e(n.element),template:n.template};$template=l(i);c($template,i.settings);h($template,i.settings);p($template,i.settings,r)},l=function(t){var n=e(t.settings.template);n.addClass("alert-"+t.settings.type);n.attr("data-growl-position",t.settings.placement.from+"-"+t.settings.placement.align);n.find('[data-growl="dismiss"]').css("display","none");if(t.settings.allow_dismiss){n.find('[data-growl="dismiss"]').css("display","inline-block")}return n},c=function(e,t){e.find('[data-growl="dismiss"]').css({position:"absolute",top:"5px",right:"10px","z-index":t.z_index-1>=1?t.z_index-1:1});if(t.content.icon){if(t.icon_type.toLowerCase()=="class"){e.find('[data-growl="icon"]').addClass(t.content.icon)}else{if(e.find('[data-growl="icon"]').is("img")){e.find('[data-growl="icon"]').attr("src",t.content.icon)}else{e.find('[data-growl="icon"]').append('')}}}if(t.content.title){e.find('[data-growl="title"]').html(t.content.title)}if(t.content.message){e.find('[data-growl="message"]').html(t.content.message)}if(t.content.url){e.find('[data-growl="url"]').attr("href",t.content.url).attr("target",t.url_target);e.find('[data-growl="url"]').css({position:"absolute",top:"0px",left:"0px",width:"100%",height:"100%","z-index":t.z_index-2>=1?t.z_index-2:1})}},h=function(t,n){var r=n.offset,i={position:n.element==="body"?"fixed":"absolute",margin:0,"z-index":n.z_index,display:"inline-block"};e('[data-growl-position="'+n.placement.from+"-"+n.placement.align+'"]').each(function(){return r=Math.max(r,parseInt(e(this).css(n.placement.from))+e(this).outerHeight()+n.spacing)});i[n.placement.from]=r+"px";t.css(i);e(n.element).append(t);switch(n.placement.align){case"center":t.css({left:"50%",marginLeft:-(t.outerWidth()/2)+"px"});break;case"left":t.css("left",n.offset+"px");break;case"right":t.css("right",n.offset+"px");break}t.addClass("growl-animated")},p=function(e,t,n){e.addClass(t.animate.enter);e.find('[data-growl="dismiss"]').on("click",function(){n.close()});e.on("mouseover",function(t){e.addClass("hovering")}).on("mouseout",function(){e.removeClass("hovering")});if(t.delay>=1){e.data("growl-delay",t.delay);var r=setInterval(function(){var i=parseInt(e.data("growl-delay"))-t.timer;if(!e.hasClass("hovering")&&t.mouse_over=="pause"||t.mouse_over!="pause"){e.data("growl-delay",i)}if(i<=0){clearInterval(r);n.close()}},t.timer)}};a.prototype={update:function(e,t){switch(e){case"icon":if(this.settings.icon_type.toLowerCase()=="class"){this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon);this.$template.find('[data-growl="icon"]').addClass(t)}else{if(this.$template.find('[data-growl="icon"]').is("img")){this.$template.find('[data-growl="icon"]')}else{this.$template.find('[data-growl="icon"]').find("img").attr().attr("src",t)}}break;case"url":this.$template.find('[data-growl="url"]').attr("href",t);break;case"type":this.$template.removeClass("alert-"+this.settings.type);this.$template.addClass("alert-"+t);break;default:this.$template.find('[data-growl="'+e+'"]').html(t)}return this},close:function(){var t=this.$template,n=this.settings,r=t.css(n.placement.from),i=false;t.addClass(this.settings.animate.exit);t.nextAll('[data-growl-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]').each(function(){e(this).css(n.placement.from,r);r=parseInt(r)+n.spacing+e(this).outerHeight()});t.one("webkitAnimationStart oanimationstart MSAnimationStart animationstart",function(e){i=true});t.one("webkitAnimationEnd oanimationend MSAnimationEnd animationend",function(t){e(this).remove()});setTimeout(function(){if(!i){t.remove()}},100);return this}};e.growl=function(e,t){if(e==false){u(this,t);return false}var n=new a(this,e,t);return n}})(jQuery,window,document) -------------------------------------------------------------------------------- /bootstrap-growl.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b,c,d){var e=!0,f=!0,g={success:{title:" Success: ",icon:"glyphicon glyphicon-ok-sign"},warning:{title:" Warning: ",icon:"glyphicon glyphicon-warning-sign"},info:{title:" Info: ",icon:"glyphicon glyphicon-info-sign"},danger:{title:" Danger: ",icon:"glyphicon glyphicon-remove-sign"}},h={element:"body",type:"info",allow_dismiss:!0,placement:{from:"top",align:"center"},offset:20,spacing:10,z_index:1060,delay:0,timer:1e3,url_target:"_blank",mouse_over:!1,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},icon_type:"class",template:''},i=function(b,c){h=a.extend(!0,{},h,c)},j=function(b,c,e){var c={content:{message:"object"==typeof c?c.message:c,title:c.title?c.title:d,icon:c.icon?c.icon:d,url:c.url?c.url:d}};e=a.extend(!0,{},c,e),this.settings=a.extend(!0,{},h,e),f&&(this.settings=a.extend(!0,{},{content:g[this.settings.type]},this.settings)),plugin=this,k(e,this.settings,plugin),this.$template=$template},k=function(b,c,d){var e={settings:c,$element:a(c.element),template:c.template};$template=l(e),m($template,e.settings),n($template,e.settings),o($template,e.settings,d)},l=function(b){var c=a(b.settings.template);return c.addClass("alert-"+b.settings.type),c.attr("data-growl-position",b.settings.placement.from+"-"+b.settings.placement.align),c.find('[data-growl="dismiss"]').css("display","none"),b.settings.allow_dismiss&&c.find('[data-growl="dismiss"]').css("display","inline-block"),c},m=function(a,b){a.find('[data-growl="dismiss"]').css({position:"absolute",top:"5px",right:"10px","z-index":b.z_index-1>=1?b.z_index-1:1}),b.content.icon&&("class"==b.icon_type.toLowerCase()?a.find('[data-growl="icon"]').addClass(b.content.icon):a.find('[data-growl="icon"]').is("img")?a.find('[data-growl="icon"]').attr("src",b.content.icon):a.find('[data-growl="icon"]').append('')),b.content.title&&a.find('[data-growl="title"]').html(b.content.title),b.content.message&&a.find('[data-growl="message"]').html(b.content.message),b.content.url&&(a.find('[data-growl="url"]').attr("href",b.content.url).attr("target",b.url_target),a.find('[data-growl="url"]').css({position:"absolute",top:"0px",left:"0px",width:"100%",height:"100%","z-index":b.z_index-2>=1?b.z_index-2:1}))},n=function(b,c){var d=c.offset,e={position:"body"===c.element?"fixed":"absolute",margin:0,"z-index":c.z_index,display:"inline-block"};switch(a('[data-growl-position="'+c.placement.from+"-"+c.placement.align+'"]').each(function(){return d=Math.max(d,parseInt(a(this).css(c.placement.from))+a(this).outerHeight()+c.spacing)}),e[c.placement.from]=d+"px",b.css(e),a(c.element).append(b),c.placement.align){case"center":b.css({left:"50%",marginLeft:-(b.outerWidth()/2)+"px"});break;case"left":b.css("left",c.offset+"px");break;case"right":b.css("right",c.offset+"px")}b.addClass("growl-animated")},o=function(a,b,c){if(a.addClass(b.animate.enter),a.find('[data-growl="dismiss"]').on("click",function(){c.close()}),a.on("mouseover",function(){a.addClass("hovering")}).on("mouseout",function(){a.removeClass("hovering")}),b.delay>=1){a.data("growl-delay",b.delay);var d=setInterval(function(){var e=parseInt(a.data("growl-delay"))-b.timer;(!a.hasClass("hovering")&&"pause"==b.mouse_over||"pause"!=b.mouse_over)&&a.data("growl-delay",e),0>=e&&(clearInterval(d),c.close())},b.timer)}};j.prototype={update:function(a,b){switch(a){case"icon":"class"==this.settings.icon_type.toLowerCase()?(this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon),this.$template.find('[data-growl="icon"]').addClass(b)):this.$template.find('[data-growl="icon"]').is("img")?this.$template.find('[data-growl="icon"]'):this.$template.find('[data-growl="icon"]').find("img").attr().attr("src",b);break;case"url":this.$template.find('[data-growl="url"]').attr("href",b);break;case"type":this.$template.removeClass("alert-"+this.settings.type),this.$template.addClass("alert-"+b);break;default:this.$template.find('[data-growl="'+a+'"]').html(b)}return this},close:function(b){var c=this.$template,d=this.settings,e=c.css(d.placement.from),f=!1;return c.addClass(this.settings.animate.exit),c.nextAll('[data-growl-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]').each(function(){a(this).css(d.placement.from,e),e=parseInt(e)+d.spacing+a(this).outerHeight()}),b?(c.remove(),this):(c.one("webkitAnimationStart oanimationstart MSAnimationStart animationstart",function(){f=!0}),c.one("webkitAnimationEnd oanimationend MSAnimationEnd animationend",function(){a(this).remove()}),setTimeout(function(){f||c.remove()},100),this)}},a.growl=function(b,c){if(0==b)return i(this,c),!1;if(e){var d=a.growl.instance.pop();d&&d.close(!0)}var f=new j(this,b,c);return a.growl.instance.push(f),f},a.growl.instance=[]}(jQuery,window,document); -------------------------------------------------------------------------------- /dist/bootstrap-growl.min.js: -------------------------------------------------------------------------------- 1 | !function(a,b,c,d){var e=!0,f=!0,g={success:{title:" Success: ",icon:"glyphicon glyphicon-ok-sign"},warning:{title:" Warning: ",icon:"glyphicon glyphicon-warning-sign"},info:{title:" Info: ",icon:"glyphicon glyphicon-info-sign"},danger:{title:" Danger: ",icon:"glyphicon glyphicon-remove-sign"}},h={element:"body",type:"info",allow_dismiss:!0,placement:{from:"top",align:"center"},offset:20,spacing:10,z_index:1060,delay:0,timer:1e3,url_target:"_blank",mouse_over:!1,animate:{enter:"animated fadeInDown",exit:"animated fadeOutUp"},icon_type:"class",template:''},i=function(b,c){h=a.extend(!0,{},h,c)},j=function(b,c,e){var c={content:{message:"object"==typeof c?c.message:c,title:c.title?c.title:d,icon:c.icon?c.icon:d,url:c.url?c.url:d}};e=a.extend(!0,{},c,e),this.settings=a.extend(!0,{},h,e),f&&(this.settings=a.extend(!0,{},{content:g[this.settings.type]},this.settings)),plugin=this,k(e,this.settings,plugin),this.$template=$template},k=function(b,c,d){var e={settings:c,$element:a(c.element),template:c.template};$template=l(e),m($template,e.settings),n($template,e.settings),o($template,e.settings,d)},l=function(b){var c=a(b.settings.template);return c.addClass("alert-"+b.settings.type),c.attr("data-growl-position",b.settings.placement.from+"-"+b.settings.placement.align),c.find('[data-growl="dismiss"]').css("display","none"),b.settings.allow_dismiss&&c.find('[data-growl="dismiss"]').css("display","inline-block"),c},m=function(a,b){a.find('[data-growl="dismiss"]').css({position:"absolute",top:"5px",right:"10px","z-index":b.z_index-1>=1?b.z_index-1:1}),b.content.icon&&("class"==b.icon_type.toLowerCase()?a.find('[data-growl="icon"]').addClass(b.content.icon):a.find('[data-growl="icon"]').is("img")?a.find('[data-growl="icon"]').attr("src",b.content.icon):a.find('[data-growl="icon"]').append('')),b.content.title&&a.find('[data-growl="title"]').html(b.content.title),b.content.message&&a.find('[data-growl="message"]').html(b.content.message),b.content.url&&(a.find('[data-growl="url"]').attr("href",b.content.url).attr("target",b.url_target),a.find('[data-growl="url"]').css({position:"absolute",top:"0px",left:"0px",width:"100%",height:"100%","z-index":b.z_index-2>=1?b.z_index-2:1}))},n=function(b,c){var d=c.offset,e={position:"body"===c.element?"fixed":"absolute",margin:0,"z-index":c.z_index,display:"inline-block"};switch(a('[data-growl-position="'+c.placement.from+"-"+c.placement.align+'"]').each(function(){return d=Math.max(d,parseInt(a(this).css(c.placement.from))+a(this).outerHeight()+c.spacing)}),e[c.placement.from]=d+"px",b.css(e),a(c.element).append(b),c.placement.align){case"center":b.css({left:"50%",marginLeft:-(b.outerWidth()/2)+"px"});break;case"left":b.css("left",c.offset+"px");break;case"right":b.css("right",c.offset+"px")}b.addClass("growl-animated")},o=function(a,b,c){if(a.addClass(b.animate.enter),a.find('[data-growl="dismiss"]').on("click",function(){c.close()}),a.on("mouseover",function(){a.addClass("hovering")}).on("mouseout",function(){a.removeClass("hovering")}),b.delay>=1){a.data("growl-delay",b.delay);var d=setInterval(function(){var e=parseInt(a.data("growl-delay"))-b.timer;(!a.hasClass("hovering")&&"pause"==b.mouse_over||"pause"!=b.mouse_over)&&a.data("growl-delay",e),0>=e&&(clearInterval(d),c.close())},b.timer)}};j.prototype={update:function(a,b){switch(a){case"icon":"class"==this.settings.icon_type.toLowerCase()?(this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon),this.$template.find('[data-growl="icon"]').addClass(b)):this.$template.find('[data-growl="icon"]').is("img")?this.$template.find('[data-growl="icon"]'):this.$template.find('[data-growl="icon"]').find("img").attr().attr("src",b);break;case"url":this.$template.find('[data-growl="url"]').attr("href",b);break;case"type":this.$template.removeClass("alert-"+this.settings.type),this.$template.addClass("alert-"+b);break;default:this.$template.find('[data-growl="'+a+'"]').html(b)}return this},close:function(b){var c=this.$template,d=this.settings,e=c.css(d.placement.from),f=!1;return c.addClass(this.settings.animate.exit),c.nextAll('[data-growl-position="'+this.settings.placement.from+"-"+this.settings.placement.align+'"]').each(function(){a(this).css(d.placement.from,e),e=parseInt(e)+d.spacing+a(this).outerHeight()}),b?(c.remove(),this):(c.one("webkitAnimationStart oanimationstart MSAnimationStart animationstart",function(){f=!0}),c.one("webkitAnimationEnd oanimationend MSAnimationEnd animationend",function(){a(this).remove()}),setTimeout(function(){f||c.remove()},100),this)}},a.growl=function(b,c){if(0==b)return i(this,c),!1;if(e){var d=a.growl.instance.pop();d&&d.close(!0)}var f=new j(this,b,c);return a.growl.instance.push(f),f},a.growl.instance=[]}(jQuery,window,document); -------------------------------------------------------------------------------- /test/bootstrap-growl.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Project: Bootstrap Growl - v2.0.0 3 | * Description: Turns standard Bootstrap alerts into "Growl-like" notifications. 4 | * Author: Mouse0270 aka Robert McIntosh 5 | * License: MIT License 6 | * Website: https://github.com/mouse0270/bootstrap-growl 7 | */ 8 | ;(function ( $, window, document, undefined ) { 9 | // Create the defaults once 10 | var pluginName = "growl", 11 | dataKey = "plugin_" + pluginName, 12 | defaults = { 13 | element: 'body', 14 | type: "info", 15 | allow_dismiss: true, 16 | placement: { 17 | from: "top", 18 | align: "right" 19 | }, 20 | offset: 20, 21 | spacing: 10, 22 | z_index: 1031, 23 | delay: 5000, 24 | timer: 1000, 25 | url_target: '_blank', 26 | mouse_over: false, 27 | animate: { 28 | enter: 'animated fadeInDown', 29 | exit: 'animated fadeOutUp' 30 | }, 31 | icon_type: 'class', 32 | template: '' 33 | }; 34 | 35 | // The actual plugin constructor 36 | var setDefaults = function(element, options) { 37 | defaults = $.extend(true, {}, defaults, options); 38 | }, 39 | Plugin = function (element, content, options) { 40 | var content = { 41 | content: { 42 | message: typeof content == 'object' ? content.message : content, 43 | title: content.title ? content.title : null, 44 | icon: content.icon ? content.icon : null, 45 | url: content.url ? content.url : null 46 | } 47 | }; 48 | 49 | options = $.extend(true, {}, content, options); 50 | this.settings = $.extend(true, {}, defaults, options); 51 | plugin = this; 52 | init(options, this.settings, plugin); 53 | this.$template = $template; 54 | }, 55 | init = function (options, settings, plugin) { 56 | 57 | var base = { 58 | settings: settings, 59 | $element: $(settings.element), 60 | template: settings.template 61 | }; 62 | 63 | $template = buildGrowl(base); 64 | addContent($template, base.settings); 65 | placement($template, base.settings); 66 | bindControls($template, base.settings,plugin); 67 | }, 68 | buildGrowl = function(base) { 69 | 70 | var $template = $(base.settings.template); 71 | 72 | $template.addClass('alert-' + base.settings.type); 73 | $template.attr('data-growl-position', base.settings.placement.from + '-' + base.settings.placement.align); 74 | 75 | $template.find('[data-growl="dismiss"]').css('display', 'none'); 76 | if (base.settings.allow_dismiss) { 77 | $template.find('[data-growl="dismiss"]').css('display', 'inline-block'); 78 | } 79 | 80 | return $template; 81 | }, 82 | addContent = function($template, settings) { 83 | 84 | $template.find('[data-growl="dismiss"]').css({ 85 | 'position': 'absolute', 86 | 'top': '5px', 87 | 'right': '10px', 88 | 'z-index': ((settings.z_index-1) >= 1 ? (settings.z_index-1) : 1) 89 | }); 90 | 91 | if (settings.content.icon) { 92 | if (settings.icon_type.toLowerCase() == 'class') { 93 | $template.find('[data-growl="icon"]').addClass(settings.content.icon); 94 | }else{ 95 | if ($template.find('[data-growl="icon"]').is('img')) { 96 | $template.find('[data-growl="icon"]').attr('src', settings.content.icon); 97 | }else{ 98 | $template.find('[data-growl="icon"]').append(''); 99 | } 100 | } 101 | } 102 | 103 | if (settings.content.title) { 104 | $template.find('[data-growl="title"]').html(settings.content.title); 105 | } 106 | 107 | if (settings.content.message) { 108 | $template.find('[data-growl="message"]').html(settings.content.message); 109 | } 110 | 111 | if (settings.content.url) { 112 | $template.find('[data-growl="url"]').attr('href', settings.content.url).attr('target', settings.url_target); 113 | $template.find('[data-growl="url"]').css({ 114 | 'position': 'absolute', 115 | 'top': '0px', 116 | 'left': '0px', 117 | 'width': '100%', 118 | 'height': '100%', 119 | 'z-index': ((settings.z_index-2) >= 1 ? (settings.z_index-2) : 1) 120 | }); 121 | } 122 | }, 123 | placement = function($template, settings) { 124 | var offsetAmt = settings.offset, 125 | gCSS = { 126 | 'position': (settings.element === 'body' ? 'fixed' : 'absolute'), 127 | 'margin': 0, 128 | 'z-index': settings.z_index, 129 | 'display': 'inline-block' 130 | } 131 | 132 | $('[data-growl-position="' + settings.placement.from + '-' + settings.placement.align + '"]').each(function() { 133 | return offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + $(this).outerHeight() + settings.spacing); 134 | }); 135 | 136 | gCSS[settings.placement.from] = offsetAmt + "px"; 137 | $template.css(gCSS); 138 | $(settings.element).append($template); 139 | 140 | switch (settings.placement.align) { 141 | case 'center': 142 | $template.css({ 143 | 'left': '50%', 144 | 'marginLeft': -($template.outerWidth() / 2) + 'px' 145 | }); 146 | break; 147 | case 'left': 148 | $template.css('left', settings.offset + 'px'); 149 | break; 150 | case 'right': 151 | $template.css('right', settings.offset + 'px'); 152 | break; 153 | } 154 | $template.addClass('growl-animated'); 155 | }, 156 | bindControls = function($template, settings, plugin) { 157 | $template.addClass(settings.animate.enter); 158 | 159 | $template.find('[data-growl="dismiss"]').on('click', function() { 160 | plugin.close(); 161 | }); 162 | 163 | $template.on('mouseover', function(e) { 164 | $template.addClass('hovering'); 165 | }).on('mouseout', function() { 166 | $template.removeClass('hovering'); 167 | }); 168 | 169 | if (settings.delay >= 1) { 170 | $template.data('growl-delay', settings.delay); 171 | var timer = setInterval(function() { 172 | 173 | var delay = parseInt($template.data('growl-delay')) - settings.timer; 174 | if ((!$template.hasClass('hovering') && settings.mouse_over == 'pause') || settings.mouse_over != 'pause') { 175 | $template.data('growl-delay', delay); 176 | } 177 | 178 | if (delay <= 0) { 179 | clearInterval(timer); 180 | plugin.close(); 181 | } 182 | }, settings.timer); 183 | } 184 | }; 185 | 186 | // Avoid Plugin.prototype conflicts 187 | Plugin.prototype = { 188 | update: function(command, update) { 189 | switch (command) { 190 | case 'icon': 191 | if (this.settings.icon_type.toLowerCase() == 'class') { 192 | this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon); 193 | this.$template.find('[data-growl="icon"]').addClass(update); 194 | }else{ 195 | if (this.$template.find('[data-growl="icon"]').is('img')) { 196 | this.$template.find('[data-growl="icon"]') 197 | }else{ 198 | this.$template.find('[data-growl="icon"]').find('img').attr().attr('src', update); 199 | } 200 | } 201 | break; 202 | case 'url': 203 | this.$template.find('[data-growl="url"]').attr('href', update); 204 | break; 205 | case 'type': 206 | this.$template.removeClass('alert-' + this.settings.type); 207 | this.$template.addClass('alert-' + update); 208 | break; 209 | default: 210 | this.$template.find('[data-growl="' + command +'"]').html(update); 211 | } 212 | 213 | return this; 214 | }, 215 | close: function() { 216 | var base = this.$template, 217 | settings = this.settings, 218 | posX = base.css(settings.placement.from), 219 | hasAnimation = false; 220 | 221 | base.addClass(this.settings.animate.exit); 222 | 223 | base.nextAll('[data-growl-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]').each(function() { 224 | $(this).css(settings.placement.from, posX); 225 | posX = (parseInt(posX)+(settings.spacing)) + $(this).outerHeight(); 226 | }); 227 | 228 | base.one('webkitAnimationStart oanimationstart MSAnimationStart animationstart', function(event) { 229 | hasAnimation = true; 230 | }); 231 | 232 | base.one('webkitAnimationEnd oanimationend MSAnimationEnd animationend', function(event) { 233 | $(this).remove(); 234 | }); 235 | 236 | setTimeout(function() { 237 | if (!hasAnimation) { 238 | base.remove(); 239 | } 240 | }, 100); 241 | 242 | return this; 243 | } 244 | }; 245 | 246 | // A really lightweight plugin wrapper around the constructor, 247 | // preventing against multiple instantiations 248 | $.growl = function ( content, options ) { 249 | if (content == false) { 250 | setDefaults(this, options); 251 | return false; 252 | } 253 | var plugin = new Plugin( this, content, options ); 254 | return plugin; 255 | }; 256 | 257 | })( jQuery, window, document ); -------------------------------------------------------------------------------- /bootstrap-growl.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Project: Bootstrap Growl - v2.0.0 3 | * Description: Turns standard Bootstrap alerts into "Growl-like" notifications. 4 | * Author: Mouse0270 aka Robert McIntosh 5 | * License: MIT License 6 | * Website: https://github.com/mouse0270/bootstrap-growl 7 | */ 8 | ;(function ( $, window, document, undefined ) { 9 | // Create the defaults once 10 | var pluginName = "growl", 11 | dataKey = "plugin_" + pluginName, 12 | autoClear = true, 13 | bindDefaultIconTitle = true, 14 | iconTitle = { 15 | success: { 16 | title: ' Success: ', 17 | icon: 'glyphicon glyphicon-ok-sign' 18 | }, 19 | warning: { 20 | title: ' Warning: ', 21 | icon: 'glyphicon glyphicon-warning-sign' 22 | }, 23 | info: { 24 | title: ' Info: ', 25 | icon: 'glyphicon glyphicon-info-sign' 26 | }, 27 | danger: { 28 | title: ' Danger: ', 29 | icon: 'glyphicon glyphicon-remove-sign' 30 | } 31 | }, 32 | defaults = { 33 | element: 'body', 34 | type: "info", 35 | allow_dismiss: true, 36 | placement: { 37 | from: "top", 38 | align: "center" 39 | }, 40 | offset: 20, 41 | spacing: 10, 42 | z_index: 1060, 43 | delay: 0, 44 | timer: 1000, 45 | url_target: '_blank', 46 | mouse_over: false, 47 | animate: { 48 | enter: 'animated fadeInDown', 49 | exit: 'animated fadeOutUp' 50 | }, 51 | icon_type: 'class', 52 | template: '' 53 | }; 54 | 55 | // The actual plugin constructor 56 | var setDefaults = function(element, options) { 57 | defaults = $.extend(true, {}, defaults, options); 58 | }, 59 | Plugin = function (element, content, options) { 60 | var content = { 61 | content: { 62 | message: typeof content == 'object' ? content.message : content, 63 | title: content.title ? content.title : undefined, 64 | icon: content.icon ? content.icon : undefined, 65 | url: content.url ? content.url : undefined 66 | } 67 | }; 68 | 69 | options = $.extend(true, {}, content, options); 70 | this.settings = $.extend(true, {}, defaults, options); 71 | if(bindDefaultIconTitle){ 72 | this.settings = $.extend(true, {}, { content: iconTitle[this.settings.type] }, this.settings); 73 | } 74 | plugin = this; 75 | init(options, this.settings, plugin); 76 | this.$template = $template; 77 | }, 78 | init = function (options, settings, plugin) { 79 | var base = { 80 | settings: settings, 81 | $element: $(settings.element), 82 | template: settings.template 83 | }; 84 | 85 | $template = buildGrowl(base); 86 | addContent($template, base.settings); 87 | placement($template, base.settings); 88 | bindControls($template, base.settings,plugin); 89 | }, 90 | buildGrowl = function(base) { 91 | 92 | var $template = $(base.settings.template); 93 | 94 | $template.addClass('alert-' + base.settings.type); 95 | $template.attr('data-growl-position', base.settings.placement.from + '-' + base.settings.placement.align); 96 | 97 | $template.find('[data-growl="dismiss"]').css('display', 'none'); 98 | if (base.settings.allow_dismiss) { 99 | $template.find('[data-growl="dismiss"]').css('display', 'inline-block'); 100 | } 101 | 102 | return $template; 103 | }, 104 | addContent = function($template, settings) { 105 | 106 | $template.find('[data-growl="dismiss"]').css({ 107 | 'position': 'absolute', 108 | 'top': '5px', 109 | 'right': '10px', 110 | 'z-index': ((settings.z_index-1) >= 1 ? (settings.z_index-1) : 1) 111 | }); 112 | 113 | if (settings.content.icon) { 114 | if (settings.icon_type.toLowerCase() == 'class') { 115 | $template.find('[data-growl="icon"]').addClass(settings.content.icon); 116 | }else{ 117 | if ($template.find('[data-growl="icon"]').is('img')) { 118 | $template.find('[data-growl="icon"]').attr('src', settings.content.icon); 119 | }else{ 120 | $template.find('[data-growl="icon"]').append(''); 121 | } 122 | } 123 | } 124 | 125 | if (settings.content.title) { 126 | $template.find('[data-growl="title"]').html(settings.content.title); 127 | } 128 | 129 | if (settings.content.message) { 130 | $template.find('[data-growl="message"]').html(settings.content.message); 131 | } 132 | 133 | if (settings.content.url) { 134 | $template.find('[data-growl="url"]').attr('href', settings.content.url).attr('target', settings.url_target); 135 | $template.find('[data-growl="url"]').css({ 136 | 'position': 'absolute', 137 | 'top': '0px', 138 | 'left': '0px', 139 | 'width': '100%', 140 | 'height': '100%', 141 | 'z-index': ((settings.z_index-2) >= 1 ? (settings.z_index-2) : 1) 142 | }); 143 | } 144 | }, 145 | placement = function($template, settings) { 146 | var offsetAmt = settings.offset, 147 | gCSS = { 148 | 'position': (settings.element === 'body' ? 'fixed' : 'absolute'), 149 | 'margin': 0, 150 | 'z-index': settings.z_index, 151 | 'display': 'inline-block' 152 | } 153 | 154 | $('[data-growl-position="' + settings.placement.from + '-' + settings.placement.align + '"]').each(function() { 155 | return offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + $(this).outerHeight() + settings.spacing); 156 | }); 157 | 158 | gCSS[settings.placement.from] = offsetAmt + "px"; 159 | $template.css(gCSS); 160 | $(settings.element).append($template); 161 | 162 | switch (settings.placement.align) { 163 | case 'center': 164 | $template.css({ 165 | 'left': '50%', 166 | 'marginLeft': -($template.outerWidth() / 2) + 'px' 167 | }); 168 | break; 169 | case 'left': 170 | $template.css('left', settings.offset + 'px'); 171 | break; 172 | case 'right': 173 | $template.css('right', settings.offset + 'px'); 174 | break; 175 | } 176 | $template.addClass('growl-animated'); 177 | }, 178 | bindControls = function($template, settings, plugin) { 179 | $template.addClass(settings.animate.enter); 180 | 181 | $template.find('[data-growl="dismiss"]').on('click', function() { 182 | plugin.close(); 183 | }); 184 | 185 | $template.on('mouseover', function(e) { 186 | $template.addClass('hovering'); 187 | }).on('mouseout', function() { 188 | $template.removeClass('hovering'); 189 | }); 190 | 191 | if (settings.delay >= 1) { 192 | $template.data('growl-delay', settings.delay); 193 | var timer = setInterval(function() { 194 | 195 | var delay = parseInt($template.data('growl-delay')) - settings.timer; 196 | if ((!$template.hasClass('hovering') && settings.mouse_over == 'pause') || settings.mouse_over != 'pause') { 197 | $template.data('growl-delay', delay); 198 | } 199 | 200 | if (delay <= 0) { 201 | clearInterval(timer); 202 | plugin.close(); 203 | } 204 | }, settings.timer); 205 | } 206 | }; 207 | 208 | // Avoid Plugin.prototype conflicts 209 | Plugin.prototype = { 210 | update: function(command, update) { 211 | switch (command) { 212 | case 'icon': 213 | if (this.settings.icon_type.toLowerCase() == 'class') { 214 | this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon); 215 | this.$template.find('[data-growl="icon"]').addClass(update); 216 | }else{ 217 | if (this.$template.find('[data-growl="icon"]').is('img')) { 218 | this.$template.find('[data-growl="icon"]') 219 | }else{ 220 | this.$template.find('[data-growl="icon"]').find('img').attr().attr('src', update); 221 | } 222 | } 223 | break; 224 | case 'url': 225 | this.$template.find('[data-growl="url"]').attr('href', update); 226 | break; 227 | case 'type': 228 | this.$template.removeClass('alert-' + this.settings.type); 229 | this.$template.addClass('alert-' + update); 230 | break; 231 | default: 232 | this.$template.find('[data-growl="' + command +'"]').html(update); 233 | } 234 | 235 | return this; 236 | }, 237 | close: function(remove) { 238 | var base = this.$template, 239 | settings = this.settings, 240 | posX = base.css(settings.placement.from), 241 | hasAnimation = false; 242 | 243 | base.addClass(this.settings.animate.exit); 244 | 245 | base.nextAll('[data-growl-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]').each(function() { 246 | $(this).css(settings.placement.from, posX); 247 | posX = (parseInt(posX)+(settings.spacing)) + $(this).outerHeight(); 248 | }); 249 | if(remove){ 250 | base.remove(); 251 | return this; 252 | } 253 | base.one('webkitAnimationStart oanimationstart MSAnimationStart animationstart', function(event) { 254 | hasAnimation = true; 255 | }); 256 | 257 | base.one('webkitAnimationEnd oanimationend MSAnimationEnd animationend', function(event) { 258 | $(this).remove(); 259 | }); 260 | 261 | 262 | 263 | setTimeout(function() { 264 | if (!hasAnimation) { 265 | base.remove(); 266 | } 267 | }, 100); 268 | 269 | return this; 270 | } 271 | }; 272 | 273 | // A really lightweight plugin wrapper around the constructor, 274 | // preventing against multiple instantiations 275 | $.growl = function ( content, options ) { 276 | if (content == false) { 277 | setDefaults(this, options); 278 | return false; 279 | } 280 | if(autoClear){ 281 | var last = $.growl.instance.pop(); 282 | if(last) 283 | last.close(true); 284 | } 285 | var plugin = new Plugin( this, content, options ); 286 | $.growl.instance.push(plugin); 287 | return plugin; 288 | }; 289 | $.growl.instance = []; 290 | 291 | 292 | })( jQuery, window, document ); -------------------------------------------------------------------------------- /dist/bootstrap-growl.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Project: Bootstrap Growl - v2.0.0 3 | * Description: Turns standard Bootstrap alerts into "Growl-like" notifications. 4 | * Author: Mouse0270 aka Robert McIntosh 5 | * License: MIT License 6 | * Website: https://github.com/mouse0270/bootstrap-growl 7 | */ 8 | ;(function ( $, window, document, undefined ) { 9 | // Create the defaults once 10 | var pluginName = "growl", 11 | dataKey = "plugin_" + pluginName, 12 | autoClear = true, 13 | bindDefaultIconTitle = true, 14 | iconTitle = { 15 | success: { 16 | title: ' Success: ', 17 | icon: 'glyphicon glyphicon-ok-sign' 18 | }, 19 | warning: { 20 | title: ' Warning: ', 21 | icon: 'glyphicon glyphicon-warning-sign' 22 | }, 23 | info: { 24 | title: ' Info: ', 25 | icon: 'glyphicon glyphicon-info-sign' 26 | }, 27 | danger: { 28 | title: ' Danger: ', 29 | icon: 'glyphicon glyphicon-remove-sign' 30 | } 31 | }, 32 | defaults = { 33 | element: 'body', 34 | type: "info", 35 | allow_dismiss: true, 36 | placement: { 37 | from: "top", 38 | align: "center" 39 | }, 40 | offset: 20, 41 | spacing: 10, 42 | z_index: 1060, 43 | delay: 0, 44 | timer: 1000, 45 | url_target: '_blank', 46 | mouse_over: false, 47 | animate: { 48 | enter: 'animated fadeInDown', 49 | exit: 'animated fadeOutUp' 50 | }, 51 | icon_type: 'class', 52 | template: '' 53 | }; 54 | 55 | // The actual plugin constructor 56 | var setDefaults = function(element, options) { 57 | defaults = $.extend(true, {}, defaults, options); 58 | }, 59 | Plugin = function (element, content, options) { 60 | var content = { 61 | content: { 62 | message: typeof content == 'object' ? content.message : content, 63 | title: content.title ? content.title : undefined, 64 | icon: content.icon ? content.icon : undefined, 65 | url: content.url ? content.url : undefined 66 | } 67 | }; 68 | 69 | options = $.extend(true, {}, content, options); 70 | this.settings = $.extend(true, {}, defaults, options); 71 | if(bindDefaultIconTitle){ 72 | this.settings = $.extend(true, {}, { content: iconTitle[this.settings.type] }, this.settings); 73 | } 74 | plugin = this; 75 | init(options, this.settings, plugin); 76 | this.$template = $template; 77 | }, 78 | init = function (options, settings, plugin) { 79 | var base = { 80 | settings: settings, 81 | $element: $(settings.element), 82 | template: settings.template 83 | }; 84 | 85 | $template = buildGrowl(base); 86 | addContent($template, base.settings); 87 | placement($template, base.settings); 88 | bindControls($template, base.settings,plugin); 89 | }, 90 | buildGrowl = function(base) { 91 | 92 | var $template = $(base.settings.template); 93 | 94 | $template.addClass('alert-' + base.settings.type); 95 | $template.attr('data-growl-position', base.settings.placement.from + '-' + base.settings.placement.align); 96 | 97 | $template.find('[data-growl="dismiss"]').css('display', 'none'); 98 | if (base.settings.allow_dismiss) { 99 | $template.find('[data-growl="dismiss"]').css('display', 'inline-block'); 100 | } 101 | 102 | return $template; 103 | }, 104 | addContent = function($template, settings) { 105 | 106 | $template.find('[data-growl="dismiss"]').css({ 107 | 'position': 'absolute', 108 | 'top': '5px', 109 | 'right': '10px', 110 | 'z-index': ((settings.z_index-1) >= 1 ? (settings.z_index-1) : 1) 111 | }); 112 | 113 | if (settings.content.icon) { 114 | if (settings.icon_type.toLowerCase() == 'class') { 115 | $template.find('[data-growl="icon"]').addClass(settings.content.icon); 116 | }else{ 117 | if ($template.find('[data-growl="icon"]').is('img')) { 118 | $template.find('[data-growl="icon"]').attr('src', settings.content.icon); 119 | }else{ 120 | $template.find('[data-growl="icon"]').append(''); 121 | } 122 | } 123 | } 124 | 125 | if (settings.content.title) { 126 | $template.find('[data-growl="title"]').html(settings.content.title); 127 | } 128 | 129 | if (settings.content.message) { 130 | $template.find('[data-growl="message"]').html(settings.content.message); 131 | } 132 | 133 | if (settings.content.url) { 134 | $template.find('[data-growl="url"]').attr('href', settings.content.url).attr('target', settings.url_target); 135 | $template.find('[data-growl="url"]').css({ 136 | 'position': 'absolute', 137 | 'top': '0px', 138 | 'left': '0px', 139 | 'width': '100%', 140 | 'height': '100%', 141 | 'z-index': ((settings.z_index-2) >= 1 ? (settings.z_index-2) : 1) 142 | }); 143 | } 144 | }, 145 | placement = function($template, settings) { 146 | var offsetAmt = settings.offset, 147 | gCSS = { 148 | 'position': (settings.element === 'body' ? 'fixed' : 'absolute'), 149 | 'margin': 0, 150 | 'z-index': settings.z_index, 151 | 'display': 'inline-block' 152 | } 153 | 154 | $('[data-growl-position="' + settings.placement.from + '-' + settings.placement.align + '"]').each(function() { 155 | return offsetAmt = Math.max(offsetAmt, parseInt($(this).css(settings.placement.from)) + $(this).outerHeight() + settings.spacing); 156 | }); 157 | 158 | gCSS[settings.placement.from] = offsetAmt + "px"; 159 | $template.css(gCSS); 160 | $(settings.element).append($template); 161 | 162 | switch (settings.placement.align) { 163 | case 'center': 164 | $template.css({ 165 | 'left': '50%', 166 | 'marginLeft': -($template.outerWidth() / 2) + 'px' 167 | }); 168 | break; 169 | case 'left': 170 | $template.css('left', settings.offset + 'px'); 171 | break; 172 | case 'right': 173 | $template.css('right', settings.offset + 'px'); 174 | break; 175 | } 176 | $template.addClass('growl-animated'); 177 | }, 178 | bindControls = function($template, settings, plugin) { 179 | $template.addClass(settings.animate.enter); 180 | 181 | $template.find('[data-growl="dismiss"]').on('click', function() { 182 | plugin.close(); 183 | }); 184 | 185 | $template.on('mouseover', function(e) { 186 | $template.addClass('hovering'); 187 | }).on('mouseout', function() { 188 | $template.removeClass('hovering'); 189 | }); 190 | 191 | if (settings.delay >= 1) { 192 | $template.data('growl-delay', settings.delay); 193 | var timer = setInterval(function() { 194 | 195 | var delay = parseInt($template.data('growl-delay')) - settings.timer; 196 | if ((!$template.hasClass('hovering') && settings.mouse_over == 'pause') || settings.mouse_over != 'pause') { 197 | $template.data('growl-delay', delay); 198 | } 199 | 200 | if (delay <= 0) { 201 | clearInterval(timer); 202 | plugin.close(); 203 | } 204 | }, settings.timer); 205 | } 206 | }; 207 | 208 | // Avoid Plugin.prototype conflicts 209 | Plugin.prototype = { 210 | update: function(command, update) { 211 | switch (command) { 212 | case 'icon': 213 | if (this.settings.icon_type.toLowerCase() == 'class') { 214 | this.$template.find('[data-growl="icon"]').removeClass(this.settings.content.icon); 215 | this.$template.find('[data-growl="icon"]').addClass(update); 216 | }else{ 217 | if (this.$template.find('[data-growl="icon"]').is('img')) { 218 | this.$template.find('[data-growl="icon"]') 219 | }else{ 220 | this.$template.find('[data-growl="icon"]').find('img').attr().attr('src', update); 221 | } 222 | } 223 | break; 224 | case 'url': 225 | this.$template.find('[data-growl="url"]').attr('href', update); 226 | break; 227 | case 'type': 228 | this.$template.removeClass('alert-' + this.settings.type); 229 | this.$template.addClass('alert-' + update); 230 | break; 231 | default: 232 | this.$template.find('[data-growl="' + command +'"]').html(update); 233 | } 234 | 235 | return this; 236 | }, 237 | close: function(remove) { 238 | var base = this.$template, 239 | settings = this.settings, 240 | posX = base.css(settings.placement.from), 241 | hasAnimation = false; 242 | 243 | base.addClass(this.settings.animate.exit); 244 | 245 | base.nextAll('[data-growl-position="' + this.settings.placement.from + '-' + this.settings.placement.align + '"]').each(function() { 246 | $(this).css(settings.placement.from, posX); 247 | posX = (parseInt(posX)+(settings.spacing)) + $(this).outerHeight(); 248 | }); 249 | if(remove){ 250 | base.remove(); 251 | return this; 252 | } 253 | base.one('webkitAnimationStart oanimationstart MSAnimationStart animationstart', function(event) { 254 | hasAnimation = true; 255 | }); 256 | 257 | base.one('webkitAnimationEnd oanimationend MSAnimationEnd animationend', function(event) { 258 | $(this).remove(); 259 | }); 260 | 261 | 262 | 263 | setTimeout(function() { 264 | if (!hasAnimation) { 265 | base.remove(); 266 | } 267 | }, 100); 268 | 269 | return this; 270 | } 271 | }; 272 | 273 | // A really lightweight plugin wrapper around the constructor, 274 | // preventing against multiple instantiations 275 | $.growl = function ( content, options ) { 276 | if (content == false) { 277 | setDefaults(this, options); 278 | return false; 279 | } 280 | if(autoClear){ 281 | var last = $.growl.instance.pop(); 282 | if(last) 283 | last.close(true); 284 | } 285 | var plugin = new Plugin( this, content, options ); 286 | $.growl.instance.push(plugin); 287 | return plugin; 288 | }; 289 | $.growl.instance = []; 290 | 291 | 292 | })( jQuery, window, document ); --------------------------------------------------------------------------------