Changeset 24579

Timestamp:

07/06/2013 08:22:02 PM (11 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' );