resources/jquery/jquery.expandableField.js

   1 /**
   2  * This plugin provides functionality to expand a text box on focus to double it's current width
   3  *
   4  * Usage:
   5  *
   6  * Set options:
   7  *              $('#textbox').expandableField( { option1: value1, option2: value2 } );
   8  *              $('#textbox').expandableField( option, value );
   9  * Get option:
  10  *              value = $('#textbox').expandableField( option );
  11  * Initialize:
  12  *              $('#textbox').expandableField();
  13  *
  14  * Options:
  15  *
  16  */
  17 ( function( $ ) {
  18
  19 $.expandableField = {
  20         /**
  21          * Expand the field, make the callback
  22          */
  23         expandField: function( e, context ) {
  24                 context.config.beforeExpand.call( context.data.$field, context );
  25                 context.data.$field
  26                         .animate( { 'width': context.data.expandedWidth }, 'fast', function() {
  27                                 context.config.afterExpand.call( this, context );
  28                         } );
  29         },
  30         /**
  31          * Condense the field, make the callback
  32          */
  33         condenseField: function( e, context ) {
  34                 context.config.beforeCondense.call( context.data.$field, context );
  35                 context.data.$field
  36                         .animate( { 'width': context.data.condensedWidth }, 'fast', function() {
  37                                 context.config.afterCondense.call( this, context );
  38                         } );
  39         },
  40         /**
  41          * Sets the value of a property, and updates the widget accordingly
  42          * @param property String Name of property
  43          * @param value Mixed Value to set property with
  44          */
  45         configure: function( context, property, value ) {
  46                 // Validate creation using fallback values
  47                 switch( property ) {
  48                         default:
  49                                 context.config[property] = value;
  50                                 break;
  51                 }
  52         }
  53
  54 };
  55 $.fn.expandableField = function() {
  56
  57         // Multi-context fields
  58         var returnValue = null;
  59         var args = arguments;
  60
  61         $( this ).each( function() {
  62
  63                 /* Construction / Loading */
  64
  65                 var context = $( this ).data( 'expandableField-context' );
  66                 if ( context == null ) {
  67                         context = {
  68                                 config: {
  69                                         // callback function for before collapse
  70                                         'beforeCondense': function( context ) {},
  71                                         // callback function for before expand
  72                                         'beforeExpand': function( context ) {},
  73                                         // callback function for after collapse
  74                                         'afterCondense': function( context ) {},
  75                                         // callback function for after expand
  76                                         'afterExpand': function( context ) {},
  77                                         // Whether the field should expand to the left or the right -- defaults to left
  78                                         'expandToLeft': true
  79                                 }
  80                         };
  81                 }
  82
  83                 /* API */
  84                 // Handle various calling styles
  85                 if ( args.length > 0 ) {
  86                         if ( typeof args[0] == 'object' ) {
  87                                 // Apply set of properties
  88                                 for ( var key in args[0] ) {
  89                                         $.expandableField.configure( context, key, args[0][key] );
  90                                 }
  91                         } else if ( typeof args[0] == 'string' ) {
  92                                 if ( args.length > 1 ) {
  93                                         // Set property values
  94                                         $.expandableField.configure( context, args[0], args[1] );
  95                                 } else if ( returnValue == null ) {
  96                                         // Get property values, but don't give access to internal data - returns only the first
  97                                         returnValue = ( args[0] in context.config ? undefined : context.config[args[0]] );
  98                                 }
  99                         }
 100                 }
 101
 102                 /* Initialization */
 103
 104                 if ( typeof context.data == 'undefined' ) {
 105                         context.data = {
 106                                 // The width of the field in it's condensed state
 107                                 'condensedWidth': $( this ).width(),
 108                                 // The width of the field in it's expanded state
 109                                 'expandedWidth': $( this ).width() * 2,
 110                                 // Reference to the field
 111                                 '$field': $( this )
 112                         };
 113
 114                         $( this )
 115                                 .addClass( 'expandableField' )
 116                                 .focus( function( e ) {
 117                                         $.expandableField.expandField( e, context );
 118                                 } )
 119                                 .delayedBind( 250, 'blur', function( e ) {
 120                                         $.expandableField.condenseField( e, context );
 121                                 } );
 122                 }
 123                 // Store the context for next time
 124                 $( this ).data( 'expandableField-context', context );
 125         } );
 126         return returnValue !== null ? returnValue : $(this);
 127 };
 128
 129 } )( jQuery );