WordPress.org

Make WordPress Core

Changeset 24579


Ignore:
Timestamp:
07/06/2013 08:22:02 PM (6 years ago)
Author:
ocean90
Message:

Revisions improvements

  • Enable smooth sliding in Compare two mode

props adamsilverstein. see #24425.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/js/revisions.js

    r24578 r24579  
    237237            this.listenTo( this.model, 'change:diffId', this.updateDiff );
    238238
     239            this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
     240
    239241            this.views.set( '.revisions-control-frame', new revisions.view.Controls({
    240242                model: this.model
     
    276278                this.model.trigger( 'renderDiff' );
    277279            });
     280        },
     281
     282        updateCompareTwoMode: function() {
     283            this.$el.toggleClass( 'comparing-two-revisions' );
    278284        }
    279285    });
     
    337343        updateMeta: function() {
    338344            this.$el.html( this.template( this.model.toJSON() ) );
    339             if( this.model.get( 'to' ).attributes.current ) {
    340                 $( '#restore-revision' ).prop( 'disabled', true );
    341             } else {
    342                 $( '#restore-revision' ).prop( 'disabled', false );
    343             }
     345
     346            $( '#restore-revision' ).prop( 'disabled', this.model.get( 'to' ).attributes.current );
    344347        }
    345348    });
     
    376379        compareTwoToggle: function( event ) {
    377380            // Activate compare two mode?
    378             if ( $( '.compare-two-revisions' ).is( ':checked' ) ) {
    379                 this.model.set( { compareTwoMode: true } );
    380             } else {
    381                 this.model.set( { compareTwoMode: false } );
    382             }
     381            this.model.set( { compareTwoMode: $( '.compare-two-revisions' ).prop( 'checked' ) } );
    383382
    384383            // Update route
     
    546545            // And update the slider in case the route has set it.
    547546            this.updateSliderSettings();
    548 
    549547            this.slide( '', this.settings.attributes );
    550 
    551548            this.$el.slider( this.settings.toJSON() );
    552549
     
    569566                hoveringAt = Math.floor( actualX / tickWidth );
    570567
    571             // Reverse direction in Rtl mode.
     568            // Reverse direction in RTL mode.
    572569            if ( isRtl )
    573570                hoveringAt = this.model.revisions.length - hoveringAt - 1;
     
    607604                    }
    608605                } else {
    609                     leftValue  = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
     606                    leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 :
    610607                                            this.model.revisions.indexOf( this.model.get( 'from' ) ),
    611608                    rightValue = isRtl ?    this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from' ) ) - 1 :
     
    632629                } );
    633630            }
     631
    634632            if ( this.model.get( 'compareTwoMode' ) ){
    635                 $( '.revisions' ).addClass( 'comparing-two-revisions' );
    636 
    637633                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    638634                $( 'a.ui-slider-handle', this.$el )
     
    644640                    .addClass( isRtl ? 'left-handle' : 'right-handle' )
    645641                    .removeClass( isRtl ? 'right-handle' : 'left-handle' );
    646             } else {
    647                 $( '.revisions' ).removeClass( 'comparing-two-revisions' );
    648642            }
    649643        },
     
    666660
    667661        start: function( event, ui ) {
    668             if ( this.model.get( 'compareTwoMode' ) )
    669                 return;
    670 
    671662            // Track the mouse position to enable smooth dragging,
    672             // overrides default jQuery UI step behaviour.
    673             $( 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();
     663            // overrides default jQuery UI step behavior.
     664            $( window ).on( 'mousemove', { view: this }, function( e ) {
     665                var view              = e.data.view,
     666                    leftDragBoundary  = view.$el.offset().left, // Initial left boundary
     667                    sliderOffset      = leftDragBoundary,
     668                    sliderRightEdge   = leftDragBoundary + view.$el.width(),
     669                    rightDragBoundary = sliderRightEdge, // Initial right boundary
     670                    leftDragReset     = 0, // Initial left drag reset
     671                    rightDragReset    = sliderRightEdge - sliderOffset; // Initial right drag reset
     672
     673                // In two handle mode, ensure handles can't be dragged past each other.
     674                // Adjust left/right boundaries and reset points.
     675                if ( view.model.get( 'compareTwoMode' ) ) {
     676                    var rightHandle = $( ui.handle ).parent().find( '.right-handle' ),
     677                        leftHandle  = $( ui.handle ).parent().find( '.left-handle' );
     678
     679                    if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
     680                        // Dragging the left handle, boundary is right handle.
     681                        // RTL mode calculations reverse directions.
     682                        if ( isRtl ) {
     683                            leftDragBoundary = rightHandle.offset().left + rightHandle.width();
     684                            leftDragReset    = leftDragBoundary - sliderOffset;
     685                        } else {
     686                            rightDragBoundary = rightHandle.offset().left;
     687                            rightDragReset    = rightDragBoundary - sliderOffset;
     688                        }
     689                    } else {
     690                        // Dragging the right handle, boundary is the left handle.
     691                        // RTL mode calculations reverse directions.
     692                        if ( isRtl ) {
     693                            rightDragBoundary = leftHandle.offset().left;
     694                            rightDragReset    = rightDragBoundary - sliderOffset;
     695                        } else {
     696                            leftDragBoundary = leftHandle.offset().left + leftHandle.width() ;
     697                            leftDragReset    = leftDragBoundary - sliderOffset;
     698                        }
     699                    }
     700                }
    677701
    678702                // 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.
     703                if ( e.clientX < leftDragBoundary ) {
     704                    $( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
     705                } else if ( e.clientX > rightDragBoundary ) {
     706                    $( ui.handle ).css( 'left', rightDragReset ); // Mouse to right of slider.
    683707                } else {
    684                     $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
     708                    $( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
    685709                }
    686710            } );
     
    717741
    718742        stop: function( event, ui ) {
    719             if ( this.model.get( 'compareTwoMode' ) )
    720                 return;
    721 
    722743            $( window ).off( 'mousemove' );
    723744
Note: See TracChangeset for help on using the changeset viewer.