From: Krinkle Date: Sat, 19 Feb 2011 17:46:30 +0000 (+0000) Subject: Improving jquery.makeCollapsible & small fixed mw.util X-Git-Tag: 1.31.0-rc.0~31888 X-Git-Url: http://git.cyclocoop.org/%24self?a=commitdiff_plain;h=d2a23f2e22d679bcc9a65a67fe17f1fba8231609;p=lhc%2Fweb%2Fwiklou.git Improving jquery.makeCollapsible & small fixed mw.util * Making makeCollapsible more DRY. * Small optimalizations and fixes in mw.util --- diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js index 2b6e688db6..3500ec2f18 100644 --- a/resources/jquery/jquery.makeCollapsible.js +++ b/resources/jquery/jquery.makeCollapsible.js @@ -26,7 +26,7 @@ $.fn.makeCollapsible = function() { that = this, collapsetext = $(this).attr( 'data-collapsetext' ), expandtext = $(this).attr( 'data-expandtext' ), - toggleElement = function( $collapsible, action, $defaultToggle ) { + toggleElement = function( $collapsible, action, $defaultToggle, instantHide ) { // Validate parameters if ( !$collapsible.jquery ) { // $collapsible must be an instance of jQuery return; @@ -35,10 +35,11 @@ $.fn.makeCollapsible = function() { // action must be string with 'expand' or 'collapse' return; } - if ( typeof $defaultToggle !== 'undefined' && !$defaultToggle.jquery ) { + if ( $defaultToggle && !$defaultToggle.jquery ) { // is optional, but if passed must be an instance of jQuery return; } + var $containers = null; if ( action == 'collapse' ) { @@ -47,20 +48,29 @@ $.fn.makeCollapsible = function() { // Hide all table rows of this table // Slide doens't work with tables, but fade does as of jQuery 1.1.3 // http://stackoverflow.com/questions/467336#920480 - - if ( $defaultToggle.jquery ) { + $containers = $collapsible.find( '>tbody>tr' ); + if ( $defaultToggle && $defaultToggle.jquery ) { // Exclude tablerow containing togglelink - $collapsible.find( '>tbody>tr' ).not( $defaultToggle.parent().parent() ).stop(true, true).fadeOut(); + $containers.not( $defaultToggle.parent().parent() ).stop(true, true).fadeOut(); } else { - $collapsible.find( '>tbody>tr' ).stop( true, true ).fadeOut(); + if ( instantHide ) { + $containers.hide(); + } else { + $containers.stop( true, true ).fadeOut(); + } } } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) { - if ( $defaultToggle.jquery ) { + $containers = $collapsible.find( '> li' ); + if ( $defaultToggle && $defaultToggle.jquery ) { // Exclude list-item containing togglelink - $collapsible.find( '> li' ).not( $defaultToggle.parent() ).stop( true, true ).slideUp(); + $containers.not( $defaultToggle.parent() ).stop( true, true ).slideUp(); } else { - $collapsible.find( '> li' ).stop( true, true ).slideUp(); + if ( instantHide ) { + $containers.hide(); + } else { + $containers.stop( true, true ).slideUp(); + } } } else { //
,

etc. @@ -68,7 +78,11 @@ $.fn.makeCollapsible = function() { // If a collapsible-content is defined, collapse it if ( $collapsibleContent.size() ) { - $collapsibleContent.slideUp(); + if ( instantHide ) { + $collapsibleContent.hide(); + } else { + $collapsibleContent.slideUp(); + } // Otherwise assume this is a customcollapse with a remote toggle // .. and there is no collapsible-content because the entire element should be toggled @@ -85,19 +99,21 @@ $.fn.makeCollapsible = function() { // Expand the element if ( $collapsible.is( 'table' ) ) { - if ( $defaultToggle.jquery ) { + $containers = $collapsible.find( '>tbody>tr' ); + if ( $defaultToggle && $defaultToggle.jquery ) { // Exclude tablerow containing togglelink - $collapsible.find( '>tbody>tr' ).not( $defaultToggle.parent().parent() ).stop(true, true).fadeIn(); + $containers.not( $defaultToggle.parent().parent() ).stop(true, true).fadeIn(); } else { - $collapsible.find( '>tbody>tr' ).stop(true, true).fadeIn(); + $containers.stop(true, true).fadeIn(); } } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) { - if ( $defaultToggle.jquery ) { + $containers = $collapsible.find( '> li' ); + if ( $defaultToggle && $defaultToggle.jquery ) { // Exclude list-item containing togglelink - $collapsible.find( '> li' ).not( $defaultToggle.parent() ).stop( true, true ).slideDown(); + $containers.not( $defaultToggle.parent() ).stop( true, true ).slideDown(); } else { - $collapsible.find( '> li' ).stop( true, true ).slideDown(); + $containers.stop( true, true ).slideDown(); } } else { //

,

etc. @@ -293,6 +309,7 @@ $.fn.makeCollapsible = function() { // The collapsible element could have multiple togglers // To toggle the initial state only click one of them (ie. the first one, eq(0) ) // Else it would go like: hide,show,hide,show for each toggle link. + toggleElement( $that, 'collapse', null, /* instantHide = */ true ); $toggleLink.eq(0).click(); } } ); diff --git a/resources/mediawiki.util/mediawiki.util.js b/resources/mediawiki.util/mediawiki.util.js index 4dabdfb46a..1b395a6d27 100644 --- a/resources/mediawiki.util/mediawiki.util.js +++ b/resources/mediawiki.util/mediawiki.util.js @@ -77,8 +77,8 @@ } else { // #content is present on almost all if not all skins. Most skins (the above cases) - // have #content too, but as a outer wrapper instead of the article text container. - // The skins that don't have an outer wrapper have #content for everything + // have #content too, but as an outer wrapper instead of the article text container. + // The skins that don't have an outer wrapper do have #content for everything // so it's a good fallback mw.util.$content = $( '#content' ); } @@ -323,17 +323,16 @@ * * @param portlet ID of the target portlet ( 'p-cactions' or 'p-personal' etc.) * @param href Link URL - * @param text Link text (will be automatically converted to lower - * case by CSS for p-cactions in Monobook) + * @param text Link text * @param id ID of the new item, should be unique and preferably have * the appropriate prefix ( 'ca-', 'pt-', 'n-' or 't-' ) * @param tooltip Text to show when hovering over the link, without accesskey suffix * @param accesskey Access key to activate this link (one character, try - * to avoid conflicts. Use $( '[accesskey=x' ).get() in the console to + * to avoid conflicts. Use $( '[accesskey=x]' ).get() in the console to * see if 'x' is already used. - * @param nextnode DOM node or jQuery-selector of the item that the new + * @param nextnode DOM node or jQuery-selector string of the item that the new * item should be added before, should be another item in the same - * list will be ignored if not the so + * list, it will be ignored otherwise * * @return The DOM node of the new item (a LI element, or A element for * older skins) or null. @@ -352,28 +351,28 @@ // Some skins don't have any portlets // just add it to the bottom of their 'sidebar' element as a fallback - switch ( skin ) { + switch ( mw.config.get( 'skin' ) ) { case 'standard' : case 'cologneblue' : - $("#quickbar").append($link.after( '
' )); - return $link.get(0); + $( '#quickbar' ).append( $link.after( '
' ) ); + return $link[0]; case 'nostalgia' : - $("#searchform").before($link).before( ' | ' ); - return $link.get(0); + $( '#searchform' ).before( $link).before( ' | ' ); + return $link[0]; default : // Skins like chick, modern, monobook, myskin, simple, vector... // Select the specified portlet - var $portlet = $( '#' + portlet); + var $portlet = $( '#' + portlet ); if ( $portlet.length === 0 ) { return null; } // Select the first (most likely only) unordered list inside the portlet - var $ul = $portlet.find( 'ul' ).eq( 0 ); + var $ul = $portlet.find( 'ul' ); // If it didn't have an unordered list yet, create it - if ($ul.length === 0) { + if ( $ul.length === 0 ) { // If there's no

inside, append it to the portlet directly - if ($portlet.find( 'div' ).length === 0) { + if ( $portlet.find( 'div:first' ).length === 0 ) { $portlet.append( '
    ' ); } else { // otherwise if there's a div (such as div.body or div.pBody) @@ -409,7 +408,7 @@ } // Append using DOM-element passing - if ( nextnode && nextnode.parentNode == $ul.get( 0 ) ) { + if ( nextnode && nextnode.parentNode == $ul[0] ) { $(nextnode).before( $item ); } else { // If the jQuery selector isn't found within the
      , just @@ -422,7 +421,7 @@ } } - return $item.get( 0 ); + return $item[0]; } },