2 * Change multi-page image navigation so that the current page display can be changed
3 * without a page reload. Currently, the only image formats that can be multi-page images are
8 // Initialize ajax request variable
11 // Use jQuery's load function to specifically select and replace table.multipageimage's child
12 // tr with the new page's table.multipageimage's tr element.
13 // table.multipageimage always has only one row.
14 function loadPage( page
, hist
) {
16 // Abort previous requests to prevent backlog created by
17 // repeatedly pressing back/forwards buttons
21 var $multipageimage
= $( 'table.multipageimage' ),
24 // Add a new spinner if one doesn't already exist
25 if ( !$multipageimage
.find( '.mw-spinner' ).length
) {
27 $spinner
= $.createSpinner( {
31 // Set the spinner's dimensions equal to the table's dimensions so that
32 // the current scroll position is not lost after the table is emptied prior to
33 // its contents being updated
35 height
: $multipageimage
.find( 'tr' ).height(),
36 width
: $multipageimage
.find( 'tr' ).width()
39 $multipageimage
.empty().append( $spinner
);
44 success: function ( data
) {
46 $multipageimage
.empty().append( $( data
).find( 'table.multipageimage tr' ) );
47 // Fire hook because the page's content has changed
48 mw
.hook( 'wikipage.content' ).fire( $multipageimage
);
49 // Set up the new page for pagination
50 ajaxifyPageNavigation();
51 // Add new page of image to history. To preserve the back-forwards chain in the browser,
52 // if the user gets here via the back/forward button, don't update the history.
53 if ( window
.history
&& history
.pushState
&& !hist
) {
54 history
.pushState( { url
: page
}, document
.title
, page
);
60 function ajaxifyPageNavigation() {
61 // Intercept the default action of the links in the thumbnail navigation
62 $( '.multipageimagenavbox' ).one( 'click', 'a', function ( e
) {
63 loadPage( this.href
);
67 // Prevent the submission of the page select form and instead call loadPage
68 $( 'form[name="pageselector"]' ).one( 'change submit', function ( e
) {
69 loadPage( this.action
+ '?' + $( this ).serialize() );
74 $( document
).ready( function () {
75 // The presence of table.multipageimage signifies that this file is a multi-page image
76 if ( mw
.config
.get( 'wgNamespaceNumber' ) === 6 && $( 'table.multipageimage' ).length
!== 0 ) {
77 ajaxifyPageNavigation();
79 // Set up history.pushState (if available), so that when the user browses to a new page of
80 // the same file, the browser's history is updated. If the user clicks the back/forward button
81 // in the midst of navigating a file's pages, load the page inline.
82 if ( window
.history
&& history
.pushState
&& history
.replaceState
) {
83 history
.replaceState( { url
: window
.location
.href
}, '' );
84 $( window
).on( 'popstate', function ( e
) {
85 var state
= e
.originalEvent
.state
;
87 loadPage( state
.url
, true );
93 }( mediaWiki
, jQuery
) );