Add the jquery-purr plugin
authorSverre Rabbelier <srabbelier@gmail.com>
Sat, 07 Mar 2009 14:49:03 +0000
changeset 1707 2e7b76f20878
parent 1706 9609e2a0d7d7
child 1708 1aff33e33613
Add the jquery-purr plugin Patch by: "Mario Ferraro" <fadinlight@gmail.com> Reviewed by: to-be-reviewed
app/jquery/jquery-purr.js
app/soc/content/css/soc-090120.css
app/soc/content/images/purrBottom.png
app/soc/content/images/purrInfo.png
app/soc/content/images/purrTop.png
app/soc/templates/soc/base.html
app/soc/views/helper/params.py
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/app/jquery/jquery-purr.js	Sat Mar 07 14:49:03 2009 +0000
@@ -0,0 +1,180 @@
+/**
+ * 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 );
+
--- a/app/soc/content/css/soc-090120.css	Sat Mar 07 00:33:39 2009 +0000
+++ b/app/soc/content/css/soc-090120.css	Sat Mar 07 14:49:03 2009 +0000
@@ -186,6 +186,11 @@
   width: 200px;
 }
 
+td.formfieldvalue input:focus {
+  background-color: #FFFF99;
+  font-weight: bold;
+}
+
 td.formfieldvalue textarea {
   width: 100%;
 }
@@ -237,6 +242,45 @@
   padding: 3px;
 }
 
+/* TOOLTIPS */
+
+#purr-container {
+  position:fixed;
+  bottom:0;
+  right:0;
+}
+
+.tooltip {
+  position: relative;
+  width: 300px;
+}
+
+.tooltip .close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: block;
+  width: 18px;
+  height: 17px;
+  text-indent: -9999px;
+  background: url('/soc/content/images/purrClose.png') no-repeat 0 10px;
+}
+.tooltip-body {
+  min-height: 50px;
+  padding: 22px 22px 0 22px;
+  background: url('/soc/content/images/purrTop.png') no-repeat left top;
+  color: #f9f9f9;
+}
+.tooltip-body img	{width: 50px; margin: 0 10px 0 0; float: left;}
+.tooltip-body h3	{margin: 0; font-size: 1.1em;}
+.tooltip-body p		{margin: 5px 0 0 60px; font-size: 0.8em; line-height: 1.4em;}
+
+.tooltip-bottom {
+	height: 22px;
+	background: url('/soc/content/images/purrBottom.png') no-repeat left top;
+}
+
+
 #logo {
   padding-right: 18px;
   position: absolute;
Binary file app/soc/content/images/purrBottom.png has changed
Binary file app/soc/content/images/purrInfo.png has changed
Binary file app/soc/content/images/purrTop.png has changed
--- a/app/soc/templates/soc/base.html	Sat Mar 07 00:33:39 2009 +0000
+++ b/app/soc/templates/soc/base.html	Sat Mar 07 14:49:03 2009 +0000
@@ -47,6 +47,9 @@
   {% if uses_menu %}
   <script type='text/javascript' src="/soc/content/js/menu-081108.js"></script>
   {% endif %}
+  {% if uses_jq_purr %}
+    <script type='text/javascript' src="/jquery/jquery-purr.js"></script>
+  {% endif %}
   {% if uses_jq_bt %}
   <script type='text/javascript' src="/soc/content/js/tips-081027.js"></script>
   {% endif %}
@@ -207,6 +210,10 @@
 
   <div id="body">
 
+  {% if uses_jq_purr %}
+    <div id="purr-container"></div>
+  {% endif %}
+
    <div style="line-height: 140%;">
   {% block body %}
   {% if body_content %}
--- a/app/soc/views/helper/params.py	Sat Mar 07 00:33:39 2009 +0000
+++ b/app/soc/views/helper/params.py	Sat Mar 07 14:49:03 2009 +0000
@@ -55,6 +55,7 @@
     'jq_autocomplete',
     'jq_bgiframe',
     'jq_bt',
+    'jq_purr',
     'jq_datetimepicker',
     'jq_progressbar',
     'jq_thickbox',
@@ -235,7 +236,7 @@
   new_params['js_uses_list'] = ['jq', 'menu']
   new_params['js_uses_show'] = ['jq', 'menu']
   new_params['js_uses_edit'] = ['jq', 'menu', 'tinymce', 'jq_bt',
-                                'jq_autocomplete']
+                                'jq_purr','jq_autocomplete']
 
   new_params['error_public'] = 'soc/%(module_name)s/error.html' % params
   new_params['error_export'] = new_params['error_public']