WordPress.org

Make WordPress Core

Changeset 24205


Ignore:
Timestamp:
05/08/13 21:22:01 (12 months 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.