Improving jquery.makeCollapsible & small fixed mw.util
authorKrinkle <krinkle@users.mediawiki.org>
Sat, 19 Feb 2011 17:46:30 +0000 (17:46 +0000)
committerKrinkle <krinkle@users.mediawiki.org>
Sat, 19 Feb 2011 17:46:30 +0000 (17:46 +0000)
* Making makeCollapsible more DRY.
* Small optimalizations and fixes in mw.util

resources/jquery/jquery.makeCollapsible.js
resources/mediawiki.util/mediawiki.util.js

index 2b6e688..3500ec2 100644 (file)
@@ -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 { // <div>, <p> 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 { // <div>, <p> 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();
                }
        } );
index 4dabdfb..1b395a6 100644 (file)
@@ -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' );
                                        }
                 *
                 * @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.
 
                        // 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( '<br />' ));
-                               return $link.get(0);
+                               $( '#quickbar' ).append( $link.after( '<br />' ) );
+                               return $link[0];
                        case 'nostalgia' :
-                               $("#searchform").before($link).before( ' &#124; ' );
-                               return $link.get(0);
+                               $( '#searchform' ).before( $link).before( ' &#124; ' );
+                               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 <div> inside, append it to the portlet directly
-                                       if ($portlet.find( 'div' ).length === 0) {
+                                       if ( $portlet.find( 'div:first' ).length === 0 ) {
                                                $portlet.append( '<ul/>' );
                                        } else {
                                                // otherwise if there's a div (such as div.body or div.pBody)
                                }
 
                                // 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 <ul>, just
                                        }
                                }
 
-                               return $item.get( 0 );
+                               return $item[0];
                        }
                },