Change the position of the "newid" pointer

This also allows pointer to be dragged past the other. In such case
pointer colour changes while dragging, but pointer orientation/position
is only updated after dragging is finished (along with reloading diff etc).

Bug: T134994
Bug: T134996
Change-Id: Ia333306b5b0a488a4f8e92ac4b1b843dc4863d47

extension.json

@@ -32,7 +32,8 @@
 				"ext.RevisionSlider.Revision",
 				"ext.RevisionSlider.RevisionList",
 				"ext.RevisionSlider.fetchRevisions",
-				"ext.RevisionSlider.pointers"
+				"ext.RevisionSlider.pointers.lower",
+				"ext.RevisionSlider.pointers.upper"
 			],
 			"messages": [
 				"revisionslider-loading-out-of-range",
@@ -102,13 +103,22 @@
 				"modules/ext.RevisionSlider.RevisionListView.js"
 			]
 		},
-		"ext.RevisionSlider.pointers": {
+		"ext.RevisionSlider.pointers.lower": {
 			"position": "top",
 			"class": "ResourceLoaderImageModule",
-			"selector": ".{name}-pointer",
+			"selector": ".lower-pointer.{name}-pointer",
 			"images": {
-				"oldid": "resources/ext.RevisionSlider.pointers/pointer-old.svg",
-				"newid": "resources/ext.RevisionSlider.pointers/pointer-new.svg"
+				"oldid": "resources/ext.RevisionSlider.pointers/pointer-lower-old.svg",
+				"newid": "resources/ext.RevisionSlider.pointers/pointer-lower-new.svg"
+			}
+		},
+		"ext.RevisionSlider.pointers.upper": {
+			"position": "top",
+			"class": "ResourceLoaderImageModule",
+			"selector": ".upper-pointer.{name}-pointer",
+			"images": {
+				"oldid": "resources/ext.RevisionSlider.pointers/pointer-upper-old.svg",
+				"newid": "resources/ext.RevisionSlider.pointers/pointer-upper-new.svg"
 			}
 		}
 	},

modules/ext.RevisionSlider.DiffPage.js

@@ -55,7 +55,7 @@
 				sliderView.pointerTwo.setPosition( event.state.rightPos );
 				sliderView.slider.setFirstVisibleRevisionIndex( event.state.sliderPos );
 				sliderView.slide( 0 );
-				sliderView.resetPointerColorsBasedOnPosition();
+				sliderView.resetPointerStylesBasedOnPosition();
 				self.refresh( event.state.revid1, event.state.revid2 );
 			} );
 		}

modules/ext.RevisionSlider.SliderView.js

@@ -76,6 +76,7 @@
 						revId1, revId2;
 					mw.track( 'counter.MediaWiki.RevisionSlider.event.pointerMove' );
 					pointer.setPosition( self.slider.getFirstVisibleRevisionIndex() + relativeIndex );
+					self.resetPointerStylesBasedOnPosition();
 
 					revId1 = $revisions
 						.find( 'div.revision[data-pos=\'' + self.pointerOne.getPosition() + '\']' )
@@ -114,13 +115,13 @@
 			}
 			this.pointerOne.setPosition( oldRevElement.data( 'pos' ) );
 			this.pointerTwo.setPosition( newRevElement.data( 'pos' ) );
-			this.resetPointerColorsBasedOnPosition();
+			this.resetPointerStylesBasedOnPosition();
 		},
 
 		resetPointerColorsBasedOnOffset: function () {
-			var leftPointerOffset = this.pointerOne.getView().getElement().offset(),
-				rightPointerOffset = this.pointerTwo.getView().getElement().offset();
-			if ( leftPointerOffset.left > rightPointerOffset.left ) {
+			var pointerOneOffset = this.pointerOne.getView().getElement().offset(),
+				pointerTwoOffset = this.pointerTwo.getView().getElement().offset();
+			if ( pointerOneOffset.left > pointerTwoOffset.left ) {
 				this.pointerOne.getView().getElement().removeClass( 'oldid-pointer' ).addClass( 'newid-pointer' );
 				this.pointerTwo.getView().getElement().removeClass( 'newid-pointer' ).addClass( 'oldid-pointer' );
 			} else {
@@ -129,13 +130,17 @@
 			}
 		},
 
-		resetPointerColorsBasedOnPosition: function () {
+		resetPointerStylesBasedOnPosition: function () {
 			if ( this.pointerOne.getPosition() > this.pointerTwo.getPosition() ) {
-				this.pointerOne.getView().getElement().removeClass( 'oldid-pointer' ).addClass( 'newid-pointer' );
-				this.pointerTwo.getView().getElement().removeClass( 'newid-pointer' ).addClass( 'oldid-pointer' );
+				this.pointerOne.getView().getElement().removeClass( 'oldid-pointer' ).addClass( 'newid-pointer' )
+					.removeClass( 'lower-pointer' ).addClass( 'upper-pointer' );
+				this.pointerTwo.getView().getElement().removeClass( 'newid-pointer' ).addClass( 'oldid-pointer' )
+					.removeClass( 'upper-pointer' ).addClass( 'lower-pointer' );
 			} else {
-				this.pointerOne.getView().getElement().removeClass( 'newid-pointer' ).addClass( 'oldid-pointer' );
-				this.pointerTwo.getView().getElement().removeClass( 'oldid-pointer' ).addClass( 'newid-pointer' );
+				this.pointerOne.getView().getElement().removeClass( 'newid-pointer' ).addClass( 'oldid-pointer' )
+					.removeClass( 'upper-pointer' ).addClass( 'lower-pointer' );
+				this.pointerTwo.getView().getElement().removeClass( 'oldid-pointer' ).addClass( 'newid-pointer' )
+					.removeClass( 'lower-pointer' ).addClass( 'upper-pointer' );
 			}
 		},
 

modules/ext.RevisionSlider.css

@@ -69,10 +69,13 @@
     position: absolute;
     clear: both;
     height: 1px;
-    top: 77px;
+    top: 65px;
     margin: auto;
     z-index: 10;
 }
+.lower-pointer {
+    top: 12px;
+}
 .pointer {
     position: absolute !important;
     z-index: 11;

resources/ext.RevisionSlider.pointers/pointer-upper-new.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="20" height="10" viewPort="0 0 20 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 10,10" fill="#45a6ff" stroke="#065cad"/>
+</svg>

resources/ext.RevisionSlider.pointers/pointer-upper-old.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg width="20" height="10" viewPort="0 0 20 10" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <polygon points="0,0 20,0 10,10" fill="#fdc44b" stroke="#dda000"/>
+</svg>