WordPress.org

Make WordPress Core

Ticket #23897: 23897.10.diff

File 23897.10.diff, 18.6 KB (added by ocean90, 22 months ago)

Swap next/prev functionality

  • wp-admin/includes/ajax-actions.php

     
    21192119        $single_revision_id = ! empty( $_GET['single_revision_id'] ) ? absint( $_GET['single_revision_id'] ) : 0; 
    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 ) 
    21292124                $post_id = $compare_to; 
     
    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 
    21992194        $previous_revision_id = 0; 
     
    22082203                $revision_from_date_author = ''; 
    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 
     2222                        if ( ( 0 != $left_handle_at && $count > ( $left_handle_at - 1 ) || 
     2223                                 ( 0 != $left_handle_at && $count < $right_handle_at ) ) ) { 
     2224                                $all_the_revisions[] = array ( 
     2225                                        'ID' => $revision->ID, 
     2226                                ); 
     2227                                continue; 
     2228                        } 
     2229 
    22192230                } 
    22202231 
    22212232                if ( $compare_two_mode ) { 
     
    23072318 
    23082319        endforeach; 
    23092320 
     2321        if ( is_rtl() && $compare_two_mode ) { // in RTL + single handle mode, reverse the revision direction 
     2322                $all_the_revisions = array_reverse( $all_the_revisions ); 
     2323        } 
     2324 
    23102325        echo json_encode( $all_the_revisions ); 
    23112326        exit(); 
    23122327} 
  • wp-admin/js/revisions.js

     
    161161                                        self.tickmarkView.model = self.revisions; 
    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                                }, 
    168168 
     
    172172                        }); 
    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, 
    183183                                'rightHandleAt': self.rightDiff 
     
    202202                        }); 
    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, 
    213213                                'leftHandleAt': self.leftDiff 
     
    219219                                        self.loadDiffs( self.rightHandleRevisions ); 
    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                                }, 
    226225 
     
    231230 
    232231                }, 
    233232 
     233                /** 
     234                 * reloadLeftRight reload models for both the left and right handles 
     235                 */ 
    234236                reloadLeftRight: function() { 
    235237                        this.startRightModelLoading(); 
    236238                        this.startLeftModelLoading(); 
     
    240242 
    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 
    247249                        if ( maxVal === val ) 
     
    256258                                prev.prop( 'disabled', false ); 
    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(); 
     268                        this.revisionView.render(); // render the revision view 
    264269 
    265                         this.loadDiffs( this.revisions ); 
     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        }); 
    278283 
     
    301306                        }); 
    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 ) { 
    306316                                Diff.rightDiff = ( ui.value + 1 ); 
     
    315325                                        if ( Diff.leftModelLoading ) // left model still loading, prevent sliding left handle 
    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 
    321331                                        if ( Diff.rightModelLoading ) // right model still loading, prevent sliding right handle 
    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 
    327337                                Diff.revisionView.render(); 
    328338                        } 
    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 
    333348                        if ( this.singleRevision ) 
     
    342357 
    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 { 
    353368                                // Right handler 
     
    356371 
    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(); 
    362377                                } 
    363378 
    364379                                Diff.revisionView.draggingLeft = false; 
    365                                 Diff.rightDiffStart = ui.values[1]; 
     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 
    366381                        } 
    367382                }, 
    368383 
     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 
    371391                        if ( this.singleRevision ) 
     
    374394                        // calculate and generate a diff for comparing to the left handle 
    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                        } 
    385405                }, 
     
    416436                        $( '#diff-slider' ).slider( { 
    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 
    422442                        // Set options 
     
    442462                        tickWidth   = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 
    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 
    448468                        if ( tickWidth !== aTickWidth ) { // is the width already set correctly? 
     
    485505                                 * move the slider handle when the tick marks are clicked 
    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                                                } 
    508537                                                Diff.revisionView.render(); // render the main view 
     
    539568 
    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 
    546575                render: function() { 
     
    554583 
    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 
    560589                                }); 
     
    563592 
    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, 
    569599                                        range: true 
    570600                                }); 
    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                        } 
    577608 
     
    626657                        // compare two revisions mode? 
    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() ); 
    637668                                        } 
    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                                } 
    643674                        } 
     
    669700                        if ( $( '#compare-two-revisions' ).is( ':checked' ) ) { // compare 2 mode 
    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 
    674706 
     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                                } 
     713 
    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 
    681720                        } else { // compare one mode 
     
    758797                url: function() { 
    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                }, 
    769808 
  • wp-admin/css/wp-admin.css

     
    37613761 
    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; 
    37683767} 
  • wp-admin/css/wp-admin-rtl.css

     
    955955  11.2 - Post Revisions 
    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-left: 9px; 
    960962} 
    961963 
     964 
     965#diff-next-revision { 
     966        float: left; 
     967} 
     968 
     969#diff-previous-revision { 
     970        float: right; 
     971} 
     972 
     973.diff-title { 
     974        float: right; 
     975} 
     976 
     977.diff-title strong { 
     978        text-align: left; 
     979        float: right; 
     980        margin-right: 0; 
     981        margin-left: 5px; 
     982} 
     983 
     984#restore-revision { 
     985        margin-left: 0; 
     986        margin-right: 10px; 
     987} 
     988 
     989.diff-col-title-added, 
     990.diff-col-title-removed { 
     991        text-align: right; 
     992        float: right; 
     993} 
     994 
     995.diff-col-title-added { 
     996        float: left; 
     997} 
     998 
     999.ui-tooltip-content img { 
     1000        float: right; 
     1001        margin-right: 0; 
     1002        margin-left: 5px; 
     1003} 
     1004 
     1005#diff-slider .ui-slider-tooltip, 
     1006#diff-slider-ticks .ui-slider-tooltip { 
     1007        display: none; 
     1008        position: absolute; 
     1009        bottom: 21px; 
     1010        margin-left: 0; 
     1011        margin-right: -78px; 
     1012} 
     1013 
    9621014/*------------------------------------------------------------------------------ 
    9631015  11.3 - Featured Images 
    9641016------------------------------------------------------------------------------*/