From 5e77f391a528d4bc64fc8cfe8065e254427b9ccd Mon Sep 17 00:00:00 2001
From: tholam <t.lam@lamsinfosystem.com>
Date: Mon, 25 Nov 2013 10:28:21 -0600
Subject: [PATCH] Improve PDF/DJVU navigation

When a user clicks the next/previous page buttons, use
history.pushState (if available) to add a new history
item so that the back/forwards browser buttons navigate
the PDF. When a new page of the file is browsed to, also
fire the wikipage.content hook, since the page contents
have changed.

Co-authored-by: Theopolisme <theopolismewiki@gmail.com>
Co-authored-by: Tholam <t.lam@lamsinfosystem.com>
Bug: 55893
Change-Id: Id796bd641612706f7bd04c974065f05f72f2a8e4
---
 .../mediawiki.page.image.pagination.js        | 74 +++++++++++++++----
 1 file changed, 58 insertions(+), 16 deletions(-)

diff --git a/resources/mediawiki.page/mediawiki.page.image.pagination.js b/resources/mediawiki.page/mediawiki.page.image.pagination.js
index fb44a76f3d..3c93de07ef 100644
--- a/resources/mediawiki.page/mediawiki.page.image.pagination.js
+++ b/resources/mediawiki.page/mediawiki.page.image.pagination.js
@@ -4,28 +4,57 @@
  * 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 ) {
+	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
-		$spinner.css( {
-			height: $multipageimage.find( 'tr' ).height(),
-			width: $multipageimage.find( 'tr' ).width()
-		} );
+			} )
+				// 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 );
+		}
 
-		$multipageimage.empty().append( $spinner ).load(
-			page + ' table.multipageimage tr',
-			ajaxifyPageNavigation
-		);
+		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() {
@@ -44,8 +73,21 @@
 
 	$( 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 ) {
+		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 ) );
+}( mediaWiki, jQuery ) );
\ No newline at end of file
-- 
2.20.1