Ticket #23897: 23897.10.diff
File 23897.10.diff, 18.6 KB (added by , 11 years ago) |
---|
-
wp-admin/includes/ajax-actions.php
2119 2119 $single_revision_id = ! empty( $_GET['single_revision_id'] ) ? absint( $_GET['single_revision_id'] ) : 0; 2120 2120 $compare_two_mode = (bool) $post_id; 2121 2121 2122 //2123 //TODO: currently code returns all possible comparisons for the indicated 'compare_to' revision2124 //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 generated2126 //2127 2122 $all_the_revisions = array(); 2128 2123 if ( ! $post_id ) 2129 2124 $post_id = $compare_to; … … 2193 2188 2194 2189 $count = -1; 2195 2190 2196 //reverse the list to start with oldes revision2191 //reverse the list to start with oldest revision 2197 2192 $revisions = array_reverse( $revisions ); 2198 2193 2199 2194 $previous_revision_id = 0; … … 2208 2203 $revision_from_date_author = ''; 2209 2204 $is_current_revision = false; 2210 2205 $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 2219 2230 } 2220 2231 2221 2232 if ( $compare_two_mode ) { … … 2307 2318 2308 2319 endforeach; 2309 2320 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 2310 2325 echo json_encode( $all_the_revisions ); 2311 2326 exit(); 2312 2327 } -
wp-admin/js/revisions.js
161 161 self.tickmarkView.model = self.revisions; 162 162 self.tickmarkView.render(); 163 163 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 166 166 }, true); 167 167 }, 168 168 … … 172 172 }); 173 173 }, 174 174 175 // load the models for the left handle 175 // load the models for the left handle (the right handler has moved) 176 176 reloadLeft: function() { 177 177 var self = this; 178 178 self.startLeftModelLoading(); 179 179 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 181 181 'showAutosaves': self.autosaves, 182 182 'showSplitView': self.showSplitView, 183 183 'rightHandleAt': self.rightDiff … … 202 202 }); 203 203 }, 204 204 205 // load the models for the right handle 205 // load the models for the right handle (the left handle has moved) 206 206 reloadRight: function() { 207 207 var self = this; 208 208 self.startRightModelLoading(); 209 209 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 211 211 'showAutosaves': self.autosaves, 212 212 'showSplitView': self.showSplitView, 213 213 'leftHandleAt': self.leftDiff … … 219 219 self.loadDiffs( self.rightHandleRevisions ); 220 220 self.tickmarkView.model = self.rightHandleRevisions; 221 221 self.slider.refresh({ 222 'max': self.revisions.length, 223 'values': [ self.leftDiff, self.rightDiff] 222 'max': self.revisions.length 224 223 }, true); 225 224 }, 226 225 … … 231 230 232 231 }, 233 232 233 /** 234 * reloadLeftRight reload models for both the left and right handles 235 */ 234 236 reloadLeftRight: function() { 235 237 this.startRightModelLoading(); 236 238 this.startLeftModelLoading(); … … 240 242 241 243 disabledButtonCheck: function( val ) { 242 244 var maxVal = this.revisions.length - 1, 243 next = $( '#next' ),244 prev = $( '#previous' );245 next = ! isRtl ? $( '#next' ) : $( '#previous' ), 246 prev = ! isRtl ? $( '#previous' ) : $( '#next' ); 245 247 246 248 // Disable "Next" button if you're on the last node 247 249 if ( maxVal === val ) … … 256 258 prev.prop( 'disabled', false ); 257 259 }, 258 260 261 /** 262 * completeApplicationSetup finishes loading all views once the initial model load is complete 263 */ 259 264 completeApplicationSetup: function() { 260 265 this.revisionView = new revisions.view.Diff({ 261 266 model: this.revisions 262 267 }); 263 this.revisionView.render(); 268 this.revisionView.render(); // render the revision view 264 269 265 this.loadDiffs( this.revisions ); 270 this.loadDiffs( this.revisions ); // get the actual revisions data 266 271 267 272 this.revisionsInteractions = new revisions.view.Interact({ 268 273 model: this.revisions 269 274 }); 270 this.revisionsInteractions.render(); 275 this.revisionsInteractions.render(); // render the interaction view 271 276 272 277 this.tickmarkView = new revisions.view.Tickmarks({ 273 278 model: this.revisions 274 279 }); 275 this.tickmarkView.render(); 280 this.tickmarkView.render(); // render the tickmark view 276 281 } 277 282 }); 278 283 … … 301 306 }); 302 307 }, 303 308 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 */ 304 314 slide: function( event, ui ) { 305 315 if ( this.singleRevision ) { 306 316 Diff.rightDiff = ( ui.value + 1 ); … … 315 325 if ( Diff.leftModelLoading ) // left model still loading, prevent sliding left handle 316 326 return false; 317 327 318 Diff.leftDiff = ui.values[0];328 Diff.leftDiff = isRtl ? ui.values[1] : ui.values[0]; // handles are reversed in RTL mode 319 329 } else { 320 330 // Right handler 321 331 if ( Diff.rightModelLoading ) // right model still loading, prevent sliding right handle 322 332 return false; 323 333 324 Diff.rightDiff = ui.values[1];334 Diff.rightDiff = isRtl ? ui.values[0] : ui.values[1]; // handles are reversed in RTL mode 325 335 } 326 336 327 337 Diff.revisionView.render(); 328 338 } 329 339 }, 330 340 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 */ 331 346 start: function( event, ui ) { 332 347 // Not needed in one mode 333 348 if ( this.singleRevision ) … … 342 357 343 358 if ( Diff.revisionView.model !== Diff.leftHandleRevisions && 344 359 null !== Diff.leftHandleRevisions ) { 345 Diff.revisionView.model = Diff.leftHandleRevisions; 360 Diff.revisionView.model = Diff.leftHandleRevisions; // use the left handle models 346 361 Diff.tickmarkView.model = Diff.leftHandleRevisions; 347 362 Diff.tickmarkView.render(); 348 363 } 349 364 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 351 366 352 367 } else { 353 368 // Right handler … … 356 371 357 372 if ( Diff.revisionView.model !== Diff.rightHandleRevisions && 358 373 null !== Diff.rightHandleRevisions ) { 359 Diff.revisionView.model = Diff.rightHandleRevisions; 374 Diff.revisionView.model = Diff.rightHandleRevisions; // use the right handle models 360 375 Diff.tickmarkView.model = Diff.rightHandleRevisions; 361 376 Diff.tickmarkView.render(); 362 377 } 363 378 364 379 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 366 381 } 367 382 }, 368 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 */ 369 389 stop: function( event, ui ) { 370 390 // Not needed in one mode 371 391 if ( this.singleRevision ) … … 374 394 // calculate and generate a diff for comparing to the left handle 375 395 // and the right handle, swap out when dragging 376 396 if ( $( ui.handle ).hasClass( 'left-handle' ) ) { 377 // Left ha dnler378 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 379 399 Diff.reloadRight(); 380 400 } else { 381 401 // 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 383 403 Diff.reloadLeft(); 384 404 } 385 405 }, … … 416 436 $( '#diff-slider' ).slider( { 417 437 slide: $.proxy( self.slide, self ), 418 438 start: $.proxy( self.start, self ), 419 stop: $.proxy( self.stop, self )439 stop: $.proxy( self.stop, self ) 420 440 } ); 421 441 422 442 // Set options … … 442 462 tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) ); 443 463 tickWidth = ( tickWidth > 50 ) ? 50 : tickWidth; // set minimum and maximum widths for tick marks 444 464 tickWidth = ( tickWidth < 10 ) ? 10 : tickWidth; 445 sliderWidth = tickWidth * ( sliderMax - adjustMax ); // calculate the slider width465 sliderWidth = tickWidth * ( sliderMax - adjustMax ); // calculate the slider width 446 466 aTickWidth = $( '.revision-tick' ).width(); 447 467 448 468 if ( tickWidth !== aTickWidth ) { // is the width already set correctly? … … 485 505 * move the slider handle when the tick marks are clicked 486 506 */ 487 507 $( this ).on( 'click', 488 { tickCount: tickCount }, // //pass the tick through so we know where to move the handle508 { tickCount: tickCount }, // pass the tick through so we know where to move the handle 489 509 function( event ) { 490 if ( Diff.slider.singleRevision ) { // single handle mode491 Diff.rightDiff = event.data.tickCount; // reposition the right handle510 if ( Diff.slider.singleRevision ) { // single handle mode 511 Diff.rightDiff = event.data.tickCount; // reposition the right handle 492 512 Diff.slider.refresh({ 493 513 value: Diff.rightDiff - 1 494 514 } ); 495 515 } 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 } 503 532 } 504 533 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 ] 506 535 } ); 507 536 } 508 537 Diff.revisionView.render(); // render the main view … … 539 568 540 569 // next and previous buttons, only available in compare one mode 541 570 events: { 542 'click #next': 'nextRevision',543 'click #previous': 'previousRevision'571 'click #next': ! isRtl ? 'nextRevision' : 'previousRevision', 572 'click #previous': ! isRtl ? 'previousRevision' : 'nextRevision' 544 573 }, 545 574 546 575 render: function() { … … 554 583 555 584 if ( Diff.singleRevision ) { 556 585 Diff.slider.refresh({ 557 value: Diff.rightDiff - 1, 586 value: Diff.rightDiff - 1, // rightDiff value is off model index by 1 558 587 min: 0, 559 588 max: modelcount - 1 560 589 }); … … 563 592 564 593 } else { 565 594 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 ], 567 597 min: 1, 568 598 max: modelcount + 1, 569 599 range: true 570 600 }); 571 601 572 602 $( '#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' ); 575 606 576 607 } 577 608 … … 626 657 // compare two revisions mode? 627 658 if ( ! Diff.singleRevision ) { 628 659 if ( this.draggingLeft ) { 629 thediff = Diff.leftDiff - 1; 660 thediff = Diff.leftDiff - 1; //leftDiff value is off model index by 1 630 661 if ( this.model.at( thediff ) ) { 631 662 addHtml = this.template( this.model.at( thediff ).toJSON() ); 632 663 } 633 664 } else { // dragging right handle 634 thediff = Diff.rightDiff - 1;665 thediff = Diff.rightDiff - 1; // rightDiff value is off model index by 1 635 666 if ( this.model.at( thediff ) ) { 636 667 addHtml = this.template( this.model.at( thediff ).toJSON() ); 637 668 } 638 669 } 639 670 } 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 641 672 addHtml = this.template( this.model.at( Diff.rightDiff - 1 ).toJSON() ); 642 673 } 643 674 } … … 669 700 if ( $( '#compare-two-revisions' ).is( ':checked' ) ) { // compare 2 mode 670 701 Diff.singleRevision = false ; 671 702 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 674 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 } 713 675 714 Diff.revisionView.draggingLeft = false; 676 715 677 716 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 679 718 Diff.revisionView.model = Diff.rightHandleRevisions; 680 719 681 720 } else { // compare one mode … … 758 797 url: function() { 759 798 return ajaxurl + 760 799 '?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 767 806 '&nonce=' + this.options.nonce; 768 807 }, 769 808 -
wp-admin/css/wp-admin.css
3761 3761 3762 3762 .diff-loading .spinner { 3763 3763 clear: both; 3764 margin-left: auto; 3765 margin-right: auto; 3764 margin: 0 auto; 3766 3765 display: block; 3767 3766 float: none; 3768 3767 } -
wp-admin/css/wp-admin-rtl.css
955 955 11.2 - Post Revisions 956 956 ------------------------------------------------------------------------------*/ 957 957 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; 960 962 } 961 963 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 962 1014 /*------------------------------------------------------------------------------ 963 1015 11.3 - Featured Images 964 1016 ------------------------------------------------------------------------------*/