/**
* Module containing presentation logic for the revision pointers
*
* @class PointerView
* @param {Pointer} pointer
* @param {string} name
* @constructor
*/
function PointerView( pointer, name ) {
this.pointer = pointer;
this.name = name;
}
$.extend( PointerView.prototype, {
/**
* @type {string}
*/
name: '',
/**
* @type {Pointer}
*/
pointer: null,
/**
* @type {jQuery}
*/
$html: null,
/**
* Initializes the DOM element
*/
initialize: function () {
// eslint-disable-next-line mediawiki/class-doc
this.$html = $( '
' )
.addClass( 'mw-revslider-pointer mw-revslider-pointer-cursor ' + this.name );
},
/**
* @return {jQuery}
*/
render: function () {
this.initialize();
return this.getElement();
},
/**
* @return {jQuery}
*/
getElement: function () {
return this.$html;
},
/**
* Returns whether a pointer is the newer revision pointer based on its CSS class
*
* @return {boolean}
*/
isNewerPointer: function () {
return this.getElement().hasClass( 'mw-revslider-pointer-newer' );
},
/**
* Returns the offset (margin-left) depending on whether its the newer or older pointer
*
* @return {number}
*/
getOffset: function () {
return this.isNewerPointer() ? 16 : 0;
},
// For correct positioning of the pointer in the RTL mode the left position is flipped in the container.
// 30 pixel have to be added to cover the arrow and its margin.
getAdjustedLeftPositionWhenRtl: function ( pos ) {
return this.getElement().offsetParent().width() - pos - 30;
},
/**
* Sets the HTML attribute for the position
*
* @param {number} pos
*/
setDataPositionAttribute: function ( pos ) {
if ( this.getElement() === null ) {
this.initialize();
}
this.getElement().attr( 'data-pos', pos );
},
/**
* Moves the pointer to a position
*
* @param {number} posInPx
* @param {number} revisionWidth
* @param {number} [baseDuration] Duration per revisionWidth, is adjusted by log() distance
* @return {jQuery}
*/
animateTo: function ( posInPx, revisionWidth, baseDuration ) {
const animatePos = { left: posInPx },
currentPos = this.getElement().position();
baseDuration = typeof baseDuration !== 'undefined' ? baseDuration : 100;
if ( this.getElement().css( 'direction' ) === 'rtl' ) {
animatePos.left = this.getAdjustedLeftPositionWhenRtl( animatePos.left );
}
const distance = Math.abs( animatePos.left - currentPos.left ) / revisionWidth;
const duration = baseDuration * Math.log( 5 + distance );
return this.getElement().animate( animatePos, duration, 'linear' );
},
/**
* Slides the pointer to the revision it's pointing at
*
* @param {Slider} slider
* @param {number} [duration]
* @return {jQuery}
*/
slideToPosition: function ( slider, duration ) {
const relativePos = this.pointer.getPosition() - slider.getOldestVisibleRevisionIndex();
return this.animateTo( ( relativePos - 1 ) * slider.getView().revisionWidth, slider.getView().revisionWidth, duration );
},
/**
* Slides the pointer to the side of the slider when it's not in the current range of revisions
*
* @param {Slider} slider
* @param {boolean} posBeforeSlider
* @param {number} [duration]
* @return {jQuery}
*/
slideToSide: function ( slider, posBeforeSlider, duration ) {
if ( posBeforeSlider ) {
return this.animateTo( this.getOffset() - 2 * slider.getView().revisionWidth, slider.getView().revisionWidth, duration );
} else {
return this.animateTo( slider.getRevisionsPerWindow() * slider.getView().revisionWidth + this.getOffset(), slider.getView().revisionWidth, duration );
}
},
/**
* Decides based on its position whether the pointer should be sliding to the side or to its position
*
* @param {Slider} slider
* @param {number} [duration]
* @return {jQuery}
*/
slideToSideOrPosition: function ( slider, duration ) {
const firstVisibleRev = slider.getOldestVisibleRevisionIndex(),
posBeforeSlider = this.pointer.getPosition() < firstVisibleRev,
isVisible = !posBeforeSlider && this.pointer.getPosition() <= firstVisibleRev + slider.getRevisionsPerWindow();
if ( isVisible ) {
return this.slideToPosition( slider, duration );
} else {
return this.slideToSide( slider, posBeforeSlider, duration );
}
}
} );
module.exports = PointerView;