WordPress.org

Make WordPress Core

Ticket #24425: 24425.draft.39.diff

File 24425.draft.39.diff, 4.4 KB (added by adamsilverstein, 9 years ago)

enables smooth handle dragging in two handle mode

  • wp-admin/js/revisions.js

     
    545545
    546546                        // And update the slider in case the route has set it.
    547547                        this.updateSliderSettings();
    548 
    549548                        this.slide( '', this.settings.attributes );
    550 
    551549                        this.$el.slider( this.settings.toJSON() );
    552550
    553551                        // Listen for changes in Compare Two Mode setting
     
    568566                                actualX = e.clientX - sliderLeft,
    569567                                hoveringAt = Math.floor( actualX / tickWidth );
    570568
    571                         // Reverse direction in Rtl mode.
     569                        // Reverse direction in RTL mode.
    572570                        if ( isRtl )
    573571                                hoveringAt = this.model.revisions.length - hoveringAt - 1;
    574572
     
    606604                                                rightValue = leftValue + 1;
    607605                                        }
    608606                                } else {
    609                                         leftValue  = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
     607                                        leftValue = isRtl ?     this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
    610608                                                                                        this.model.revisions.indexOf( this.model.get( 'from' ) ),
    611609                                        rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
    612610                                                                                        this.model.revisions.indexOf( this.model.get( 'to' ) );
     
    665663                },
    666664
    667665                start: function( event, ui ) {
    668                         if ( this.model.get( 'compareTwoMode' ) )
    669                                 return;
    670 
     666                        var self = this;
    671667                        // Track the mouse position to enable smooth dragging,
    672                         // overrides default jQuery UI step behaviour.
     668                        // overrides default jQuery UI step behavior.
    673669                        $( window ).on( 'mousemove', { slider: this }, function( e ) {
    674                                 var slider = e.data.slider,
    675                                         sliderLeft = slider.$el.offset().left,
    676                                         sliderRight = sliderLeft + slider.$el.width();
     670                                var slider            = e.data.slider,
     671                                        leftDragBoundary  = slider.$el.offset().left, // Initial left boundary
     672                                        sliderOffset      = leftDragBoundary,
     673                                        sliderRightEdge   = leftDragBoundary + slider.$el.width(),
     674                                        rightDragBoundary = sliderRightEdge, // Initial right boundary
     675                                        leftDragReset     = 0, // Initial left drag reset
     676                                        rightDragReset    = sliderRightEdge - sliderOffset; // Initial right drag reset
    677677
     678                                // In two handle mode, ensure handles can't be dragged past each other.
     679                                // Adjust left/right boundaries and reset points.
     680                                if ( self.model.get( 'compareTwoMode' ) ) {
     681                                        var rightHandle = $(ui.handle).parent().find( '.right-handle' ),
     682                                                leftHandle  = $(ui.handle).parent().find( '.left-handle' );
     683                                        if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
     684                                                // Dragging the left handle, boundary is right handle.
     685                                                // RTL mode calculations reverse directions.
     686                                                if ( isRtl ) {
     687                                                        leftDragBoundary = rightHandle.offset().left + rightHandle.width();
     688                                                        leftDragReset    = leftDragBoundary - sliderOffset;
     689                                                } else {
     690                                                        rightDragBoundary = rightHandle.offset().left;
     691                                                        rightDragReset    = rightDragBoundary - sliderOffset;
     692                                                }
     693                                        } else {
     694                                                // Dragging the right handle, boundary is the left handle.
     695                                                // RTL mode calculations reverse directions.
     696                                                if ( isRtl ) {
     697                                                        rightDragBoundary = leftHandle.offset().left;
     698                                                        rightDragReset    = rightDragBoundary - sliderOffset;
     699                                                } else {
     700                                                        leftDragBoundary = leftHandle.offset().left + leftHandle.width() ;
     701                                                        leftDragReset    = leftDragBoundary - sliderOffset;
     702                                                }
     703                                        }
     704                                }
    678705                                // Follow mouse movements, as long as handle remains inside slider.
    679                                 if ( e.clientX < sliderLeft ) {
    680                                         $( ui.handle ).css( 'left', 0 ); // Mouse to left of slider.
    681                                 } else if ( e.clientX > sliderRight ) {
    682                                         $( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider.
     706                                if ( e.clientX < leftDragBoundary ) {
     707                                        $( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
     708                                } else if ( e.clientX > rightDragBoundary ) {
     709                                        $( ui.handle ).css( 'left', rightDragReset); // Mouse to right of slider.
    683710                                } else {
    684                                         $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
     711                                        $( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
    685712                                }
    686713                        } );
    687714                },
     
    716743                },
    717744
    718745                stop: function( event, ui ) {
    719                         if ( this.model.get( 'compareTwoMode' ) )
    720                                 return;
    721 
    722746                        $( window ).off( 'mousemove' );
    723747
    724748                        // Reset settings props handle back to the step position.