jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/371493 )
Change subject: Reintroduce hover and bar clicking
......................................................................
Reintroduce hover and bar clicking
Bug: T172092
Change-Id: I496143f2425eccd0028cc1980fc7189a457c70a2
---
M modules/ext.RevisionSlider.RevisionListView.js
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
3 files changed, 182 insertions(+), 18 deletions(-)
Approvals:
jenkins-bot: Verified
Andrew-WMDE: Looks good to me, approved
diff --git a/modules/ext.RevisionSlider.RevisionListView.js
b/modules/ext.RevisionSlider.RevisionListView.js
index 7f00e92..2389c8f 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -87,6 +87,22 @@
.addClass( diffSize > 0
? 'mw-revslider-revision-up' : 'mw-revslider-revision-down' )
.append( $( '<div>'
).addClass( 'mw-revslider-revision-border-box' ) )
)
+ .append( $( '<div>' )
+ .addClass(
'mw-revslider-revision-wrapper-up' )
+ .width(
this.revisionWidth )
+ .append(
+ $( '<div>' )
+
.addClass( 'mw-revslider-pointer mw-revslider-pointer-ghost' )
+ )
+ )
+ .append( $( '<div>' )
+ .addClass(
'mw-revslider-revision-wrapper-down' )
+ .width(
this.revisionWidth )
+ .append(
+ $( '<div>' )
+
.addClass( 'mw-revslider-pointer mw-revslider-pointer-ghost' )
+ )
+ )
.mouseenter( showTooltip )
.mouseleave( hideTooltip )
);
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index 4957afb..75a5691 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -124,6 +124,7 @@
this.initializePointers( this.getOldRevElement(
$revisions ), this.getNewRevElement( $revisions ) );
this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
+ this.addClickHandlerToRevisions( $revisions );
$container.html( this.$element );
@@ -175,6 +176,20 @@
.addClass( 'mw-revslider-pointer-container' )
.css( pointerContainerStyle )
.append( this.renderPointerContainers() )
+ .mouseout( function () {
+ if ( !self.isDragged ) {
+ $(
'.mw-revslider-revision-wrapper-up, .mw-revslider-revision-wrapper-down' )
+ .removeClass(
'mw-revslider-revision-hovered' );
+ }
+ } )
+ .mouseover( function ( event ) {
+ if ( !self.isDragged ) {
+ lastMouseMoveRevisionPos =
self.showTooltipsOnMouseMoveHandler(
+ event,
+ null
+ );
+ }
+ } )
.mousemove( function ( event ) {
if ( !self.isDragged ) {
lastMouseMoveRevisionPos =
self.showTooltipsOnMouseMoveHandler(
@@ -262,13 +277,25 @@
showTooltipsOnMouseMoveHandler: function ( event,
lastValidPosition ) {
var pos = this.getRevisionPositionFromLeftOffset(
event.pageX ),
- $hoveredRevisionWrapper;
+ $hoveredRevisionWrapper, hasMovedTop;
if ( pos === lastValidPosition ) {
return pos;
}
$hoveredRevisionWrapper = this.getRevElementAtPosition(
this.getRevisionsElement(), pos ).parent();
+ hasMovedTop = event.pageY -
$hoveredRevisionWrapper.offset().top < $hoveredRevisionWrapper.height() / 2;
+
+ $( '.mw-revslider-revision-wrapper-up,
.mw-revslider-revision-wrapper-down' )
+ .removeClass( 'mw-revslider-revision-hovered' );
+
+ if ( hasMovedTop ) {
+ $hoveredRevisionWrapper.find(
'.mw-revslider-revision-wrapper-up' )
+ .addClass(
'mw-revslider-revision-hovered' );
+ } else {
+ $hoveredRevisionWrapper.find(
'.mw-revslider-revision-wrapper-down' )
+ .addClass(
'mw-revslider-revision-hovered' );
+ }
this.slider.getRevisions().getView().showTooltip(
$hoveredRevisionWrapper );
return pos;
@@ -309,6 +336,64 @@
}
this.alignPointersAndLines();
this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
+ },
+
+ revisionWrapperClickHandler: function ( event, $revisionWrapper
) {
+ var hasClickedTop = event.pageY -
$revisionWrapper.offset().top < $revisionWrapper.height() / 2,
+ $clickedRevision, pointerMoved, pointerOther,
targetPos, $revisions;
+
+ if ( hasClickedTop &&
+ ( $revisionWrapper.hasClass(
'mw-revslider-revision-newer' ) ||
+ $revisionWrapper.hasClass(
'mw-revslider-revision-intermediate' ) )
+ ) {
+ pointerMoved = this.pointerNewer;
+ pointerOther = this.pointerOlder;
+ } else if ( !hasClickedTop &&
+ ( $revisionWrapper.hasClass(
'mw-revslider-revision-older' ) ||
+ $revisionWrapper.hasClass(
'mw-revslider-revision-intermediate' ) )
+ ) {
+ pointerMoved = this.pointerOlder;
+ pointerOther = this.pointerNewer;
+ } else {
+ return;
+ }
+
+ $clickedRevision = $revisionWrapper.find(
'.mw-revslider-revision' );
+ targetPos = +$clickedRevision.attr( 'data-pos' );
+
+ if ( targetPos === pointerOther.getPosition() ) {
+ return;
+ }
+
+ $revisions = this.getRevisionsElement();
+ pointerMoved.setPosition( targetPos );
+
+ if ( hasClickedTop ) {
+ this.refreshDiffView(
+ +$clickedRevision.data( 'revid' ),
+ +this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).data( 'revid' ),
+ true
+ );
+ } else {
+ this.refreshDiffView(
+ +this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).data( 'revid' ),
+ +$clickedRevision.data( 'revid' ),
+ true
+ );
+ }
+
+ this.alignPointersAndLines();
+ this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
+ },
+
+ /**
+ * @param {jQuery} $revisions
+ */
+ addClickHandlerToRevisions: function ( $revisions ) {
+ var self = this;
+ $revisions.find( '.mw-revslider-revision-wrapper'
).click( function ( event ) {
+ self.revisionWrapperClickHandler( event, $(
this ) );
+ } );
},
/**
@@ -631,16 +716,27 @@
resetRevisionStylesBasedOnPointerPosition: function (
$revisions ) {
var olderRevPosition = this.getOlderPointerPos(),
newerRevPosition = this.getNewerPointerPos(),
- positionIndex = olderRevPosition + 1;
+ startPosition =
this.slider.getOldestVisibleRevisionIndex(),
+ endPosition =
this.slider.getNewestVisibleRevisionIndex(),
+ positionIndex = startPosition;
$revisions.find( 'div.mw-revslider-revision' )
- .removeClass(
'mw-revslider-revision-intermediate mw-revslider-revision-old
mw-revslider-revision-new' );
+ .removeClass( 'mw-revslider-revision-old
mw-revslider-revision-new' );
+ $revisions.find( 'div.mw-revslider-revision-wrapper' )
+ .removeClass(
'mw-revslider-revision-intermediate mw-revslider-revision-older
mw-revslider-revision-newer' );
this.getRevElementAtPosition( $revisions,
olderRevPosition ).addClass( 'mw-revslider-revision-old' );
this.getRevElementAtPosition( $revisions,
newerRevPosition ).addClass( 'mw-revslider-revision-new' );
- while ( positionIndex < newerRevPosition ) {
- this.getRevElementAtPosition( $revisions,
positionIndex ).addClass( 'mw-revslider-revision-intermediate' );
+
+ while ( positionIndex <= endPosition ) {
positionIndex++;
+ if ( positionIndex <= olderRevPosition ) {
+ this.getRevElementAtPosition(
$revisions, positionIndex ).parent().addClass( 'mw-revslider-revision-older' );
+ } else if ( positionIndex > olderRevPosition &&
positionIndex < newerRevPosition ) {
+ this.getRevElementAtPosition(
$revisions, positionIndex ).parent().addClass(
'mw-revslider-revision-intermediate' );
+ } else if ( positionIndex >= newerRevPosition )
{
+ this.getRevElementAtPosition(
$revisions, positionIndex ).parent().addClass( 'mw-revslider-revision-newer' );
+ }
}
},
@@ -724,6 +820,10 @@
if ( self.slider.isAtEnd() &&
!self.noMoreNewerRevisions ) {
self.addNewerRevisionsIfNeeded(
$( '.mw-revslider-revision-slider' ) );
}
+
+
self.resetRevisionStylesBasedOnPointerPosition(
+ self.getRevisionsElement()
+ );
}
);
@@ -872,6 +972,8 @@
$revisions.append( $( this ) );
} );
+ this.addClickHandlerToRevisions(
this.getRevisionsElement() );
+
if ( this.shouldExpandSlider( $slider ) ) {
this.expandSlider( $slider );
}
@@ -912,6 +1014,8 @@
$addedRevisions = new
mw.libs.revisionSlider.RevisionListView( revisionsToRender, this.dir ).render(
this.revisionWidth );
+ this.addClickHandlerToRevisions(
this.getRevisionsElement() );
+
if ( this.getOlderPointerPos() !== -1 ) {
this.setOlderPointerPos(
this.getOlderPointerPos() + revisionsToRender.getLength() );
} else {
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index a70553b..ae9b119 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -33,9 +33,9 @@
border-top: 2px solid transparent;
}
-.mw-revslider-revision-new,
-.mw-revslider-revision-old,
-.mw-revslider-revision-intermediate {
+.mw-revslider-revision-new .mw-revslider-revision,
+.mw-revslider-revision-old .mw-revslider-revision,
+.mw-revslider-revision-intermediate .mw-revslider-revision {
background-color: #bcbcbc;
border-color: #989898;
}
@@ -62,6 +62,56 @@
.mw-revslider-revision-wrapper:hover,
.mw-revslider-revision-wrapper-hovered {
background-color: #f2f2f2;
+}
+
+.mw-revslider-revision-wrapper-up,
+.mw-revslider-revision-wrapper-down {
+ height: 70px;
+ position: absolute;
+ z-index: 1;
+}
+
+.mw-revslider-revision-wrapper-up {
+ top: 0;
+}
+
+.mw-revslider-revision-wrapper-down {
+ top: 70px;
+}
+
+.mw-revslider-revision-intermediate .mw-revslider-revision-wrapper-up:hover,
+.mw-revslider-revision-newer .mw-revslider-revision-wrapper-up:hover,
+.mw-revslider-revision-newer
.mw-revslider-revision-wrapper-up.mw-revslider-revision-hovered {
+ background-color: rgba( 102, 178, 255, 0.4 );
+ cursor: pointer;
+}
+
+.mw-revslider-revision-intermediate .mw-revslider-revision-wrapper-down:hover,
+.mw-revslider-revision-older .mw-revslider-revision-wrapper-down:hover,
+.mw-revslider-revision-older
.mw-revslider-revision-wrapper-down.mw-revslider-revision-hovered {
+ background-color: rgba( 255, 197, 97, 0.4 );
+ cursor: pointer;
+}
+
+.mw-revslider-pointer.mw-revslider-pointer-ghost {
+ z-index: 2;
+ width: 11px;
+ height: 11px;
+ left: 1px;
+}
+
+.mw-revslider-revision-intermediate .mw-revslider-revision-wrapper-up:hover
.mw-revslider-pointer-ghost,
+.mw-revslider-revision-newer .mw-revslider-revision-wrapper-up:hover
.mw-revslider-pointer-ghost,
+.mw-revslider-revision-newer
.mw-revslider-revision-wrapper-up.mw-revslider-revision-hovered
.mw-revslider-pointer-ghost {
+ border: 2px solid #1e6db8;
+ bottom: -4px;
+}
+
+.mw-revslider-revision-intermediate .mw-revslider-revision-wrapper-down:hover
.mw-revslider-pointer-ghost,
+.mw-revslider-revision-older .mw-revslider-revision-wrapper-down:hover
.mw-revslider-pointer-ghost,
+.mw-revslider-revision-older
.mw-revslider-revision-wrapper-down.mw-revslider-revision-hovered
.mw-revslider-pointer-ghost {
+ border: 2px solid #fc3;
+ top: -2px;
}
.mw-revslider-tooltip {
@@ -169,18 +219,13 @@
.mw-revslider-pointer-container {
position: absolute;
clear: both;
- top: 49px;
+ top: 65px;
z-index: 1;
}
.mw-revslider-pointer-container-newer,
.mw-revslider-pointer-container-older {
cursor: pointer;
- height: 12px;
-}
-
-.mw-revslider-pointer-container-newer {
- margin-top: 4px;
}
.mw-revslider-pointer {
@@ -207,7 +252,7 @@
}
.mw-revslider-pointer.mw-revslider-pointer-newer {
- top: 10px;
+ top: -6px;
border: 1px solid #66b2ff;
background: #2f93f7;
background: -webkit-linear-gradient( bottom, rgba( 47, 147, 247, 1 ),
rgba( 3, 81, 159, 1 ) );
@@ -227,7 +272,7 @@
}
.mw-revslider-pointer.mw-revslider-pointer-older {
- top: 18px;
+ top: 4px;
border: 1px solid #ffc561;
background: #fde072;
background: -webkit-linear-gradient( bottom, rgba( 253, 224, 114, 1 ),
rgba( 230, 173, 29, 1 ) );
@@ -248,15 +293,14 @@
.mw-revslider-slider-line {
margin: 0 10px;
- height: 12px;
}
.mw-revslider-pointer-container-newer .mw-revslider-slider-line {
+ margin-bottom: 4px;
border-bottom: 4px solid rgba( 30, 109, 184, 0.5 ); /* #1e6db8 */
}
.mw-revslider-pointer-container-older .mw-revslider-slider-line {
- margin-top: 8px;
border-top: 4px solid rgba( 255, 204, 51, 0.5 ); /* #fc3 */
}
--
To view, visit https://gerrit.wikimedia.org/r/371493
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I496143f2425eccd0028cc1980fc7189a457c70a2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de>
Gerrit-Reviewer: Addshore <addshorew...@gmail.com>
Gerrit-Reviewer: Andrew-WMDE <andrew.kos...@wikimedia.de>
Gerrit-Reviewer: Tobias Gritschacher <tobias.gritschac...@wikimedia.de>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
