diff --git a/includes/Hooks/PageHooks.php b/includes/Hooks/PageHooks.php index 80c897c2a..03ad5b2a9 100644 --- a/includes/Hooks/PageHooks.php +++ b/includes/Hooks/PageHooks.php @@ -230,6 +230,13 @@ class PageHooks implements ] ) ) ) ); + + // Preload jquery.makeCollapsible for LedeSectionDialog. + // Using the same approach as in Skin::getDefaultModules in MediaWiki core. + if ( strpos( $output->getHTML(), 'mw-collapsible' ) !== false ) { + $output->addModules( 'jquery.makeCollapsible' ); + $output->addModuleStyles( 'jquery.makeCollapsible.styles' ); + } } } } diff --git a/modules/LedeSectionDialog.js b/modules/LedeSectionDialog.js index 945cc840e..d6ab5509d 100644 --- a/modules/LedeSectionDialog.js +++ b/modules/LedeSectionDialog.js @@ -36,7 +36,22 @@ LedeSectionDialog.prototype.initialize = function () { LedeSectionDialog.prototype.getSetupProcess = function ( data ) { return LedeSectionDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { + var dialog = this; this.contentLayout.$element.empty().append( data.$content ); + + // Enable collapsible content (T323639), which is normally not handled on mobile (T111565). + // It's safe to do this twice if that changes (makeCollapsible() checks if each element was + // already handled). Using the same approach as in 'mediawiki.page.ready' in MediaWiki core. + var $collapsible = this.contentLayout.$element.find( '.mw-collapsible' ); + if ( $collapsible.length ) { + // This module is also preloaded in PageHooks to avoid visual jumps when things collapse. + mw.loader.using( 'jquery.makeCollapsible' ).then( function () { + $collapsible.makeCollapsible(); + $collapsible.on( 'afterExpand.mw-collapsible afterCollapse.mw-collapsible', function () { + dialog.updateSize(); + } ); + } ); + } }, this ); };