WMDE-Fisch has uploaded a new change for review. ( 
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(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider 
refs/changes/93/371493/1

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: newchange
Gerrit-Change-Id: I496143f2425eccd0028cc1980fc7189a457c70a2
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to