wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-14 19:24:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clamp slider position when using the browser's back button

Browse source 
Steps to reproduce:
* Make the browser window very narrow so that RevisionSlider can't
  show the maximum number of gray bars.
* Go to a page with many revisions, open the RevisionSlider, and pin
  it.
* Click the "Older edit" navigation link.
* Now make the browser window larger. Note how RevisionSlider will
  have more space to show more gray bars.
* Use the browser's back button.

The pointer positions will jump to a random position.

The problematic code is in DiffPage.initOnPopState() where a "state"
object from the browser history is used to not only restore the
position of the blue and yellow pointers, but also the relative
starting position of the slider (the position you can manually change
with the large left/right arrow buttons). The way this relative
position is calculated depends on the number of revisions that fit
on a screen, which depends on the the available screen width. The
problem is that these numbers change after the state was recorded in
the browser history.

It might be that this patch still does not solve the issue in all
possible situations. But it already makes it behave much better.

Bug: T349208
Change-Id: If8e89457232061698c3821cae2d0aab3f7778b26
This commit is contained in:
thiemowmde 2023-10-25 14:52:56 +02:00
parent cdf7a4af52
commit 3a9abded84
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
modules/ext.RevisionSlider.Slider.js
View file

@ -101,6 +101,8 @@ $.extend( Slider.prototype, {
* @param {number} value
*/
setFirstVisibleRevisionIndex: function ( value ) {
const highestPossibleFirstRev = this.revisions.getLength() - this.revisionsPerWindow;
value = Math.min( Math.max( 0, value ), highestPossibleFirstRev );
this.oldestVisibleRevisionIndex = value;
},
@ -110,11 +112,8 @@ $.extend( Slider.prototype, {
* @param {number} direction - Either -1, 0 or 1
*/
slide: function ( direction ) {
const highestPossibleFirstRev = this.revisions.getLength() - this.revisionsPerWindow;
this.oldestVisibleRevisionIndex += direction * this.revisionsPerWindow;
this.oldestVisibleRevisionIndex = Math.min( this.oldestVisibleRevisionIndex, highestPossibleFirstRev );
this.oldestVisibleRevisionIndex = Math.max( 0, this.oldestVisibleRevisionIndex );
const value = this.oldestVisibleRevisionIndex + direction * this.revisionsPerWindow;
this.setFirstVisibleRevisionIndex( value );
}
} );