TheDJ has submitted this change and it was merged.

Change subject: Make image pagination not require a page load.
......................................................................


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
---
M includes/ImagePage.php
M resources/Resources.php
A resources/mediawiki.page/mediawiki.page.image.pagination.js
3 files changed, 56 insertions(+), 1 deletion(-)

Approvals:
  TheDJ: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/includes/ImagePage.php b/includes/ImagePage.php
old mode 100644
new mode 100755
index e687046..9308195
--- a/includes/ImagePage.php
+++ b/includes/ImagePage.php
@@ -395,6 +395,7 @@
 
                                $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 @@
                                        $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 0d8b330..df706eb
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -873,6 +873,10 @@
                        '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 0000000..fb44a76
--- /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 ) );

-- 
To view, visit https://gerrit.wikimedia.org/r/62005
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Icd1cde7c62c4d462f5b697b9f49f5c08f6e7482b
Gerrit-PatchSet: 6
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Balloonguy <[email protected]>
Gerrit-Reviewer: Balloonguy <[email protected]>
Gerrit-Reviewer: Brian Wolff <[email protected]>
Gerrit-Reviewer: Hoo man <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: MZMcBride <[email protected]>
Gerrit-Reviewer: MarkTraceur <[email protected]>
Gerrit-Reviewer: Matmarex <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: jenkins-bot

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to