WordPress.org

Make WordPress Core

Changeset 24579


Ignore:
Timestamp:
07/06/13 20:22:02 (10 months 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.