├── LICENSE.md ├── README.md ├── Rakefile ├── composer.json ├── demo.html ├── jquery.bootstrap-growl.coffee ├── jquery.bootstrap-growl.js ├── jquery.bootstrap-growl.min.js └── package.json /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) Nick Larson, http://github.com/ifightcrime 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all 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, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bootstrap-growl 2 | 3 | Pretty simple jQuery plugin that turns standard Bootstrap alerts into hovering "Growl-like" notifications. 4 | 5 | ## Demo 6 | 7 | I have a basic demo set up at jsfiddle for the time being which you can view here: http://jsfiddle.net/ifightcrime/Us6WX/1008/ 8 | 9 | ## Features 10 | 11 | * Uses standard [Twitter Bootstrap alerts](http://twitter.github.com/bootstrap/components.html#alerts) which provides 'info', 'danger', and 'success' styles. 12 | * Multiple growls called consecutively are stacked up one after another in a list. 13 | * Automatically fades growls away after a default of 4 seconds. 14 | 15 | ## Dependencies 16 | 17 | 1. Latest version of jQuery. (tested on 1.11.0) 18 | 2. [Twitter Bootstrap](http://twitter.github.com/bootstrap/index.html). (current rev tested with 3.3.1) 19 | 20 | ## Usage 21 | 22 | Include the dependencies and `jquery.bootstrap-growl.min.js` into your page and call the following: 23 | 24 | ```javascript 25 | $.bootstrapGrowl("My message"); 26 | ``` 27 | 28 | ## Available Options 29 | 30 | By default, growls use the standard 'alert' Bootstrap style, are 250px wide, right aligned, and are positioned 20px from the top right of the page. 31 | 32 | ```javascript 33 | $.bootstrapGrowl("another message, yay!", { 34 | ele: 'body', // which element to append to 35 | type: 'info', // (null, 'info', 'danger', 'success') 36 | offset: {from: 'top', amount: 20}, // 'top', or 'bottom' 37 | align: 'right', // ('left', 'right', or 'center') 38 | width: 250, // (integer, or 'auto') 39 | delay: 4000, // Time while the message will be displayed. It's not equivalent to the *demo* timeOut! 40 | allow_dismiss: true, // If true then will display a cross to close the popup. 41 | stackup_spacing: 10 // spacing between consecutively stacked growls. 42 | }); 43 | ``` 44 | 45 | Note: Previous ```top_offset``` is not broken by this latest change. 46 | 47 | ## Additional Contributors 48 | 49 | * Jose Martinez https://github.com/callado4 50 | * Lloyd Watkin https://github.com/lloydwatkin 51 | * TruongSinh Tran-Nguyen https://github.com/tran-nguyen 52 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # special thanks to https://github.com/tuupola/jquery_lazyload for this cool Rakefile 2 | task :default => [:minify] 3 | 4 | desc "coffee2js" 5 | task :coffee2js do 6 | coffee2js 7 | end 8 | 9 | desc "Minify" 10 | task :minify do 11 | minify 12 | end 13 | 14 | desc "Build" 15 | task :build do 16 | coffee2js 17 | minify 18 | end 19 | 20 | # method definitions 21 | 22 | def coffee2js 23 | begin 24 | require 'coffee-script' 25 | rescue LoadError => e 26 | if verbose 27 | puts "\nYou'll need the 'coffee-script' gem for translate the coffeescript file to js. Just run:\n\n" 28 | puts " $ gem install coffee-script" 29 | puts "\nand you should be all set.\n\n" 30 | exit 31 | end 32 | return false 33 | end 34 | puts "Translating jquery.bootstrap-growl.coffee to jquery.bootstrap-growl.js..." 35 | File.open("jquery.bootstrap-growl.js", "w") do |f| 36 | f.puts CoffeeScript.compile(File.read("jquery.bootstrap-growl.coffee")) 37 | end 38 | end 39 | 40 | def minify 41 | begin 42 | require 'uglifier' 43 | rescue LoadError => e 44 | if verbose 45 | puts "\nYou'll need the 'uglifier' gem for minification. Just run:\n\n" 46 | puts " $ gem install uglifier" 47 | puts "\nand you should be all set.\n\n" 48 | exit 49 | end 50 | return false 51 | end 52 | puts "Minifying jquery.bootstrap-growl.js with UglifyJS..." 53 | File.open("jquery.bootstrap-growl.min.js", "w") do |f| 54 | f.puts Uglifier.new.compile(File.read("jquery.bootstrap-growl.js")) 55 | end 56 | end 57 | 58 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ifightcrime/bootstrap-growl", 3 | "description": "Pretty simple jQuery plugin that turns standard Bootstrap alerts into 'Growl-like' notifications.", 4 | "keywords": ["bootstrap", "growl", "notifications"], 5 | "homepage": "https://github.com/ifightcrime/bootstrap-growl", 6 | "author": "Nick Larson", 7 | "license": "MIT" 8 | } -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | jquery.bootstrap-growl Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /jquery.bootstrap-growl.coffee: -------------------------------------------------------------------------------- 1 | # https://github.com/ifightcrime/bootstrap-growl 2 | 3 | $ = jQuery 4 | 5 | $.bootstrapGrowl = (message, options) -> 6 | options = $.extend({}, $.bootstrapGrowl.default_options, options) 7 | 8 | $alert = $("
") 9 | $alert.attr "class", "bootstrap-growl alert" 10 | $alert.addClass "alert-" + options.type if options.type 11 | if options.allow_dismiss 12 | $alert.addClass "alert-dismissible" 13 | $alert.append "" 14 | 15 | $alert.append message 16 | 17 | # Prevent BC breaks 18 | if options.top_offset 19 | options.offset = 20 | from: "top" 21 | amount: options.top_offset 22 | 23 | # calculate any 'stack-up' 24 | offsetAmount = options.offset.amount 25 | $(".bootstrap-growl").each -> 26 | offsetAmount = Math.max(offsetAmount, parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing) 27 | 28 | css = 29 | "position": (if options.ele is "body" then "fixed" else "absolute") 30 | "margin": 0 31 | "z-index": "9999" 32 | "display": "none" 33 | 34 | css[options.offset.from] = offsetAmount + "px" 35 | 36 | $alert.css css 37 | 38 | $alert.css "width", options.width + "px" if options.width isnt "auto" 39 | 40 | # have to append before we can use outerWidth() 41 | $(options.ele).append $alert 42 | 43 | switch options.align 44 | when "center" 45 | $alert.css 46 | "left": "50%" 47 | "margin-left": "-#{$alert.outerWidth() / 2}px" 48 | when "left" 49 | $alert.css "left", "20px" 50 | else 51 | $alert.css "right", "20px" 52 | 53 | $alert.fadeIn() 54 | 55 | # Only remove after delay if delay is more than 0 56 | if options.delay > 0 57 | $alert.delay(options.delay).fadeOut -> 58 | $(this).alert "close" 59 | 60 | $alert 61 | 62 | $.bootstrapGrowl.default_options = 63 | ele: "body" 64 | type: "info" 65 | offset: 66 | from: "top" 67 | amount: 20 68 | align: "right" # (left, right, or center) 69 | width: 250 70 | delay: 4000 71 | allow_dismiss: true 72 | stackup_spacing: 10 73 | 74 | -------------------------------------------------------------------------------- /jquery.bootstrap-growl.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var $; 3 | 4 | $ = jQuery; 5 | 6 | $.bootstrapGrowl = function(message, options) { 7 | var $alert, css, offsetAmount; 8 | options = $.extend({}, $.bootstrapGrowl.default_options, options); 9 | $alert = $("
"); 10 | $alert.attr("class", "bootstrap-growl alert"); 11 | if (options.type) { 12 | $alert.addClass("alert-" + options.type); 13 | } 14 | if (options.allow_dismiss) { 15 | $alert.addClass("alert-dismissible"); 16 | $alert.append(""); 17 | } 18 | $alert.append(message); 19 | if (options.top_offset) { 20 | options.offset = { 21 | from: "top", 22 | amount: options.top_offset 23 | }; 24 | } 25 | offsetAmount = options.offset.amount; 26 | $(".bootstrap-growl").each(function() { 27 | return offsetAmount = Math.max(offsetAmount, parseInt($(this).css(options.offset.from)) + $(this).outerHeight() + options.stackup_spacing); 28 | }); 29 | css = { 30 | "position": (options.ele === "body" ? "fixed" : "absolute"), 31 | "margin": 0, 32 | "z-index": "9999", 33 | "display": "none" 34 | }; 35 | css[options.offset.from] = offsetAmount + "px"; 36 | $alert.css(css); 37 | if (options.width !== "auto") { 38 | $alert.css("width", options.width + "px"); 39 | } 40 | $(options.ele).append($alert); 41 | switch (options.align) { 42 | case "center": 43 | $alert.css({ 44 | "left": "50%", 45 | "margin-left": "-" + ($alert.outerWidth() / 2) + "px" 46 | }); 47 | break; 48 | case "left": 49 | $alert.css("left", "20px"); 50 | break; 51 | default: 52 | $alert.css("right", "20px"); 53 | } 54 | $alert.fadeIn(); 55 | if (options.delay > 0) { 56 | $alert.delay(options.delay).fadeOut(function() { 57 | return $(this).alert("close"); 58 | }); 59 | } 60 | return $alert; 61 | }; 62 | 63 | $.bootstrapGrowl.default_options = { 64 | ele: "body", 65 | type: "info", 66 | offset: { 67 | from: "top", 68 | amount: 20 69 | }, 70 | align: "right", 71 | width: 250, 72 | delay: 4000, 73 | allow_dismiss: true, 74 | stackup_spacing: 10 75 | }; 76 | 77 | }).call(this); 78 | -------------------------------------------------------------------------------- /jquery.bootstrap-growl.min.js: -------------------------------------------------------------------------------- 1 | (function(){var c;c=jQuery;c.bootstrapGrowl=function(f,a){var b,e,d;a=c.extend({},c.bootstrapGrowl.default_options,a);b=c("
");b.attr("class","bootstrap-growl alert");a.type&&b.addClass("alert-"+a.type);a.allow_dismiss&&(b.addClass("alert-dismissible"),b.append(''));b.append(f);a.top_offset&&(a.offset={from:"top",amount:a.top_offset});d=a.offset.amount;c(".bootstrap-growl").each(function(){return d= Math.max(d,parseInt(c(this).css(a.offset.from))+c(this).outerHeight()+a.stackup_spacing)});e={position:"body"===a.ele?"fixed":"absolute",margin:0,"z-index":"9999",display:"none"};e[a.offset.from]=d+"px";b.css(e);"auto"!==a.width&&b.css("width",a.width+"px");c(a.ele).append(b);switch(a.align){case "center":b.css({left:"50%","margin-left":"-"+b.outerWidth()/2+"px"});break;case "left":b.css("left","20px");break;default:b.css("right","20px")}b.fadeIn();0