r81999 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r81998‎ | r81999 | r82000 >
Date:22:30, 11 February 2011
Author:krinkle
Status:ok
Tags:
Comment:
Fixing issue with multiple premade toggles in a non-custom collapsible element.
The problem is that when one of the toggles is clicked the classname is only changed on the toggle that was clicked. The others will stil have the wrong class. On of the areas in which this may lead to weird behaviour is the :hover styles for the up- and downarrow cursors.

Previously would bind to all of them :

<pre>
= .find( '> .mw-collapsible-toggle' );
// ^ may match multiple ones
</pre>

... which is good. But in the click handler:

<pre>
[..].bind( 'click.mw-collapse', function( e ){
toggleLinkPremade( this, e );
} );
</pre>

... only called the function with 'this'. This has been changed to pass all of instead.

This problem was discovered in the following scenario. Where an .mw-collapsible has three children. The first two are clickable and are the togglers for the third child.
http://translatewiki.net/w/i.php?title=Sandbox&amp;oldid=2692006
Modified paths:
  • /trunk/phase3/resources/jquery/jquery.makeCollapsible.js (modified) (history)

Diff [purge]

Index: trunk/phase3/resources/jquery/jquery.makeCollapsible.js
@@ -152,9 +152,8 @@
153153 return;
154154 },
155155 // Toggles collapsible and togglelink class
156 - toggleLinkPremade = function( that, e ) {
157 - var $that = $(that),
158 - $collapsible = $that.closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
 156+ toggleLinkPremade = function( $that, e ) {
 157+ var $collapsible = $that.eq(0).closest( '.mw-collapsible.mw-made-collapsible' ).toggleClass( 'mw-collapsed' );
159158 e.preventDefault();
160159
161160 // It's expanded right now
@@ -245,7 +244,7 @@
246245 $firstRowCells.eq(-1).prepend( $toggleLink );
247246 } else {
248247 $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ){
249 - toggleLinkPremade( this, e );
 248+ toggleLinkPremade( $toggle, e );
250249 } );
251250 }
252251
@@ -264,7 +263,7 @@
265264 $that.prepend( $toggleLink.wrap( '<li class="mw-collapsible-toggle-li">' ).parent() );
266265 } else {
267266 $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ){
268 - toggleLinkPremade( this, e );
 267+ toggleLinkPremade( $toggle, e );
269268 } );
270269 }
271270
@@ -282,7 +281,7 @@
283282 $that.prepend( $toggleLink );
284283 } else {
285284 $toggleLink = $toggle.unbind( 'click.mw-collapse' ).bind( 'click.mw-collapse', function( e ){
286 - toggleLinkPremade( this, e );
 285+ toggleLinkPremade( $toggle, e );
287286 } );
288287 }
289288 }
@@ -291,7 +290,10 @@
292291 // Initial state (only for those that are not custom)
293292 if ( $that.hasClass( 'mw-collapsed' ) && $that.attr( 'id' ).indexOf( 'mw-customcollapsible-' ) !== 0 ) {
294293 $that.removeClass( 'mw-collapsed' );
295 - $toggleLink.click();
 294+ // The collapsible element could have multiple togglers
 295+ // To toggle the initial state only click one of them (ie. the first one, eq(0) )
 296+ // Else it would go like: hide,show,hide,show for each toggle link.
 297+ $toggleLink.eq(0).click();
296298 }
297299 } );
298300 };

Status & tagging log