Changeset 24565

Timestamp:

07/05/2013 05:44:47 PM (10 years ago)

Author:

markjaquith

Message:

Revisions improvements

• Consolidated router code
• Corrected routing behavior
• Tooltip model
• Removed mouse dragging code

props adamsilverstein, ocean90. see #24425.

Location:

trunk/wp-admin

Files:

• css/wp-admin.css (modified) (1 diff)
• js/revisions.js (modified) (17 diffs)

trunk/wp-admin/css/wp-admin.css

@@ -3779 +3779 @@
 }
 
-.revisions-tooltip {
-    display: none;
-}
-
 .arrow {
     width: 70px;

trunk/wp-admin/js/revisions.js

@@ -24 +24 @@
     });
 
+    revisions.model.Tooltip = Backbone.Model.extend({
+        defaults: {
+            revision: null,
+            position: 0
+        }
+    });
+
     revisions.model.Revision = Backbone.Model.extend({});
 
@@ -290 +297 @@
 
             // Add the tooltip view
-            this.views.add( new revisions.view.Tooltip({
-                model: this.model
-            }));
-            // Add the Slider view
+            var tooltip = new revisions.view.Tooltip({
+                model: new revisions.model.Tooltip()
+            });
+            this.views.add( tooltip );
+
+            // Add the Slider view with a reference to the tooltip view
             this.views.add( new revisions.view.Slider({
-                model: this.model
+                model: this.model,
+                tooltip: tooltip
             }) );
 
@@ -395 +405 @@
 
         initialize: function() {
-            this.listenTo( this.model, 'change:sliderHovering', this.sliderHoveringChanged );
-            this.listenTo( this.model, 'change:tooltipPosition', this.tooltipPositionChanged );
+            this.listenTo( this.model, 'change', this.render );
         },
 
         ready: function() {
-        },
-
-        // Show or hide tooltip based on sliderHovering is true
-        sliderHoveringChanged: function() {
-            if ( this.model.get( 'sliderHovering' ) ) {
-                this.$el.show();
-            } else {
-                this.$el.hide();
-            }
-        },
-
-        tooltipPositionChanged: function() {
-            this.$el.html( this.template( this.model.revisions.at( this.model.get( 'hoveringAt') ).toJSON() ) );
-
-            this.setTooltip( this.model.get( 'tooltipPosition' ) );
-        },
-
-        setTooltip: function( tooltipPosition ) {
+            // Hide tooltip on start.
+            this.$el.addClass( 'hidden' );
+        },
+
+        show: function() {
+            this.$el.removeClass( 'hidden' );
+        },
+
+        hide: function() {
+            this.$el.addClass( 'hidden' );
+        },
+
+        render: function() {
+            // Check if a revision exists.
+            if ( null === this.model.get( 'revision' ) )
+                return;
+
+            this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
+
             var offset = $( '.revisions-buttons' ).offset().left,
-                calculatedX = tooltipPosition - offset;
-
-
-            this.$el.find( '.ui-slider-tooltip' ).css( 'left', calculatedX );
-            this.$el.find( '.arrow' ).css( 'left', calculatedX );
+                calculatedX = this.model.get( 'position' ) - offset;
+
+            $( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX );
+            $( '.arrow', this.$el ).css( 'left', calculatedX );
         }
     });
@@ -487 +496 @@
 
             // Disable "Next" button if you're on the last node.
-            if ( maxVal === val )
-                next.prop( 'disabled', true );
-            else
-                next.prop( 'disabled', false );
+            next.prop( 'disabled', ( maxVal === val ) );
 
             // Disable "Previous" button if you're on the first node.
-            if ( minVal === val )
-                previous.prop( 'disabled', true );
-            else
-                previous.prop( 'disabled', false );
+            previous.prop( 'disabled', ( minVal === val ) );
         }
     });
@@ -513 +516 @@
         },
 
-        initialize: function() {
+        initialize: function( options ) {
             _.bindAll( this, 'start', 'slide', 'stop' );
+
+            this.tooltip = options.tooltip;
 
             // Create the slider model from the provided collection data.
@@ -522 +527 @@
             var initiallySelectedRevisionIndex =
                 this.model.revisions.indexOf(
-                    this.model.revisions.findWhere(  { id: Number( revisions.settings.selectedRevision ) } ) );
+                    this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
 
             this.settings = new revisions.model.Slider({
@@ -534 +539 @@
 
         ready: function() {
+            // Refresh the currently selected revision position in case router has set it.
+            this.settings.attributes.value = this.model.revisions.indexOf(
+                this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
+
+            this.slide( '', this.settings.attributes );
+
             this.$el.slider( this.settings.toJSON() );
 
@@ -539 +550 @@
             this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings );
 
-            this.settings.on( 'change', function( model, options ) {
+            this.settings.on( 'change', function() {
                 this.updateSliderSettings();
             }, this );
@@ -545 +556 @@
             // Listen for changes in the diffId
             this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
-
-            // Reset to the initially selected revision
-            this.slide( '', this.settings.attributes );
 
         },
@@ -558 +566 @@
                 hoveringAt = Math.floor( actualX / tickWidth );
 
-                // Reverse direction in Rtl mode.
-                if ( isRtl )
-                    hoveringAt = this.model.revisions.length - hoveringAt - 1;
+            // Reverse direction in Rtl mode.
+            if ( isRtl )
+                hoveringAt = this.model.revisions.length - hoveringAt - 1;
 
             // Ensure sane value for hoveringAt.
@@ -568 +576 @@
                 hoveringAt = this.model.revisions.length - 1;
 
-            // Update the model
-            this.model.set( 'hoveringAt', hoveringAt );
-            this.model.set( 'tooltipPosition', e.clientX );
-
+            // Update the tooltip model
+            this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) );
+            this.tooltip.model.set( 'position', e.clientX );
         },
 
         mouseenter: function( e ) {
-            this.model.set( 'sliderHovering', true );
+            this.tooltip.show();
         },
 
         mouseleave: function( e ) {
-            this.model.set( 'sliderHovering', false );
+            this.tooltip.hide();
         },
 
@@ -593 +600 @@
                             this.model.revisions.indexOf( this.model.get( 'from' ) ),
                             this.model.revisions.indexOf( this.model.get( 'to' ) )
-                                ],
+                        ],
                         value: null,
                         range: true // Range mode ensures handles can't cross
@@ -639 +646 @@
 
         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 ).mousemove( function( e ) {
-                var sliderLeft = this.$el.offset().left,
-                    sliderRight = sliderLeft + this.$el.width();
-
-                // 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.
-                } else {
-                    $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
-                }
-            } ); // End mousemove.
         },
 
@@ -687 +677 @@
 
         stop: function( event, ui ) {
-            if ( ! this.model.get( 'compareTwoMode' ) )
+            if ( this.model.get( 'compareTwoMode' ) )
                 return;
 
-            // Stop tracking the mouse.
-            $( window ).unbind( 'mousemove' );
-
-            // Reset settings pops handle back to the step position.
+            // Reset settings props handle back to the step position.
             this.settings.trigger( 'change' );
         }
@@ -727 +714 @@
         navigateRoute: function( to, from ) {
             var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/';
-            if ( this.model.get( 'compareTwoMode' ) ){
-                navigateTo = navigateTo + '2';
-            } else {
-                navigateTo = navigateTo + '1';
+            if ( this.model.get( 'compareTwoMode' ) ) {
+                navigateTo += '2';
+            } else {
+                navigateTo += '1';
             }
             this.navigate( navigateTo );
@@ -741 +728 @@
 
         gotoRevisionId: function( from, to, handles ) {
-            if ( '2' === handles ) {
-                this.model.set( { compareTwoMode: true } );
-            } else {
-                this.model.set( { compareTwoMode: false } );
-            }
+            this.model.set( { compareTwoMode: ( '2' === handles ) } );
 
             if ( 'undefined' !== typeof this.model ) {
@@ -757 +740 @@
                     from: selectedFromRevision } );
             }
+            revisions.settings.selectedRevision = to;
         }
     });