WordPress.org

Make WordPress Core

Changeset 24565


Ignore:
Timestamp:
07/05/2013 05:44:47 PM (9 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:
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.