jquery.makeCollapsible: add plainMode support

When .makeCollapsible() is used on a <ol>/<ul> list, the toggler is
inserted as the zeroth list item and clicking is causes all the other
list items to be hidden separately, one by one.

This hiding behavior is applied even when using custom togglers placed
outside of the list. This has some pretty serious performance
considerations when applied to large lists or tables (more than
~25 items/rows).

Enter plainMode. In combination with custom togglers, it makes all
types of elements to be treated the same and hidden/shown as a whole.

Change-Id: Idd9429b20d70741af72657feef26e1c95c76d51f

diff --git a/resources/jquery/jquery.makeCollapsible.js b/resources/jquery/jquery.makeCollapsible.js
index def2c60..e8e59d0 100644 (file)
--- a/resources/jquery/jquery.makeCollapsible.js
+++ b/resources/jquery/jquery.makeCollapsible.js
@@ -49,7 +49,7 @@
 
                // Handle different kinds of elements
 
-               if ( $collapsible.is( 'table' ) ) {
+               if ( !options.plainMode && $collapsible.is( 'table' ) ) {
                        // Tables
                        $containers = $collapsible.find( '> tbody > tr' );
                        if ( $defaultToggle ) {
@@ -70,7 +70,7 @@
                                $containers.stop( true, true ).fadeIn();
                        }
 
-               } else if ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) {
+               } else if ( !options.plainMode && ( $collapsible.is( 'ul' ) || $collapsible.is( 'ol' ) ) ) {
                        // Lists
                        $containers = $collapsible.find( '> li' );
                        if ( $defaultToggle ) {
@@ -93,7 +93,7 @@
                        $collapsibleContent = $collapsible.find( '> .mw-collapsible-content' );
 
                        // If a collapsible-content is defined, act on it
-                       if ( $collapsibleContent.length ) {
+                       if ( !options.plainMode && $collapsibleContent.length ) {
                                if ( action === 'collapse' ) {
                                        if ( options.instantHide ) {
                                                $collapsibleContent.hide();
@@ -236,6 +236,11 @@
         *   for this collapsible element. By default, if the collapsible element
         *   has an id attribute like 'mw-customcollapsible-XXX', elements with a
         *   *class* of 'mw-customtoggle-XXX' are made togglers for it.
+        * - plainMode: boolean, whether to use a "plain mode" when making the
+        *   element collapsible - that is, hide entire tables and lists (instead
+        *   of hiding only all rows but first of tables, and hiding each list
+        *   item separately for lists) and don't wrap other elements in
+        *   div.mw-collapsible-content. May only be used with custom togglers.
         */
        $.fn.makeCollapsible = function ( options ) {
                return this.each(function () {