resources/src/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                  * @param {jQuery.Event} e Event
  24                  * @param {Object} context
  25                  */
  26                 expandField: function ( e, context ) {
  27                         context.config.beforeExpand.call( context.data.$field, context );
  28                         context.data.$field
  29                                 .animate( { width: context.data.expandedWidth }, 'fast', function () {
  30                                         context.config.afterExpand.call( this, context );
  31                                 } );
  32                 },
  33                 /**
  34                  * Condense the field, make the callback
  35                  *
  36                  * @param {jQuery.Event} e Event
  37                  * @param {Object} context
  38                  */
  39                 condenseField: function ( e, context ) {
  40                         context.config.beforeCondense.call( context.data.$field, context );
  41                         context.data.$field
  42                                 .animate( { width: context.data.condensedWidth }, 'fast', function () {
  43                                         context.config.afterCondense.call( this, context );
  44                                 } );
  45                 },
  46                 /**
  47                  * Sets the value of a property, and updates the widget accordingly
  48                  *
  49                  * @param {Object} context
  50                  * @param {string} property Name of property
  51                  * @param {Mixed} value Value to set property with
  52                  */
  53                 configure: function ( context, property, value ) {
  54                         // TODO: Validate creation using fallback values
  55                         context.config[ property ] = value;
  56                 }
  57
  58         };
  59
  60         $.fn.expandableField = function () {
  61
  62                 // Multi-context fields
  63                 var returnValue,
  64                         args = arguments;
  65
  66                 $( this ).each( function () {
  67                         var key, context, timeout;
  68
  69                         /* Construction / Loading */
  70
  71                         context = $( this ).data( 'expandableField-context' );
  72
  73                         // TODO: Do we need to check both null and undefined?
  74                         if ( context === undefined || context === null ) {
  75                                 context = {
  76                                         config: {
  77                                                 // callback function for before collapse
  78                                                 beforeCondense: function () {},
  79
  80                                                 // callback function for before expand
  81                                                 beforeExpand: function () {},
  82
  83                                                 // callback function for after collapse
  84                                                 afterCondense: function () {},
  85
  86                                                 // callback function for after expand
  87                                                 afterExpand: function () {},
  88
  89                                                 // Whether the field should expand to the left or the right -- defaults to left
  90                                                 expandToLeft: true
  91                                         }
  92                                 };
  93                         }
  94
  95                         /* API */
  96                         // Handle various calling styles
  97                         if ( args.length > 0 ) {
  98                                 if ( typeof args[ 0 ] === 'object' ) {
  99                                         // Apply set of properties
 100                                         for ( key in args[ 0 ] ) {
 101                                                 $.expandableField.configure( context, key, args[ 0 ][ key ] );
 102                                         }
 103                                 } else if ( typeof args[ 0 ] === 'string' ) {
 104                                         if ( args.length > 1 ) {
 105                                                 // Set property values
 106                                                 $.expandableField.configure( context, args[ 0 ], args[ 1 ] );
 107
 108                                         // TODO: Do we need to check both null and undefined?
 109                                         } else if ( returnValue === null || returnValue === undefined ) {
 110                                                 // Get property values, but don't give access to internal data - returns only the first
 111                                                 returnValue = ( args[ 0 ] in context.config ? undefined : context.config[ args[ 0 ] ] );
 112                                         }
 113                                 }
 114                         }
 115
 116                         /* Initialization */
 117
 118                         if ( context.data === undefined ) {
 119                                 context.data = {
 120                                         // The width of the field in it's condensed state
 121                                         condensedWidth: $( this ).width(),
 122
 123                                         // The width of the field in it's expanded state
 124                                         expandedWidth: $( this ).width() * 2,
 125
 126                                         // Reference to the field
 127                                         $field: $( this )
 128                                 };
 129
 130                                 $( this )
 131                                         .addClass( 'expandableField' )
 132                                         .focus( function ( e ) {
 133                                                 clearTimeout( timeout );
 134                                                 $.expandableField.expandField( e, context );
 135                                         } )
 136                                         .blur( function ( e ) {
 137                                                 timeout = setTimeout( function () {
 138                                                         $.expandableField.condenseField( e, context );
 139                                                 }, 250 );
 140                                         } );
 141                         }
 142                         // Store the context for next time
 143                         $( this ).data( 'expandableField-context', context );
 144                 } );
 145                 return returnValue !== undefined ? returnValue : $( this );
 146         };
 147
 148 }( jQuery ) );