/**
* 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>
* @class jQuery.plugin.makeCollapsible
*/
( function ( $, mw ) {
-
/**
* Handler for a click on a collapsible toggler.
*
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?
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 );
};