r66034 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r66033‎ | r66034 | r66035 >
Date:18:22, 7 May 2010
Author:tparscal
Status:ok
Tags:
Comment:
Improves CollapsiblNav by not leaving focus rectangles behind, while still allowing keyboard interaction.
Modified paths:
  • /trunk/extensions/UsabilityInitiative/Vector/Modules/CollapsibleNav/CollapsibleNav.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.combined.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.combined.min.js (modified) (history)
  • /trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php (modified) (history)

Diff [purge]

Index: trunk/extensions/UsabilityInitiative/Vector/Modules/CollapsibleNav/CollapsibleNav.js
@@ -24,6 +24,16 @@
2525 $j(this).addClass( 'collapsed' );
2626 }
2727 } );
 28+ // Use the same function for all navigation headings - don't repeat yourself
 29+ function toggle( $element ) {
 30+ $j.cookie( 'vector-nav-' + $element.parent().attr( 'id' ), $element.parent().is( '.collapsed' ) );
 31+ $element
 32+ .parent()
 33+ .toggleClass( 'expanded' )
 34+ .toggleClass( 'collapsed' )
 35+ .find( 'div.body' )
 36+ .slideToggle( 'fast' );
 37+ }
2838 // Toggle the selected menu's class and expand or collapse the menu
2939 $j( '#panel > div.portal > h5' )
3040 // Make it keyboard accessible
@@ -31,17 +41,12 @@
3242 // Make the space and enter keys act as a click
3343 .keydown( function( event ) {
3444 if ( event.which == 13 /* Enter */ || event.which == 32 /* Space */ ) {
35 - $j(this).click();
 45+ toggle( $j(this) );
3646 }
3747 } )
38 - .click( function() {
39 - $j.cookie( 'vector-nav-' + $j(this).parent().attr( 'id' ), $j(this).parent().is( '.collapsed' ) );
40 - $j(this)
41 - .parent()
42 - .toggleClass( 'expanded' )
43 - .toggleClass( 'collapsed' )
44 - .find( 'div.body' )
45 - .slideToggle( 'fast' );
 48+ .mousedown( function() {
 49+ toggle( $j(this) );
 50+ $j(this).blur();
4651 return false;
4752 } );
4853 } );
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.hooks.php
@@ -12,7 +12,7 @@
1313
1414 static $scripts = array(
1515 'raw' => array(
16 - array( 'src' => 'Modules/CollapsibleNav/CollapsibleNav.js', 'version' => 9 ),
 16+ array( 'src' => 'Modules/CollapsibleNav/CollapsibleNav.js', 'version' => 10 ),
1717 array( 'src' => 'Modules/CollapsibleTabs/CollapsibleTabs.js', 'version' => 8 ),
1818 array( 'src' => 'Modules/EditWarning/EditWarning.js', 'version' => 8 ),
1919 array( 'src' => 'Modules/FooterCleanup/FooterCleanup.js', 'version' => 5 ),
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.combined.js
@@ -24,6 +24,16 @@
2525 $j(this).addClass( 'collapsed' );
2626 }
2727 } );
 28+ // Use the same function for all navigation headings - don't repeat yourself
 29+ function toggle( $element ) {
 30+ $j.cookie( 'vector-nav-' + $element.parent().attr( 'id' ), $element.parent().is( '.collapsed' ) );
 31+ $element
 32+ .parent()
 33+ .toggleClass( 'expanded' )
 34+ .toggleClass( 'collapsed' )
 35+ .find( 'div.body' )
 36+ .slideToggle( 'fast' );
 37+ }
2838 // Toggle the selected menu's class and expand or collapse the menu
2939 $j( '#panel > div.portal > h5' )
3040 // Make it keyboard accessible
@@ -31,17 +41,12 @@
3242 // Make the space and enter keys act as a click
3343 .keydown( function( event ) {
3444 if ( event.which == 13 /* Enter */ || event.which == 32 /* Space */ ) {
35 - $j(this).click();
 45+ toggle( $j(this) );
3646 }
3747 } )
38 - .click( function() {
39 - $j.cookie( 'vector-nav-' + $j(this).parent().attr( 'id' ), $j(this).parent().is( '.collapsed' ) );
40 - $j(this)
41 - .parent()
42 - .toggleClass( 'expanded' )
43 - .toggleClass( 'collapsed' )
44 - .find( 'div.body' )
45 - .slideToggle( 'fast' );
 48+ .mousedown( function() {
 49+ toggle( $j(this) );
 50+ $j(this).blur();
4651 return false;
4752 } );
4853 } );
Index: trunk/extensions/UsabilityInitiative/Vector/Vector.combined.min.js
@@ -1,6 +1,7 @@
22
33 $j(document).ready(function(){if(!wgVectorEnabledModules.collapsiblenav){return true;}
4 -$j('#panel').addClass('collapsible-nav');$j('#panel > div.portal:first').addClass('expanded').find('div.body').show();$j('#panel > div.portal:not(:first)').each(function(i){var state=$j.cookie('vector-nav-'+$j(this).attr('id'));if(state=='true'||(state==null&&i<1)){$j(this).addClass('expanded').find('div.body').show();}else{$j(this).addClass('collapsed');}});$j('#panel > div.portal > h5').attr('tabindex',1).keydown(function(event){if(event.which==13||event.which==32){$j(this).click();}}).click(function(){$j.cookie('vector-nav-'+$j(this).parent().attr('id'),$j(this).parent().is('.collapsed'));$j(this).parent().toggleClass('expanded').toggleClass('collapsed').find('div.body').slideToggle('fast');return false;});});$j(document).ready(function(){if(!wgVectorEnabledModules.collapsibletabs){return true;}
 4+$j('#panel').addClass('collapsible-nav');$j('#panel > div.portal:first').addClass('expanded').find('div.body').show();$j('#panel > div.portal:not(:first)').each(function(i){var state=$j.cookie('vector-nav-'+$j(this).attr('id'));if(state=='true'||(state==null&&i<1)){$j(this).addClass('expanded').find('div.body').show();}else{$j(this).addClass('collapsed');}});function toggle($element){$j.cookie('vector-nav-'+$element.parent().attr('id'),$element.parent().is('.collapsed'));$element.parent().toggleClass('expanded').toggleClass('collapsed').find('div.body').slideToggle('fast');}
 5+$j('#panel > div.portal > h5').attr('tabindex',1).keydown(function(event){if(event.which==13||event.which==32){toggle($j(this));}}).mousedown(function(){toggle($j(this));$j(this).blur();return false;});});$j(document).ready(function(){if(!wgVectorEnabledModules.collapsibletabs){return true;}
56 var rtl=$j('body').is('.rtl');$j.collapsibleTabs.moveToCollapsed=function(ele){var $moving=$j(ele);$j.collapsibleTabs.getSettings($j($j.collapsibleTabs.getSettings($moving).expandedContainer)).shifting=true;var data=$j.collapsibleTabs.getSettings($moving);var target=data.collapsedContainer;$moving.css("position","relative").css((rtl?'left':'right'),0).animate({width:'1px'},"normal",function(){$j(this).hide();$j('<span class="placeholder" style="display:none;"></span>').insertAfter(this);$j(this).remove().prependTo(target).data('collapsibleTabsSettings',data);$j(this).attr('style','display:list-item;');$j.collapsibleTabs.getSettings($j($j.collapsibleTabs.getSettings($j(ele)).expandedContainer)).shifting=false;$j.collapsibleTabs.handleResize();});};$j.collapsibleTabs.moveToExpanded=function(ele){var $moving=$j(ele);$j.collapsibleTabs.getSettings($j($j.collapsibleTabs.getSettings($moving).expandedContainer)).shifting=true;var data=$j.collapsibleTabs.getSettings($moving);var $target=$j(data.expandedContainer).find('span.placeholder:first');var expandedWidth=data.expandedWidth;$moving.css("position","relative").css((rtl?'right':'left'),0).css('width','1px');$target.replaceWith($moving.remove().css('width','1px').data('collapsibleTabsSettings',data).animate({width:expandedWidth+"px"},"normal",function(){$j(this).attr('style','display:block;');$j.collapsibleTabs.getSettings($j($j.collapsibleTabs.getSettings($moving).expandedContainer)).shifting=false;$j.collapsibleTabs.handleResize();}));};$j('#p-views ul').bind("beforeTabCollapse",function(){if($j('#p-cactions').css('display')=='none')
67 $j("#p-cactions").addClass("filledPortlet").removeClass("emptyPortlet").find('h5').css('width','1px').animate({'width':'26px'},390);}).bind("beforeTabExpand",function(){if($j('#p-cactions li').length==1)
78 $j("#p-cactions h5").animate({'width':'1px'},370,function(){$j(this).attr('style','').parent().addClass("emptyPortlet").removeClass("filledPortlet");});}).collapsibleTabs({expandCondition:function(eleWidth){if(rtl){return($j('#right-navigation').position().left+$j('#right-navigation').width()+1)<($j('#left-navigation').position().left-eleWidth);}else{return($j('#left-navigation').position().left+$j('#left-navigation').width()+1)<($j('#right-navigation').position().left-eleWidth);}},collapseCondition:function(){if(rtl){return($j('#right-navigation').position().left+$j('#right-navigation').width())>$j('#left-navigation').position().left;}else{return($j('#left-navigation').position().left+$j('#left-navigation').width())>$j('#right-navigation').position().left;}}});});$j(document).ready(function(){if(!wgVectorEnabledModules.editwarning||$j('#wpTextbox1').size()==0){return true;}

Follow-up revisions

RevisionCommit summaryAuthorDate
r661491.16wmf4: MFT r66034, r66144, r66145, r66147, r66148catrope18:10, 10 May 2010

Status & tagging log