# HG changeset patch # User Sverre Rabbelier # Date 1236437343 0 # Node ID 2e7b76f20878ffa1cdf57fe8ffcf30b695fdd190 # Parent 9609e2a0d7d727924113602b875ab4ec7618d906 Add the jquery-purr plugin Patch by: "Mario Ferraro" Reviewed by: to-be-reviewed diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/jquery/jquery-purr.js --- /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 = '
'; + } + + // 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 ); + diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/content/css/soc-090120.css --- 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; diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/content/images/purrBottom.png Binary file app/soc/content/images/purrBottom.png has changed diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/content/images/purrInfo.png Binary file app/soc/content/images/purrInfo.png has changed diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/content/images/purrTop.png Binary file app/soc/content/images/purrTop.png has changed diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/templates/soc/base.html --- 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 %} {% endif %} + {% if uses_jq_purr %} + + {% endif %} {% if uses_jq_bt %} {% endif %} @@ -207,6 +210,10 @@
+ {% if uses_jq_purr %} +
+ {% endif %} +
{% block body %} {% if body_content %} diff -r 9609e2a0d7d7 -r 2e7b76f20878 app/soc/views/helper/params.py --- 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']