app/jquery/jquery-purr.js

   1 /**
   2  * jquery.purr.js
   3  * Copyright (c) 2008 Net Perspective (net-perspective.com)
   4  * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
   5  *
   6  * @author R.A. Ray
   7  * @projectDescription  jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."
   8  * @version 0.1.0
   9  *
  10  * @requires jquery.js (tested with 1.2.6)
  11  *
  12  * @param fadeInSpeed                                   int - Duration of fade in animation in miliseconds
  13  *                                                                                                      default: 500
  14  *      @param fadeOutSpeed                             int - Duration of fade out animationin miliseconds
  15                                                                                                                 default: 500
  16  *      @param removeTimer                              int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list
  17                                                                                                                 default: 4000
  18  *      @param isSticky                                                 bool - Whether the notice should fade out on its own or wait to be manually closed
  19                                                                                                                 default: false
  20  *      @param usingTransparentPNG      bool - Whether or not the notice is using transparent .png images in its styling
  21                                                                                                                 default: false
  22  */
  23
  24 ( function( $ ) {
  25
  26         $.purr = function ( notice, options )
  27         {
  28                 // Convert notice to a jQuery object
  29                 notice = $( notice );
  30
  31                 // Add a class to denote the notice as not sticky
  32                 if ( !options.isSticky )
  33                 {
  34                         notice.addClass( 'not-sticky' );
  35                 };
  36
  37                 // Get the container element from the page
  38                 var cont = document.getElementById( 'purr-container' );
  39
  40                 // If the container doesn't yet exist, we need to create it
  41                 if ( !cont )
  42                 {
  43                         cont = '<div id="purr-container"></div>';
  44                 }
  45
  46                 // Convert cont to a jQuery object
  47                 cont = $( cont );
  48
  49                 // Add the container to the page
  50                 $( 'body' ).append( cont );
  51
  52                 notify();
  53
  54                 function notify ()
  55                 {
  56                         // Set up the close button
  57                         var close = document.createElement( 'a' );
  58                         $( close ).attr(
  59                                 {
  60                                         className: 'close',
  61                                         href: '#close',
  62                                         innerHTML: 'Close'
  63                                 }
  64                         )
  65                                 .appendTo( notice )
  66                                         .click( function ()
  67                                                 {
  68                                                         removeNotice();
  69
  70                                                         return false;
  71                                                 }
  72                                         );
  73
  74                         // Add the notice to the page and keep it hidden initially
  75                         notice.appendTo( cont )
  76                                 .hide();
  77
  78                         if ( jQuery.browser.msie && options.usingTransparentPNG )
  79                         {
  80                                 // IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
  81                                 // notice style, we'll just skip the fading in.
  82                                 notice.show();
  83                         }
  84                         else
  85                         {
  86                                 //Fade in the notice we just added
  87                                 notice.fadeIn( options.fadeInSpeed );
  88                         }
  89
  90                         // Set up the removal interval for the added notice if that notice is not a sticky
  91                         if ( !options.isSticky )
  92                         {
  93                                 var topSpotInt = setInterval( function ()
  94                                 {
  95                                         // Check to see if our notice is the first non-sticky notice in the list
  96                                         if ( notice.prevAll( '.not-sticky' ).length == 0 )
  97                                         {
  98                                                 // Stop checking once the condition is met
  99                                                 clearInterval( topSpotInt );
 100
 101                                                 // Call the close action after the timeout set in options
 102                                                 setTimeout( function ()
 103                                                         {
 104                                                                 removeNotice();
 105                                                         }, options.removeTimer
 106                                                 );
 107                                         }
 108                                 }, 200 );
 109                         }
 110                 }
 111
 112                 function removeNotice ()
 113                 {
 114                         // IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
 115                         // notice style, we'll just skip the fading out.
 116                         if ( jQuery.browser.msie && options.usingTransparentPNG )
 117                         {
 118                                 notice.css( { opacity: 0        } )
 119                                         .animate(
 120                                                 {
 121                                                         height: '0px'
 122                                                 },
 123                                                 {
 124                                                         duration: options.fadeOutSpeed,
 125                                                         complete:  function ()
 126                                                                 {
 127                                                                         notice.remove();
 128                                                                 }
 129                                                         }
 130                                         );
 131                         }
 132                         else
 133                         {
 134                                 // Fade the object out before reducing its height to produce the sliding effect
 135                                 notice.animate(
 136                                         {
 137                                                 opacity: '0'
 138                                         },
 139                                         {
 140                                                 duration: options.fadeOutSpeed,
 141                                                 complete: function ()
 142                                                         {
 143                                                                 notice.animate(
 144                                                                         {
 145                                                                                 height: '0px'
 146                                                                         },
 147                                                                         {
 148                                                                                 duration: options.fadeOutSpeed,
 149                                                                                 complete: function ()
 150                                                                                         {
 151                                                                                                 notice.remove();
 152                                                                                         }
 153                                                                         }
 154                                                                 );
 155                                                         }
 156                                         }
 157                                 );
 158                         }
 159                 };
 160         };
 161
 162         $.fn.purr = function ( options )
 163         {
 164                 options = options || {};
 165                 options.fadeInSpeed = options.fadeInSpeed || 500;
 166                 options.fadeOutSpeed = options.fadeOutSpeed || 500;
 167                 options.removeTimer = options.removeTimer || 4000;
 168                 options.isSticky = options.isSticky || false;
 169                 options.usingTransparentPNG = options.usingTransparentPNG || false;
 170
 171                 this.each( function()
 172                         {
 173                                 new $.purr( this, options );
 174                         }
 175                 );
 176
 177                 return this;
 178         };
 179 })( jQuery );
 180