[Summary view] [Print] [Text view]

   1  /*!
   2   * Implement AJAX navigation for multi-page images so the user may browse without a full page reload.
   3   */
   4  ( function ( mw, $ ) {
   5      var jqXhr, $multipageimage, $spinner;
   6  
   7      /* Fetch the next page and use jQuery to swap the table.multipageimage contents.
   8       * @param {string} url
   9       * @param {boolean} [hist=false] Whether this is a load triggered by history navigation (if
  10       *   true, this function won't push a new history state, for the browser did so already).
  11       */
  12  	function loadPage( url, hist ) {
  13          var $tr;
  14          if ( jqXhr ) {
  15              // Prevent race conditions and piling up pending requests
  16              jqXhr.abort();
  17              jqXhr = undefined;
  18          }
  19  
  20          // Add a new spinner if one doesn't already exist
  21          if ( !$spinner ) {
  22              $tr = $multipageimage.find( 'tr' );
  23              $spinner = $.createSpinner( {
  24                  size: 'large',
  25                  type: 'block'
  26              } )
  27                  // Copy the old content dimensions equal so that the current scroll position is not
  28                  // lost between emptying the table is and receiving the new contents.
  29                  .css( {
  30                      height: $tr.outerHeight(),
  31                      width: $tr.outerWidth()
  32                  } );
  33  
  34              $multipageimage.empty().append( $spinner );
  35          }
  36  
  37          // @todo Don't fetch the entire page. Ideally we'd only fetch the content portion or the data
  38          // (thumbnail urls) and update the interface manually.
  39          jqXhr = $.ajax( url ).done( function ( data ) {
  40              jqXhr = $spinner = undefined;
  41  
  42              // Replace table contents
  43              $multipageimage.empty().append( $( data ).find( 'table.multipageimage' ).contents() );
  44  
  45              bindPageNavigation( $multipageimage );
  46  
  47              // Fire hook because the page's content has changed
  48              mw.hook( 'wikipage.content' ).fire( $multipageimage );
  49  
  50              // Update browser history and address bar. But not if we came here from a history
  51              // event, in which case the url is already updated by the browser.
  52              if ( history.pushState && !hist ) {
  53                  history.pushState( { tag: 'mw-pagination' }, document.title, url );
  54              }
  55          } );
  56      }
  57  
  58  	function bindPageNavigation( $container ) {
  59          $container.find( '.multipageimagenavbox' ).one( 'click', 'a', function ( e ) {
  60              var page, uri;
  61  
  62              // Generate the same URL on client side as the one generated in ImagePage::openShowImage.
  63              // We avoid using the URL in the link directly since it could have been manipulated (bug 66608)
  64              page = Number( mw.util.getParamValue( 'page', this.href ) );
  65              uri = new mw.Uri( mw.util.wikiScript() )
  66                  .extend( { title: mw.config.get( 'wgPageName' ), page: page } )
  67                  .toString();
  68  
  69              loadPage( uri );
  70              e.preventDefault();
  71          } );
  72  
  73          $container.find( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
  74              loadPage( this.action + '?' + $( this ).serialize() );
  75              e.preventDefault();
  76          } );
  77      }
  78  
  79      $( function () {
  80          if ( mw.config.get( 'wgNamespaceNumber' ) !== 6 ) {
  81              return;
  82          }
  83          $multipageimage = $( 'table.multipageimage' );
  84          if ( !$multipageimage.length ) {
  85              return;
  86          }
  87  
  88          bindPageNavigation( $multipageimage );
  89  
  90          // Update the url using the History API (if available)
  91          if ( history.pushState && history.replaceState ) {
  92              history.replaceState( { tag: 'mw-pagination' }, '' );
  93              $( window ).on( 'popstate', function ( e ) {
  94                  var state = e.originalEvent.state;
  95                  if ( state && state.tag === 'mw-pagination' ) {
  96                      loadPage( location.href, true );
  97                  }
  98              } );
  99          }
 100      } );
 101  }( mediaWiki, jQuery ) );