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                                                 if ( $table.hasClass( 'collapsed' ) ) {
  34                                                         // From collapsed to expanded. Button will now collapse.
  35                                                         $( this ).text( collapseText );
  36                                                 } else {
  37                                                         // From expanded to collapsed. Button will now expand.
  38                                                         $( this ).text( expandText );
  39                                                 }
  40                                                 $table.toggleClass( 'collapsed' );
  41                                         }
  42                                 } );
  43
  44                         $table.find( 'tbody' ).append(
  45                                 $( '<tr class="mw-metadata-show-hide-extended"></tr>' ).append(
  46                                         $( '<td colspan="2"></td>' ).append( $link )
  47                                 )
  48                         );
  49                 } );
  50
  51                 // Initial collapsed state
  52                 // (For back-compat with cached HTML from before ImagePage.php
  53                 // did this by default)
  54                 $tables.addClass( 'collapsed' );
  55         } );
  56
  57 }() );