Ticket #24425: 24425.draft.39.diff

wp-admin/js/revisions.js

@@ -545 +545 @@
 
                         // And update the slider in case the route has set it.
                         this.updateSliderSettings();
-
                         this.slide( '', this.settings.attributes );
-
                         this.$el.slider( this.settings.toJSON() );
 
                         // Listen for changes in Compare Two Mode setting
@@ -568 +566 @@
                                 actualX = e.clientX - sliderLeft,
                                 hoveringAt = Math.floor( actualX / tickWidth );
 
-                        // Reverse direction in Rtl mode.
+                        // Reverse direction in RTL mode.
                         if ( isRtl )
                                 hoveringAt = this.model.revisions.length - hoveringAt - 1;
 
@@ -606 +604 @@
                                                 rightValue = leftValue + 1;
                                         }
                                 } else {
-                                        leftValue  = isRtl ?    this.model.revisions.length -  this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
+                                        leftValue = isRtl ?     this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
                                                                                         this.model.revisions.indexOf( this.model.get( 'from' ) ),
                                         rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
                                                                                         this.model.revisions.indexOf( this.model.get( 'to' ) );
@@ -665 +663 @@
                 },
 
                 start: function( event, ui ) {
-                        if ( this.model.get( 'compareTwoMode' ) )
-                                return;
-
+                        var self = this;
                         // Track the mouse position to enable smooth dragging,
-                        // overrides default jQuery UI step behaviour.
+                        // overrides default jQuery UI step behavior.
                         $( window ).on( 'mousemove', { slider: this }, function( e ) {
-                                var slider = e.data.slider,
-                                        sliderLeft = slider.$el.offset().left,
-                                        sliderRight = sliderLeft + slider.$el.width();
+                                var slider            = e.data.slider,
+                                        leftDragBoundary  = slider.$el.offset().left, // Initial left boundary
+                                        sliderOffset      = leftDragBoundary,
+                                        sliderRightEdge   = leftDragBoundary + slider.$el.width(),
+                                        rightDragBoundary = sliderRightEdge, // Initial right boundary
+                                        leftDragReset     = 0, // Initial left drag reset
+                                        rightDragReset    = sliderRightEdge - sliderOffset; // Initial right drag reset
 
+                                // In two handle mode, ensure handles can't be dragged past each other.
+                                // Adjust left/right boundaries and reset points.
+                                if ( self.model.get( 'compareTwoMode' ) ) {
+                                        var rightHandle = $(ui.handle).parent().find( '.right-handle' ),
+                                                leftHandle  = $(ui.handle).parent().find( '.left-handle' );
+                                        if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
+                                                // Dragging the left handle, boundary is right handle.
+                                                // RTL mode calculations reverse directions.
+                                                if ( isRtl ) {
+                                                        leftDragBoundary = rightHandle.offset().left + rightHandle.width();
+                                                        leftDragReset    = leftDragBoundary - sliderOffset;
+                                                } else {
+                                                        rightDragBoundary = rightHandle.offset().left;
+                                                        rightDragReset    = rightDragBoundary - sliderOffset;
+                                                }
+                                        } else {
+                                                // Dragging the right handle, boundary is the left handle.
+                                                // RTL mode calculations reverse directions.
+                                                if ( isRtl ) {
+                                                        rightDragBoundary = leftHandle.offset().left;
+                                                        rightDragReset    = rightDragBoundary - sliderOffset;
+                                                } else {
+                                                        leftDragBoundary = leftHandle.offset().left + leftHandle.width() ;
+                                                        leftDragReset    = leftDragBoundary - sliderOffset;
+                                                }
+                                        }
+                                }
                                 // Follow mouse movements, as long as handle remains inside slider.
-                                if ( e.clientX < sliderLeft ) {
-                                        $( ui.handle ).css( 'left', 0 ); // Mouse to left of slider.
-                                } else if ( e.clientX > sliderRight ) {
-                                        $( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider.
+                                if ( e.clientX < leftDragBoundary ) {
+                                        $( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
+                                } else if ( e.clientX > rightDragBoundary ) {
+                                        $( ui.handle ).css( 'left', rightDragReset); // Mouse to right of slider.
                                 } else {
-                                        $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
+                                        $( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
                                 }
                         } );
                 },
@@ -716 +743 @@
                 },
 
                 stop: function( event, ui ) {
-                        if ( this.model.get( 'compareTwoMode' ) )
-                                return;
-
                         $( window ).off( 'mousemove' );
 
                         // Reset settings props handle back to the step position.