WordPress.org

Make WordPress Core

Changeset 24595


Ignore:
Timestamp:
07/08/2013 09:37:03 PM (9 years ago)
Author:
markjaquith
Message:

Tick marks are back for revisions

  • Simple tick marks
  • Tooltips snap to tick marks
  • Tooltips arrow reverses side for LTR/RTL
  • Fix for routing issue where just the hash is changed in the URL bar relating to compare two mode

see #24425. props adamsilverstein, ocean90.

Location:
trunk/wp-admin
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/colors-fresh.css

    r24578 r24595  
    13861386}
    13871387
     1388
     1389.revisions-tickmarks {
     1390    background-color: #f7f7f7;
     1391}
     1392
     1393.revisions-tickmarks > div {
     1394    background-color: #ccc;
     1395}
     1396
    13881397#diff-title-to strong {
    13891398    color: #08a;
     
    13931402.wp-slider.ui-slider {
    13941403    border-color: #d7d7d7;
    1395     background: #f7f7f7;
     1404    background: transparent;
    13961405}
    13971406
  • trunk/wp-admin/css/wp-admin-rtl.css

    r24574 r24595  
    10201020}
    10211021
    1022 .ui-tooltip-content img {
     1022.revisions img {
    10231023    float: right;
    10241024    margin-right: 0;
    10251025    margin-left: 5px;
     1026}
     1027
     1028.revisions-tooltip {
     1029    margin-left: -185px;
     1030}
     1031
     1032.revisions-tooltip-arrow {
     1033    margin-left: 150px;
    10261034}
    10271035
  • trunk/wp-admin/css/wp-admin.css

    r24588 r24595  
    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 > div {
     3517    height: 0.8em;
     3518    width: 1px;
     3519    float: left;
     3520    position: relative;
     3521    z-index: 10002;
     3522}
     3523
    35083524.comparing-two-revisions .revisions-controls {
    35093525    height: 140px;
     
    35353551.wp-slider {
    35363552    width: 70%;
    3537     margin: 6px auto 0;
     3553    margin: 0 auto 0;
     3554    top: -3px;
    35383555}
    35393556
  • trunk/wp-admin/js/revisions.js

    r24579 r24595  
    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    });
     
    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({
     
    318326                model: this.model
    319327            }) );
     328
     329        }
     330    });
     331
     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 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                }, 50 ) );
    320361        }
    321362    });
     
    512553        events: {
    513554            'mousemove'  : 'mousemove',
    514             'mouseenter' : 'mouseenter',
    515             'mouseleave' : 'mouseleave'
     555            'mouseleave' : 'mouseleave',
     556            'mouseenter' : 'mouseenter'
    516557        },
    517558
     
    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;
    571 
    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;
     613                currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
     614
     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 );
     624        },
     625
     626        mouseleave: function( e ) {
     627            this.tooltip.hide();
    581628        },
    582629
    583630        mouseenter: function( e ) {
    584631            this.tooltip.show();
    585         },
    586 
    587         mouseleave: function( e ) {
    588             this.tooltip.hide();
    589632        },
    590633
  • trunk/wp-admin/revision.php

    r24578 r24595  
    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">
Note: See TracChangeset for help on using the changeset viewer.