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 * @param {jQuery.Event} e Event
24 * @param {Object} context
26 expandField: function ( e
, context
) {
27 context
.config
.beforeExpand
.call( context
.data
.$field
, context
);
29 .animate( { width
: context
.data
.expandedWidth
}, 'fast', function () {
30 context
.config
.afterExpand
.call( this, context
);
34 * Condense the field, make the callback
36 * @param {jQuery.Event} e Event
37 * @param {Object} context
39 condenseField: function ( e
, context
) {
40 context
.config
.beforeCondense
.call( context
.data
.$field
, context
);
42 .animate( { width
: context
.data
.condensedWidth
}, 'fast', function () {
43 context
.config
.afterCondense
.call( this, context
);
47 * Sets the value of a property, and updates the widget accordingly
49 * @param {Object} context
50 * @param {string} property Name of property
51 * @param {Mixed} value Value to set property with
53 configure: function ( context
, property
, value
) {
54 // TODO: Validate creation using fallback values
55 context
.config
[ property
] = value
;
60 $.fn
.expandableField = function () {
62 // Multi-context fields
66 $( this ).each( function () {
67 var key
, context
, timeout
;
69 /* Construction / Loading */
71 context
= $( this ).data( 'expandableField-context' );
73 // TODO: Do we need to check both null and undefined?
74 if ( context
=== undefined || context
=== null ) {
77 // callback function for before collapse
78 beforeCondense: function () {},
80 // callback function for before expand
81 beforeExpand: function () {},
83 // callback function for after collapse
84 afterCondense: function () {},
86 // callback function for after expand
87 afterExpand: function () {},
89 // Whether the field should expand to the left or the right -- defaults to left
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
] );
103 } else if ( typeof args
[ 0 ] === 'string' ) {
104 if ( args
.length
> 1 ) {
105 // Set property values
106 $.expandableField
.configure( context
, args
[ 0 ], args
[ 1 ] );
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 ] ] );
118 if ( context
.data
=== undefined ) {
120 // The width of the field in it's condensed state
121 condensedWidth
: $( this ).width(),
123 // The width of the field in it's expanded state
124 expandedWidth
: $( this ).width() * 2,
126 // Reference to the field
131 .addClass( 'expandableField' )
132 .focus( function ( e
) {
133 clearTimeout( timeout
);
134 $.expandableField
.expandField( e
, context
);
136 .blur( function ( e
) {
137 timeout
= setTimeout( function () {
138 $.expandableField
.condenseField( e
, context
);
142 // Store the context for next time
143 $( this ).data( 'expandableField-context', context
);
145 return returnValue
!== undefined ? returnValue
: $( this );