app/jquery/jquery-purr.js
author Lennard de Rijk <ljvderijk@gmail.com>
Fri, 24 Jul 2009 21:00:04 +0200
changeset 2678 a525a55833f1
parent 1707 2e7b76f20878
permissions -rw-r--r--
Send out a Notification upon creation of a new Request entity. The receivers are specified by the corresponding Role logic this Role Request is for. Currently Organization and Club Administrators will receive "new request" messages about respectively Mentor and Club Membership requests. Fixes Issue 442.

/**
 * 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 );