1 files changed, 93 insertions, 0 deletions
diff --git a/resources/src/mediawiki.page/mediawiki.page.image.pagination.js b/resources/src/mediawiki.page/mediawiki.page.image.pagination.js
new file mode 100644
index 000000000000..50301bd65822
--- /dev/null
+++ b/resources/src/mediawiki.page/mediawiki.page.image.pagination.js
@@ -0,0 +1,93 @@
+/**
+ * Change multi-page image navigation so that the current page display can be changed
+ * without a page reload. Currently, the only image formats that can be multi-page images are
+ * PDF and DjVu files
+ */
+( function ( mw, $ ) {
+
+	// Initialize ajax request variable
+	var xhr;
+
+	// Use jQuery's load function to specifically select and replace table.multipageimage's child
+	// tr with the new page's table.multipageimage's tr element.
+	// table.multipageimage always has only one row.
+	function loadPage( page, hist ) {
+		if ( xhr ) {
+			// Abort previous requests to prevent backlog created by
+			// repeatedly pressing back/forwards buttons
+			xhr.abort();
+		}
+
+		var $multipageimage = $( 'table.multipageimage' ),
+			$spinner;
+
+		// Add a new spinner if one doesn't already exist
+		if ( !$multipageimage.find( '.mw-spinner' ).length ) {
+
+			$spinner = $.createSpinner( {
+				size: 'large',
+				type: 'block'
+			} )
+				// Set the spinner's dimensions equal to the table's dimensions so that
+				// the current scroll position is not lost after the table is emptied prior to
+				// its contents being updated
+				.css( {
+					height: $multipageimage.find( 'tr' ).height(),
+					width: $multipageimage.find( 'tr' ).width()
+				} );
+
+			$multipageimage.empty().append( $spinner );
+		}
+
+		xhr = $.ajax( {
+			url: page,
+			success: function ( data ) {
+				// Load the page
+				$multipageimage.empty().append( $( data ).find( 'table.multipageimage tr' ) );
+				// Fire hook because the page's content has changed
+				mw.hook( 'wikipage.content' ).fire( $multipageimage );
+				// Set up the new page for pagination
+				ajaxifyPageNavigation();
+				// Add new page of image to history.  To preserve the back-forwards chain in the browser,
+				// if the user gets here via the back/forward button, don't update the history.
+				if ( window.history && history.pushState && !hist ) {
+					history.pushState( { url: page }, document.title, page );
+				}
+			}
+		} );
+	}
+
+	function ajaxifyPageNavigation() {
+		// Intercept the default action of the links in the thumbnail navigation
+		$( '.multipageimagenavbox' ).one( 'click', 'a', function ( e ) {
+			loadPage( this.href );
+			e.preventDefault();
+		} );
+
+		// Prevent the submission of the page select form and instead call loadPage
+		$( 'form[name="pageselector"]' ).one( 'change submit', function ( e ) {
+			loadPage( this.action + '?' + $( this ).serialize() );
+			e.preventDefault();
+		} );
+	}
+
+	$( document ).ready( function () {
+		// The presence of table.multipageimage signifies that this file is a multi-page image
+		if ( mw.config.get( 'wgNamespaceNumber' ) === 6 && $( 'table.multipageimage' ).length !== 0 ) {
+			ajaxifyPageNavigation();
+
+			// Set up history.pushState (if available), so that when the user browses to a new page of
+			// the same file, the browser's history is updated. If the user clicks the back/forward button
+			// in the midst of navigating a file's pages, load the page inline.
+			if ( window.history && history.pushState && history.replaceState ) {
+				history.replaceState( { url: window.location.href }, '' );
+				$( window ).on( 'popstate', function ( e ) {
+					var state = e.originalEvent.state;
+					if ( state ) {
+						loadPage( state.url, true );
+					}
+				} );
+			}
+		}
+	} );
+}( mediaWiki, jQuery ) );