2 * This plugin provides functionality to expand a text box on focus to double it's current width
7 * $('#textbox').expandableField( { option1: value1, option2: value2 } );
8 * $('#textbox').expandableField( option, value );
10 * value = $('#textbox').expandableField( option );
12 * $('#textbox').expandableField();
21 * Expand the field, make the callback
23 expandField: function( e, context ) {
24 context.config.beforeExpand.call( context.data.$field, context );
26 .animate( { 'width': context.data.expandedWidth }, 'fast', function() {
27 context.config.afterExpand.call( this, context );
31 * Condense the field, make the callback
33 condenseField: function( e, context ) {
34 context.config.beforeCondense.call( context.data.$field, context );
36 .animate( { 'width': context.data.condensedWidth }, 'fast', function() {
37 context.config.afterCondense.call( this, context );
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
45 configure: function( context, property, value ) {
46 // Validate creation using fallback values
49 context.config[property] = value;
55 $.fn.expandableField = function() {
57 // Multi-context fields
58 var returnValue = null;
61 $( this ).each( function() {
63 /* Construction / Loading */
65 var context = $( this ).data( 'expandableField-context' );
66 if ( context == null ) {
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
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] );
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]] );
104 if ( typeof context.data == 'undefined' ) {
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
115 .addClass( 'expandableField' )
116 .focus( function( e ) {
117 $.expandableField.expandField( e, context );
119 .delayedBind( 250, 'blur', function( e ) {
120 $.expandableField.condenseField( e, context );
123 // Store the context for next time
124 $( this ).data( 'expandableField-context', context );
126 return returnValue !== null ? returnValue : $(this);