From af7097f02f063be82f0e99c8b555e6897757e713 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bartosz=20Dziewo=C5=84ski?= <matma.rex@gmail.com>
Date: Thu, 8 Dec 2022 23:42:29 +0100
Subject: [PATCH] Enable collapsible content in mobile talk page lede content

Bug: T323639
Change-Id: I3cfc8e7337172b44156a7f3bed9ff134c0851475
---
 includes/Hooks/PageHooks.php |  7 +++++++
 modules/LedeSectionDialog.js | 15 +++++++++++++++
 2 files changed, 22 insertions(+)

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 );
 };