WMDE-Fisch has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/363159 )
Change subject: Merge container and pointer building and dependencies
......................................................................
Merge container and pointer building and dependencies
Change-Id: I6c933b0702910aca4c38b2e4a5098f11fdc28ad5
---
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.SliderViewTwo.js
2 files changed, 113 insertions(+), 164 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/59/363159/1
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index a400dda..fb9e1fa 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -159,24 +159,58 @@
* @return {jQuery} the pointer container
*/
renderPointerContainer: function ( containerWidth ) {
- var pointerContainerSideOffset = 53,
+ var pointerContainerPosition = 53,
pointerContainerWidth = containerWidth +
this.revisionWidth - 1,
- pointerContainerStyle;
+ pointerContainerStyle, lastMouseMoveRevisionPos,
+ self = this;
- pointerContainerStyle = { left:
pointerContainerSideOffset + 'px', width: pointerContainerWidth + 'px' };
+ pointerContainerStyle = { left:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
if ( this.dir === 'rtl' ) {
// Due to properly limit dragging a pointer on
the right side of the screen,
// there must some extra space added to the
right of the revision bar container
// For this reason right position of the
pointer container in the RTL mode is
// a bit moved off right compared to its left
position in the LTR mode
- pointerContainerSideOffset =
pointerContainerSideOffset - this.revisionWidth + 1;
- pointerContainerStyle = { right:
pointerContainerSideOffset + 'px', width: pointerContainerWidth + 'px' };
+ pointerContainerPosition =
pointerContainerPosition - this.revisionWidth + 1;
+ pointerContainerStyle = { right:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
}
return $( '<div>' )
.addClass( 'mw-revslider-pointer-container' )
.css( pointerContainerStyle )
- .append( this.pointerOlder.getView().render(),
this.pointerNewer.getView().render() );
+ .append( this.renderPointerContainers() )
+ .mousemove( function ( event ) {
+ if ( !self.isDragged ) {
+ lastMouseMoveRevisionPos =
self.showTooltipsOnMouseMoveHandler(
+ event,
+ lastMouseMoveRevisionPos
+ );
+ }
+ } );
+ },
+
+ renderPointerContainers: function () {
+ var self = this;
+
+ return [
+ $( '<div>' )
+ .addClass(
'mw-revslider-pointer-container-newer' )
+ .click( function ( event ) {
+ self.sliderLineClickHandler(
event, $( this ) );
+ } )
+ .append(
+ $( '<div>' ).addClass(
'mw-revslider-slider-line' ),
+
this.pointerNewer.getView().render()
+ ),
+ $( '<div>' )
+ .addClass(
'mw-revslider-pointer-container-older' )
+ .click( function ( event ) {
+ self.sliderLineClickHandler(
event, $( this ) );
+ } )
+ .append(
+ $( '<div>' ).addClass(
'mw-revslider-slider-line' ),
+
this.pointerOlder.getView().render()
+ )
+ ];
},
/**
@@ -186,6 +220,8 @@
*/
initPointers: function ( $revisions ) {
var $pointers,
+ $pointerOlder =
this.pointerOlder.getView().getElement(),
+ $pointerNewer =
this.pointerNewer.getView().getElement(),
self = this;
$pointers = this.$element.find( '.mw-revslider-pointer'
);
@@ -197,11 +233,77 @@
}
} );
- $pointers.draggable( this.buildDraggableOptions(
$revisions, '.mw-revslider-pointer-container' ) );
- $pointers.on(
- 'touchstart touchmove touchend',
- mw.libs.revisionSlider.touchEventConverter
- );
+ $pointerOlder.draggable( this.buildDraggableOptions(
+ $revisions,
+ '.mw-revslider-pointer-container-older'
+ ) );
+ $pointerNewer.draggable( this.buildDraggableOptions(
+ $revisions,
+ '.mw-revslider-pointer-container-newer'
+ ) );
+
+ $pointerNewer
+ .on(
+ 'touchstart touchmove touchend
touchcancel touchleave',
+
mw.libs.revisionSlider.touchEventConverter
+ )
+ .addClass( 'mw-revslider-pointer-newid
mw-revslider-pointer-upper' );
+ $pointerOlder
+ .on(
+ 'touchstart touchmove touchend
touchcancel touchleave',
+
mw.libs.revisionSlider.touchEventConverter
+ )
+ .addClass( 'mw-revslider-pointer-oldid
mw-revslider-pointer-lower' );
+ },
+
+ showTooltipsOnMouseMoveHandler: function ( event,
lastValidPosition ) {
+ var pos = this.getRevisionPositionFromLeftOffset(
event.pageX ),
+ $hoveredRevisionWrapper;
+
+ if ( pos === lastValidPosition ) {
+ return pos;
+ }
+
+ $hoveredRevisionWrapper = this.getRevElementAtPosition(
this.getRevisionsElement(), pos ).parent();
+ this.slider.getRevisions().getView().showTooltip(
$hoveredRevisionWrapper );
+
+ return pos;
+ },
+
+ sliderLineClickHandler: function ( event, $line ) {
+ var pos = this.getRevisionPositionFromLeftOffset(
event.pageX ),
+ $clickedRev, pointerMoved, pointerOther,
$revisions;
+
+ if ( $line.hasClass(
'mw-revslider-pointer-container-newer' ) ) {
+ pointerMoved = this.pointerNewer;
+ pointerOther = this.pointerOlder;
+ } else {
+ pointerMoved = this.pointerOlder;
+ pointerOther = this.pointerNewer;
+ }
+
+ if ( pos === pointerOther.getPosition() ) {
+ return;
+ }
+
+ $revisions = this.getRevisionsElement();
+ $clickedRev = this.getRevElementAtPosition( $revisions,
pos );
+
+ pointerMoved.setPosition( pos );
+ this.updatePointerPositionAttributes();
+ if ( $line.hasClass(
'mw-revslider-pointer-container-newer' ) ) {
+ this.refreshRevisions(
+ $clickedRev.attr( 'data-revid' ),
+ this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).attr( 'data-revid' )
+ );
+ } else {
+ this.refreshRevisions(
+ this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).attr( 'data-revid' ),
+ $clickedRev.attr( 'data-revid' )
+ );
+ }
+ this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
+ this.alignPointers();
},
/**
diff --git a/modules/ext.RevisionSlider.SliderViewTwo.js
b/modules/ext.RevisionSlider.SliderViewTwo.js
index 604a90d..5817f22 100644
--- a/modules/ext.RevisionSlider.SliderViewTwo.js
+++ b/modules/ext.RevisionSlider.SliderViewTwo.js
@@ -13,109 +13,6 @@
OO.inheritClass( SliderViewTwo, mw.libs.revisionSlider.SliderView );
$.extend( SliderViewTwo.prototype, {
- /**
- * Renders the pointer container and adds the pointers to it
- *
- * @param {number} containerWidth
- * @return {jQuery} the pointer container
- */
- renderPointerContainer: function ( containerWidth ) {
- var pointerContainerPosition = 53,
- pointerContainerWidth = containerWidth +
this.revisionWidth - 1,
- pointerContainerStyle, lastMouseMoveRevisionPos,
- self = this;
-
- pointerContainerStyle = { left:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
- if ( this.dir === 'rtl' ) {
- // Due to properly limit dragging a pointer on
the right side of the screen,
- // there must some extra space added to the
right of the revision bar container
- // For this reason right position of the
pointer container in the RTL mode is
- // a bit moved off right compared to its left
position in the LTR mode
- pointerContainerPosition =
pointerContainerPosition - this.revisionWidth + 1;
- pointerContainerStyle = { right:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
- }
-
- return $( '<div>' )
- .addClass( 'mw-revslider-pointer-container' )
- .css( pointerContainerStyle )
- .append( this.renderPointerContainers() )
- .mousemove( function ( event ) {
- if ( !self.isDragged ) {
- lastMouseMoveRevisionPos =
self.showTooltipsOnMouseMoveHandler(
- event,
- lastMouseMoveRevisionPos
- );
- }
- } );
- },
-
- renderPointerContainers: function () {
- var self = this;
-
- return [
- $( '<div>' )
- .addClass(
'mw-revslider-pointer-container-newer' )
- .click( function ( event ) {
- self.sliderLineClickHandler(
event, $( this ) );
- } )
- .append(
- $( '<div>' ).addClass(
'mw-revslider-slider-line' ),
-
this.pointerNewer.getView().render()
- ),
- $( '<div>' )
- .addClass(
'mw-revslider-pointer-container-older' )
- .click( function ( event ) {
- self.sliderLineClickHandler(
event, $( this ) );
- } )
- .append(
- $( '<div>' ).addClass(
'mw-revslider-slider-line' ),
-
this.pointerOlder.getView().render()
- )
- ];
- },
-
- /**
- * Initializes the pointer dragging logic
- *
- * @param {jQuery} $revisions
- */
- initPointers: function ( $revisions ) {
- var $pointers,
- $pointerOlder =
this.pointerOlder.getView().getElement(),
- $pointerNewer =
this.pointerNewer.getView().getElement(),
- self = this;
-
- $pointers = this.$element.find( '.mw-revslider-pointer'
);
-
- $( 'body' ).keydown( function ( e ) {
- if ( e.which === 27 ) {
- self.escapePressed = true;
- $pointers.trigger( 'mouseup' );
- }
- } );
-
- $pointerOlder.draggable( this.buildDraggableOptions(
- $revisions,
- '.mw-revslider-pointer-container-older'
- ) );
- $pointerNewer.draggable( this.buildDraggableOptions(
- $revisions,
- '.mw-revslider-pointer-container-newer'
- ) );
-
- $pointerNewer
- .on(
- 'touchstart touchmove touchend
touchcancel touchleave',
-
mw.libs.revisionSlider.touchEventConverter
- )
- .addClass( 'mw-revslider-pointer-newid
mw-revslider-pointer-upper' );
- $pointerOlder
- .on(
- 'touchstart touchmove touchend
touchcancel touchleave',
-
mw.libs.revisionSlider.touchEventConverter
- )
- .addClass( 'mw-revslider-pointer-oldid
mw-revslider-pointer-lower' );
- },
setPointerDragCursor: function () {
$( '.mw-revslider-pointer, ' +
@@ -135,56 +32,6 @@
'.mw-revslider-pointer-line, ' +
'.mw-revslider-revision-wrapper' )
.removeClass( 'mw-revslider-pointer-grabbing' );
- },
-
- showTooltipsOnMouseMoveHandler: function ( event,
lastValidPosition ) {
- var pos = this.getRevisionPositionFromLeftOffset(
event.pageX ),
- $hoveredRevisionWrapper;
-
- if ( pos === lastValidPosition ) {
- return pos;
- }
-
- $hoveredRevisionWrapper = this.getRevElementAtPosition(
this.getRevisionsElement(), pos ).parent();
- this.slider.getRevisions().getView().showTooltip(
$hoveredRevisionWrapper );
-
- return pos;
- },
-
- sliderLineClickHandler: function ( event, $line ) {
- var pos = this.getRevisionPositionFromLeftOffset(
event.pageX ),
- $clickedRev, pointerMoved, pointerOther,
$revisions;
-
- if ( $line.hasClass(
'mw-revslider-pointer-container-newer' ) ) {
- pointerMoved = this.pointerNewer;
- pointerOther = this.pointerOlder;
- } else {
- pointerMoved = this.pointerOlder;
- pointerOther = this.pointerNewer;
- }
-
- if ( pos === pointerOther.getPosition() ) {
- return;
- }
-
- $revisions = this.getRevisionsElement();
- $clickedRev = this.getRevElementAtPosition( $revisions,
pos );
-
- pointerMoved.setPosition( pos );
- this.updatePointerPositionAttributes();
- if ( $line.hasClass(
'mw-revslider-pointer-container-newer' ) ) {
- this.refreshRevisions(
- $clickedRev.attr( 'data-revid' ),
- this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).attr( 'data-revid' )
- );
- } else {
- this.refreshRevisions(
- this.getRevElementAtPosition(
$revisions, pointerOther.getPosition() ).attr( 'data-revid' ),
- $clickedRev.attr( 'data-revid' )
- );
- }
- this.resetRevisionStylesBasedOnPointerPosition(
$revisions );
- this.alignPointers();
},
resetPointerColorsBasedOnValues: function () {
--
To view, visit https://gerrit.wikimedia.org/r/363159
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6c933b0702910aca4c38b2e4a5098f11fdc28ad5
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
