From 4d8949533f048d9cbad758b8876379079ca5345d Mon Sep 17 00:00:00 2001 From: Leszek Manicki Date: Tue, 17 May 2016 14:29:08 +0200 Subject: [PATCH] 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 | 20 ++++++++++++---- modules/ext.RevisionSlider.DiffPage.js | 2 +- modules/ext.RevisionSlider.SliderView.js | 23 +++++++++++-------- modules/ext.RevisionSlider.css | 5 +++- ...{pointer-new.svg => pointer-lower-new.svg} | 0 ...{pointer-old.svg => pointer-lower-old.svg} | 0 .../pointer-upper-new.svg | 4 ++++ .../pointer-upper-old.svg | 4 ++++ 8 files changed, 42 insertions(+), 16 deletions(-) rename resources/ext.RevisionSlider.pointers/{pointer-new.svg => pointer-lower-new.svg} (100%) rename resources/ext.RevisionSlider.pointers/{pointer-old.svg => pointer-lower-old.svg} (100%) create mode 100644 resources/ext.RevisionSlider.pointers/pointer-upper-new.svg create mode 100644 resources/ext.RevisionSlider.pointers/pointer-upper-old.svg diff --git a/extension.json b/extension.json index b4acf9d5..929f58e3 100755 --- a/extension.json +++ b/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" } } }, diff --git a/modules/ext.RevisionSlider.DiffPage.js b/modules/ext.RevisionSlider.DiffPage.js index 9e2456e9..aa83bae8 100644 --- a/modules/ext.RevisionSlider.DiffPage.js +++ b/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 ); } ); } diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index 36aaf1ec..14717f11 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/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' ); } }, diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index cc4d0479..e6283959 100755 --- a/modules/ext.RevisionSlider.css +++ b/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; diff --git a/resources/ext.RevisionSlider.pointers/pointer-new.svg b/resources/ext.RevisionSlider.pointers/pointer-lower-new.svg similarity index 100% rename from resources/ext.RevisionSlider.pointers/pointer-new.svg rename to resources/ext.RevisionSlider.pointers/pointer-lower-new.svg diff --git a/resources/ext.RevisionSlider.pointers/pointer-old.svg b/resources/ext.RevisionSlider.pointers/pointer-lower-old.svg similarity index 100% rename from resources/ext.RevisionSlider.pointers/pointer-old.svg rename to resources/ext.RevisionSlider.pointers/pointer-lower-old.svg diff --git a/resources/ext.RevisionSlider.pointers/pointer-upper-new.svg b/resources/ext.RevisionSlider.pointers/pointer-upper-new.svg new file mode 100644 index 00000000..77f3b4f7 --- /dev/null +++ b/resources/ext.RevisionSlider.pointers/pointer-upper-new.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.pointers/pointer-upper-old.svg b/resources/ext.RevisionSlider.pointers/pointer-upper-old.svg new file mode 100644 index 00000000..ee002e33 --- /dev/null +++ b/resources/ext.RevisionSlider.pointers/pointer-upper-old.svg @@ -0,0 +1,4 @@ + + + +