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                 cache = {},
   7                 cacheOrder = [];
   8
   9         /* Fetch the next page, caching up to 10 last-loaded pages.
  10          * @param {string} url
  11          * @return {jQuery.Promise}
  12          */
  13         function fetchPageData( url ) {
  14                 if ( jqXhr && jqXhr.abort ) {
  15                         // Prevent race conditions and piling up pending requests
  16                         jqXhr.abort();
  17                 }
  18                 jqXhr = undefined;
  19
  20                 // Try the cache
  21                 if ( cache[url] ) {
  22                         // Update access freshness
  23                         cacheOrder.splice( $.inArray( url, cacheOrder ), 1 );
  24                         cacheOrder.push( url );
  25                         return $.Deferred().resolve( cache[url] ).promise();
  26                 }
  27
  28                 // @todo Don't fetch the entire page. Ideally we'd only fetch the content portion or the data
  29                 // (thumbnail urls) and update the interface manually.
  30                 jqXhr = $.ajax( url ).then( function ( data ) {
  31                         return $( data ).find( 'table.multipageimage' ).contents();
  32                 } );
  33
  34                 // Handle cache updates
  35                 jqXhr.done( function ( $contents ) {
  36                         jqXhr = undefined;
  37
  38                         // Cache the newly loaded page
  39                         cache[url] = $contents;
  40                         cacheOrder.push( url );
  41
  42                         // Remove the oldest entry if we're over the limit
  43                         if ( cacheOrder.length > 10 ) {
  44                                 delete cache[ cacheOrder[0] ];
  45                                 cacheOrder = cacheOrder.slice( 1 );
  46                         }
  47                 } );
  48
  49                 return jqXhr.promise();
  50         }
  51
  52         /* Fetch the next page and use jQuery to swap the table.multipageimage contents.
  53          * @param {string} url
  54          * @param {boolean} [hist=false] Whether this is a load triggered by history navigation (if
  55          *   true, this function won't push a new history state, for the browser did so already).
  56          */
  57         function switchPage( url, hist ) {
  58                 var $tr, promise;
  59
  60                 // Start fetching data (might be cached)
  61                 promise = fetchPageData( url );
  62
  63                 // Add a new spinner if one doesn't already exist and the data is not already ready
  64                 if ( !$spinner && promise.state() !== 'resolved' ) {
  65                         $tr = $multipageimage.find( 'tr' );
  66                         $spinner = $.createSpinner( {
  67                                 size: 'large',
  68                                 type: 'block'
  69                         } )
  70                                 // Copy the old content dimensions equal so that the current scroll position is not
  71                                 // lost between emptying the table is and receiving the new contents.
  72                                 .css( {
  73                                         height: $tr.outerHeight(),
  74                                         width: $tr.outerWidth()
  75                                 } );
  76
  77                         $multipageimage.empty().append( $spinner );
  78                 }
  79
  80                 promise.done( function ( $contents ) {
  81                         $spinner = undefined;
  82
  83                         // Replace table contents
  84                         $multipageimage.empty().append( $contents.clone() );
  85
  86                         bindPageNavigation( $multipageimage );
  87
  88                         // Fire hook because the page's content has changed
  89                         mw.hook( 'wikipage.content' ).fire( $multipageimage );
  90
  91                         // Update browser history and address bar. But not if we came here from a history
  92                         // event, in which case the url is already updated by the browser.
  93                         if ( history.pushState && !hist ) {
  94                                 history.pushState( { tag: 'mw-pagination' }, document.title, url );
  95                         }
  96                 } );
  97         }
  98
  99         function bindPageNavigation( $container ) {
 100                 $container.find( '.multipageimagenavbox' ).one( 'click', 'a', function ( e ) {
 101                         var page, uri;
 102
 103                         // Generate the same URL on client side as the one generated in ImagePage::openShowImage.
 104                         // We avoid using the URL in the link directly since it could have been manipulated (bug 66608)
 105                         page = Number( mw.util.getParamValue( 'page', this.href ) );
 106                         uri = new mw.Uri( mw.util.wikiScript() )
 107                                 .extend( { title: mw.config.get( 'wgPageName' ), page: page } )
 108                                 .toString();
 109
 110                         switchPage( uri );
 111                         e.preventDefault();
 112                 } );
 113
 114                 $container.find( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
 115                         switchPage( this.action + '?' + $( this ).serialize() );
 116                         e.preventDefault();
 117                 } );
 118         }
 119
 120         $( function () {
 121                 if ( mw.config.get( 'wgNamespaceNumber' ) !== 6 ) {
 122                         return;
 123                 }
 124                 $multipageimage = $( 'table.multipageimage' );
 125                 if ( !$multipageimage.length ) {
 126                         return;
 127                 }
 128
 129                 bindPageNavigation( $multipageimage );
 130
 131                 // Update the url using the History API (if available)
 132                 if ( history.pushState && history.replaceState ) {
 133                         history.replaceState( { tag: 'mw-pagination' }, '' );
 134                         $( window ).on( 'popstate', function ( e ) {
 135                                 var state = e.originalEvent.state;
 136                                 if ( state && state.tag === 'mw-pagination' ) {
 137                                         switchPage( location.href, true );
 138                                 }
 139                         } );
 140                 }
 141         } );
 142 }( mediaWiki, jQuery ) );