WordPress.org

Make WordPress Core

Ticket #24425: 24425.slider.diff

File 24425.slider.diff, 5.6 KB (added by markjaquith, 9 years ago)
  • wp-admin/css/colors-fresh.css

    table.diff .diff-addedline ins { 
    13911391}
    13921392
    13931393.revisions-tickmarks > div {
    1394         background-color: #ccc;
     1394        border-color: #aaa;
    13951395}
    13961396
    13971397#diff-title-to strong {
  • wp-admin/css/wp-admin.css

    td.plugin-title p { 
    35123512        height: 0.8em;
    35133513        z-index: 2;
    35143514        top: 7px;
     3515        width: 70%;
     3516        box-sizing: border-box;
    35153517}
    35163518
    35173519.revisions-tickmarks > div {
    3518         height: 0.8em;
    3519         width: 1px;
    3520         float: left;
    35213520        position: relative;
     3521        height: 100%;
     3522        float: left;
    35223523        z-index: 10002;
     3524        border-style: solid;
     3525        border-width: 0 0 0 1px;
     3526        box-sizing: border-box;
     3527}
     3528
     3529.revisions-tickmarks > div:first-of-type {
     3530        border-left-width: 0;
    35233531}
    35243532
    35253533.comparing-two-revisions .revisions-controls {
  • wp-admin/js/revisions.js

    window.wp = window.wp || {}; 
    403403
    404404                        // Add the tooltip view
    405405                        var tooltip = new revisions.view.Tooltip({
    406                                 model: new revisions.model.Tooltip()
     406                                model: new revisions.model.Tooltip(),
     407                                revisions: this.model.revisions
    407408                        });
    408409                        this.views.add( tooltip );
    409410
    window.wp = window.wp || {}; 
    431432        revisions.view.Tickmarks = wp.Backbone.View.extend({
    432433                className: 'revisions-tickmarks',
    433434
    434                 numberOfTickmarksSet: function() {
    435                         var tickCount = this.model.revisions.length - 1, // One tickmark per model
    436                                 sliderWidth = $('.wp-slider').parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
    437                                 tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
    438                                 newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
    439                                 tickNumber;
     435                render: function() {
     436                        var tickCount, tickWidth;
    440437
    441                         $('.wp-slider').css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
    442                         this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
     438                        tickCount = this.model.revisions.length - 1;
     439                        tickWidth = 1 / tickCount;
    443440
    444                         for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
    445                                 this.$el.append('<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>');
    446                         }
     441                        this.$el.html('');
     442                        _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
     443
     444                        this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
    447445                },
    448446
    449447                ready: function() {
    450                         var self = this;
    451                         self.numberOfTickmarksSet();
    452                         $( window ).on( 'resize', _.debounce( function() {
    453                                 self.$el.html('');
    454                                 self.numberOfTickmarksSet();
    455                         }, 50 ) );
     448                        this.render();
    456449                }
    457450        });
    458451
    window.wp = window.wp || {}; 
    527520                className: 'revisions-tooltip',
    528521                template: wp.template('revisions-tooltip'),
    529522
    530                 initialize: function() {
     523                initialize: function( options ) {
     524                        this.revisions = options.revisions;
    531525                        this.listenTo( this.model, 'change', this.render );
    532526                },
    533527
    window.wp = window.wp || {}; 
    545539                },
    546540
    547541                render: function() {
     542                        var offset;
    548543                        // Check if a revision exists.
    549                         if ( null === this.model.get('revision') )
     544                        if ( _.isNull( this.model.get('revision') ) )
    550545                                return;
    551546
    552547                        // Insert revision data.
    553548                        this.$el.html( this.template( this.model.get('revision').toJSON() ) );
    554549
    555550                        // Set the position.
    556                         var offset = $('.revisions-buttons').offset().left;
    557                         this.$el.css( 'left', this.model.get('position') - offset );
     551                        offset = this.revisions.indexOf( this.model.get('revision') ) / ( this.revisions.length - 1 );
     552                        // 15% to get us to the start of the slider
     553                        // 0.7 to convert the slider-relative percentage to a page-relative percentage
     554                        // 100 to convert to a percentage
     555                        offset = 15 + (0.7 * offset * 100 ); // Now in a percentage
     556                        this.$el.css( 'left', offset + '%' );
    558557                }
    559558        });
    560559
    window.wp = window.wp || {}; 
    680679                },
    681680
    682681                mousemove: function( e ) {
    683                         var tickCount = this.model.revisions.length - 1, // One tickmark per model
    684                                 sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
     682                        var zoneCount = this.model.revisions.length - 1, // One fewer zone than models
     683                                sliderLeft = this.$el.offset().left, // Left edge of slider
    685684                                sliderWidth = this.$el.width(), // Width of slider
    686                                 tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
     685                                tickWidth = sliderWidth / zoneCount, // Calculated width of zone
    687686                                actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
    688                                 currentModelIndex = Math.floor( ( actualX + tickWidth / 2 ) / tickWidth ), // Calculate the model index
    689                                 tooltipPosition = sliderLeft + 2 + currentModelIndex * tickWidth; // Stick tooltip to tickmark
     687                                currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
    690688
    691689                        // Reverse direction in RTL mode.
    692690                        if ( isRtl )
    window.wp = window.wp || {}; 
    700698
    701699                        // Update the tooltip model
    702700                        this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
    703                         this.tooltip.model.set( 'position', tooltipPosition );
    704701                },
    705702
    706                 mouseleave: function( e ) {
     703                mouseleave: function() {
    707704                        this.tooltip.hide();
    708705                },
    709706
    710                 mouseenter: function( e ) {
     707                mouseenter: function() {
    711708                        this.tooltip.show();
    712709                },
    713710