WordPress.org

Make WordPress Core

Changeset 24565


Ignore:
Timestamp:
07/05/13 17:44:47 (10 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.css

    r24549 r24565  
    37793779} 
    37803780 
    3781 .revisions-tooltip { 
    3782     display: none; 
    3783 } 
    3784  
    37853781.arrow { 
    37863782    width: 70px; 
  • trunk/wp-admin/js/revisions.js

    r24556 r24565  
    2424    }); 
    2525 
     26    revisions.model.Tooltip = Backbone.Model.extend({ 
     27        defaults: { 
     28            revision: null, 
     29            position: 0 
     30        } 
     31    }); 
     32 
    2633    revisions.model.Revision = Backbone.Model.extend({}); 
    2734 
     
    290297 
    291298            // Add the tooltip view 
    292             this.views.add( new revisions.view.Tooltip({ 
    293                 model: this.model 
    294             })); 
    295             // Add the Slider view 
     299            var tooltip = new revisions.view.Tooltip({ 
     300                model: new revisions.model.Tooltip() 
     301            }); 
     302            this.views.add( tooltip ); 
     303 
     304            // Add the Slider view with a reference to the tooltip view 
    296305            this.views.add( new revisions.view.Slider({ 
    297                 model: this.model 
     306                model: this.model, 
     307                tooltip: tooltip 
    298308            }) ); 
    299309 
     
    395405 
    396406        initialize: function() { 
    397             this.listenTo( this.model, 'change:sliderHovering', this.sliderHoveringChanged ); 
    398             this.listenTo( this.model, 'change:tooltipPosition', this.tooltipPositionChanged ); 
     407            this.listenTo( this.model, 'change', this.render ); 
    399408        }, 
    400409 
    401410        ready: function() { 
    402         }, 
    403  
    404         // Show or hide tooltip based on sliderHovering is true 
    405         sliderHoveringChanged: function() { 
    406             if ( this.model.get( 'sliderHovering' ) ) { 
    407                 this.$el.show(); 
    408             } else { 
    409                 this.$el.hide(); 
    410             } 
    411         }, 
    412  
    413         tooltipPositionChanged: function() { 
    414             this.$el.html( this.template( this.model.revisions.at( this.model.get( 'hoveringAt') ).toJSON() ) ); 
    415  
    416             this.setTooltip( this.model.get( 'tooltipPosition' ) ); 
    417         }, 
    418  
    419         setTooltip: function( tooltipPosition ) { 
     411            // Hide tooltip on start. 
     412            this.$el.addClass( 'hidden' ); 
     413        }, 
     414 
     415        show: function() { 
     416            this.$el.removeClass( 'hidden' ); 
     417        }, 
     418 
     419        hide: function() { 
     420            this.$el.addClass( 'hidden' ); 
     421        }, 
     422 
     423        render: function() { 
     424            // Check if a revision exists. 
     425            if ( null === this.model.get( 'revision' ) ) 
     426                return; 
     427 
     428            this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) ); 
     429 
    420430            var offset = $( '.revisions-buttons' ).offset().left, 
    421                 calculatedX = tooltipPosition - offset; 
    422  
    423  
    424             this.$el.find( '.ui-slider-tooltip' ).css( 'left', calculatedX ); 
    425             this.$el.find( '.arrow' ).css( 'left', calculatedX ); 
     431                calculatedX = this.model.get( 'position' ) - offset; 
     432 
     433            $( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX ); 
     434            $( '.arrow', this.$el ).css( 'left', calculatedX ); 
    426435        } 
    427436    }); 
     
    487496 
    488497            // Disable "Next" button if you're on the last node. 
    489             if ( maxVal === val ) 
    490                 next.prop( 'disabled', true ); 
    491             else 
    492                 next.prop( 'disabled', false ); 
     498            next.prop( 'disabled', ( maxVal === val ) ); 
    493499 
    494500            // Disable "Previous" button if you're on the first node. 
    495             if ( minVal === val ) 
    496                 previous.prop( 'disabled', true ); 
    497             else 
    498                 previous.prop( 'disabled', false ); 
     501            previous.prop( 'disabled', ( minVal === val ) ); 
    499502        } 
    500503    }); 
     
    513516        }, 
    514517 
    515         initialize: function() { 
     518        initialize: function( options ) { 
    516519            _.bindAll( this, 'start', 'slide', 'stop' ); 
     520 
     521            this.tooltip = options.tooltip; 
    517522 
    518523            // Create the slider model from the provided collection data. 
     
    522527            var initiallySelectedRevisionIndex = 
    523528                this.model.revisions.indexOf( 
    524                     this.model.revisions.findWhere(  { id: Number( revisions.settings.selectedRevision ) } ) ); 
     529                    this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) ); 
    525530 
    526531            this.settings = new revisions.model.Slider({ 
     
    534539 
    535540        ready: function() { 
     541            // Refresh the currently selected revision position in case router has set it. 
     542            this.settings.attributes.value = this.model.revisions.indexOf( 
     543                this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) ); 
     544 
     545            this.slide( '', this.settings.attributes ); 
     546 
    536547            this.$el.slider( this.settings.toJSON() ); 
    537548 
     
    539550            this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings ); 
    540551 
    541             this.settings.on( 'change', function( model, options ) { 
     552            this.settings.on( 'change', function() { 
    542553                this.updateSliderSettings(); 
    543554            }, this ); 
     
    545556            // Listen for changes in the diffId 
    546557            this.listenTo( this.model, 'change:diffId', this.diffIdChanged ); 
    547  
    548             // Reset to the initially selected revision 
    549             this.slide( '', this.settings.attributes ); 
    550558 
    551559        }, 
     
    558566                hoveringAt = Math.floor( actualX / tickWidth ); 
    559567 
    560                 // Reverse direction in Rtl mode. 
    561                 if ( isRtl ) 
    562                     hoveringAt = this.model.revisions.length - hoveringAt - 1; 
     568            // Reverse direction in Rtl mode. 
     569            if ( isRtl ) 
     570                hoveringAt = this.model.revisions.length - hoveringAt - 1; 
    563571 
    564572            // Ensure sane value for hoveringAt. 
     
    568576                hoveringAt = this.model.revisions.length - 1; 
    569577 
    570             // Update the model 
    571             this.model.set( 'hoveringAt', hoveringAt ); 
    572             this.model.set( 'tooltipPosition', e.clientX ); 
    573  
     578            // Update the tooltip model 
     579            this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) ); 
     580            this.tooltip.model.set( 'position', e.clientX ); 
    574581        }, 
    575582 
    576583        mouseenter: function( e ) { 
    577             this.model.set( 'sliderHovering', true ); 
     584            this.tooltip.show(); 
    578585        }, 
    579586 
    580587        mouseleave: function( e ) { 
    581             this.model.set( 'sliderHovering', false ); 
     588            this.tooltip.hide(); 
    582589        }, 
    583590 
     
    593600                            this.model.revisions.indexOf( this.model.get( 'from' ) ), 
    594601                            this.model.revisions.indexOf( this.model.get( 'to' ) ) 
    595                                 ], 
     602                        ], 
    596603                        value: null, 
    597604                        range: true // Range mode ensures handles can't cross 
     
    639646 
    640647        start: function( event, ui ) { 
    641             if ( ! this.model.get( 'compareTwoMode' ) ) 
    642                 return; 
    643  
    644             // Track the mouse position to enable smooth dragging, overrides default jquery ui step behaviour . 
    645             $( window ).mousemove( function( e ) { 
    646                 var sliderLeft = this.$el.offset().left, 
    647                     sliderRight = sliderLeft + this.$el.width(); 
    648  
    649                 // Follow mouse movements, as long as handle remains inside slider. 
    650                 if ( e.clientX < sliderLeft ) { 
    651                     $( ui.handle ).css( 'left', 0 ); // Mouse to left of slider. 
    652                 } else if ( e.clientX > sliderRight ) { 
    653                     $( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider. 
    654                 } else { 
    655                     $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider. 
    656                 } 
    657             } ); // End mousemove. 
    658648        }, 
    659649 
     
    687677 
    688678        stop: function( event, ui ) { 
    689             if ( ! this.model.get( 'compareTwoMode' ) ) 
     679            if ( this.model.get( 'compareTwoMode' ) ) 
    690680                return; 
    691681 
    692             // Stop tracking the mouse. 
    693             $( window ).unbind( 'mousemove' ); 
    694  
    695             // Reset settings pops handle back to the step position. 
     682            // Reset settings props handle back to the step position. 
    696683            this.settings.trigger( 'change' ); 
    697684        } 
     
    727714        navigateRoute: function( to, from ) { 
    728715            var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/'; 
    729             if ( this.model.get( 'compareTwoMode' ) ){ 
    730                 navigateTo = navigateTo + '2'; 
    731             } else { 
    732                 navigateTo = navigateTo + '1'; 
     716            if ( this.model.get( 'compareTwoMode' ) ) { 
     717                navigateTo += '2'; 
     718            } else { 
     719                navigateTo += '1'; 
    733720            } 
    734721            this.navigate( navigateTo ); 
     
    741728 
    742729        gotoRevisionId: function( from, to, handles ) { 
    743             if ( '2' === handles ) { 
    744                 this.model.set( { compareTwoMode: true } ); 
    745             } else { 
    746                 this.model.set( { compareTwoMode: false } ); 
    747             } 
     730            this.model.set( { compareTwoMode: ( '2' === handles ) } ); 
    748731 
    749732            if ( 'undefined' !== typeof this.model ) { 
     
    757740                    from: selectedFromRevision } ); 
    758741            } 
     742            revisions.settings.selectedRevision = to; 
    759743        } 
    760744    }); 
Note: See TracChangeset for help on using the changeset viewer.