2 * Implement AJAX navigation for multi-page images so the user may browse without a full page reload.
5 var jqXhr
, $multipageimage
, $spinner
,
6 cache
= {}, cacheOrder
= [];
8 /* Fetch the next page, caching up to 10 last-loaded pages.
10 * @return {jQuery.Promise}
12 function fetchPageData( url
) {
13 if ( jqXhr
&& jqXhr
.abort
) {
14 // Prevent race conditions and piling up pending requests
21 // Update access freshness
22 cacheOrder
.splice( $.inArray( url
, cacheOrder
), 1 );
23 cacheOrder
.push( url
);
24 return $.Deferred().resolve( cache
[url
] ).promise();
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();
33 // Handle cache updates
34 jqXhr
.done( function ( $contents
) {
37 // Cache the newly loaded page
38 cache
[url
] = $contents
;
39 cacheOrder
.push( url
);
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 );
48 return jqXhr
.promise();
51 /* Fetch the next page and use jQuery to swap the table.multipageimage contents.
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).
56 function switchPage( url
, hist
) {
59 // Start fetching data (might be cached)
60 promise
= fetchPageData( url
);
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( {
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.
72 height
: $tr
.outerHeight(),
73 width
: $tr
.outerWidth()
76 $multipageimage
.empty().append( $spinner
);
79 promise
.done( function ( $contents
) {
82 // Replace table contents
83 $multipageimage
.empty().append( $contents
.clone() );
85 bindPageNavigation( $multipageimage
);
87 // Fire hook because the page's content has changed
88 mw
.hook( 'wikipage.content' ).fire( $multipageimage
);
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
);
98 function bindPageNavigation( $container
) {
99 $container
.find( '.multipageimagenavbox' ).one( 'click', 'a', function ( e
) {
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
} )
113 $container
.find( 'form[name="pageselector"]' ).one( 'change submit', function ( e
) {
114 switchPage( this.action
+ '?' + $( this ).serialize() );
120 if ( mw
.config
.get( 'wgNamespaceNumber' ) !== 6 ) {
123 $multipageimage
= $( 'table.multipageimage' );
124 if ( !$multipageimage
.length
) {
128 bindPageNavigation( $multipageimage
);
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 );
141 }( mediaWiki
, jQuery
) );