resources/src/mediawiki.action/mediawiki.action.view.metadata.js

   1 /*!
   2  * Exif metadata display for MediaWiki file uploads
   3  *
   4  * Add an expand/collapse link and collapse by default if set to
   5  * (with JS disabled, user will see all items)
   6  *
   7  * See also ImagePage.php#makeMetadataTable (creates the HTML)
   8  */
   9 ( function () {
  10         $( function () {
  11                 var $tables = $( '.mw_metadata' );
  12                 if ( !$tables.find( '.mw-metadata-collapsible, .collapsable' ).length ) {
  13                         // No collapsible rows present on this page
  14                         return;
  15                 }
  16                 $tables.each( function () {
  17                         var $link,
  18                                 expandText = mw.msg( 'metadata-expand' ),
  19                                 collapseText = mw.msg( 'metadata-collapse' ),
  20                                 $table = $( this );
  21
  22                         $link = $( '<a>' )
  23                                 .text( expandText )
  24                                 .attr( {
  25                                         role: 'button',
  26                                         tabindex: 0
  27                                 } )
  28                                 .on( 'click keypress', function ( e ) {
  29                                         if (
  30                                                 e.type === 'click' ||
  31                                                 e.type === 'keypress' && e.which === 13
  32                                         ) {
  33                                                 // eslint-disable-next-line no-jquery/no-class-state
  34                                                 if ( $table.hasClass( 'collapsed' ) ) {
  35                                                         // From collapsed to expanded. Button will now collapse.
  36                                                         $( this ).text( collapseText );
  37                                                 } else {
  38                                                         // From expanded to collapsed. Button will now expand.
  39                                                         $( this ).text( expandText );
  40                                                 }
  41                                                 // eslint-disable-next-line no-jquery/no-class-state
  42                                                 $table.toggleClass( 'collapsed' );
  43                                         }
  44                                 } );
  45
  46                         $table.find( 'tbody' ).append(
  47                                 $( '<tr>' ).addClass( 'mw-metadata-show-hide-extended' ).append(
  48                                         $( '<td>' ).prop( 'colspan', 2 ).append( $link )
  49                                 )
  50                         );
  51                 } );
  52         } );
  53 }() );