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
   8         // Initialize ajax request variable
   9         var xhr;
  10
  11         // Use jQuery's load function to specifically select and replace table.multipageimage's child
  12         // tr with the new page's table.multipageimage's tr element.
  13         // table.multipageimage always has only one row.
  14         function loadPage( page, hist ) {
  15                 if ( xhr ) {
  16                         // Abort previous requests to prevent backlog created by
  17                         // repeatedly pressing back/forwards buttons
  18                         xhr.abort();
  19                 }
  20
  21                 var $multipageimage = $( 'table.multipageimage' ),
  22                         $spinner;
  23
  24                 // Add a new spinner if one doesn't already exist
  25                 if ( !$multipageimage.find( '.mw-spinner' ).length ) {
  26
  27                         $spinner = $.createSpinner( {
  28                                 size: 'large',
  29                                 type: 'block'
  30                         } )
  31                                 // Set the spinner's dimensions equal to the table's dimensions so that
  32                                 // the current scroll position is not lost after the table is emptied prior to
  33                                 // its contents being updated
  34                                 .css( {
  35                                         height: $multipageimage.find( 'tr' ).height(),
  36                                         width: $multipageimage.find( 'tr' ).width()
  37                                 } );
  38
  39                         $multipageimage.empty().append( $spinner );
  40                 }
  41
  42                 xhr = $.ajax( {
  43                         url: page,
  44                         success: function ( data ) {
  45                                 // Load the page
  46                                 $multipageimage.empty().append( $( data ).find( 'table.multipageimage tr' ) );
  47                                 // Fire hook because the page's content has changed
  48                                 mw.hook( 'wikipage.content' ).fire( $multipageimage );
  49                                 // Set up the new page for pagination
  50                                 ajaxifyPageNavigation();
  51                                 // Add new page of image to history.  To preserve the back-forwards chain in the browser,
  52                                 // if the user gets here via the back/forward button, don't update the history.
  53                                 if ( window.history && history.pushState && !hist ) {
  54                                         history.pushState( { url: page }, document.title, page );
  55                                 }
  56                         }
  57                 } );
  58         }
  59
  60         function ajaxifyPageNavigation() {
  61                 // Intercept the default action of the links in the thumbnail navigation
  62                 $( '.multipageimagenavbox' ).one( 'click', 'a', function ( e ) {
  63                         loadPage( this.href );
  64                         e.preventDefault();
  65                 } );
  66
  67                 // Prevent the submission of the page select form and instead call loadPage
  68                 $( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
  69                         loadPage( this.action + '?' + $( this ).serialize() );
  70                         e.preventDefault();
  71                 } );
  72         }
  73
  74         $( document ).ready( function () {
  75                 // The presence of table.multipageimage signifies that this file is a multi-page image
  76                 if ( mw.config.get( 'wgNamespaceNumber' ) === 6 && $( 'table.multipageimage' ).length !== 0 ) {
  77                         ajaxifyPageNavigation();
  78
  79                         // Set up history.pushState (if available), so that when the user browses to a new page of
  80                         // the same file, the browser's history is updated. If the user clicks the back/forward button
  81                         // in the midst of navigating a file's pages, load the page inline.
  82                         if ( window.history && history.pushState && history.replaceState ) {
  83                                 history.replaceState( { url: window.location.href }, '' );
  84                                 $( window ).on( 'popstate', function ( e ) {
  85                                         var state = e.originalEvent.state;
  86                                         if ( state ) {
  87                                                 loadPage( state.url, true );
  88                                         }
  89                                 } );
  90                         }
  91                 }
  92         } );
  93 }( mediaWiki, jQuery ) );