http://www.mediawiki.org/wiki/Special:Code/MediaWiki/66854
Revision: 66854 Author: adam Date: 2010-05-24 22:02:22 +0000 (Mon, 24 May 2010) Log Message: ----------- ExpandableSearch - completing the initial work Modified Paths: -------------- trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php trunk/extensions/UsabilityInitiative/Vector/Vector.php trunk/extensions/UsabilityInitiative/js/plugins/jquery.expandableField.js Added Paths: ----------- trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ExpandableSearch.js trunk/extensions/UsabilityInitiative/css/vector.expandableSearch.css Modified: trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php =================================================================== --- trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php 2010-05-24 22:00:06 UTC (rev 66853) +++ trunk/extensions/UsabilityInitiative/UsabilityInitiative.hooks.php 2010-05-24 22:02:22 UTC (rev 66854) @@ -20,6 +20,7 @@ 'raw' => array( array( 'src' => 'css/suggestions.css', 'version' => 14 ), array( 'src' => 'css/vector.collapsibleNav.css', 'version' => 9 ), + array( 'src' => 'css/vector.expandableSearch.css', 'version' => 1 ), array( 'src' => 'css/vector.footerCleanup.css', 'version' => 2 ), array( 'src' => 'css/wikiEditor.css', 'version' => 13 ), array( 'src' => 'css/wikiEditor.dialogs.css', 'version' => 29 ), Added: trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ExpandableSearch.js =================================================================== --- trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ExpandableSearch.js (rev 0) +++ trunk/extensions/UsabilityInitiative/Vector/Modules/ExpandableSearch/ExpandableSearch.js 2010-05-24 22:02:22 UTC (rev 66854) @@ -0,0 +1,43 @@ +/* JavaScript for ExpandableSearch extension */ +$j( document ).ready( function() { + + // Only use this function in conjuction with the Vector skin + if( !wgVectorEnabledModules.expandablesearch || skin != 'vector' ) { + return true; + } + $j( '#searchInput' ) + .expandableField( { + 'beforeExpand': function( context ) { + // animate the containers border + $j( this ) + .parent() + .animate( { + 'borderTopColor': '#a0d8ff', + 'borderLeftColor': '#a0d8ff', + 'borderRightColor': '#a0d8ff', + 'borderBottomColor': '#a0d8ff' }, 'fast' ); + }, + 'beforeCondense': function( context ) { + // animate the containers border + $j( this ) + .parent() + .animate( { + 'borderTopColor': '#aaaaaa', + 'borderLeftColor': '#aaaaaa', + 'borderRightColor': '#aaaaaa', + 'borderBottomColor': '#aaaaaa' }, 'fast' ); + }, + 'afterExpand': function( context ) { + //trigger the collapsible tabs resize handler + if ( typeof $j.collapsibleTabs != 'undefined' ){ + $j.collapsibleTabs.handleResize(); + } + }, + 'afterCondense': function( context ) { + //trigger the collapsible tabs resize handler + if ( typeof $j.collapsibleTabs != 'undefined' ){ + $j.collapsibleTabs.handleResize(); + } + } + } ); +}); Modified: trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php =================================================================== --- trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php 2010-05-24 22:00:06 UTC (rev 66853) +++ trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php 2010-05-24 22:02:22 UTC (rev 66854) @@ -14,6 +14,7 @@ 'raw' => array( array( 'src' => 'Modules/CollapsibleNav/CollapsibleNav.js', 'version' => 12 ), array( 'src' => 'Modules/CollapsibleTabs/CollapsibleTabs.js', 'version' => 8 ), + array( 'src' => 'Modules/ExpandableSearch/ExpandableSearch.js', 'version' => 2 ), array( 'src' => 'Modules/EditWarning/EditWarning.js', 'version' => 8 ), array( 'src' => 'Modules/FooterCleanup/FooterCleanup.js', 'version' => 5 ), array( 'src' => 'Modules/SimpleSearch/SimpleSearch.js', 'version' => 11 ), @@ -58,6 +59,8 @@ 'vector-editwarning-warning', ), ), + 'expandablesearch' => array( + ), 'footercleanup' => array( ), 'simplesearch' => array( Modified: trunk/extensions/UsabilityInitiative/Vector/Vector.php =================================================================== --- trunk/extensions/UsabilityInitiative/Vector/Vector.php 2010-05-24 22:00:06 UTC (rev 66853) +++ trunk/extensions/UsabilityInitiative/Vector/Vector.php 2010-05-24 22:02:22 UTC (rev 66854) @@ -23,6 +23,7 @@ 'collapsiblenav' => array( 'global' => true, 'user' => true ), 'collapsibletabs' => array( 'global' => true, 'user' => false ), 'editwarning' => array( 'global' => false, 'user' => true ), + 'expandablesearch' => array( 'global' => true, 'user' => true ), 'footercleanup' => array( 'global' => false, 'user' => false ), 'simplesearch' => array( 'global' => true, 'user' => false ), ); Added: trunk/extensions/UsabilityInitiative/css/vector.expandableSearch.css =================================================================== --- trunk/extensions/UsabilityInitiative/css/vector.expandableSearch.css (rev 0) +++ trunk/extensions/UsabilityInitiative/css/vector.expandableSearch.css 2010-05-24 22:02:22 UTC (rev 66854) @@ -0,0 +1,10 @@ +.expandableField { + display: block; + float: left; +} +#simpleSearch { + overflow: auto; +} +div#simpleSearch button#searchButton { + margin: 0.4em 0 0 0; +} Modified: trunk/extensions/UsabilityInitiative/js/plugins/jquery.expandableField.js =================================================================== --- trunk/extensions/UsabilityInitiative/js/plugins/jquery.expandableField.js 2010-05-24 22:00:06 UTC (rev 66853) +++ trunk/extensions/UsabilityInitiative/js/plugins/jquery.expandableField.js 2010-05-24 22:02:22 UTC (rev 66854) @@ -18,23 +18,24 @@ $.expandableField = { /** - * Cancel any delayed updateSuggestions() call and inform the user so - * they can cancel their result fetching if they use AJAX or something + * Expand the field, make the callback */ expandField: function( e, context ) { + context.config.beforeExpand.call( context.data.$field, context ); context.data.$field - .css( { 'display' : 'inline-block' } ) - .animate( { 'width': context.data.expandedWidth } ); + .animate( { 'width': context.data.expandedWidth }, 'fast', function() { + context.config.afterExpand.call( this, context ); + } ); }, /** - * Restore the text the user originally typed in the textbox, before it was overwritten by highlight(). This - * restores the value the currently displayed suggestions are based on, rather than the value just before - * highlight() overwrote it; the former is arguably slightly more sensible. + * Condense the field, make the callback */ condenseField: function( e, context ) { + context.config.beforeCondense.call( context.data.$field, context ); context.data.$field - .css( { 'display' : 'inline-block' } ) - .animate( { 'width': context.data.condensedWidth, 'display': 'inline'} ); + .animate( { 'width': context.data.condensedWidth }, 'fast', function() { + context.config.afterCondense.call( this, context ); + } ); }, /** * Sets the value of a property, and updates the widget accordingly @@ -65,23 +66,30 @@ if ( context == null ) { context = { config: { + // callback function for before collapse + 'beforeCondense': function( context ) {}, + // callback function for before expand + 'beforeExpand': function( context ) {}, + // callback function for after collapse + 'afterCondense': function( context ) {}, + // callback function for after expand + 'afterExpand': function( context ) {}, } }; } /* API */ - // Handle various calling styles if ( args.length > 0 ) { if ( typeof args[0] == 'object' ) { // Apply set of properties for ( var key in args[0] ) { - $.suggestions.configure( context, key, args[0][key] ); + $.expandableField.configure( context, key, args[0][key] ); } } else if ( typeof args[0] == 'string' ) { if ( args.length > 1 ) { // Set property values - $.suggestions.configure( context, args[0], args[1] ); + $.expandableField.configure( context, args[0], args[1] ); } else if ( returnValue == null ) { // Get property values, but don't give access to internal data - returns only the first returnValue = ( args[0] in context.config ? undefined : context.config[args[0]] ); @@ -102,11 +110,11 @@ }; $( this ) - .addClass( 'expandableField-condensed' ) + .addClass( 'expandableField' ) .focus( function( e ) { $.expandableField.expandField( e, context ); } ) - .blur( function( e ) { + .delayedBind( 250, 'blur', function( e ) { $.expandableField.condenseField( e, context ); } ); } _______________________________________________ MediaWiki-CVS mailing list MediaWiki-CVS@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs