resources/mediawiki.page/mediawiki.page.image.pagination.js

   1 /**
   2  * Change multi-page image navigation so that the current page display can be changed
   3  * without a page reload. Currently, the only image formats that can be multi-page images are
   4  * PDF and DjVu files
   5  */
   6 ( function (mw, $) {
   7         // Use jQuery's load function to specifically select and replace table.multipageimage's child
   8         // tr with the new page's table.multipageimage's tr element.
   9         // table.multipageimage always has only one row.
  10         function loadPage( page ) {
  11                 var $multipageimage = $( 'table.multipageimage' ),
  12                         $spinner = $.createSpinner( {
  13                                 size: 'large',
  14                                 type: 'block'
  15                         } );
  16
  17                 // Set the spinner's dimensions equal to the table's dimensions so that
  18                 // the current scroll position is not lost after the table is emptied prior to
  19                 // its contents being updated
  20                 $spinner.css( {
  21                         height: $multipageimage.find( 'tr' ).height(),
  22                         width: $multipageimage.find( 'tr' ).width()
  23                 } );
  24
  25                 $multipageimage.empty().append( $spinner ).load(
  26                         page + ' table.multipageimage tr',
  27                         ajaxifyPageNavigation
  28                 );
  29         }
  30
  31         function ajaxifyPageNavigation() {
  32                 // Intercept the default action of the links in the thumbnail navigation
  33                 $( '.multipageimagenavbox' ).one( 'click', 'a', function ( e ) {
  34                         loadPage( this.href );
  35                         e.preventDefault();
  36                 } );
  37
  38                 // Prevent the submission of the page select form and instead call loadPage
  39                 $( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
  40                         loadPage( this.action + '?' + $( this ).serialize() );
  41                         e.preventDefault();
  42                 } );
  43         }
  44
  45         $( document ).ready( function() {
  46                 // The presence of table.multipageimage signifies that this file is a multi-page image
  47                 if( mw.config.get( 'wgNamespaceNumber' ) === 6 && $( 'table.multipageimage' ).length !== 0 ) {
  48                         ajaxifyPageNavigation();
  49                 }
  50         } );
  51 }( mediaWiki, jQuery ) );