From 427b0e1bf98df84d9dd0197120a067609d5918c9 Mon Sep 17 00:00:00 2001
From: balloonguy <balloonguy123@gmail.com>
Date: Thu, 2 May 2013 13:41:40 -0400
Subject: [PATCH] Make image pagination not require a page load.

Progressively enhance multi-page image navigation so that the paginated
part is changed without requiring a full page load. Currently, the url
is not updated to reflect the current page after navigation occurs, but
if desired, this functionality could be added using history.pushState.

Bug: 40207
Change-Id: Icd1cde7c62c4d462f5b697b9f49f5c08f6e7482b
---
 includes/ImagePage.php                        |  2 +-
 resources/Resources.php                       |  4 ++
 .../mediawiki.page.image.pagination.js        | 51 +++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 mode change 100644 => 100755 includes/ImagePage.php
 mode change 100644 => 100755 resources/Resources.php
 create mode 100644 resources/mediawiki.page/mediawiki.page.image.pagination.js

diff --git a/includes/ImagePage.php b/includes/ImagePage.php
old mode 100644
new mode 100755
index e6870465d9..9308195d7c
--- a/includes/ImagePage.php
+++ b/includes/ImagePage.php
@@ -395,6 +395,7 @@ class ImagePage extends Article {
 
 				$isMulti = $this->displayImg->isMultipage() && $this->displayImg->pageCount() > 1;
 				if ( $isMulti ) {
+					$out->addModules( 'mediawiki.page.image.pagination' );
 					$out->addHTML( '<table class="multipageimage"><tr><td>' );
 				}
 
@@ -444,7 +445,6 @@ class ImagePage extends Article {
 					$formParams = array(
 						'name' => 'pageselector',
 						'action' => $wgScript,
-						'onchange' => 'document.pageselector.submit();',
 					);
 					$options = array();
 					for ( $i = 1; $i <= $count; $i++ ) {
diff --git a/resources/Resources.php b/resources/Resources.php
old mode 100644
new mode 100755
index 0d8b330c6b..df706eb311
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -873,6 +873,10 @@ return array(
 			'watcherrortext',
 		),
 	),
+	'mediawiki.page.image.pagination' => array(
+		'scripts' => 'resources/mediawiki.page/mediawiki.page.image.pagination.js',
+		'dependencies' => array( 'jquery.spinner' )
+	),
 
 	/* MediaWiki Special pages */
 
diff --git a/resources/mediawiki.page/mediawiki.page.image.pagination.js b/resources/mediawiki.page/mediawiki.page.image.pagination.js
new file mode 100644
index 0000000000..fb44a76f3d
--- /dev/null
+++ b/resources/mediawiki.page/mediawiki.page.image.pagination.js
@@ -0,0 +1,51 @@
+/**
+ * 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, $) {
+	// 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 ) {
+		var $multipageimage = $( 'table.multipageimage' ),
+			$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()
+		} );
+
+		$multipageimage.empty().append( $spinner ).load(
+			page + ' table.multipageimage tr',
+			ajaxifyPageNavigation
+		);
+	}
+
+	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();
+		}
+	} );
+}( mediaWiki, jQuery ) );
-- 
2.20.1