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

diff --git a/resources/mediawiki.page/mediawiki.page.image.pagination.js b/resources/mediawiki.page/mediawiki.page.image.pagination.js
index fb44a76..3c93de0 100644 (file)
--- 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