WordPress.org
Get WordPress

Make WordPress Core

Ticket #24736: 24736.10.patch

File 24736.10.patch, 22.2 KB (added by markjaquith, 12 years ago)

  • wp-admin/css/colors-classic.css

    table.diff .diff-addedline ins { 
    14861486}
    14871487
    14881488.revisions-tooltip,
    1489 .revisions-tooltip-arrow:after {
     1489.revisions-tooltip-arrow span {
    14901490        border-color: #d1e5ee;
    14911491        background-color: #fff;
    14921492}

  • wp-admin/css/colors-fresh.css

    table.diff .diff-addedline ins { 
    13801380}
    13811381
    13821382.revisions-tooltip,
    1383 .revisions-tooltip-arrow:after {
     1383.revisions-tooltip-arrow span {
    13841384        border-color: #d7d7d7;
    13851385        background-color: #fff;
    13861386}

  • wp-admin/css/ie.css

    table.ie-fixed { 
    630630* html #adminmenu div.wp-menu-image {
    631631        height: 29px;
    632632}
     633
     634/* Revisions */
     635.revisions-tooltip-arrow span {
     636        left: 25px;
     637        top: -24px;
     638        filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
     639}
     640
     641.revisions-controls .revisions-tickmarks > div {
     642        margin-right: -1px;
     643        border-width: 0 0 0 0;
     644                border-style: none;
     645}
     646 No newline at end of file

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

    th.sorted a span { 
    954954/*------------------------------------------------------------------------------
    955955  11.2 - Post Revisions
    956956------------------------------------------------------------------------------*/
    957 .wp-slider .ui-slider-handle.left-handle:before,
    958 .wp-slider .ui-slider-handle.right-handle:before {
     957.wp-slider .ui-slider-handle.from-handle:before,
     958.wp-slider .ui-slider-handle.to-handle:before {
    959959        height: 8px;
    960960        width: 7px;
    961961}
    962962
    963 .wp-slider .ui-slider-handle.left-handle:before {
     963.wp-slider .ui-slider-handle.from-handle:before {
    964964        background-position: -5px -10px;
    965965        left: 6px;
    966966}
    967967
    968 .wp-slider .ui-slider-handle.right-handle:before {
     968.wp-slider .ui-slider-handle.to-handle:before {
    969969        background-position: -4px -29px;
    970970        left: 6px;
    971971}
    … … th.sorted a span { 
    10251025}
    10261026
    10271027.revisions-tooltip {
    1028         margin-right: -73px;
    10291028        margin-left: 0;
     1029        margin-right: -70px;
    10301030        -webkit-transition: right 15ms;
    10311031        -moz-transition:    right 15ms;
    10321032        -ms-transition:     right 15ms;
    … … th.sorted a span { 
    10401040        margin-right: 35px;
    10411041}
    10421042
    1043 .revisions-tooltip-image {
     1043.revisions-tooltip-arrow > span {
     1044        right: 20px;
     1045}
     1046
     1047.revisions-tooltip img {
    10441048        float: right;
    10451049        margin: 2px 0 0 5px;
    10461050}
    10471051
     1052.revisions-tickmarks > div {
     1053        float: right;
     1054        border-width: 0 0 0 1px;
     1055}
     1056
    10481057/*------------------------------------------------------------------------------
    10491058  11.3 - Featured Images
    10501059------------------------------------------------------------------------------*/

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

    td.plugin-title p { 
    35003500/*------------------------------------------------------------------------------
    35013501  11.2 - Post Revisions
    35023502------------------------------------------------------------------------------*/
    3503 body.revision-php {
    3504         overflow-y: scroll; /* Force a scrollbar, so centering doesn't jump */
    3505 }
    3506 
    35073503.revisions-control-frame,
    35083504.revisions-diff-frame {
    35093505        position: relative;
    … … body.revision-php { 
    35223518
    35233519.revisions-tickmarks {
    35243520        position: relative;
    3525         margin: 0 auto 0;
     3521        margin: 0 auto;
    35263522        height: 0.8em;
    35273523        z-index: 2;
    35283524        top: 7px;
    35293525        width: 70%;
    35303526        -moz-box-sizing: border-box;
    35313527        -webkit-box-sizing: border-box;
    3532         -ms-box-sizing: border-box; /* ie8 only */
    35333528        box-sizing: border-box;
    35343529}
    35353530
    … … body.revision-php { 
    35393534        float: left;
    35403535        z-index: 10002;
    35413536        border-style: solid;
    3542         border-width: 0 0 0 1px;
     3537        border-width: 0 1px 0 0;
    35433538        -moz-box-sizing: border-box;
    35443539        -webkit-box-sizing: border-box;
    3545         -ms-box-sizing: border-box; /* ie8 only */
    35463540        box-sizing: border-box;
    35473541}
    35483542
    3549 .revisions-tickmarks > div:first-of-type {
    3550         border-left-width: 0;
     3543.revisions-tickmarks > div:last-child {
     3544        border-width: 0;
    35513545}
    35523546
    35533547.comparing-two-revisions .revisions-controls {
    … … body.revision-php { 
    35593553        text-align: center;
    35603554        vertical-align: middle;
    35613555        opacity: 0;
     3556        filter: alpha(opacity=0);
    35623557        margin: 0 auto;
    35633558        width: 100%;
    35643559        height: 32px;
    … … body.revision-php { 
    35693564        -ms-transition:     opacity 0.5s;
    35703565        -o-transition:      opacity 0.5s;
    35713566        transition:         opacity 0.5s;
     3567        filter: alpha(opacity=0); /* ie8 and earlier */
    35723568}
    35733569
    35743570.revisions.loading .loading-indicator {
    35753571        opacity: 1;
     3572        filter: alpha(opacity=100); /* ie8 and earlier */
    35763573}
    35773574
    35783575.revisions .diff {
    … … body.revision-php { 
    35853582
    35863583.revisions.loading .diff {
    35873584        opacity: 0.5;
     3585        filter: alpha(opacity=50); /* ie8 and earlier */
    35883586}
    35893587
    35903588.revisions-meta {
    … … body.revision-php { 
    36123610
    36133611.wp-slider {
    36143612        width: 70%;
    3615         margin: 0 auto 0;
     3613        margin: 0 auto;
    36163614        top: -3px;
    36173615}
    36183616
    … … table.diff .diff-addedline ins { 
    37053703}
    37063704
    37073705.revisions-tooltip {
    3708         position: absolute;
    3709         bottom: 105px;
    3710         margin-left: -69px;
     3706        position: fixed;
     3707        margin-bottom: 22px;
     3708        margin-right: 0;
     3709        margin-left: -70px;
    37113710        line-height: 28px;
    37123711        z-index: 9999;
    37133712        max-width: 350px;
    … … table.diff .diff-addedline ins { 
    37443743        z-index: 10000;
    37453744}
    37463745
    3747 .revisions-tooltip-arrow:after {
     3746.revisions-tooltip-arrow > span {
    37483747        content: "";
    37493748        position: absolute;
    37503749        left: 20px;
    … … table.diff .diff-addedline ins { 
    37583757        tranform: rotate(45deg);
    37593758}
    37603759
     3760.ie8 .revisions-tooltip-arrow > span {
     3761        left: 14px;
     3762        top: -25px;
     3763        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
     3764}
     3765
    37613766.revisions-tooltip,
    3762 .revisions-tooltip-arrow:after {
     3767.revisions-tooltip-arrow > span {
    37633768        border-width: 1px;
    37643769        border-style: solid;
    37653770}
    … … div.revisions-controls > .wp-slider > .ui-slider-handle { 
    37993804        background: url(../images/arrows-pr.png) no-repeat -2px -47px;
    38003805}
    38013806
    3802 .wp-slider .ui-slider-handle.left-handle:before,
    3803 .wp-slider .ui-slider-handle.right-handle:before {
     3807.wp-slider .ui-slider-handle.from-handle:before,
     3808.wp-slider .ui-slider-handle.to-handle:before {
    38043809        height: 8px;
    38053810        width: 7px;
    38063811}
    38073812
    3808 .wp-slider .ui-slider-handle.left-handle:before {
     3813.wp-slider .ui-slider-handle.from-handle:before {
    38093814        background-position: -5px -84px;
    38103815        left: 7px;
    38113816}
    38123817
    3813 .wp-slider .ui-slider-handle.right-handle:before {
     3818.wp-slider .ui-slider-handle.to-handle:before {
    38143819        background-position: -4px -65px;
    38153820        left: 5px;
    38163821}

  • wp-admin/js/revisions.js

    window.wp = window.wp || {}; 
    1616                        console.log.apply( console, arguments );
    1717        };
    1818
     19        // Handy function to help with positioning
     20        $.fn.allOffsets = function() {
     21                var offset = this.offset() || {top: 0, left: 0}, win = $(window);
     22                return _.extend( offset, {
     23                        right:  win.outerWidth()  - offset.left - this.outerWidth(),
     24                        bottom: win.outerHeight() - offset.top  - this.outerHeight()
     25                });
     26        };
     27
    1928        // wp_localize_script transforms top-level numbers into strings. Undo that.
    2029        if ( revisions.settings.to )
    2130                revisions.settings.to = parseInt( revisions.settings.to, 10 );
    … … window.wp = window.wp || {}; 
    125134        revisions.model.Tooltip = Backbone.Model.extend({
    126135                defaults: {
    127136                        revision: null,
     137                        offset: {},
    128138                        hovering: false, // Whether the mouse is hovering
    129139                        scrubbing: false // Whether the mouse is scrubbing
    130140                },
    131141
    132142                initialize: function( options ) {
     143                        this.frame = options.frame;
    133144                        this.revisions = options.revisions;
    134145                        this.slider = options.slider;
    135146
    136147                        this.listenTo( this.slider, 'hovered:revision', this.updateRevision );
    137148                        this.listenTo( this.slider, 'change:hovering', this.setHovering );
    138149                        this.listenTo( this.slider, 'change:scrubbing', this.setScrubbing );
     150
     151                        this.set({ revision: this.frame.diff() });
    139152                },
    140153
     154
    141155                updateRevision: function( revision ) {
    142156                        this.set({ revision: revision });
    143157                },
    … … window.wp = window.wp || {}; 
    452466                render: function() {
    453467                        wp.Backbone.View.prototype.render.apply( this, arguments );
    454468
     469                        $('html').css( 'overflow-y', 'scroll' );
    455470                        $('#wpbody-content .wrap').append( this.el );
    456471                        this.updateCompareTwoMode();
    457472                        this.renderDiff( this.model.diff() );
    … … window.wp = window.wp || {}; 
    497512                                revisions: this.model.revisions
    498513                        });
    499514
     515                        // Prep the tooltip model
     516                        var tooltip = new revisions.model.Tooltip({
     517                                frame: this.model,
     518                                revisions: this.model.revisions,
     519                                slider: slider
     520                        });
     521
    500522                        // Add the tooltip view
    501523                        this.views.add( new revisions.view.Tooltip({
    502                                 model: new revisions.model.Tooltip({
    503                                         revisions: this.model.revisions,
    504                                         slider: slider
    505                                 })
     524                                model: tooltip
    506525                        }) );
    507526
    508527                        // Add the tickmarks view
    509528                        this.views.add( new revisions.view.Tickmarks({
    510                                 model: this.model
     529                                model: tooltip
    511530                        }) );
    512531
    513532                        // Add the slider view
    … … window.wp = window.wp || {}; 
    527546        revisions.view.Tickmarks = wp.Backbone.View.extend({
    528547                className: 'revisions-tickmarks',
    529548
     549                initialize: function() {
     550                        this.listenTo( this.model, 'change:revision', this.reportTickPosition );
     551                },
     552
     553                reportTickPosition: function( model, revision ) {
     554                        var elWidth, offset, tick, index = this.model.revisions.indexOf( revision );
     555                        if ( index === this.model.revisions.length - 1 ) {
     556                                // Last one
     557                                offset = this.$el.allOffsets();
     558                                elWidth = this.$el.outerWidth();
     559                                // adjust
     560                                _.extend( offset, {
     561                                        right: offset.right + elWidth + 1,
     562                                        left: offset.left + elWidth + 1
     563                                });
     564                        } else {
     565                                // Normal tick
     566                                tick = this.$('div:nth-of-type(' + (index + 1) + ')');
     567                                offset = tick.allOffsets();
     568                        }
     569                        this.model.set({ offset: offset });
     570                },
     571
    530572                ready: function() {
    531573                        var tickCount, tickWidth;
    532574                        tickCount = this.model.revisions.length - 1;
    533575                        tickWidth = 1 / tickCount;
    534576
    535577                        _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
     578
    536579                        this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
    537580                }
    538581        });
    … … window.wp = window.wp || {}; 
    598641        revisions.view.Tooltip = wp.Backbone.View.extend({
    599642                className: 'revisions-tooltip',
    600643                template: wp.template('revisions-tooltip'),
     644                direction: isRtl ? 'right' : 'left',
    601645
    602646                initialize: function( options ) {
    603                         this.listenTo( this.model, 'change:revision', this.render );
     647                        this.listenTo( this.model, 'change:offset', this.render );
    604648                        this.listenTo( this.model, 'change:hovering', this.toggleVisibility );
    605649                        this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility );
    606650                },
    607651
     652                prepare: function() {
     653                        return this.model.get('revision').toJSON();
     654                },
     655
     656                render: function() {
     657                        var css = {};
     658                        wp.Backbone.View.prototype.render.apply( this, arguments );
     659                        css[this.direction] = this.model.get('offset')[this.direction] + 'px';
     660                        css.bottom = this.model.get('offset').bottom + 'px';
     661                        this.$el.css( css );
     662                },
     663
    608664                visible: function() {
    609665                        return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' );
    610666                },
    … … window.wp = window.wp || {}; 
    615671                        else
    616672                                this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
    617673                        return;
    618                 },
    619 
    620                 render: function() {
    621                         var offset;
    622                         // Check if a revision exists.
    623                         if ( _.isNull( this.model.get('revision') ) )
    624                                 return;
    625 
    626                         this.$el.html( this.template( this.model.get('revision').toJSON() ) );
    627 
    628                         // Set the position.
    629                         offset = this.model.revisions.indexOf( this.model.get('revision') ) / ( this.model.revisions.length - 1 );
    630                         // 15% to get us to the start of the slider
    631                         // 0.7 to convert the slider-relative percentage to a page-relative percentage
    632                         // 100 to convert to a percentage
    633                         offset = 15 + (0.7 * offset * 100 ); // Now in a percentage
    634                         this.$el.css( isRtl ? 'right' : 'left', offset + '%' );
    635674                }
    636675        });
    637676
    … … window.wp = window.wp || {}; 
    654693                        this.disabledButtonCheck();
    655694                },
    656695
    657                 // Go to a specific modelindex, taking into account RTL mode.
     696                // Go to a specific model index
    658697                gotoModel: function( toIndex ) {
    659698                        var attributes = {
    660                                 to: this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL.
     699                                to: this.model.revisions.at( toIndex )
    661700                        };
    662701                        // If we're at the first revision, unset 'from'.
    663                         if ( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL
    664                                 attributes.from = this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 2 : toIndex - 1 );
     702                        if ( toIndex )
     703                                attributes.from = this.model.revisions.at( toIndex - 1 );
    665704                        else
    666705                                this.model.unset('from', { silent: true });
    667706
    668707                        this.model.set( attributes );
    669708                },
    670709
    671                 // Go to the 'next' revision, direction takes into account RTL mode.
     710                // Go to the 'next' revision
    672711                nextRevision: function() {
    673                         var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
    674                         toIndex     = isRtl ? toIndex - 1 : toIndex + 1;
     712                        var toIndex = this.model.revisions.indexOf( this.model.get('to') ) + 1;
    675713                        this.gotoModel( toIndex );
    676714                },
    677715
    678                 // Go to the 'previous' revision, direction takes into account RTL mode.
     716                // Go to the 'previous' revision
    679717                previousRevision: function() {
    680                         var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') );
    681                         toIndex     = isRtl ? toIndex + 1 : toIndex - 1;
     718                        var toIndex = this.model.revisions.indexOf( this.model.get('to') ) - 1;
    682719                        this.gotoModel( toIndex );
    683720                },
    684721
    … … window.wp = window.wp || {}; 
    702739        // The slider view.
    703740        revisions.view.Slider = wp.Backbone.View.extend({
    704741                className: 'wp-slider',
     742                direction: isRtl ? 'right' : 'left',
    705743
    706744                events: {
    707745                        'mousemove' : 'mouseMove'
    … … window.wp = window.wp || {}; 
    730768
    731769                mouseMove: function( e ) {
    732770                        var zoneCount = this.model.revisions.length - 1, // One fewer zone than models
    733                                 sliderLeft = this.$el.offset().left, // Left edge of slider
     771                                sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider
    734772                                sliderWidth = this.$el.width(), // Width of slider
    735773                                tickWidth = sliderWidth / zoneCount, // Calculated width of zone
    736                                 actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
    737                                 currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
    738 
    739                         // Reverse direction in RTL mode.
    740                         if ( isRtl )
    741                                 currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
     774                                actualX = e.pageX - sliderFrom; // Offset of mouse position in slider
     775                        actualX = isRtl ? sliderWidth - actualX : actualX;
     776                        var currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
    742777
    743778                        // Ensure sane value for currentModelIndex.
    744779                        if ( currentModelIndex < 0 )
    … … window.wp = window.wp || {}; 
    746781                        else if ( currentModelIndex >= this.model.revisions.length )
    747782                                currentModelIndex = this.model.revisions.length - 1;
    748783
    749                         // Update the tooltip model
     784                        // Update the tooltip mode
    750785                        this.model.set({ hoveredRevision: this.model.revisions.at( currentModelIndex ) });
    751786                },
    752787
    … … window.wp = window.wp || {}; 
    765800                        if ( this.model.get('compareTwoMode') ) {
    766801                                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    767802                                handles.first()
    768                                         .toggleClass( 'right-handle', !! isRtl )
    769                                         .toggleClass( 'left-handle', ! isRtl );
     803                                        .toggleClass( 'to-handle', !! isRtl )
     804                                        .toggleClass( 'from-handle', ! isRtl );
    770805                                handles.last()
    771                                         .toggleClass( 'left-handle', !! isRtl )
    772                                         .toggleClass( 'right-handle', ! isRtl );
     806                                        .toggleClass( 'from-handle', !! isRtl )
     807                                        .toggleClass( 'to-handle', ! isRtl );
    773808                        } else {
    774                                 handles.removeClass('left-handle right-handle');
     809                                handles.removeClass('from-handle to-handle');
    775810                        }
    776811                },
    777812
    778                 getSliderPosition: function( ui ){
    779                         return isRtl ? this.model.revisions.length - ui.value - 1 : ui.value;
    780                 },
    781 
    782813                start: function( event, ui ) {
    783814                        this.model.set({ scrubbing: true });
    784815
    785816                        // Track the mouse position to enable smooth dragging,
    786817                        // overrides default jQuery UI step behavior.
    787818                        $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) {
    788                                 var view            = e.data.view,
    789                                         leftDragBoundary  = view.$el.offset().left, // Initial left boundary
    790                                         sliderOffset      = leftDragBoundary,
    791                                         sliderRightEdge   = leftDragBoundary + view.$el.width(),
    792                                         rightDragBoundary = sliderRightEdge, // Initial right boundary
    793                                         leftDragReset     = 0, // Initial left drag reset
    794                                         rightDragReset    = sliderRightEdge - sliderOffset; // Initial right drag reset
     819                                var view              = e.data.view,
     820                                    leftDragBoundary  = view.$el.offset().left,
     821                                    sliderOffset      = leftDragBoundary,
     822                                    sliderRightEdge   = leftDragBoundary + view.$el.width(),
     823                                    rightDragBoundary = sliderRightEdge,
     824                                    leftDragReset     = '0',
     825                                    rightDragReset    = '100%',
     826                                    handle            = $( ui.handle );
    795827
    796828                                // In two handle mode, ensure handles can't be dragged past each other.
    797829                                // Adjust left/right boundaries and reset points.
    798830                                if ( view.model.get('compareTwoMode') ) {
    799                                         var rightHandle = $( ui.handle ).parent().find('.right-handle'),
    800                                                 leftHandle  = $( ui.handle ).parent().find('.left-handle');
    801 
    802                                         if ( $( ui.handle ).hasClass('left-handle') ) {
    803                                                 // Dragging the left handle, boundary is right handle.
    804                                                 // RTL mode calculations reverse directions.
    805                                                 if ( isRtl ) {
    806                                                         leftDragBoundary = rightHandle.offset().left + rightHandle.width();
    807                                                         leftDragReset    = leftDragBoundary - sliderOffset;
    808                                                 } else {
    809                                                         rightDragBoundary = rightHandle.offset().left;
    810                                                         rightDragReset    = rightDragBoundary - sliderOffset;
    811                                                 }
    812                                         } else {
    813                                                 // Dragging the right handle, boundary is the left handle.
    814                                                 // RTL mode calculations reverse directions.
    815                                                 if ( isRtl ) {
    816                                                         rightDragBoundary = leftHandle.offset().left;
    817                                                         rightDragReset    = rightDragBoundary - sliderOffset;
    818                                                 } else {
    819                                                         leftDragBoundary = leftHandle.offset().left + leftHandle.width() ;
    820                                                         leftDragReset    = leftDragBoundary - sliderOffset;
    821                                                 }
     831                                        var handles = handle.parent().find('.ui-slider-handle');
     832                                        if ( handle.is( handles.first() ) ) { // We're the left handle
     833                                                rightDragBoundary = handles.last().offset().left;
     834                                                rightDragReset    = rightDragBoundary - sliderOffset;
     835                                        } else { // We're the right handle
     836                                                leftDragBoundary = handles.first().offset().left + handles.first().width();
     837                                                leftDragReset    = leftDragBoundary - sliderOffset;
    822838                                        }
    823839                                }
    824840
    825841                                // Follow mouse movements, as long as handle remains inside slider.
    826                                 if ( e.clientX < leftDragBoundary ) {
    827                                         $( ui.handle ).css( 'left', leftDragReset ); // Mouse to left of slider.
    828                                 } else if ( e.clientX > rightDragBoundary ) {
    829                                         $( ui.handle ).css( 'left', rightDragReset ); // Mouse to right of slider.
     842                                if ( e.pageX < leftDragBoundary ) {
     843                                        handle.css( 'left', leftDragReset ); // Mouse to left of slider.
     844                                } else if ( e.pageX > rightDragBoundary ) {
     845                                        handle.css( 'left', rightDragReset ); // Mouse to right of slider.
    830846                                } else {
    831                                         $( ui.handle ).css( 'left', e.clientX - sliderOffset ); // Mouse in slider.
     847                                        handle.css( 'left', e.pageX - sliderOffset ); // Mouse in slider.
    832848                                }
    833849                        } );
    834850                },
    835851
     852                getPosition: function( position ) {
     853                        return isRtl ? this.model.revisions.length - position - 1: position;
     854                },
     855
    836856                // Responds to slide events
    837857                slide: function( event, ui ) {
    838                         var attributes, movedRevision, sliderPosition;
     858                        var attributes, movedRevision;
    839859                        // Compare two revisions mode
    840860                        if ( this.model.get('compareTwoMode') ) {
    841861                                // Prevent sliders from occupying same spot
    842862                                if ( ui.values[1] === ui.values[0] )
    843863                                        return false;
    844 
     864                                if ( isRtl )
     865                                        ui.values.reverse();
    845866                                attributes = {
    846                                         to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[1] ),
    847                                         from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[0] )
     867                                        from: this.model.revisions.at( this.getPosition( ui.values[0] ) ),
     868                                        to: this.model.revisions.at( this.getPosition( ui.values[1] ) )
    848869                                };
    849                                 if ( isRtl )
    850                                         movedRevision = ui.value === ui.values[1] ? attributes.from : attributes.to;
    851                                 else
    852                                         movedRevision = ui.value === ui.values[0] ? attributes.from : attributes.to;
    853870                        } else {
    854                                 sliderPosition = this.getSliderPosition( ui );
    855871                                attributes = {
    856                                         to: this.model.revisions.at( sliderPosition )
     872                                        to: this.model.revisions.at( this.getPosition( ui.value ) )
    857873                                };
    858                                 movedRevision = attributes.to;
    859874                                // If we're at the first revision, unset 'from'.
    860                                 if ( sliderPosition ) // Reverse directions for RTL.
    861                                         attributes.from = this.model.revisions.at( sliderPosition - 1 );
     875                                if ( this.getPosition( ui.value ) > 0 )
     876                                        attributes.from = this.model.revisions.at( this.getPosition( ui.value ) - 1 );
    862877                                else
    863878                                        attributes.from = undefined;
    864879                        }
     880                        movedRevision = this.model.revisions.at( this.getPosition( ui.value ) );
    865881
    866882                        // If we are scrubbing, a scrub to a revision is considered a hover
    867883                        if ( this.model.get('scrubbing') )

  • wp-admin/revision.php

    require_once( './admin-header.php' ); 
    138138                        ({{{ data.dateShort }}})
    139139        <# } #>
    140140        </div>
    141         <div class="revisions-tooltip-arrow"></div>
     141        <div class="revisions-tooltip-arrow"><span></span></div>
    142142</script>
    143143
    144144<script id="tmpl-revisions-checkbox" type="text/html">