[MediaWiki-commits] [Gerrit] jquery.makeCollapsible: add plainMode support - change (mediawiki/core)

[Matmarex (Code Review)]

Matmarex has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/54065


Change subject: jquery.makeCollapsible: add plainMode support
......................................................................

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 cutom togglers, it makes all
types of elements to be treated the same and hidden/shown as a whole.

Change-Id: Idd9429b20d70741af72657feef26e1c95c76d51f
---
M resources/jquery/jquery.makeCollapsible.js
1 file changed, 13 insertions(+), 4 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core 
refs/changes/65/54065/1

diff --git a/resources/jquery/jquery.makeCollapsible.js 
b/resources/jquery/jquery.makeCollapsible.js
index d67af36..dcd7eac 100644
--- 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();
@@ -234,11 +234,16 @@
         *   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 () {
                        var $collapsible, collapsetext, expandtext, $toggle, 
$toggleLink, $firstItem, collapsibleId,
-                               $customTogglers, firstval;
+                               $customTogglers, firstval, plainMode;
 
                        // Ensure class "mw-collapsible" is present in case 
.makeCollapsible()
                        // is called on element(s) that don't have it yet.
@@ -254,6 +259,9 @@
                        // Use custom text or default?
                        collapsetext = options.collapsetext || 
$collapsible.attr( 'data-collapsetext' ) || mw.msg( 'collapsible-collapse' );
                        expandtext = options.expandText || $collapsible.attr( 
'data-expandtext' ) || mw.msg( 'collapsible-expand' );
+
+                       // Handle plain mode
+                       plainMode = !!options.plainMode;
 
                        // Create toggle link with a space around the brackets 
(&nbsp;[text]&nbsp;)
                        $toggleLink =
@@ -288,6 +296,7 @@
                        // Bind the custom togglers
                        if ( $customTogglers && $customTogglers.length ) {
                                $customTogglers.on( 'click.mw-collapse', 
function ( e, options ) {
+                                       options = $.extend( { plainMode: 
plainMode }, options );
                                        toggleLinkCustom( $(this), e, options, 
$collapsible );
                                } );
 

-- 
To view, visit https://gerrit.wikimedia.org/r/54065
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Idd9429b20d70741af72657feef26e1c95c76d51f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Matmarex <matma....@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits