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 67f9e09..c774eb5 100644 (file)
--- 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 b07965e..b9f50ac 100644 (file)
--- 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 0d000c9..7217d36 100644 (file)
--- 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 ) );