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         'use strict';
  11
  12         $( () => {
  13                 const $tables = $( '.mw_metadata' );
  14                 if ( !$tables.find( '.mw-metadata-collapsible' ).length ) {
  15                         // No collapsible rows present on this page
  16                         return;
  17                 }
  18                 $tables.each( ( _, table ) => {
  19                         const expandText = mw.msg( 'metadata-expand' );
  20                         const collapseText = mw.msg( 'metadata-collapse' );
  21                         const $table = $( table );
  22
  23                         const $link = $( '<a>' )
  24                                 .text( expandText )
  25                                 .attr( {
  26                                         role: 'button',
  27                                         tabindex: 0
  28                                 } )
  29                                 .on( 'click keypress', ( e ) => {
  30                                         if (
  31                                                 e.type === 'click' ||
  32                                                 e.type === 'keypress' && e.which === 13
  33                                         ) {
  34                                                 // eslint-disable-next-line no-jquery/no-class-state
  35                                                 if ( $table.hasClass( 'collapsed' ) ) {
  36                                                         // From collapsed to expanded. Button will now collapse.
  37                                                         $( e.currentTarget ).text( collapseText );
  38                                                 } else {
  39                                                         // From expanded to collapsed. Button will now expand.
  40                                                         $( e.currentTarget ).text( expandText );
  41                                                 }
  42                                                 // eslint-disable-next-line no-jquery/no-class-state
  43                                                 $table.toggleClass( 'collapsed' );
  44                                         }
  45                                 } );
  46
  47                         $table.find( 'tbody' ).append(
  48                                 $( '<tr>' ).addClass( 'mw-metadata-show-hide-extended' ).append(
  49                                         $( '<td>' ).prop( 'colspan', 2 ).append( $link )
  50                                 )
  51                         );
  52                 } );
  53         } );
  54 }() );