2 * This plugin provides functionallity 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 {String} property Name of property
43 * @param {Mixed} value 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);