Jakob has submitted this change and it was merged.
Change subject: Fix pointer pointer dragging to edge revisions
......................................................................
Fix pointer pointer dragging to edge revisions
This fixes a problem with not being able to drag a pointer to the newest
revision,
and an extension allowing to drag pointers to revision further than there
are revisions visible in the plot.
This stops snapping a pointer to the "stopper" element, and introduces a grid
for a pointers to be moved in. Size of the grid reflects a size of the current
revision plot which prevents moving a pointer out of the plot.
Custom "containment" is added for the "newer" edge as jquery ui's "containment"
does not work for this particular case.
Bug: T135837
Change-Id: Ifc6ae29c6d64d2baf44ef2b8ff96a45ae86b4f5f
---
M modules/ext.RevisionSlider.PointerView.js
M modules/ext.RevisionSlider.RevisionListView.js
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
4 files changed, 11 insertions(+), 23 deletions(-)
Approvals:
Jakob: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/modules/ext.RevisionSlider.PointerView.js
b/modules/ext.RevisionSlider.PointerView.js
index ad8bbb1..e1fa2e2 100644
--- a/modules/ext.RevisionSlider.PointerView.js
+++ b/modules/ext.RevisionSlider.PointerView.js
@@ -52,14 +52,14 @@
slideToPosition: function ( slider, duration ) {
var relativePos = this.pointer.getPosition() -
slider.getFirstVisibleRevisionIndex();
- return this.animateTo( relativePos *
slider.getView().revisionWidth + 4, duration ); // +4 to align triangle and
revision
+ return this.animateTo( ( relativePos - 1 ) *
slider.getView().revisionWidth, duration );
},
slideToSide: function ( slider, posBeforeSlider, duration ) {
if ( posBeforeSlider ) {
- return this.animateTo( this.getOffset() - (
slider.getView().revisionWidth / 2 ), duration ); // +10 otherwise pointer is
in arrow
+ return this.animateTo( this.getOffset() - 2 *
slider.getView().revisionWidth, duration );
} else {
- return this.animateTo( (
slider.getRevisionsPerWindow() + 1 ) * slider.getView().revisionWidth +
this.getOffset(), duration );
+ return this.animateTo(
slider.getRevisionsPerWindow() * slider.getView().revisionWidth +
this.getOffset(), duration );
}
},
diff --git a/modules/ext.RevisionSlider.RevisionListView.js
b/modules/ext.RevisionSlider.RevisionListView.js
index 9e3d05c..98a1454 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -41,12 +41,7 @@
.addClass( diffSize > 0
? 'revision-up' : 'revision-down' )
.append( $( '<div
class="revision-border-box"/>' ) )
)
- )
- .append( $( '<div class="stopper"/>' )
- .css( {
- left: revisionTickWidth
* i + 'px',
- width:
revisionTickWidth + 'px'
- } ) );
+ );
}
return $html;
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index 0e4fdea..76a4f53 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -66,10 +66,7 @@
.append( $( '<div style="clear: both" />' ) )
.append(
$( '<div class="pointer-container" />' )
- .css( {
- left: 50 -
this.revisionWidth + 'px', // 50 == arrow + margin right
- width: containerWidth +
this.revisionWidth * 1.5 + 'px'
- } )
+ .css( { width: containerWidth +
this.revisionWidth - 1 + 'px' } )
.append(
this.pointerOne.getView().render() )
.append(
this.pointerTwo.getView().render() )
);
@@ -81,13 +78,13 @@
$slider.find( '.pointer' ).draggable( {
axis: 'x',
- snap: '.stopper',
+ grid: [ this.revisionWidth, null ],
containment: '.pointer-container',
stop: function () {
var $p = $( this ),
pointer = self.whichPointer( $p
),
pos = parseInt( $p.css( 'left'
), 10 ),
- relativeIndex = Math.floor( (
pos + self.revisionWidth / 2 ) / self.revisionWidth ),
+ relativeIndex = Math.ceil( (
pos + self.revisionWidth / 2 ) / self.revisionWidth ),
revId1, revId2;
mw.track(
'counter.MediaWiki.RevisionSlider.event.pointerMove' );
pointer.setPosition(
self.slider.getFirstVisibleRevisionIndex() + relativeIndex );
@@ -100,7 +97,9 @@
self.diffPage.refresh( revId1, revId2 );
self.diffPage.pushState( revId1,
revId2, self );
},
- drag: function () {
+ drag: function ( event, ui ) {
+ var newestVisibleRevisionLeftPos =
containerWidth - self.revisionWidth;
+ ui.position.left = Math.min(
ui.position.left, newestVisibleRevisionLeftPos );
self.resetPointerColorsBasedOnValues(
self.pointerOne.getView().getElement().offset().left,
self.pointerTwo.getView().getElement().offset().left
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index 279bebe..0c0509e 100755
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -102,13 +102,6 @@
margin-left: 30px;
}
-.stopper {
- position: absolute;
- top: 50%;
- height: 50px;
- width: 0;
-}
-
.revision-slider {
position: relative;
margin: auto;
@@ -118,6 +111,7 @@
position: absolute;
clear: both;
height: 1px;
+ left: 55px;
top: 57px;
margin: auto;
z-index: 10;
--
To view, visit https://gerrit.wikimedia.org/r/290905
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Ifc6ae29c6d64d2baf44ef2b8ff96a45ae86b4f5f
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-leszek <[email protected]>
Gerrit-Reviewer: Addshore <[email protected]>
Gerrit-Reviewer: Gabriel Birke <[email protected]>
Gerrit-Reviewer: Jakob <[email protected]>
Gerrit-Reviewer: Kai Nissen (WMDE) <[email protected]>
Gerrit-Reviewer: Tobias Gritschacher <[email protected]>
Gerrit-Reviewer: WMDE-Fisch <[email protected]>
Gerrit-Reviewer: WMDE-leszek <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
