| Index: trunk/extensions/UsabilityInitiative/css/vector.expandableSearch.css |
| — | — | @@ -0,0 +1,10 @@ |
| | 2 | +.expandableField { |
| | 3 | + display: block; |
| | 4 | + float: left; |
| | 5 | +} |
| | 6 | +#simpleSearch { |
| | 7 | + overflow: auto; |
| | 8 | +} |
| | 9 | +div#simpleSearch button#searchButton { |
| | 10 | + margin: 0.4em 0 0 0; |
| | 11 | +} |
| Index: trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ExpandableSearch.js |
| — | — | @@ -0,0 +1,43 @@ |
| | 2 | +/* JavaScript for ExpandableSearch extension */ |
| | 3 | +$j( document ).ready( function() { |
| | 4 | + |
| | 5 | + // Only use this function in conjuction with the Vector skin |
| | 6 | + if( !wgVectorEnabledModules.expandablesearch || skin != 'vector' ) { |
| | 7 | + return true; |
| | 8 | + } |
| | 9 | + $j( '#searchInput' ) |
| | 10 | + .expandableField( { |
| | 11 | + 'beforeExpand': function( context ) { |
| | 12 | + // animate the containers border |
| | 13 | + $j( this ) |
| | 14 | + .parent() |
| | 15 | + .animate( { |
| | 16 | + 'borderTopColor': '#a0d8ff', |
| | 17 | + 'borderLeftColor': '#a0d8ff', |
| | 18 | + 'borderRightColor': '#a0d8ff', |
| | 19 | + 'borderBottomColor': '#a0d8ff' }, 'fast' ); |
| | 20 | + }, |
| | 21 | + 'beforeCondense': function( context ) { |
| | 22 | + // animate the containers border |
| | 23 | + $j( this ) |
| | 24 | + .parent() |
| | 25 | + .animate( { |
| | 26 | + 'borderTopColor': '#aaaaaa', |
| | 27 | + 'borderLeftColor': '#aaaaaa', |
| | 28 | + 'borderRightColor': '#aaaaaa', |
| | 29 | + 'borderBottomColor': '#aaaaaa' }, 'fast' ); |
| | 30 | + }, |
| | 31 | + 'afterExpand': function( context ) { |
| | 32 | + //trigger the collapsible tabs resize handler |
| | 33 | + if ( typeof $j.collapsibleTabs != 'undefined' ){ |
| | 34 | + $j.collapsibleTabs.handleResize(); |
| | 35 | + } |
| | 36 | + }, |
| | 37 | + 'afterCondense': function( context ) { |
| | 38 | + //trigger the collapsible tabs resize handler |
| | 39 | + if ( typeof $j.collapsibleTabs != 'undefined' ){ |
| | 40 | + $j.collapsibleTabs.handleResize(); |
| | 41 | + } |
| | 42 | + } |
| | 43 | + } ); |
| | 44 | +}); |
| Index: trunk/extensions/UsabilityInitiative/Vector/Vector.php |
| — | — | @@ -23,6 +23,7 @@ |
| 24 | 24 | 'collapsiblenav' => array( 'global' => true, 'user' => true ), |
| 25 | 25 | 'collapsibletabs' => array( 'global' => true, 'user' => false ), |
| 26 | 26 | 'editwarning' => array( 'global' => false, 'user' => true ), |
| | 27 | + 'expandablesearch' => array( 'global' => true, 'user' => true ), |
| 27 | 28 | 'footercleanup' => array( 'global' => false, 'user' => false ), |
| 28 | 29 | 'simplesearch' => array( 'global' => true, 'user' => false ), |
| 29 | 30 | ); |
| Index: trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php |
| — | — | @@ -14,6 +14,7 @@ |
| 15 | 15 | 'raw' => array( |
| 16 | 16 | array( 'src' => 'Modules/CollapsibleNav/CollapsibleNav.js', 'version' => 12 ), |
| 17 | 17 | array( 'src' => 'Modules/CollapsibleTabs/CollapsibleTabs.js', 'version' => 8 ), |
| | 18 | + array( 'src' => 'Modules/ExpandableSearch/ExpandableSearch.js', 'version' => 2 ), |
| 18 | 19 | array( 'src' => 'Modules/EditWarning/EditWarning.js', 'version' => 8 ), |
| 19 | 20 | array( 'src' => 'Modules/FooterCleanup/FooterCleanup.js', 'version' => 5 ), |
| 20 | 21 | array( 'src' => 'Modules/SimpleSearch/SimpleSearch.js', 'version' => 11 ), |
| — | — | @@ -58,6 +59,8 @@ |
| 59 | 60 | 'vector-editwarning-warning', |
| 60 | 61 | ), |
| 61 | 62 | ), |
| | 63 | + 'expandablesearch' => array( |
| | 64 | + ), |
| 62 | 65 | 'footercleanup' => array( |
| 63 | 66 | ), |
| 64 | 67 | 'simplesearch' => array( |
| Index: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php |
| — | — | @@ -20,6 +20,7 @@ |
| 21 | 21 | 'raw' => array( |
| 22 | 22 | array( 'src' => 'css/suggestions.css', 'version' => 14 ), |
| 23 | 23 | array( 'src' => 'css/vector.collapsibleNav.css', 'version' => 9 ), |
| | 24 | + array( 'src' => 'css/vector.expandableSearch.css', 'version' => 1 ), |
| 24 | 25 | array( 'src' => 'css/vector.footerCleanup.css', 'version' => 2 ), |
| 25 | 26 | array( 'src' => 'css/wikiEditor.css', 'version' => 13 ), |
| 26 | 27 | array( 'src' => 'css/wikiEditor.dialogs.css', 'version' => 29 ), |
| Index: trunk/extensions/UsabilityInitiative/js/plugins/jquery.expandableField.js |
| — | — | @@ -18,23 +18,24 @@ |
| 19 | 19 | |
| 20 | 20 | $.expandableField = { |
| 21 | 21 | /** |
| 22 | | - * Cancel any delayed updateSuggestions() call and inform the user so |
| 23 | | - * they can cancel their result fetching if they use AJAX or something |
| | 22 | + * Expand the field, make the callback |
| 24 | 23 | */ |
| 25 | 24 | expandField: function( e, context ) { |
| | 25 | + context.config.beforeExpand.call( context.data.$field, context ); |
| 26 | 26 | context.data.$field |
| 27 | | - .css( { 'display' : 'inline-block' } ) |
| 28 | | - .animate( { 'width': context.data.expandedWidth } ); |
| | 27 | + .animate( { 'width': context.data.expandedWidth }, 'fast', function() { |
| | 28 | + context.config.afterExpand.call( this, context ); |
| | 29 | + } ); |
| 29 | 30 | }, |
| 30 | 31 | /** |
| 31 | | - * Restore the text the user originally typed in the textbox, before it was overwritten by highlight(). This |
| 32 | | - * restores the value the currently displayed suggestions are based on, rather than the value just before |
| 33 | | - * highlight() overwrote it; the former is arguably slightly more sensible. |
| | 32 | + * Condense the field, make the callback |
| 34 | 33 | */ |
| 35 | 34 | condenseField: function( e, context ) { |
| | 35 | + context.config.beforeCondense.call( context.data.$field, context ); |
| 36 | 36 | context.data.$field |
| 37 | | - .css( { 'display' : 'inline-block' } ) |
| 38 | | - .animate( { 'width': context.data.condensedWidth, 'display': 'inline'} ); |
| | 37 | + .animate( { 'width': context.data.condensedWidth }, 'fast', function() { |
| | 38 | + context.config.afterCondense.call( this, context ); |
| | 39 | + } ); |
| 39 | 40 | }, |
| 40 | 41 | /** |
| 41 | 42 | * Sets the value of a property, and updates the widget accordingly |
| — | — | @@ -65,23 +66,30 @@ |
| 66 | 67 | if ( context == null ) { |
| 67 | 68 | context = { |
| 68 | 69 | config: { |
| | 70 | + // callback function for before collapse |
| | 71 | + 'beforeCondense': function( context ) {}, |
| | 72 | + // callback function for before expand |
| | 73 | + 'beforeExpand': function( context ) {}, |
| | 74 | + // callback function for after collapse |
| | 75 | + 'afterCondense': function( context ) {}, |
| | 76 | + // callback function for after expand |
| | 77 | + 'afterExpand': function( context ) {}, |
| 69 | 78 | } |
| 70 | 79 | }; |
| 71 | 80 | } |
| 72 | 81 | |
| 73 | 82 | /* API */ |
| 74 | | - |
| 75 | 83 | // Handle various calling styles |
| 76 | 84 | if ( args.length > 0 ) { |
| 77 | 85 | if ( typeof args[0] == 'object' ) { |
| 78 | 86 | // Apply set of properties |
| 79 | 87 | for ( var key in args[0] ) { |
| 80 | | - $.suggestions.configure( context, key, args[0][key] ); |
| | 88 | + $.expandableField.configure( context, key, args[0][key] ); |
| 81 | 89 | } |
| 82 | 90 | } else if ( typeof args[0] == 'string' ) { |
| 83 | 91 | if ( args.length > 1 ) { |
| 84 | 92 | // Set property values |
| 85 | | - $.suggestions.configure( context, args[0], args[1] ); |
| | 93 | + $.expandableField.configure( context, args[0], args[1] ); |
| 86 | 94 | } else if ( returnValue == null ) { |
| 87 | 95 | // Get property values, but don't give access to internal data - returns only the first |
| 88 | 96 | returnValue = ( args[0] in context.config ? undefined : context.config[args[0]] ); |
| — | — | @@ -102,11 +110,11 @@ |
| 103 | 111 | }; |
| 104 | 112 | |
| 105 | 113 | $( this ) |
| 106 | | - .addClass( 'expandableField-condensed' ) |
| | 114 | + .addClass( 'expandableField' ) |
| 107 | 115 | .focus( function( e ) { |
| 108 | 116 | $.expandableField.expandField( e, context ); |
| 109 | 117 | } ) |
| 110 | | - .blur( function( e ) { |
| | 118 | + .delayedBind( 250, 'blur', function( e ) { |
| 111 | 119 | $.expandableField.condenseField( e, context ); |
| 112 | 120 | } ); |
| 113 | 121 | } |