WordPress.org
Get WordPress

Make WordPress Core

Ticket #24425: 24425.draft.34.diff

File 24425.draft.34.diff, 8.6 KB (added by ocean90, 12 years ago)

Tooltip model and remove mouse dragging code

  • wp-admin/css/wp-admin.css

     
    37783778        padding: 4px 4px;
    37793779}
    37803780
    3781 .revisions-tooltip {
    3782         display: none;
    3783 }
    3784 
    37853781.arrow {
    37863782        width: 70px;
    37873783        height: 16px;

  • wp-admin/js/revisions.js

     
    2323                }
    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
    2835        revisions.model.Revisions = Backbone.Collection.extend({
    … …  
    289296                        }));
    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
    300310                        // Add the Meta view
    … …  
    394404                template: wp.template( 'revisions-tooltip' ),
    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() {
     411                        // Hide tooltip on start.
     412                        this.$el.addClass( 'hidden' );
    402413                },
    403414
    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                         }
     415                show: function() {
     416                        this.$el.removeClass( 'hidden' );
    411417                },
    412418
    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' ) );
     419                hide: function() {
     420                        this.$el.addClass( 'hidden' );
    417421                },
    418422
    419                 setTooltip: function( tooltipPosition ) {
     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;
     431                                calculatedX = this.model.get( 'position' ) - offset;
    422432
    423 
    424                         this.$el.find( '.ui-slider-tooltip' ).css( 'left', calculatedX );
    425                         this.$el.find( '.arrow' ).css( 'left', calculatedX );
     433                        $( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX );
     434                        $( '.arrow', this.$el ).css( 'left', calculatedX );
    426435                }
    427436        });
    428437
    … …  
    486495                                val = this.model.revisions.indexOf( this.model.get( 'to' ) );
    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        });
    501504
    … …  
    512515                        'mouseleave' : 'mouseleave'
    513516                },
    514517
    515                 initialize: function() {
     518                initialize: function( options ) {
    516519                        _.bindAll( this, 'start', 'slide', 'stop' );
    517520
     521                        this.tooltip = options.tooltip;
     522
    518523                        // Create the slider model from the provided collection data.
    519524                        var latestRevisionIndex = this.model.revisions.length - 1;
    520525
    521526                        // Find the initially selected revision
    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({
    527532                                max:   latestRevisionIndex,
    … …  
    533538                },
    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
    538549                        // Listen for changes in Compare Two Mode setting
    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 );
    544555
    545556                        // Listen for changes in the diffId
    546557                        this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
    547558
    548                         // Reset to the initially selected revision
    549                         this.slide( '', this.settings.attributes );
    550 
    551559                },
    552560
    553561                mousemove: function( e ) {
    … …  
    557565                                actualX = e.clientX - sliderLeft,
    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.
    565573                        if ( hoveringAt < 0 )
    … …  
    567575                        else if ( hoveringAt >= this.model.revisions.length )
    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
    584591                updateSliderSettings: function() {
    … …  
    592599                                                values: [
    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
    598605                                        } );
    … …  
    638645                },
    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
    660650                slide: function( event, ui ) {
    … …  
    686676                },
    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                }
    698685        });
    … …  
    726713
    727714                navigateRoute: function( to, from ) {
    728715                        var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/';
    729                         if ( this.model.get( 'compareTwoMode' ) ){
    730                                 navigateTo = navigateTo + '2';
     716                        if ( this.model.get( 'compareTwoMode' ) ) {
     717                                navigateTo += '2';
    731718                        } else {
    732                                 navigateTo = navigateTo + '1';
     719                                navigateTo += '1';
    733720                        }
    734721                        this.navigate( navigateTo );
    735722                },
    … …  
    740727                }, 250 ),
    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 ) {
    750733                                var selectedToRevision =
    … …  
    756739                                        to:   selectedToRevision,
    757740                                        from: selectedFromRevision } );
    758741                        }
     742                        revisions.settings.selectedRevision = to;
    759743                }
    760744        });
    761745