Make WordPress Core

Changeset 24205


Ignore:
Timestamp:
05/08/2013 09:22:01 PM (13 years ago)
Author:
ocean90
Message:

Revisions UI: RTL support. (And inline docs.)

props DrewAPicture, adamsilverstein. fixes #23897.

Location:
trunk/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin-rtl.css

    r24048 r24205  
    956956------------------------------------------------------------------------------*/
    957957
    958 table.diff td, table.diff th {
    959         font-family: Consolas, Monaco, monospace;
     958#toggle-revision-compare-mode {
     959        right: auto;
     960        left: 0;
     961        padding: 9px 0 0 9px;
     962
     963}
     964
     965
     966#diff-next-revision {
     967        float: left;
     968}
     969
     970#diff-previous-revision {
     971        float: right;
     972}
     973
     974.diff-title {
     975        float: right;
     976}
     977
     978.diff-title strong {
     979        text-align: left;
     980        float: right;
     981        margin-right: 0;
     982        margin-left: 5px;
     983}
     984
     985#restore-revision {
     986        margin-left: 0;
     987        margin-right: 10px;
     988}
     989
     990.diff-col-title-added,
     991.diff-col-title-removed {
     992        text-align: right;
     993        float: right;
     994}
     995
     996.diff-col-title-added {
     997        float: left;
     998}
     999
     1000.ui-tooltip-content img {
     1001        float: right;
     1002        margin-right: 0;
     1003        margin-left: 5px;
     1004}
     1005
     1006#diff-slider .ui-slider-tooltip,
     1007#diff-slider-ticks .ui-slider-tooltip {
     1008        margin-left: 0;
     1009        margin-right: -78px;
    9601010}
    9611011
  • trunk/wp-admin/css/wp-admin.css

    r24174 r24205  
    37623762.diff-loading .spinner {
    37633763        clear: both;
    3764         margin-left: auto;
    3765         margin-right: auto;
     3764        margin: 0 auto;
    37663765        display: block;
    37673766        float: none;
  • trunk/wp-admin/includes/ajax-actions.php

    r24192 r24205  
    21202120        $compare_two_mode = (bool) $post_id;
    21212121
    2122         //
    2123         //TODO: currently code returns all possible comparisons for the indicated 'compare_to' revision
    2124         //however, the front end prevents users from pulling the right handle past the left or the left pass the right,
    2125         //so only the possible diffs need be generated
    2126         //
    21272122        $all_the_revisions = array();
    21282123        if ( ! $post_id )
     
    21372132        $left_revision = get_post( $compare_to );
    21382133
    2139         //single model fetch mode
    2140         //return the diff of a single revision comparison
     2134        // single model fetch mode
     2135        // return the diff of a single revision comparison
    21412136        if ( $single_revision_id ) {
    21422137                $right_revision = get_post( $single_revision_id );
     
    21542149                $lines_added = $lines_deleted = 0;
    21552150                $content = '';
    2156                 //compare from left to right, passed from application
     2151                // compare from left to right, passed from application
    21572152                foreach ( _wp_post_revision_fields() as $field => $field_value ) {
    21582153                        $left_content = apply_filters( "_wp_post_revision_field_$field", $left_revision->$field, $field, $left_revision, 'left' );
     
    21832178
    21842179                $all_the_revisions = array (
    2185                         'diff'          => $content,
     2180                        'diff'         => $content,
    21862181                        'linesDeleted' => $lines_deleted,
    21872182                        'linesAdded'   => $lines_added
     
    21902185                echo json_encode( $all_the_revisions );
    21912186                exit();
    2192         } //end single model fetch
     2187        } // end single model fetch
    21932188
    21942189        $count = -1;
    21952190
    2196         //reverse the list to start with oldes revision
     2191        // reverse the list to start with oldest revision
    21972192        $revisions = array_reverse( $revisions );
    21982193
     
    22092204                $is_current_revision = false;
    22102205                $count++;
    2211                 // return blank data for diffs to the left of the left handle (for right handel model)
    2212                 // or to the right of the right handle (for left handel model)
    2213                 if ( ( 0 != $left_handle_at && $count < $left_handle_at ) ||
    2214                          ( 0 != $right_handle_at && $count > ( $right_handle_at - 2 ) ) ) {
    2215                         $all_the_revisions[] = array (
    2216                                 'ID' => $revision->ID,
    2217                         );
    2218                         continue;
     2206
     2207                /**
     2208                * return blank data for diffs to the left of the left handle (for right handel model)
     2209                * or to the right of the right handle (for left handel model)
     2210                * and visa versa in RTL mode
     2211                */
     2212                if( ! is_rtl() ) {
     2213                        if ( ( ( 0 != $left_handle_at && $count < $left_handle_at ) ||
     2214                                 ( 0 != $right_handle_at && $count > ( $right_handle_at - 2 ) ) ) ) {
     2215                                $all_the_revisions[] = array (
     2216                                        'ID' => $revision->ID,
     2217                                );
     2218                                continue;
     2219                        }
     2220                } else { // is_rtl
     2221                        if ( ( 0 != $left_handle_at && $count > ( $left_handle_at - 1 ) ||
     2222                                 ( 0 != $left_handle_at && $count < $right_handle_at ) ) ) {
     2223                                $all_the_revisions[] = array (
     2224                                        'ID' => $revision->ID,
     2225                                );
     2226                                continue;
     2227                        }
    22192228                }
    22202229
     
    23082317        endforeach;
    23092318
     2319        // in RTL + single handle mode, reverse the revision direction
     2320        if ( is_rtl() && $compare_two_mode )
     2321                $all_the_revisions = array_reverse( $all_the_revisions );
     2322
    23102323        echo json_encode( $all_the_revisions );
    23112324        exit();
  • trunk/wp-admin/js/revisions.js

    r24174 r24205  
    162162                                        self.tickmarkView.render();
    163163                                        self.slider.refresh({
    164                                                 'max': revisionCount - 1,
    165                                                 'value': self.rightDiff - 1
     164                                                'max': revisionCount - 1, // slider starts at 0 in single handle mode
     165                                                'value': self.rightDiff - 1 // slider starts at 0 in single handle mode
    166166                                        }, true);
    167167                                },
     
    173173                },
    174174
    175                 // load the models for the left handle
     175                // load the models for the left handle (the right handler has moved)
    176176                reloadLeft: function() {
    177177                        var self = this;
    178178                        self.startLeftModelLoading();
    179179                        self.leftHandleRevisions = new Revisions( {}, {
    180                                 'compareTo': self.revisions.at( self.rightDiff - 1 ).get( 'ID' ),
     180                                'compareTo': self.revisions.at( self.rightDiff - 1 ).get( 'ID' ), // diff and model count off by 1
    181181                                'showAutosaves': self.autosaves,
    182182                                'showSplitView': self.showSplitView,
     
    203203                },
    204204
    205                 // load the models for the right handle
     205                // load the models for the right handle (the left handle has moved)
    206206                reloadRight: function() {
    207207                        var self = this;
    208208                        self.startRightModelLoading();
    209209                        self.rightHandleRevisions = new Revisions( {}, {
    210                                 'compareTo': self.revisions.at( self.leftDiff - 1 ).get( 'ID' ),
     210                                'compareTo': self.revisions.at( self.leftDiff - 1 ).get( 'ID' ), // diff and model count off by 1
    211211                                'showAutosaves': self.autosaves,
    212212                                'showSplitView': self.showSplitView,
     
    220220                                        self.tickmarkView.model = self.rightHandleRevisions;
    221221                                        self.slider.refresh({
    222                                                 'max': self.revisions.length,
    223                                                 'values': [ self.leftDiff, self.rightDiff]
     222                                                'max': self.revisions.length
    224223                                        }, true);
    225224                                },
     
    232231                },
    233232
     233                /**
     234                 * reloadLeftRight reload models for both the left and right handles
     235                 */
    234236                reloadLeftRight: function() {
    235237                        this.startRightModelLoading();
     
    241243                disabledButtonCheck: function( val ) {
    242244                        var maxVal = this.revisions.length - 1,
    243                                 next = $( '#next' ),
    244                                 prev = $( '#previous' );
     245                                next = ! isRtl ? $( '#next' ) : $( '#previous' ),
     246                                prev = ! isRtl ? $( '#previous' ) : $( '#next' );
    245247
    246248                        // Disable "Next" button if you're on the last node
     
    257259                },
    258260
     261                /**
     262                 * completeApplicationSetup finishes loading all views once the initial model load is complete
     263                 */
    259264                completeApplicationSetup: function() {
    260265                        this.revisionView = new revisions.view.Diff({
    261266                                model: this.revisions
    262267                        });
    263                         this.revisionView.render();
    264 
    265                         this.loadDiffs( this.revisions );
     268                        this.revisionView.render(); // render the revision view
     269
     270                        this.loadDiffs( this.revisions ); // get the actual revisions data
    266271
    267272                        this.revisionsInteractions = new revisions.view.Interact({
    268273                                model: this.revisions
    269274                        });
    270                         this.revisionsInteractions.render();
     275                        this.revisionsInteractions.render(); // render the interaction view
    271276
    272277                        this.tickmarkView = new revisions.view.Tickmarks({
    273278                                model: this.revisions
    274279                        });
    275                         this.tickmarkView.render();
     280                        this.tickmarkView.render(); // render the tickmark view
    276281                }
    277282        });
     
    302307                },
    303308
     309                /**
     310                 * respond to slider slide events
     311                 * Note: in one handle mode, jQuery UI reports leftmost position as 0
     312                 * in two handle mode, jQuery UI Slider reports leftmost position as 1
     313                 */
    304314                slide: function( event, ui ) {
    305315                        if ( this.singleRevision ) {
     
    316326                                                return false;
    317327
    318                                         Diff.leftDiff = ui.values[0];
     328                                        Diff.leftDiff = isRtl ? ui.values[1] : ui.values[0]; // handles are reversed in RTL mode
    319329                                } else {
    320330                                        // Right handler
     
    322332                                                return false;
    323333
    324                                         Diff.rightDiff = ui.values[1];
     334                                        Diff.rightDiff = isRtl ? ui.values[0] : ui.values[1]; // handles are reversed in RTL mode
    325335                                }
    326336
     
    329339                },
    330340
     341                /**
     342                 * responds to slider start sliding events
     343                 * in two handle mode stores start position, so if unchanged at stop event no need to reload diffs
     344                 * also swaps in the appropriate models - left handled or right handled
     345                 */
    331346                start: function( event, ui ) {
    332347                        // Not needed in one mode
     
    343358                                if ( Diff.revisionView.model !== Diff.leftHandleRevisions &&
    344359                                                null !== Diff.leftHandleRevisions ) {
    345                                         Diff.revisionView.model = Diff.leftHandleRevisions;
     360                                        Diff.revisionView.model = Diff.leftHandleRevisions; // use the left handle models
    346361                                        Diff.tickmarkView.model = Diff.leftHandleRevisions;
    347362                                        Diff.tickmarkView.render();
    348363                                }
    349364
    350                                 Diff.leftDiffStart = ui.values[ 0 ];
     365                                Diff.leftDiffStart = isRtl ? ui.values[1] : ui.values[0]; // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    351366
    352367                        } else {
     
    357372                                if ( Diff.revisionView.model !== Diff.rightHandleRevisions &&
    358373                                                null !== Diff.rightHandleRevisions ) {
    359                                         Diff.revisionView.model = Diff.rightHandleRevisions;
     374                                        Diff.revisionView.model = Diff.rightHandleRevisions; // use the right handle models
    360375                                        Diff.tickmarkView.model = Diff.rightHandleRevisions;
    361376                                        Diff.tickmarkView.render();
     
    363378
    364379                                Diff.revisionView.draggingLeft = false;
    365                                 Diff.rightDiffStart = ui.values[1];
    366                         }
    367                 },
    368 
     380                                Diff.rightDiffStart = isRtl ? ui.values[0] : ui.values[1]; // in RTL mode the 'left handle' is the second in the slider, 'right' is first
     381                        }
     382                },
     383
     384                /**
     385                 * responds to slider stop events
     386                 * in two handled mode, if the handle that stopped has moved, reload the diffs for the other handle
     387                 * the other handle compares to this handle's position, so if it changes they need to be recalculated
     388                 */
    369389                stop: function( event, ui ) {
    370390                        // Not needed in one mode
     
    375395                        // and the right handle, swap out when dragging
    376396                        if ( $( ui.handle ).hasClass( 'left-handle' ) ) {
    377                                 // Left hadnler
    378                                 if ( Diff.leftDiffStart !== ui.values[0] )
     397                                // Left handler
     398                                if ( Diff.leftDiffStart !== isRtl ? ui.values[1] : ui.values[0] ) // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    379399                                        Diff.reloadRight();
    380400                        } else {
    381401                                // Right handler
    382                                 if ( Diff.rightDiffStart !== ui.values[1] )
     402                                if ( Diff.rightDiffStart !== isRtl ? ui.values[0] : ui.values[1] ) // in RTL mode the 'left handle' is the second in the slider, 'right' is first
    383403                                        Diff.reloadLeft();
    384404                        }
     
    417437                                slide: $.proxy( self.slide, self ),
    418438                                start: $.proxy( self.start, self ),
    419                                 stop: $.proxy( self.stop, self )
     439                                stop:  $.proxy( self.stop, self )
    420440                        } );
    421441
     
    443463                        tickWidth   = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks
    444464                        tickWidth   = ( tickWidth < 10 ) ? 10 : tickWidth;
    445                         sliderWidth = tickWidth * ( sliderMax - adjustMax ); //calculate the slider width
     465                        sliderWidth = tickWidth * ( sliderMax - adjustMax ); // calculate the slider width
    446466                        aTickWidth  = $( '.revision-tick' ).width();
    447467
     
    486506                                 */
    487507                                $( this ).on( 'click',
    488                                         { tickCount: tickCount }, // //pass the tick through so we know where to move the handle
     508                                        { tickCount: tickCount }, // pass the tick through so we know where to move the handle
    489509                                        function( event ) {
    490                                                 if ( Diff.slider.singleRevision ) { //single handle mode
    491                                                         Diff.rightDiff = event.data.tickCount; //reposition the right handle
     510                                                if ( Diff.slider.singleRevision ) { // single handle mode
     511                                                        Diff.rightDiff = event.data.tickCount; // reposition the right handle
    492512                                                        Diff.slider.refresh({
    493513                                                                value: Diff.rightDiff - 1
    494514                                                        } );
    495515                                                } else { //compare two mode
    496                                                         if ( event.data.tickCount < Diff.leftDiff ||
    497                                                                 isRtl && event.data.tickCount > Diff.leftDiff ) { // click was on the 'left' side
    498                                                                         Diff.leftDiff = event.data.tickCount; // set the left handle location
    499                                                                         Diff.reloadRight(); //reload the right handle comparison models
    500                                                         } else { //middle or 'right' clicks
    501                                                                 Diff.rightDiff = event.data.tickCount; // set the right handle location
    502                                                                 Diff.reloadLeft(); //reload left handle models
     516                                                        if ( isRtl ) {
     517                                                                if ( event.data.tickCount < Diff.leftDiff ) { // click was on the 'left' side
     518                                                                                Diff.rightDiff = event.data.tickCount; // set the 'right' handle location
     519                                                                                Diff.reloadLeft(); // reload the left handle comparison models
     520                                                                } else { // middle or 'right' clicks
     521                                                                        Diff.leftDiff = event.data.tickCount; // set the 'left' handle location
     522                                                                        Diff.reloadRight(); // reload right handle models
     523                                                                }
     524                                                        } else {
     525                                                                if ( event.data.tickCount < Diff.leftDiff ) { // click was on the 'left' side
     526                                                                                Diff.leftDiff = event.data.tickCount; // set the left handle location
     527                                                                                Diff.reloadRight(); // reload the right handle comparison models
     528                                                                } else { // middle or 'right' clicks
     529                                                                        Diff.rightDiff = event.data.tickCount; // set the right handle location
     530                                                                        Diff.reloadLeft(); // reload left handle models
     531                                                                }
    503532                                                        }
    504533                                                        Diff.slider.refresh( { // set the slider handle positions
    505                                                                 values: [ Diff.leftDiff, Diff.rightDiff ]
     534                                                                values: [ isRtl ? Diff.rightDiff : Diff.leftDiff, isRtl ? Diff.leftDiff : Diff.rightDiff ]
    506535                                                        } );
    507536                                                }
     
    540569                // next and previous buttons, only available in compare one mode
    541570                events: {
    542                         'click #next':     'nextRevision',
    543                         'click #previous': 'previousRevision'
     571                        'click #next':     ! isRtl ? 'nextRevision' : 'previousRevision',
     572                        'click #previous': ! isRtl ? 'previousRevision' : 'nextRevision'
    544573                },
    545574
     
    555584                        if ( Diff.singleRevision ) {
    556585                                Diff.slider.refresh({
    557                                         value: Diff.rightDiff - 1,
     586                                        value: Diff.rightDiff - 1, // rightDiff value is off model index by 1
    558587                                        min: 0,
    559588                                        max: modelcount - 1
     
    564593                        } else {
    565594                                Diff.slider.refresh({
    566                                         values: [ Diff.leftDiff, Diff.rightDiff + 1 ],
     595                                        // in RTL mode the 'left handle' is the second in the slider, 'right' is first
     596                                        values: [ isRtl ? Diff.rightDiff : Diff.leftDiff, isRtl ? Diff.leftDiff : Diff.rightDiff ],
    567597                                        min: 1,
    568598                                        max: modelcount + 1,
     
    571601
    572602                                $( '#revision-diff-container' ).addClass( 'comparing-two-revisions' );
    573                                 $( '#diff-slider a.ui-slider-handle' ).first().addClass( 'left-handle' );
    574                                 $( '#diff-slider a.ui-slider-handle' ).last().addClass( 'right-handle' );
     603                                // in RTL mode the 'left handle' is the second in the slider, 'right' is first
     604                                $( '#diff-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' );
     605                                $( '#diff-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' );
    575606
    576607                        }
     
    627658                        if ( ! Diff.singleRevision ) {
    628659                                if ( this.draggingLeft ) {
    629                                         thediff = Diff.leftDiff - 1;
     660                                        thediff = Diff.leftDiff - 1; //leftDiff value is off model index by 1
    630661                                        if ( this.model.at( thediff ) ) {
    631662                                                addHtml = this.template( this.model.at( thediff ).toJSON() );
    632663                                        }
    633664                                } else { // dragging right handle
    634                                         thediff = Diff.rightDiff -1;
     665                                        thediff = Diff.rightDiff - 1; // rightDiff value is off model index by 1
    635666                                        if ( this.model.at( thediff ) ) {
    636667                                                addHtml = this.template( this.model.at( thediff ).toJSON() );
     
    638669                                }
    639670                        } else { // end compare two revisions mode, eg only one slider handle
    640                                 if ( this.model.at( Diff.rightDiff - 1 ) ) {
     671                                if ( this.model.at( Diff.rightDiff - 1 ) ) { // rightDiff value is off model index by 1
    641672                                        addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() );
    642673                                }
     
    670701                                Diff.singleRevision = false ;
    671702
    672                                 if ( 1 === Diff.rightDiff )
    673                                         Diff.rightDiff = 2;
     703                                // in RTL mode handles are swapped, so boundary checks are different;
     704                                if ( isRtl ){
     705                                        Diff.leftDiff = Diff.revisions.length; // put the left handle at the rightmost position, representing current revision
     706
     707                                        if ( Diff.revisions.length === Diff.rightDiff ) // make sure 'left' handle not in rightmost slot
     708                                                Diff.rightDiff = Diff.rightDiff - 1;
     709                                } else {
     710                                        if ( 1 === Diff.rightDiff ) // make sure right handle not in leftmost slot
     711                                                Diff.rightDiff = 2;
     712                                }
    674713
    675714                                Diff.revisionView.draggingLeft = false;
    676715
    677716                                revisions.model.settings.revision_id = ''; // reset passed revision id so switching back to one handle mode doesn't re-select revision
    678                                 Diff.reloadLeftRight();
     717                                Diff.reloadLeftRight(); // load diffs for left and right handles
    679718                                Diff.revisionView.model = Diff.rightHandleRevisions;
    680719
     
    759798                        return ajaxurl +
    760799                                '?action=revisions-data' +
    761                                 '&compare_to=' + this.options.compareTo +
    762                                 '&post_id=' + this.options.post_id +
    763                                 '&show_autosaves=' + this.options.showAutosaves +
    764                                 '&show_split_view=' + this.options.showSplitView +
    765                                 '&right_handle_at=' + this.options.rightHandleAt +
    766                                 '&left_handle_at=' + this.options.leftHandleAt +
     800                                '&compare_to=' + this.options.compareTo + // revision are we comparing to
     801                                '&post_id=' + this.options.post_id + // the post id
     802                                '&show_autosaves=' + this.options.showAutosaves + // show or hide autosaves
     803                                '&show_split_view=' + this.options.showSplitView + // show in split view or single column view
     804                                '&right_handle_at=' + this.options.rightHandleAt + // mark point for comparison list
     805                                '&left_handle_at=' + this.options.leftHandleAt + // mark point for comparison list
    767806                                '&nonce=' + this.options.nonce;
    768807                },
Note: See TracChangeset for help on using the changeset viewer.