app/jquery/jquery-purr.js
author Pawel Solyga <Pawel.Solyga@gmail.com>
Sun, 06 Sep 2009 23:46:28 +0200
changeset 2868 9f7f269383f7
parent 1707 2e7b76f20878
permissions -rw-r--r--
Set new Melange version number to 0-5-20090906 in app.yaml.template.

/**
 * jquery.purr.js
 * Copyright (c) 2008 Net Perspective (net-perspective.com)
 * Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
 *
 * @author R.A. Ray
 * @projectDescription	jQuery plugin for dynamically displaying unobtrusive messages in the browser. Mimics the behavior of the MacOS program "Growl."
 * @version 0.1.0
 *
 * @requires jquery.js (tested with 1.2.6)
 *
 * @param fadeInSpeed 					int - Duration of fade in animation in miliseconds
 * 													default: 500
 *	@param fadeOutSpeed  				int - Duration of fade out animationin miliseconds
														default: 500
 *	@param removeTimer  				int - Timeout, in miliseconds, before notice is removed once it is the top non-sticky notice in the list
														default: 4000
 *	@param isSticky 						bool - Whether the notice should fade out on its own or wait to be manually closed
														default: false
 *	@param usingTransparentPNG 	bool - Whether or not the notice is using transparent .png images in its styling
														default: false
 */

( function( $ ) {

	$.purr = function ( notice, options )
	{
		// Convert notice to a jQuery object
		notice = $( notice );

		// Add a class to denote the notice as not sticky
		if ( !options.isSticky )
		{
			notice.addClass( 'not-sticky' );
		};

		// Get the container element from the page
		var cont = document.getElementById( 'purr-container' );

		// If the container doesn't yet exist, we need to create it
		if ( !cont )
		{
			cont = '<div id="purr-container"></div>';
		}

		// Convert cont to a jQuery object
		cont = $( cont );

		// Add the container to the page
		$( 'body' ).append( cont );

		notify();

		function notify ()
		{
			// Set up the close button
			var close = document.createElement( 'a' );
			$( close ).attr(
				{
					className: 'close',
					href: '#close',
					innerHTML: 'Close'
				}
			)
				.appendTo( notice )
					.click( function ()
						{
							removeNotice();

							return false;
						}
					);

			// Add the notice to the page and keep it hidden initially
			notice.appendTo( cont )
				.hide();

			if ( jQuery.browser.msie && options.usingTransparentPNG )
			{
				// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
				// notice style, we'll just skip the fading in.
				notice.show();
			}
			else
			{
				//Fade in the notice we just added
				notice.fadeIn( options.fadeInSpeed );
			}

			// Set up the removal interval for the added notice if that notice is not a sticky
			if ( !options.isSticky )
			{
				var topSpotInt = setInterval( function ()
				{
					// Check to see if our notice is the first non-sticky notice in the list
					if ( notice.prevAll( '.not-sticky' ).length == 0 )
					{
						// Stop checking once the condition is met
						clearInterval( topSpotInt );

						// Call the close action after the timeout set in options
						setTimeout( function ()
							{
								removeNotice();
							}, options.removeTimer
						);
					}
				}, 200 );
			}
		}

		function removeNotice ()
		{
			// IE7 and earlier can't handle the combination of opacity and transparent pngs, so if we're using transparent pngs in our
			// notice style, we'll just skip the fading out.
			if ( jQuery.browser.msie && options.usingTransparentPNG )
			{
				notice.css( { opacity: 0	} )
					.animate(
						{
							height: '0px'
						},
						{
							duration: options.fadeOutSpeed,
							complete:  function ()
								{
									notice.remove();
								}
							}
					);
			}
			else
			{
				// Fade the object out before reducing its height to produce the sliding effect
				notice.animate(
					{
						opacity: '0'
					},
					{
						duration: options.fadeOutSpeed,
						complete: function ()
							{
								notice.animate(
									{
										height: '0px'
									},
									{
										duration: options.fadeOutSpeed,
										complete: function ()
											{
												notice.remove();
											}
									}
								);
							}
					}
				);
			}
		};
	};

	$.fn.purr = function ( options )
	{
		options = options || {};
		options.fadeInSpeed = options.fadeInSpeed || 500;
		options.fadeOutSpeed = options.fadeOutSpeed || 500;
		options.removeTimer = options.removeTimer || 4000;
		options.isSticky = options.isSticky || false;
		options.usingTransparentPNG = options.usingTransparentPNG || false;

		this.each( function()
			{
				new $.purr( this, options );
			}
		);

		return this;
	};
})( jQuery );