2 * Implement AJAX navigation for multi-page images so the user may browse without a full page reload.
5 var jqXhr
, $multipageimage
, $spinner
;
7 /* Fetch the next page and use jQuery to swap the table.multipageimage contents.
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).
12 function loadPage( url
, hist
) {
15 // Prevent race conditions and piling up pending requests
20 // Add a new spinner if one doesn't already exist
22 $tr
= $multipageimage
.find( 'tr' );
23 $spinner
= $.createSpinner( {
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.
30 height
: $tr
.outerHeight(),
31 width
: $tr
.outerWidth()
34 $multipageimage
.empty().append( $spinner
);
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;
42 // Replace table contents
43 $multipageimage
.empty().append( $( data
).find( 'table.multipageimage' ).contents() );
45 bindPageNavigation( $multipageimage
);
47 // Fire hook because the page's content has changed
48 mw
.hook( 'wikipage.content' ).fire( $multipageimage
);
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
);
58 function bindPageNavigation( $container
) {
59 $container
.find( '.multipageimagenavbox' ).one( 'click', 'a', function ( e
) {
60 loadPage( this.href
);
64 $container
.find( 'form[name="pageselector"]' ).one( 'change submit', function ( e
) {
65 loadPage( this.action
+ '?' + $( this ).serialize() );
71 if ( mw
.config
.get( 'wgNamespaceNumber' ) !== 6 ) {
74 $multipageimage
= $( 'table.multipageimage' );
75 if ( !$multipageimage
.length
) {
79 bindPageNavigation( $multipageimage
);
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 );
92 }( mediaWiki
, jQuery
) );