Changeset 24579

Timestamp:

07/06/2013 08:22:02 PM (13 years ago)

Author:

ocean90

Message:

Revisions improvements

• Enable smooth sliding in Compare two mode

props adamsilverstein. see #24425.

File:

• trunk/wp-admin/js/revisions.js (modified) (11 diffs)

trunk/wp-admin/js/revisions.js

@@ -237 +237 @@
                         this.listenTo( this.model, 'change:diffId', this.updateDiff );
 
+                        this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode );
+
                         this.views.set( '.revisions-control-frame', new revisions.view.Controls({
                                 model: this.model
@@ -276 +278 @@
                                 this.model.trigger( 'renderDiff' );
                         });
+                },
+
+                updateCompareTwoMode: function() {
+                        this.$el.toggleClass( 'comparing-two-revisions' );
                 }
         });
@@ -337 +343 @@
                 updateMeta: function() {
                         this.$el.html( this.template( this.model.toJSON() ) );
-                        if( this.model.get( 'to' ).attributes.current ) {
-                                $( '#restore-revision' ).prop( 'disabled', true );
-                        } else {
-                                $( '#restore-revision' ).prop( 'disabled', false );
-                        }
+
+                        $( '#restore-revision' ).prop( 'disabled', this.model.get( 'to' ).attributes.current );
                 }
         });
@@ -376 +379 @@
                 compareTwoToggle: function( event ) {
                         // Activate compare two mode?
-                        if ( $( '.compare-two-revisions' ).is( ':checked' ) ) {
-                                this.model.set( { compareTwoMode: true } );
-                        } else {
-                                this.model.set( { compareTwoMode: false } );
-                        }
+                        this.model.set( { compareTwoMode: $( '.compare-two-revisions' ).prop( 'checked' ) } );
 
                         // Update route
@@ -546 +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() );
 
@@ -569 +566 @@
                                 hoveringAt = Math.floor( actualX / tickWidth );
 
-                        // Reverse direction in Rtl mode.
+                        // Reverse direction in RTL mode.
                         if ( isRtl )
                                 hoveringAt = this.model.revisions.length - hoveringAt - 1;
@@ -607 +604 @@
                                         }
                                 } 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 :
@@ -632 +629 @@
                                 } );
                         }
+
                         if ( this.model.get( 'compareTwoMode' ) ){
-                                $( '.revisions' ).addClass( 'comparing-two-revisions' );
-
                                 // in RTL mode the 'left handle' is the second in the slider, 'right' is first
                                 $( 'a.ui-slider-handle', this.$el )
@@ -644 +640 @@
                                         .addClass( isRtl ? 'left-handle' : 'right-handle' )
                                         .removeClass( isRtl ? 'right-handle' : 'left-handle' );
-                        } else {
-                                $( '.revisions' ).removeClass( 'comparing-two-revisions' );
                         }
                 },
@@ -666 +660 @@
 
                 start: function( event, ui ) {
-                        if ( this.model.get( 'compareTwoMode' ) )
-                                return;
-
                         // Track the mouse position to enable smooth dragging,
-                        // overrides default jQuery UI step behaviour.
-                        $( window ).on( 'mousemove', { slider: this }, function( e ) {
-                                var slider = e.data.slider,
-                                        sliderLeft = slider.$el.offset().left,
-                                        sliderRight = sliderLeft + slider.$el.width();
+                        // overrides default jQuery UI step behavior.
+                        $( window ).on( 'mousemove', { view: this }, function( e ) {
+                                var view              = e.data.view,
+                                        leftDragBoundary  = view.$el.offset().left, // Initial left boundary
+                                        sliderOffset      = leftDragBoundary,
+                                        sliderRightEdge   = leftDragBoundary + view.$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 ( view.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.
                                 }
                         } );
@@ -717 +741 @@
 
                 stop: function( event, ui ) {
-                        if ( this.model.get( 'compareTwoMode' ) )
-                                return;
-
                         $( window ).off( 'mousemove' );