221e6bbe597e1db5bfd03081ff7927abd1de8421
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
43 * @param {String} property Name of property
44 * @param {Mixed} value Value to set property with
46 configure: function ( context
, property
, value
) {
47 // TODO: Validate creation using fallback values
48 context
.config
[ property
] = value
;
53 $.fn
.expandableField = function () {
55 // Multi-context fields
59 $( this ).each( function () {
60 var key
, context
, timeout
;
62 /* Construction / Loading */
64 context
= $( this ).data( 'expandableField-context' );
66 // TODO: Do we need to check both null and undefined?
67 if ( context
=== undefined || context
=== null ) {
70 // callback function for before collapse
71 beforeCondense: function () {},
73 // callback function for before expand
74 beforeExpand: function () {},
76 // callback function for after collapse
77 afterCondense: function () {},
79 // callback function for after expand
80 afterExpand: function () {},
82 // Whether the field should expand to the left or the right -- defaults to left
89 // Handle various calling styles
90 if ( args
.length
> 0 ) {
91 if ( typeof args
[ 0 ] === 'object' ) {
92 // Apply set of properties
93 for ( key
in args
[ 0 ] ) {
94 $.expandableField
.configure( context
, key
, args
[ 0 ][ key
] );
96 } else if ( typeof args
[ 0 ] === 'string' ) {
97 if ( args
.length
> 1 ) {
98 // Set property values
99 $.expandableField
.configure( context
, args
[ 0 ], args
[ 1 ] );
101 // TODO: Do we need to check both null and undefined?
102 } else if ( returnValue
=== null || returnValue
=== undefined ) {
103 // Get property values, but don't give access to internal data - returns only the first
104 returnValue
= ( args
[ 0 ] in context
.config
? undefined : context
.config
[ args
[ 0 ] ] );
111 if ( context
.data
=== undefined ) {
113 // The width of the field in it's condensed state
114 condensedWidth
: $( this ).width(),
116 // The width of the field in it's expanded state
117 expandedWidth
: $( this ).width() * 2,
119 // Reference to the field
124 .addClass( 'expandableField' )
125 .focus( function ( e
) {
126 clearTimeout( timeout
);
127 $.expandableField
.expandField( e
, context
);
129 .blur( function ( e
) {
130 timeout
= setTimeout( function () {
131 $.expandableField
.condenseField( e
, context
);
135 // Store the context for next time
136 $( this ).data( 'expandableField-context', context
);
138 return returnValue
!== undefined ? returnValue
: $( this );