Attach to Newer / Older edit links

This now attaches the revisionslider to the
older and new links that are by default in the
diff.

This means when clicking them the revision slider
will use an ajax call to reload the diff (while moving
its own pointes) rather than reloading the whole page

Change-Id: I11fa92828140f980ca8edee27403a4e2a5f5a6a7

modules/ext.RevisionSlider.DiffPage.js

@@ -14,9 +14,10 @@
 		 *
 		 * @param {number} revId1
 		 * @param {number} revId2
+		 * @param {SliderView} sliderView
 		 * @param {number} [retryAttempt=0]
 		 */
-		refresh: function ( revId1, revId2, retryAttempt ) {
+		refresh: function ( revId1, revId2, sliderView, retryAttempt ) {
 			var self = this,
 				retryLimit = 2,
 				diff = Math.max( revId1, revId2 ),
@@ -72,6 +73,8 @@
 
 				$( '.mw-revslider-revisions-container' ).scrollLeft( scrollLeft );
 
+				self.addHandlersToCoreLinks( sliderView );
+
 				mw.hook( 'wikipage.content' ).fire( $contentText );
 				mw.hook( 'wikipage.diff' ).fire( $contentText.find( 'table.diff' ) );
 
@@ -81,7 +84,7 @@
 					this.tryCount++;
 					mw.track( 'counter.MediaWiki.RevisionSlider.error.refresh' );
 					if ( retryAttempt <= retryLimit ) {
-						self.refresh( revId1, revId2, retryAttempt + 1 );
+						self.refresh( revId1, revId2, sliderView, retryAttempt + 1 );
 					}
 					// TODO notify the user that we failed to update the diff?
 					// This could also attempt to reload the page with the correct diff loaded without ajax?
@@ -200,6 +203,20 @@
 				sliderView.updatePointerPositionAttributes();
 				self.refresh( event.state.revid1, event.state.revid2 );
 			} );
+		},
+
+		/**
+		 * @param {SliderView} sliderView
+		 */
+		addHandlersToCoreLinks: function ( sliderView ) {
+			$( '#differences-nextlink' ).click( function() {
+				sliderView.showNextDiff();
+				return false;
+			} );
+			$( '#differences-prevlink' ).click( function() {
+				sliderView.showPrevDiff();
+				return false;
+			} );
 		}
 	} );
 

modules/ext.RevisionSlider.SliderView.js

@@ -284,6 +284,7 @@
 			$container.html( $slider );
 
 			this.slide( Math.floor( ( this.pointerNewer.getPosition() - 1 ) / this.slider.getRevisionsPerWindow() ), 0 );
+			this.diffPage.addHandlersToCoreLinks( this );
 			this.diffPage.replaceState( mw.config.get( 'extRevisionSliderOldRev' ), mw.config.get( 'extRevisionSliderNewRev' ), this );
 			this.diffPage.initOnPopState( this );
 		},
@@ -389,10 +390,35 @@
 		refreshRevisions: function ( revId1, revId2 ) {
 			var oldRev = Math.min( revId1, revId2 ),
 				newRev = Math.max( revId1, revId2 );
-			this.diffPage.refresh( oldRev, newRev );
+			this.diffPage.refresh( oldRev, newRev, this );
 			this.diffPage.pushState( oldRev, newRev, this );
 		},
 
+		showNextDiff: function () {
+			this.pointerOlder.setPosition( this.pointerNewer.getPosition() );
+			this.pointerNewer.setPosition( this.pointerNewer.getPosition() + 1 );
+			this.resetAndRefreshRevisions();
+		},
+
+		showPrevDiff: function () {
+			this.pointerNewer.setPosition( this.pointerOlder.getPosition() );
+			this.pointerOlder.setPosition( this.pointerOlder.getPosition() - 1 );
+			this.resetAndRefreshRevisions();
+		},
+
+		resetAndRefreshRevisions: function() {
+			this.slide( 0 );
+			this.resetPointerStylesBasedOnPosition();
+			this.resetRevisionStylesBasedOnPointerPosition(
+				this.$element.find( 'div.mw-revslider-revisions' )
+			);
+			this.updatePointerPositionAttributes();
+			this.refreshRevisions(
+				$( '.mw-revslider-revision[data-pos="' + this.pointerOlder.getPosition() + '"]' ).attr( 'data-revid' ),
+				$( '.mw-revslider-revision[data-pos="' + this.pointerNewer.getPosition() + '"]' ).attr( 'data-revid' )
+			);
+		},
+
 		/**
 		 * @param {jQuery} $revs
 		 * @param {number} pos

tests/browser/features/difflinks.feature

@@ -0,0 +1,29 @@
+@chrome @en.wikipedia.beta.wmflabs.org @firefox @integration
+Feature: RevisionSlider diff links
+  Background:
+    Given I am logged in
+    And I have reset my preferences
+    And RevisionSlider is enabled as a beta feature
+    And a page with 4 revision(s) exists
+
+  Scenario: Older edit diff link can be clicked
+    Given I am on the diff page
+    When I have loaded the RevisionSlider and dismissed the help dialog
+    And I click on the older edit link
+    And I wait until the diff has loaded
+    Then the lower pointer should be on revision 2
+    And the upper pointer should be on revision 3
+    And revision 2 should be loaded on the left of the diff
+    And revision 3 should be loaded on the right of the diff
+
+  Scenario: Newer edit diff link can be clicked
+    Given I am on the diff page
+    When I have loaded the RevisionSlider and dismissed the help dialog
+    And I click on the older edit link
+    And I wait until the diff has loaded
+    And I click on the newer edit link
+    And I wait until the diff has loaded
+    Then the lower pointer should be on revision 3
+    And the upper pointer should be on revision 4
+    And revision 3 should be loaded on the left of the diff
+    And revision 4 should be loaded on the right of the diff

tests/browser/features/support/pages/diff_page.rb

@@ -1,6 +1,9 @@
 class DiffPage
   include PageObject
 
+  a(:differences_prevlink, id: 'differences-prevlink')
+  a(:differences_nextlink, id: 'differences-nextlink')
+
   p(:revisionslider_placeholder, css: '.mw-revslider-placeholder')
   div(:revisionslider_wrapper, css: '.mw-revslider-slider-wrapper')
   div(:revisionslider_auto_expand_button, css: '.mw-revslider-auto-expand-button')
@@ -40,6 +43,14 @@ class DiffPage
     browser.driver.action.move_to(revbar, 1, 0).click.perform
   end
 
+  def click_older_edit_link
+    differences_prevlink_element.when_visible.click
+  end
+
+  def click_newer_edit_link
+    differences_nextlink_element.when_visible.click
+  end
+
   def revisionslider_tooltip(index = 1)
     element('div', css: '.mw-revslider-revision-tooltip-' + index.to_s)
   end

tests/browser/features/support/step_definitions/pointers.rb

@@ -6,6 +6,14 @@ When(/^I click on revision (\d+) to move the upper pointer$/) do |index|
   on(DiffPage).click_revision_upper(index.to_i)
 end
 
+When(/^I click on the older edit link$/) do
+  on(DiffPage).click_older_edit_link
+end
+
+When(/^I click on the newer edit link$/) do
+  on(DiffPage).click_newer_edit_link
+end
+
 Given(/^I drag the lower pointer to revision (\d+)$/) do |index|
   on(DiffPage) do |page|
     page.revisionslider_pointer_lower_element.element.drag_and_drop_on page.revisionslider_rev(index.to_i).element