From: Timo Tijhof <krinklemail@gmail.com>
Date: Mon, 4 Dec 2017 23:50:06 +0000 (+0000)
Subject: ImagePage: Clean up metadata.js collapsing
X-Git-Tag: 1.31.0-rc.0~1288^2~1
X-Git-Url: https://git.cyclocoop.org/%27.%24link.%27?a=commitdiff_plain;h=463e51203cef97cabe84a83c02a7f9325e8bf760;p=lhc%2Fweb%2Fwiklou.git

ImagePage: Clean up metadata.js collapsing

In preparation for trying out a CSS-only approach for the initial
collapse that doesn't cause the expanded view to flash first.

Bug: T182047
Change-Id: I42941ccb05d5525599a0209f0f33db9fe836580b
---

diff --git a/includes/page/ImagePage.php b/includes/page/ImagePage.php
index 67f9e09fbb..c774eb5b58 100644
--- a/includes/page/ImagePage.php
+++ b/includes/page/ImagePage.php
@@ -257,7 +257,7 @@ class ImagePage extends Article {
 				$class = str_replace( ' ', '_', $v['id'] );
 				if ( $type == 'collapsed' ) {
 					// Handled by mediawiki.action.view.metadata module.
-					$class .= ' collapsable';
+					$class .= ' mw-metadata-collapsible';
 				}
 				$r .= Html::rawElement( 'tr',
 					[ 'class' => $class ],
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.metadata.css b/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
index b07965ee3c..b9f50acea5 100644
--- a/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
+++ b/resources/src/mediawiki.action/mediawiki.action.view.metadata.css
@@ -1,7 +1,9 @@
 /*!
  * Hide collapsable rows in a collapsed table.
  */
-table.collapsed tr.collapsable {
+
+.mw_metadata.collapsed .mw-metadata-collapsible,
+.mw_metadata.collapsed tr.collapsable {
 	display: none;
 }
 
@@ -9,14 +11,14 @@ table.collapsed tr.collapsable {
  * Exclude user interface elements from selection.
  */
 .mw-metadata-show-hide-extended {
-	-moz-user-select: none;
 	-webkit-user-select: none;
+	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
 }
 
 @media print {
-	tr.mw-metadata-show-hide-extended {
+	.mw_metadata .mw-metadata-show-hide-extended {
 		display: none;
 	}
 }
diff --git a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
index 0d000c9ba9..7217d36822 100644
--- a/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.metadata.js
@@ -8,45 +8,48 @@
  */
 ( function ( mw, $ ) {
 	$( function () {
-		var $row, $col, $link,
-			showText = mw.msg( 'metadata-expand' ),
-			hideText = mw.msg( 'metadata-collapse' ),
-			$table = $( '#mw_metadata' ),
-			$tbody = $table.find( 'tbody' );
-
-		if ( !$tbody.find( '.collapsable' ).length ) {
+		var $tables = $( '.mw_metadata' );
+		if ( !$tables.find( '.mw-metadata-collapsible, .collapsable' ).length ) {
+			// No collapsible rows present on this page
 			return;
 		}
+		$tables.each( function () {
+			var $link,
+				expandText = mw.msg( 'metadata-expand' ),
+				collapseText = mw.msg( 'metadata-collapse' ),
+				$table = $( this );
 
-		$row = $( '<tr class="mw-metadata-show-hide-extended"></tr>' );
-		$col = $( '<td colspan="2"></td>' );
-
-		$link = $( '<a>' )
-			.text( showText )
-			.attr( {
-				role: 'button',
-				tabindex: 0
-			} )
-			.on( 'click keypress', function ( e ) {
-				if (
-					e.type === 'click' ||
-					e.type === 'keypress' && e.which === 13
-				) {
-					if ( $table.hasClass( 'collapsed' ) ) {
-						$( this ).text( hideText );
-					} else {
-						$( this ).text( showText );
+			$link = $( '<a>' )
+				.text( expandText )
+				.attr( {
+					role: 'button',
+					tabindex: 0
+				} )
+				.on( 'click keypress', function ( e ) {
+					if (
+						e.type === 'click' ||
+						e.type === 'keypress' && e.which === 13
+					) {
+						if ( $table.hasClass( 'collapsed' ) ) {
+							// From collapsed to expanded. Button will now collapse.
+							$( this ).text( collapseText );
+						} else {
+							// From expanded to collapsed. Button will now expand.
+							$( this ).text( expandText );
+						}
+						$table.toggleClass( 'collapsed' );
 					}
-					$table.toggleClass( 'expanded collapsed' );
-				}
-			} );
+				} );
 
-		$col.append( $link );
-		$row.append( $col );
-		$tbody.append( $row );
+			$table.find( 'tbody' ).append(
+				$( '<tr class="mw-metadata-show-hide-extended"></tr>' ).append(
+					$( '<td colspan="2"></td>' ).append( $link )
+				)
+			);
+		} );
 
 		// And collapse!
-		$table.addClass( 'collapsed' );
+		$tables.addClass( 'collapsed' );
 	} );
 
 }( mediaWiki, jQuery ) );