Use attr() to get revision position number

When we load new revsions in the background and extend the view,
we still want to keep track of the positioning. This is done with
the `data-pos` attribute. When shifting the numbers due to
re-loading the `data-pos` of each revision is updated to a new
value.

$.data() does not nessecarily load the value from the `data-`
attribute, but seems to have a different representation in parallel

In some situations the results of data() vs attr( 'data-' ) seem
to differ, leading to situations where the pointer moves to the
wrong postion when clicking.

Trusting the attribute call seems to be the most stable approach
here.

Change-Id: I3c877b5a5f21ca36b8857d29ec018b16ff588962
This commit is contained in:
WMDE-Fisch 2024-02-21 13:56:44 +01:00
parent 62e9fd443c
commit f056cca73a
3 changed files with 16 additions and 16 deletions

View file

@ -548,7 +548,7 @@ $.extend( RevisionListView.prototype, {
*/
setTagFilterEvents: function ( $tagBubble, event ) {
const $tagLine = $tagBubble.parent(),
tagName = $tagLine.data( 'tag-name' );
tagName = $tagLine.attr( 'data-tag-name' );
if ( this.selectedTag === tagName && event.type !== 'click' ) {
return;

View file

@ -81,7 +81,7 @@ $.extend( SliderArrowView.prototype, {
return;
}
mw.track( 'counter.MediaWiki.RevisionSlider.event.arrowClick' );
this.sliderView.slideView( button.$element.data( 'dir' ) );
this.sliderView.slideView( button.$element.attr( 'data-dir' ) );
},
/**

View file

@ -320,7 +320,7 @@ $.extend( SliderView.prototype, {
// Just use the information from the element that received the click, if available
const $revElement = $( event.currentTarget ).find( '.mw-revslider-revision' );
if ( $revElement.length === 1 ) {
clickedPos = $revElement.data( 'pos' );
clickedPos = +$revElement.attr( 'data-pos' );
} else {
clickedPos = this.getRevisionPositionFromLeftOffset( event.pageX );
}
@ -463,13 +463,13 @@ $.extend( SliderView.prototype, {
return;
}
const diff = this.getRevElementAtPosition(
const diff = +this.getRevElementAtPosition(
$revisions, this.getNewerPointerPos()
).data( 'revid' );
).attr( 'data-revid' );
const oldid = this.getRevElementAtPosition(
const oldid = +this.getRevElementAtPosition(
$revisions, this.getOlderPointerPos()
).data( 'revid' );
).attr( 'data-revid' );
this.lastRequest = this.refreshDiffView( diff, oldid );
@ -523,13 +523,13 @@ $.extend( SliderView.prototype, {
pointer.setPosition( self.slider.getOldestVisibleRevisionIndex() + relativeIndex );
const diff = self.getRevElementAtPosition(
const diff = +self.getRevElementAtPosition(
$revisions, self.getNewerPointerPos()
).data( 'revid' );
).attr( 'data-revid' );
const oldid = self.getRevElementAtPosition(
const oldid = +self.getRevElementAtPosition(
$revisions, self.getOlderPointerPos()
).data( 'revid' );
).attr( 'data-revid' );
if ( self.getNewerPointerPos() === self.lastNewPointerPosition &&
self.getOlderPointerPos() === self.lastOldPointerPosition ) {
@ -745,8 +745,8 @@ $.extend( SliderView.prototype, {
// Note: this is currently caught in init.js
throw new Error( 'RS-revs-not-specified' );
}
this.setOlderPointerPos( $oldRevElement.length ? $oldRevElement.data( 'pos' ) : -1 );
this.setNewerPointerPos( $newRevElement.data( 'pos' ) );
this.setOlderPointerPos( $oldRevElement.length ? +$oldRevElement.attr( 'data-pos' ) : -1 );
this.setNewerPointerPos( +$newRevElement.attr( 'data-pos' ) );
this.resetSliderLines();
},
@ -1103,7 +1103,7 @@ $.extend( SliderView.prototype, {
// Special case: old revision has been previously not loaded, need to initialize correct position
const $oldRevElement = this.getOldRevElement( $addedRevisions );
if ( $oldRevElement.length !== 0 ) {
this.setOlderPointerPos( $oldRevElement.data( 'pos' ) );
this.setOlderPointerPos( +$oldRevElement.attr( 'data-pos' ) );
revisionStyleResetRequired = true;
}
@ -1120,8 +1120,8 @@ $.extend( SliderView.prototype, {
this.slider.setFirstVisibleRevisionIndex( this.slider.getOldestVisibleRevisionIndex() + revisionsToRender.getLength() );
const revIdOld = this.getRevElementAtPosition( $revisions, this.getOlderPointerPos() ).data( 'revid' );
const revIdNew = this.getRevElementAtPosition( $revisions, this.getNewerPointerPos() ).data( 'revid' );
const revIdOld = +this.getRevElementAtPosition( $revisions, this.getOlderPointerPos() ).attr( 'data-revid' );
const revIdNew = +this.getRevElementAtPosition( $revisions, this.getNewerPointerPos() ).attr( 'data-revid' );
this.diffPage.replaceState( revIdNew, revIdOld, this );
$revisionContainer.scrollLeft( this.getScrollLeft( $revisionContainer ) );