WordPress.org

Make WordPress Core

Ticket #24425: 24425.draft.44.diff

File 24425.draft.44.diff, 6.7 KB (added by adamsilverstein, 9 years ago)

center arrow under tooltip

  • wp-admin/js/revisions.js

     
    280280                },
    281281
    282282                updateCompareTwoMode: function() {
    283                         this.$el.toggleClass( 'comparing-two-revisions' );
     283                        if ( this.model.get( 'compareTwoMode' ) )
     284                                this.$el.addClass( 'comparing-two-revisions' );
     285                        else
     286                                this.$el.removeClass( 'comparing-two-revisions' );
    284287                }
    285288        });
    286289
     
    307310                        });
    308311                        this.views.add( tooltip );
    309312
     313                        // Add the Tickmarks view
     314                        this.views.add( new revisions.view.Tickmarks({
     315                                model: this.model
     316                        }));
     317
    310318                        // Add the Slider view with a reference to the tooltip view
    311319                        this.views.add( new revisions.view.Slider({
    312320                                model: this.model,
     
    317325                        this.views.add( new revisions.view.Meta({
    318326                                model: this.model
    319327                        }) );
     328
    320329                }
    321330        });
    322331
     332        // The tickmarks view
     333        // This contains the slider tickmarks.
     334        revisions.view.Tickmarks = wp.Backbone.View.extend({
     335                tagName: 'div',
     336                className: 'revisions-tickmarks',
     337                template: wp.template('revisions-tickmarks'),
     338
     339                numberOfTickmarksSet: function() {
     340                        var tickCount = this.model.revisions.length - 1, // One tickmark per model
     341                                sliderWidth = $( '.wp-slider' ).parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
     342                                tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
     343                                newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
     344                                tickNumber;
     345
     346                        $( '.wp-slider' ).css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
     347                        this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
     348
     349                        for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
     350                                this.$el.append( '<div class="atickmark" style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>' );
     351                        }
     352                },
     353
     354                ready: function() {
     355                        var self = this;
     356                        self.numberOfTickmarksSet();
     357                        $( window ).on( 'resize', _.debounce( function() {
     358                                self.$el.html( '' );
     359                                self.numberOfTickmarksSet();
     360                                }, 250 ) );
     361                }
     362        });
     363
    323364        // The meta view.
    324365        // This contains the revision meta, and the restore button.
    325366        revisions.view.Meta = wp.Backbone.View.extend({
     
    511552
    512553                events: {
    513554                        'mousemove'  : 'mousemove',
    514                         'mouseenter' : 'mouseenter',
    515                         'mouseleave' : 'mouseleave'
     555                        'mouseleave' : 'mouseleave',
     556                        'mouseenter' : 'mouseenter'
    516557                },
    517558
    518559                initialize: function( options ) {
     
    559600                },
    560601
    561602                mousemove: function( e ) {
    562                         var sliderLeft = Math.ceil( this.$el.offset().left ),
    563                                 sliderWidth = Math.ceil( this.$el.width() ) + 2,
    564                                 tickWidth = Math.ceil( ( sliderWidth ) / this.model.revisions.length ),
    565                                 actualX = e.clientX - sliderLeft,
    566                                 hoveringAt = Math.floor( actualX / tickWidth );
     603                        var tickCount = this.model.revisions.length - 1, // One tickmark per model
     604                                sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
     605                                sliderWidth = this.$el.width(), // Width of slider
     606                                tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
     607                                actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
     608                                currentModelIndex = Math.floor( ( actualX + tickWidth / 2 ) / tickWidth ), // Calculate the model index
     609                                tooltipPosition = sliderLeft + 2 + currentModelIndex * tickWidth; // Stick tooltip to tickmark
    567610
    568611                        // Reverse direction in RTL mode.
    569612                        if ( isRtl )
    570                                 hoveringAt = this.model.revisions.length - hoveringAt - 1;
     613                                currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
    571614
    572                         // Ensure sane value for hoveringAt.
    573                         if ( hoveringAt < 0 )
    574                                 hoveringAt = 0;
    575                         else if ( hoveringAt >= this.model.revisions.length )
    576                                 hoveringAt = this.model.revisions.length - 1;
     615                        // Ensure sane value for currentModelIndex.
     616                        if ( currentModelIndex < 0 )
     617                                currentModelIndex = 0;
     618                        else if ( currentModelIndex >= this.model.revisions.length )
     619                                currentModelIndex = this.model.revisions.length - 1;
    577620
    578621                        // Update the tooltip model
    579                         this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) );
    580                         this.tooltip.model.set( 'position', e.clientX );
     622                        this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
     623                        this.tooltip.model.set( 'position', tooltipPosition );
    581624                },
    582625
     626                mouseleave: function( e ) {
     627                        this.tooltip.hide();
     628                },
     629
    583630                mouseenter: function( e ) {
    584631                        this.tooltip.show();
    585632                },
    586633
    587                 mouseleave: function( e ) {
    588                         this.tooltip.hide();
    589                 },
    590 
    591634                updateSliderSettings: function() {
    592635                        if ( this.model.get( 'compareTwoMode' ) ) {
    593636                                var leftValue, rightValue;
  • wp-admin/revision.php

     
    152152        </div>
    153153</script>
    154154
     155<script id="tmpl-revisions-tickmarks" type="text/html">
     156</script>
     157
    155158<script id="tmpl-revisions-meta" type="text/html">
    156159        <div id="diff-header">
    157160                <div id="diff-header-from" class="diff-header">
  • wp-admin/css/colors-fresh.css

     
    13851385        background-color: #fff;
    13861386}
    13871387
     1388
     1389.revisions-tickmarks {
     1390        background-color: #f7f7f7;
     1391}
     1392
     1393
     1394.revisions-tickmarks
     1395.atickmark {
     1396        background-color: #ccc;
     1397}
     1398
     1399
    13881400#diff-title-to strong {
    13891401        color: #08a;
    13901402}
     
    13921404/* jQuery UI Slider */
    13931405.wp-slider.ui-slider {
    13941406        border-color: #d7d7d7;
    1395         background: #f7f7f7;
     1407        background: transparent;
    13961408}
    13971409
    13981410.wp-slider .ui-slider-handle {
  • wp-admin/css/wp-admin.css

     
    35053505        height: 100px;
    35063506}
    35073507
     3508.revisions-tickmarks {
     3509        position: relative;
     3510        margin: 0 auto 0;
     3511        height: 0.8em;
     3512        z-index: 2;
     3513        top: 7px;
     3514}
     3515
     3516.revisions-tickmarks .atickmark {
     3517        height: 0.8em;
     3518        width: 1px;
     3519        float: left;
     3520        position: relative;
     3521        z-index: 10002;
     3522}
     3523
     3524.atickmark {
     3525        display: block;
     3526}
     3527
    35083528.comparing-two-revisions .revisions-controls {
    35093529        height: 140px;
    35103530}
     
    35343554
    35353555.wp-slider {
    35363556        width: 70%;
    3537         margin: 6px auto 0;
     3557        margin: 0 auto 0;
     3558        top: -3px;
    35383559}
    35393560
    35403561/* Revision meta box */
     
    36283649.revisions-tooltip {
    36293650        position: absolute;
    36303651        bottom: 105px;
    3631         margin-left: -70px;
     3652        margin-left: -120px;
    36323653        line-height: 28px;
    36333654        z-index: 9999;
    36343655        max-width: 350px;
     
    36533674        overflow: hidden;
    36543675        position: absolute;
    36553676        left: 0;
    3656         margin-left: 35px;
     3677        margin-left: 85px;
    36573678        bottom: -15px;
    36583679        z-index: 10000;
    36593680}