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