WMDE-Fisch has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/348047 )
Change subject: Show tooltips when hovering the slider lines
......................................................................
Show tooltips when hovering the slider lines
This change enables tooltips when hovering the slider lines. This
is done by listening to a mousemove event. To avoid calls to
jQuery to find elements in the DOM some minor refactoring was done
to the RevisionListView.
With the RevisionListView now returning its revisons element this
can be used for further refactoring to avoid other jQuery calls.
Bug: T162602
Change-Id: I45c1b73ca470d7b8fcf8b95e15187864e35e907f
---
M modules/ext.RevisionSlider.RevisionListView.js
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.SliderViewTwo.js
3 files changed, 56 insertions(+), 6 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/47/348047/1
diff --git a/modules/ext.RevisionSlider.RevisionListView.js
b/modules/ext.RevisionSlider.RevisionListView.js
index 8e0fec3..8b83a90 100644
--- a/modules/ext.RevisionSlider.RevisionListView.js
+++ b/modules/ext.RevisionSlider.RevisionListView.js
@@ -16,6 +16,11 @@
revisionList: null,
/**
+ * @type {jQuery}
+ */
+ $html: null,
+
+ /**
* @type {number}
*/
revisionWidth: 16,
@@ -36,8 +41,7 @@
* @return {jQuery}
*/
render: function ( revisionTickWidth, positionOffset ) {
- var $html = $( '<div>' ).addClass(
'mw-revslider-revisions' ),
- revs = this.revisionList.getRevisions(),
+ var revs = this.revisionList.getRevisions(),
maxChangeSizeLogged = Math.log(
this.revisionList.getBiggestChangeSize() ),
self = this,
i, diffSize, relativeChangeSize,
@@ -51,11 +55,13 @@
positionOffset = positionOffset || 0;
this.revisionWidth = revisionTickWidth;
+ this.$html = $( '<div>' ).addClass(
'mw-revslider-revisions' );
+
for ( i = 0; i < revs.length; i++ ) {
diffSize = revs[ i ].getRelativeSize();
relativeChangeSize = diffSize !== 0 ?
Math.ceil( 65.0 * Math.log( Math.abs( diffSize ) ) / maxChangeSizeLogged ) + 5
: 0;
- $html
+ this.$html
.append( $( '<div>' )
.addClass(
'mw-revslider-revision-wrapper' )
.width( this.revisionWidth )
@@ -79,7 +85,7 @@
this.keepTooltipsOnHover();
this.closeTooltipsOnClick();
- return $html;
+ return this.$html;
},
/**
@@ -348,6 +354,13 @@
*/
setDir: function ( dir ) {
this.dir = dir;
+ },
+
+ /**
+ * @return {jQuery}
+ */
+ getElement: function() {
+ return this.$html;
}
} );
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index 5cdc4bc..3304427 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -78,6 +78,11 @@
*/
dir: null,
+ /**
+ * @type {boolean}
+ */
+ isDragged: false,
+
render: function ( $container ) {
var containerWidth =
this.calculateSliderContainerWidth(),
$revisions =
this.slider.getRevisions().getView().render( this.revisionWidth ),
@@ -210,6 +215,7 @@
grid: [ this.revisionWidth, null ],
containment: containmentClass,
start: function() {
+ self.isDragged = true;
self.setPointerDragCursor();
self.fadeOutPointerLines();
escapePressed = false;
@@ -220,6 +226,7 @@
pointer = self.whichPointer( $p
),
revId1, revId2;
+ self.isDragged = false;
self.removePointerDragCursor();
if ( escapePressed ) {
diff --git a/modules/ext.RevisionSlider.SliderViewTwo.js
b/modules/ext.RevisionSlider.SliderViewTwo.js
index 150b740..f0f61a4 100644
--- a/modules/ext.RevisionSlider.SliderViewTwo.js
+++ b/modules/ext.RevisionSlider.SliderViewTwo.js
@@ -22,7 +22,8 @@
renderPointerContainer: function( containerWidth ) {
var pointerContainerPosition = 53,
pointerContainerWidth = containerWidth +
this.revisionWidth - 1,
- pointerContainerStyle;
+ pointerContainerStyle, lastMouseMoveRevisionPos,
+ self = this;
pointerContainerStyle = { left:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
if ( this.dir === 'rtl' ) {
@@ -37,7 +38,15 @@
return $( '<div>' )
.addClass( 'mw-revslider-pointer-container' )
.css( pointerContainerStyle )
- .append( this.renderPointerContainers() );
+ .append( this.renderPointerContainers() )
+ .mousemove( function( event ) {
+ if ( !self.isDragged ) {
+ lastMouseMoveRevisionPos =
self.showTooltipsOnMouseMoveHandler(
+ event,
+ lastMouseMoveRevisionPos
+ );
+ }
+ } );
},
renderPointerContainers: function() {
@@ -132,6 +141,27 @@
.removeClass( 'mw-revslider-pointer-grabbing' );
},
+ showTooltipsOnMouseMoveHandler: function( event,
lastValidPosition ) {
+ var $revisions =
this.slider.getRevisions().getView().getElement(),
+ revisionsX = $revisions.offset().left,
+ pos = Math.ceil( Math.abs( event.pageX -
revisionsX ) / this.revisionWidth ),
+ $hoveredRevisionWrapper;
+
+ if ( this.dir === 'rtl' ) {
+ pos = this.slider.getRevisionsPerWindow() - pos
- 1;
+ pos =
this.slider.getNewestVisibleRevisionIndex() - pos;
+ }
+
+ if ( pos === lastValidPosition ) {
+ return pos;
+ }
+
+ $hoveredRevisionWrapper = this.getRevElementAtPosition(
$revisions, pos ).parent();
+ this.slider.getRevisions().getView().showTooltip(
$hoveredRevisionWrapper );
+
+ return pos;
+ },
+
sliderLineClickHandler: function( event, $line ) {
var $revisions = this.$element.find(
'.mw-revslider-revisions' ),
$clickedRev = this.getRevisionNearestToClick(
event ),
--
To view, visit https://gerrit.wikimedia.org/r/348047
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I45c1b73ca470d7b8fcf8b95e15187864e35e907f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
