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