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

   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                         loadPage( this.href );
  61                         e.preventDefault();
  62                 } );
  63
  64                 $container.find( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
  65                         loadPage( this.action + '?' + $( this ).serialize() );
  66                         e.preventDefault();
  67                 } );
  68         }
  69
  70         $( function () {
  71                 if ( mw.config.get( 'wgNamespaceNumber' ) !== 6 ) {
  72                         return;
  73                 }
  74                 $multipageimage = $( 'table.multipageimage' );
  75                 if ( !$multipageimage.length ) {
  76                         return;
  77                 }
  78
  79                 bindPageNavigation( $multipageimage );
  80
  81                 // Update the url using the History API (if available)
  82                 if ( history.pushState && history.replaceState ) {
  83                         history.replaceState( { tag: 'mw-pagination' }, '' );
  84                         $( window ).on( 'popstate', function ( e ) {
  85                                 var state = e.originalEvent.state;
  86                                 if ( state && state.tag === 'mw-pagination' ) {
  87                                         loadPage( location.href, true );
  88                                 }
  89                         } );
  90                 }
  91         } );
  92 }( mediaWiki, jQuery ) );