WordPress.org

Make WordPress Core

Ticket #24425: 24425.draft.42.diff

File 24425.draft.42.diff, 5.2 KB (added by adamsilverstein, 9 years ago)

only show tooltip when hovering over/near tickmark

  • 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',
    515555                        'mouseleave' : 'mouseleave'
    516556                },
    517557
     
    559599                },
    560600
    561601                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 ),
     602                        var tickCount = this.model.revisions.length - 1, // One tickmark per model
     603                                sliderLeft = Math.ceil( this.$el.offset().left ),
     604                                sliderWidth = this.$el.width(),
     605                                tickWidth = Math.floor( sliderWidth / tickCount ),
    565606                                actualX = e.clientX - sliderLeft,
    566607                                hoveringAt = Math.floor( actualX / tickWidth );
    567608
     609                        // Check to see if mouse is hovering near a tickmark
     610                        if ( actualX % tickWidth < 8 ) {
     611                                this.tooltip.show();
     612                        } else {
     613                                this.tooltip.hide();
     614                        }
     615
    568616                        // Reverse direction in RTL mode.
    569617                        if ( isRtl )
    570618                                hoveringAt = this.model.revisions.length - hoveringAt - 1;
     
    580628                        this.tooltip.model.set( 'position', e.clientX );
    581629                },
    582630
    583                 mouseenter: function( e ) {
    584                         this.tooltip.show();
    585                 },
    586 
    587631                mouseleave: function( e ) {
    588632                        this.tooltip.hide();
    589633                },
  • 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 */