From 29c8a4830d0ee1e553d5d21fd7ae52ee99e5cdc3 Mon Sep 17 00:00:00 2001 From: thiemowmde Date: Sat, 10 Feb 2024 16:22:18 +0100 Subject: [PATCH] Rewrite revision style assignment with jQuery.toggleClass This does the same as before, just in one single loop instead of so many different steps. The way the loop counts is odd. Why are the numbers returned by getOldestVisibleRevisionIndex and getNewestVisibleRevisionIndex off by one? I tried to make this more visible in the code without touching it. Change-Id: I5b9bd360bf48e138a7ae9406eab716d41fabd122 --- modules/ext.RevisionSlider.SliderView.js | 25 +++++++++++------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index 90207ce8..809acbcb 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/modules/ext.RevisionSlider.SliderView.js @@ -818,27 +818,24 @@ $.extend( SliderView.prototype, { resetRevisionStylesBasedOnPointerPosition: function ( $revisions ) { const olderRevPosition = this.getOlderPointerPos(), newerRevPosition = this.getNewerPointerPos(), - startPosition = this.slider.getOldestVisibleRevisionIndex(), - endPosition = this.slider.getNewestVisibleRevisionIndex(); - let positionIndex = startPosition; + // FIXME: Why do these methods return values that are off by one? + startPosition = this.slider.getOldestVisibleRevisionIndex() + 1, + endPosition = this.slider.getNewestVisibleRevisionIndex() + 1; + // We need to reset these in case they are outside the visible range $revisions.find( '.mw-revslider-revision' ) .removeClass( 'mw-revslider-revision-old mw-revslider-revision-new' ); - $revisions.find( '.mw-revslider-revision-wrapper' ) - .removeClass( 'mw-revslider-revision-intermediate mw-revslider-revision-older mw-revslider-revision-newer' ); this.getRevElementAtPosition( $revisions, olderRevPosition ).addClass( 'mw-revslider-revision-old' ); this.getRevElementAtPosition( $revisions, newerRevPosition ).addClass( 'mw-revslider-revision-new' ); - while ( positionIndex <= endPosition ) { - positionIndex++; - if ( positionIndex <= olderRevPosition ) { - this.getRevElementAtPosition( $revisions, positionIndex ).parent().addClass( 'mw-revslider-revision-older' ); - } else if ( positionIndex > olderRevPosition && positionIndex < newerRevPosition ) { - this.getRevElementAtPosition( $revisions, positionIndex ).parent().addClass( 'mw-revslider-revision-intermediate' ); - } else if ( positionIndex >= newerRevPosition ) { - this.getRevElementAtPosition( $revisions, positionIndex ).parent().addClass( 'mw-revslider-revision-newer' ); - } + for ( let i = startPosition; i <= endPosition; i++ ) { + const older = i <= olderRevPosition; + const newer = i >= newerRevPosition; + this.getRevElementAtPosition( $revisions, i ).parent() + .toggleClass( 'mw-revslider-revision-older', older ) + .toggleClass( 'mw-revslider-revision-intermediate', !older && !newer ) + .toggleClass( 'mw-revslider-revision-newer', newer ); } },