Merge "Add default edit rate limit of 90 edits/minute for all users"

[lhc/web/wiklou.git] / resources / src / jquery / jquery.makeCollapsible.js

diff --git a/resources/src/jquery/jquery.makeCollapsible.js b/resources/src/jquery/jquery.makeCollapsible.js
index aa76d6d..e355196 100644 (file)
--- a/resources/src/jquery/jquery.makeCollapsible.js
+++ b/resources/src/jquery/jquery.makeCollapsible.js
@@ -1,5 +1,8 @@
 /**
  * jQuery makeCollapsible
+ * Note: To avoid performance issues such as reflows, several styles are
+ * shipped in mediawiki.makeCollapsible.styles to reserve space for the toggle control. Please
+ * familiarise yourself with that CSS before making any changes to this code.
  *
  * Dual licensed:
  * - CC BY 3.0 <http://creativecommons.org/licenses/by/3.0>
@@ -8,7 +11,6 @@
  * @class jQuery.plugin.makeCollapsible
  */
 ( function ( $, mw ) {
-
        /**
         * Handler for a click on a collapsible toggler.
         *
@@ -215,7 +217,7 @@
         *   expand the element. Default: the 'data-expandtext' attribute of the
         *   collapsible element or the content of 'collapsible-expand' message.
         * @param {boolean} [options.collapsed] Whether to collapse immediately. By default
-        *   collapse only if the elements has the 'mw-collapsible' class.
+        *   collapse only if the element has the 'mw-collapsed' class.
         * @param {jQuery} [options.$customTogglers] Elements to be used as togglers
         *   for this collapsible element. By default, if the collapsible element
         *   has an id attribute like 'mw-customcollapsible-XXX', elements with a
@@ -243,7 +245,11 @@
                        if ( $collapsible.data( 'mw-made-collapsible' ) ) {
                                return;
                        } else {
-                               $collapsible.data( 'mw-made-collapsible', true );
+                               // Let CSS know that it no longer needs to worry about flash of unstyled content.
+                               // This will allow mediawiki.makeCollapsible.styles to disable temporary pseudo elements, that
+                               // are needed to avoid a flash of unstyled content.
+                               $collapsible.addClass( 'mw-made-collapsible' )
+                                       .data( 'mw-made-collapsible', true );
                        }
 
                        // Use custom text or default?
@@ -264,14 +270,12 @@
                        buildDefaultToggleLink = function () {
                                return $( '<a class="mw-collapsible-text"></a>' )
                                        .text( collapseText )
-                                       .wrap( '<span class="mw-collapsible-toggle"></span>' )
+                                       .wrap( '<span class="mw-collapsible-toggle mw-collapsible-toggle-default"></span>' )
                                        .parent()
                                        .attr( {
                                                role: 'button',
                                                tabindex: 0
                                        } )
-                                       .prepend( '<span>[</span>' )
-                                       .append( '<span>]</span>' )
                                        .on( 'click.mw-collapsible keypress.mw-collapsible', actionHandler );
                        };