application/media/js/jquery.jgrowl.js

   1 /**
   2  * jGrowl 1.2.0
   3  *
   4  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
   5  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
   6  *
   7  * Written by Stan Lemon <stanlemon@mac.com>
   8  * Last updated: 2009.05.11
   9  *
  10  * jGrowl is a jQuery plugin implementing unobtrusive userland notifications.  These
  11  * notifications function similarly to the Growl Framework available for
  12  * Mac OS X (http://growl.info).
  13  *
  14  * To Do:
  15  * - Move library settings to containers and allow them to be changed per container
  16  *
  17  * Changes in 1.2.0
  18  * - Added message pooling to limit the number of messages appearing at a given time.
  19  * - Closing a notification is now bound to the notification object and triggered by the close button.
  20  *
  21  * Changes in 1.1.2
  22  * - Added iPhone styled example
  23  * - Fixed possible IE7 bug when determining if the ie6 class shoudl be applied.
  24  * - Added template for the close button, so that it's content could be customized.
  25  *
  26  * Changes in 1.1.1
  27  * - Fixed CSS styling bug for ie6 caused by a mispelling
  28  * - Changes height restriction on default notifications to min-height
  29  * - Added skinned examples using a variety of images
  30  * - Added the ability to customize the content of the [close all] box
  31  * - Added jTweet, an example of using jGrowl + Twitter
  32  *
  33  * Changes in 1.1.0
  34  * - Multiple container and instances.
  35  * - Standard $.jGrowl() now wraps $.fn.jGrowl() by first establishing a generic jGrowl container.
  36  * - Instance methods of a jGrowl container can be called by $.fn.jGrowl(methodName)
  37  * - Added glue preferenced, which allows notifications to be inserted before or after nodes in the container
  38  * - Added new log callback which is called before anything is done for the notification
  39  * - Corner's attribute are now applied on an individual notification basis.
  40  *
  41  * Changes in 1.0.4
  42  * - Various CSS fixes so that jGrowl renders correctly in IE6.
  43  *
  44  * Changes in 1.0.3
  45  * - Fixed bug with options persisting across notifications
  46  * - Fixed theme application bug
  47  * - Simplified some selectors and manipulations.
  48  * - Added beforeOpen and beforeClose callbacks
  49  * - Reorganized some lines of code to be more readable
  50  * - Removed unnecessary this.defaults context
  51  * - If corners plugin is present, it's now customizable.
  52  * - Customizable open animation.
  53  * - Customizable close animation.
  54  * - Customizable animation easing.
  55  * - Added customizable positioning (top-left, top-right, bottom-left, bottom-right, center)
  56  *
  57  * Changes in 1.0.2
  58  * - All CSS styling is now external.
  59  * - Added a theme parameter which specifies a secondary class for styling, such
  60  *   that notifications can be customized in appearance on a per message basis.
  61  * - Notification life span is now customizable on a per message basis.
  62  * - Added the ability to disable the global closer, enabled by default.
  63  * - Added callbacks for when a notification is opened or closed.
  64  * - Added callback for the global closer.
  65  * - Customizable animation speed.
  66  * - jGrowl now set itself up and tears itself down.
  67  *
  68  * Changes in 1.0.1:
  69  * - Removed dependency on metadata plugin in favor of .data()
  70  * - Namespaced all events
  71  */
  72 (function($) {
  73
  74         /** jGrowl Wrapper - Establish a base jGrowl Container for compatibility with older releases. **/
  75         $.jGrowl = function( m , o ) {
  76
  77                 // Because jgrowl is jgrowl
  78                 $.notify( m );
  79
  80                 // To maintain compatibility with older version that only supported one instance we'll create the base container.
  81                 //if ( $('#jGrowl').size() == 0 ) $('<div id="jGrowl"></div>').addClass($.jGrowl.defaults.position).appendTo('body');
  82                 // Create a notification on the container.
  83                 //$('#jGrowl').jGrowl(m,o);
  84
  85         };
  86
  87
  88         /** Raise jGrowl Notification on a jGrowl Container **/
  89         $.fn.jGrowl = function( m , o ) {
  90                 if ( $.isFunction(this.each) ) {
  91                         var args = arguments;
  92
  93                         return this.each(function() {
  94                                 var self = this;
  95
  96                                 /** Create a jGrowl Instance on the Container if it does not exist **/
  97                                 if ( $(this).data('jGrowl.instance') == undefined ) {
  98                                         $(this).data('jGrowl.instance', new $.fn.jGrowl());
  99                                         $(this).data('jGrowl.instance').startup( this );
 100                                 }
 101
 102                                 /** Optionally call jGrowl instance methods, or just raise a normal notification **/
 103                                 if ( $.isFunction($(this).data('jGrowl.instance')[m]) ) {
 104                                         $(this).data('jGrowl.instance')[m].apply( $(this).data('jGrowl.instance') , $.makeArray(args).slice(1) );
 105                                 } else {
 106                                         $(this).data('jGrowl.instance').create( m , o );
 107                                 }
 108                         });
 109                 };
 110         };
 111
 112         $.extend( $.fn.jGrowl.prototype , {
 113
 114                 /** Default JGrowl Settings **/
 115                 defaults: {
 116                         pool:                   0,
 117                         header:                 '',
 118                         group:                  '',
 119                         sticky:                 false,
 120                         position:               'top-right', // Is this still needed?
 121                         glue:                   'after',
 122                         theme:                  'default',
 123                         corners:                '10px',
 124                         check:                  250,
 125                         life:                   5000,
 126                         speed:                  'normal',
 127                         easing:                 'swing',
 128                         closer:                 true,
 129                         closeTemplate: '&times;',
 130                         closerTemplate: '<div>[ close all ]</div>',
 131                         log:                    function(e,m,o) {},
 132                         beforeOpen:     function(e,m,o) {},
 133                         open:                   function(e,m,o) {},
 134                         beforeClose:    function(e,m,o) {},
 135                         close:                  function(e,m,o) {},
 136                         animateOpen:    {
 137                                 opacity:        'show'
 138                         },
 139                         animateClose:   {
 140                                 opacity:        'hide'
 141                         }
 142                 },
 143
 144                 notifications: [],
 145
 146                 /** jGrowl Container Node **/
 147                 element:        null,
 148
 149                 /** Interval Function **/
 150                 interval:   null,
 151
 152                 /** Create a Notification **/
 153                 create:         function( message , o ) {
 154                         var o = $.extend({}, this.defaults, o);
 155
 156                         this.notifications[ this.notifications.length ] = { message: message , options: o };
 157
 158                         o.log.apply( this.element , [this.element,message,o] );
 159                 },
 160
 161                 render:                 function( notification ) {
 162                         var self = this;
 163                         var message = notification.message;
 164                         var o = notification.options;
 165
 166                         var notification = $('<div class="jGrowl-notification' + ((o.group != undefined && o.group != '') ? ' ' + o.group : '') + '"><div class="close">' + o.closeTemplate + '</div><div class="header">' + o.header + '</div><div class="message">' + message + '</div></div>')
 167                                 .data("jGrowl", o).addClass(o.theme).children('div.close').bind("click.jGrowl", function() {
 168                                         $(this).parent().trigger('jGrowl.close');
 169                                 }).parent();
 170
 171                         ( o.glue == 'after' ) ? $('div.jGrowl-notification:last', this.element).after(notification) : $('div.jGrowl-notification:first', this.element).before(notification);
 172
 173                         /** Notification Actions **/
 174                         $(notification).bind("mouseover.jGrowl", function() {
 175                                 $(this).data("jGrowl").pause = true;
 176                         }).bind("mouseout.jGrowl", function() {
 177                                 $(this).data("jGrowl").pause = false;
 178                         }).bind('jGrowl.beforeOpen', function() {
 179                                 o.beforeOpen.apply( self.element , [self.element,message,o] );
 180                         }).bind('jGrowl.open', function() {
 181                                 o.open.apply( self.element , [self.element,message,o] );
 182                         }).bind('jGrowl.beforeClose', function() {
 183                                 o.beforeClose.apply( self.element , [self.element,message,o] );
 184                         }).bind('jGrowl.close', function() {
 185                                 $(this).trigger('jGrowl.beforeClose').animate(o.animateClose, o.speed, o.easing, function() {
 186                                         $(this).remove();
 187                                         o.close.apply( self.element , [self.element,message,o] );
 188                                 });
 189                         }).trigger('jGrowl.beforeOpen').animate(o.animateOpen, o.speed, o.easing, function() {
 190                                 $(this).data("jGrowl").created = new Date();
 191                         }).trigger('jGrowl.open');
 192
 193                         /** Optional Corners Plugin **/
 194                         if ( $.fn.corner != undefined ) $(notification).corner( o.corners );
 195
 196                         /** Add a Global Closer if more than one notification exists **/
 197                         if ( $('div.jGrowl-notification:parent', this.element).size() > 1 && $('div.jGrowl-closer', this.element).size() == 0 && this.defaults.closer != false ) {
 198                                 $(this.defaults.closerTemplate).addClass('jGrowl-closer').addClass(this.defaults.theme).appendTo(this.element).animate(this.defaults.animateOpen, this.defaults.speed, this.defaults.easing).bind("click.jGrowl", function() {
 199                                         $(this).siblings().children('div.close').trigger("click.jGrowl");
 200
 201                                         if ( $.isFunction( self.defaults.closer ) ) self.defaults.closer.apply( $(this).parent()[0] , [$(this).parent()[0]] );
 202                                 });
 203                         };
 204                 },
 205
 206                 /** Update the jGrowl Container, removing old jGrowl notifications **/
 207                 update:  function() {
 208                         $(this.element).find('div.jGrowl-notification:parent').each( function() {
 209                                 if ( $(this).data("jGrowl") != undefined && $(this).data("jGrowl").created != undefined && ($(this).data("jGrowl").created.getTime() + $(this).data("jGrowl").life)  < (new Date()).getTime() && $(this).data("jGrowl").sticky != true &&
 210                                          ($(this).data("jGrowl").pause == undefined || $(this).data("jGrowl").pause != true) ) {
 211                                         $(this).trigger('jGrowl.close');
 212                                 }
 213                         });
 214
 215                         if ( this.notifications.length > 0 && (this.defaults.pool == 0 || $(this.element).find('div.jGrowl-notification:parent').size() < this.defaults.pool) ) {
 216                                 this.render( this.notifications.shift() );
 217                         }
 218
 219                         if ( $(this.element).find('div.jGrowl-notification:parent').size() < 2 ) {
 220                                 $(this.element).find('div.jGrowl-closer').animate(this.defaults.animateClose, this.defaults.speed, this.defaults.easing, function() {
 221                                         $(this).remove();
 222                                 });
 223                         };
 224                 },
 225
 226                 /** Setup the jGrowl Notification Container **/
 227                 startup:        function(e) {
 228                         this.element = $(e).addClass('jGrowl').append('<div class="jGrowl-notification"></div>');
 229                         this.interval = setInterval( function() {
 230                                 jQuery(e).data('jGrowl.instance').update();
 231                         }, this.defaults.check);
 232
 233                         if ($.browser.msie && parseInt($.browser.version) < 7 && !window["XMLHttpRequest"]) $(this.element).addClass('ie6');
 234                 },
 235
 236                 /** Shutdown jGrowl, removing it and clearing the interval **/
 237                 shutdown:   function() {
 238                         $(this.element).removeClass('jGrowl').find('div.jGrowl-notification').remove();
 239                         clearInterval( this.interval );
 240                 }
 241         });
 242
 243         /** Reference the Defaults Object for compatibility with older versions of jGrowl **/
 244         $.jGrowl.defaults = $.fn.jGrowl.prototype.defaults;
 245
 246 })(jQuery);