Ticket #24425: 24425.draft.30.diff
File 24425.draft.30.diff, 28.4 KB (added by , 12 years ago) |
---|
-
wp-admin/css/colors-fresh.css
1379 1379 border: 1px solid #dfdfdf; 1380 1380 } 1381 1381 1382 #diff-slider.ui-slider-tooltip,1383 #diff-slider-ticks.ui-slider-tooltip {1382 .ui-slider-tooltip, 1383 .ui-slider-tooltip { 1384 1384 border-color: #d7d7d7; 1385 1385 background-color: #fff; 1386 1386 } -
wp-admin/css/wp-admin-rtl.css
975 975 left: 6px; 976 976 } 977 977 978 #toggle-revision-compare-mode {978 .revision-toggle-compare-mode { 979 979 right: auto; 980 980 left: 0; 981 981 padding: 9px 0 0 9px; 982 982 } 983 983 984 #diff-next-revision{984 .revisions-next { 985 985 float: left; 986 986 } 987 987 988 #diff-previous-revision{988 .revisions-previous { 989 989 float: right; 990 990 } 991 991 -
wp-admin/css/wp-admin.css
3498 3498 .revisions-controls { 3499 3499 height: 60px; 3500 3500 padding: 40px 0 20px; 3501 border-bottom: 1px solid #dfdfdf;3501 border-bottom: none; 3502 3502 margin-bottom: 10px; 3503 3503 } 3504 3504 3505 .comparing-two-revisions .revisions-controls { 3506 height: 90px; 3507 } 3508 3505 3509 .revisions-meta { 3506 3510 margin-top: 15px; 3507 3511 } … … 3510 3514 top: 0; 3511 3515 right: 0; 3512 3516 } 3517 .comparing-two-revisions .revisions-previous, 3518 .comparing-two-revisions .revisions-next { 3519 display: none; 3520 } 3513 3521 3514 3522 .revisions-previous { 3515 3523 float: left; … … 3590 3598 width: 95%; 3591 3599 } 3592 3600 3593 #diff-slider .ui-slider-tooltip, 3594 #diff-slider-ticks .ui-slider-tooltip { 3595 display: none; 3601 .revisions .ui-slider-tooltip { 3596 3602 position: absolute; 3597 bottom: 21px; 3598 margin-left: -74px; 3603 bottom: 86px; 3604 margin-left: -70px; 3605 line-height: 28px; 3599 3606 } 3600 3607 3601 #diff-slider .ui-state-active .ui-slider-tooltip,3602 #diff-slider .ui-state-focus .ui-slider-tooltip,3603 #diff-slider .ui-state-hover .ui-slider-tooltip {3604 display: block;3605 }3606 3607 3608 #diff-title-to strong { 3608 3609 display: inline; 3609 3610 } … … 3655 3656 margin-top: 20px; 3656 3657 } 3657 3658 3658 .comparing-two-revisions#diff-previous-revision,3659 .comparing-two-revisions#diff-next-revision,3659 #diff-previous-revision, 3660 #diff-next-revision, 3660 3661 #diff-header-from { 3661 3662 display: none; 3662 3663 } … … 3668 3669 display: block; 3669 3670 } 3670 3671 3672 .comparing-two-revisions .revisions-tooltip div { 3673 margin-bottom: 30px; 3674 } 3671 3675 .diff-slider-ticks-wrapper { 3672 3676 margin: 0 auto; 3673 3677 text-align: left; … … 3740 3744 .ui-slider-tooltip img { 3741 3745 float: left; 3742 3746 margin-right: 5px; 3743 margin-top: 5px; 3747 margin-top: 2px; 3748 padding: 0; 3749 vertical-align: middle; 3744 3750 } 3745 3751 3746 3752 … … 3748 3754 3749 3755 .ui-tooltip, 3750 3756 .ui-slider-tooltip { 3751 padding: 8px;3757 padding: 4px; 3752 3758 position: absolute; 3753 3759 z-index: 9999; 3754 3760 max-width: 300px; … … 3768 3774 3769 3775 .ui-tooltip, 3770 3776 .ui-slider-tooltip { 3771 padding: 5px 10px;3777 padding: 4px 4px; 3772 3778 } 3773 3779 3780 .revisions-tooltip { 3781 display: none; 3782 } 3783 3774 3784 .arrow { 3775 3785 width: 70px; 3776 3786 height: 16px; 3777 3787 overflow: hidden; 3778 3788 position: absolute; 3779 left: 50%;3789 left: 0; 3780 3790 margin-left: -35px; 3781 bottom: -16px;3782 z-index: 99999;3791 bottom: 71px; 3792 z-index: 10000; 3783 3793 } 3784 3794 3785 3795 .arrow.top { … … 3871 3881 3872 3882 .wp-slider.ui-slider-horizontal { 3873 3883 height: .8em; 3884 z-index: 10001; 3874 3885 } 3875 3886 3876 3887 .wp-slider.ui-slider-horizontal .ui-slider-handle { -
wp-admin/js/revisions.js
3 3 (function($) { 4 4 var revisions; 5 5 6 revisions = wp.revisions = { model: {}, view: {}, controller: {} };6 revisions = wp.revisions = { model: {}, view: {}, controller: {}, router: {} }; 7 7 8 8 // Link settings. 9 9 revisions.settings = typeof _wpRevisionsSettings === 'undefined' ? {} : _wpRevisionsSettings; … … 30 30 31 31 comparator: function( revision ) { 32 32 return revision.id; 33 } ,33 } 34 34 }); 35 35 36 36 revisions.model.Field = Backbone.Model.extend({}); … … 101 101 return this.fetch({ data: { compare: comparisons }, remove: false }); 102 102 }, 103 103 104 /**/105 104 loadLast: function( num ) { 106 105 num = num || 1; 107 106 var ids = this.getProximalDiffIds(); … … 194 193 initialize: function( attributes, options ) { 195 194 this.revisions = options.revisions; 196 195 this.diffs = new revisions.model.Diffs( [], {revisions: this.revisions} ); 197 198 this.listenTo( this, 'change:from change:to', this.updateDiffId ); 196 this.listenTo( this, 'change:from', this.updateDiffFrom ); 197 this.listenTo( this, 'change:to', this.updateDiffTo ); 198 this.revisionsRouter = new revisions.router.Router(); 199 this.revisionsRouter.model = this; 199 200 }, 200 201 201 updateDiff Id: function() {202 updateDiffTo: function() { 202 203 var from = this.get( 'from' ); 203 204 var to = this.get( 'to' ); 204 this.set( 'diffId', (from ? from.id : '0') + ':' + to.id ); 205 this.set( 'diffId', (from ? from.id : '0' ) + ':' + to.id ); 206 }, 207 208 updateDiffFrom: function() { 209 if ( this.get( 'compareTwoMode' ) ) 210 this.updateDiffTo(); 205 211 } 206 212 }); 207 213 … … 243 249 this.model.diffs.loadAllBy( 50 ); 244 250 }, this ) ); 245 251 } 252 Backbone.history.start(); 246 253 }, 247 254 248 255 render: function() { … … 266 273 }); 267 274 268 275 // The control view. 269 // This contains the revision slider, previous/next buttons, and the compare checkbox.276 // This contains the revision slider, previous/next buttons, the meta info and the compare checkbox. 270 277 revisions.view.Controls = wp.Backbone.View.extend({ 271 278 tagName: 'div', 272 279 className: 'revisions-controls', 273 280 274 281 initialize: function() { 275 282 // Add the button view 276 this.views.add( new revisions.view.Buttons({ 283 this.views.add( new revisions.view.Buttons({ 277 284 model: this.model 278 285 })); 279 286 287 // Add the checkbox view 288 this.views.add( new revisions.view.Checkbox({ 289 model: this.model 290 })); 291 292 // Add the tooltip view 293 this.views.add( new revisions.view.Tooltip({ 294 model: this.model 295 })); 280 296 // Add the Slider view 281 297 this.views.add( new revisions.view.Slider({ 282 298 model: this.model … … 296 312 className: 'revisions-meta', 297 313 template: wp.template('revisions-meta'), 298 314 315 events: { 316 'click #restore-revision': 'restoreRevision' 317 }, 318 299 319 initialize: function() { 300 320 this.listenTo( this.model, 'change:diffId', this.updateMeta ); 301 321 }, 302 322 303 events: {304 'click #restore-revision': 'restoreRevision'305 },306 307 323 restoreRevision: function() { 308 324 var restoreUrl = this.model.get('to').attributes.restoreUrl.replace(/&/g, '&'); 309 325 document.location = restoreUrl; … … 312 328 updateMeta: function() { 313 329 this.$el.html( this.template( this.model.toJSON() ) ); 314 330 if( this.model.get( 'to' ).attributes.current ) { 315 $( '#restore-revision' ).prop( 'disabled', true );331 $( '#restore-revision' ).prop( 'disabled', true ); 316 332 } else { 317 $( '#restore-revision' ).prop( 'disabled', false )333 $( '#restore-revision' ).prop( 'disabled', false ); 318 334 } 319 335 } 320 336 }); 321 337 338 // The checkbox view. 339 // Encapsulates all of the configuration for the compare checkbox. 340 revisions.view.Checkbox = wp.Backbone.View.extend({ 341 tagName: 'div', 342 className: 'revisions-checkbox', 343 template: wp.template( 'revisions-checkbox' ), 322 344 345 events: { 346 'click .compare-two-revisions': 'compareTwoToggle' 347 }, 348 349 initialize: function() { 350 this.$el.html( this.template() ); 351 this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); 352 }, 353 354 updateCompareTwoMode: function() { 355 if ( this.model.get( 'compareTwoMode' ) ) { 356 $( '.compare-two-revisions' ).parent().css('border', '1px solid #f00;').prop( 'checked', true ); 357 $( '.revisions-control-frame' ).addClass( 'comparing-two-revisions' ); 358 // in RTL mode the 'left handle' is the second in the slider, 'right' is first 359 $( '.wp-slider a.ui-slider-handle' ).first().addClass( isRtl ? 'right-handle' : 'left-handle' ); 360 $( '.wp-slider a.ui-slider-handle' ).last().addClass( isRtl ? 'left-handle' : 'right-handle' ); 361 } else { 362 $( '.compare-two-revisions' ).prop( 'checked', false ); 363 $( '.revisions-control-frame' ).removeClass( 'comparing-two-revisions' ); 364 $( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle' ); 365 } 366 367 }, 368 369 // Toggle the compare two mode feature when the compare two checkbox is checked. 370 compareTwoToggle: function( event ) { 371 // Activate compare two mode? 372 if ( $( '.compare-two-revisions' ).is( ':checked' ) ) { 373 this.model.set( { compareTwoMode: true } ); 374 } else { 375 this.model.set( { compareTwoMode: false } ); 376 } 377 378 // Update route 379 this.model.revisionsRouter.navigateRoute( this.model.get( 'to').id, this.model.get( 'from' ).id ); 380 }, 381 382 ready: function() { 383 // Hide compare two mode toggle when fewer than three revisions. 384 if ( this.model.revisions.length < 3 ) 385 $( '.revision-toggle-compare-mode' ).hide(); 386 } 387 388 }); 389 390 // The tooltip view. 391 // Encapsulates the tooltip. 392 revisions.view.Tooltip = wp.Backbone.View.extend({ 393 tagName: 'div', 394 className: 'revisions-tooltip', 395 template: wp.template( 'revisions-tooltip' ), 396 397 initialize: function() { 398 this.listenTo( this.model, 'change:sliderHovering', this.sliderHoveringChanged ); 399 this.listenTo( this.model, 'change:tooltipPosition', this.tooltipPositionChanged ); 400 }, 401 402 ready: function() { 403 }, 404 405 // Show or hide tooltip based on sliderHovering is true 406 sliderHoveringChanged: function() { 407 if ( this.model.get( 'sliderHovering' ) ) { 408 this.$el.show(); 409 } else { 410 this.$el.hide(); 411 } 412 }, 413 414 tooltipPositionChanged: function() { 415 this.$el.html( this.template( this.model.revisions.at( this.model.get( 'hoveringAt') ).toJSON() ) ); 416 417 this.setTooltip( this.model.get( 'tooltipPosition' ) ); 418 }, 419 420 setTooltip: function( tooltipPosition ) { 421 var offset = $( '.revisions-buttons' ).offset().left, 422 calculatedX = tooltipPosition - offset; 423 424 425 this.$el.find( '.ui-slider-tooltip' ).css( 'left', calculatedX ); 426 this.$el.find( '.arrow' ).css( 'left', calculatedX ); 427 } 428 }); 429 323 430 // The buttons view. 324 // Encapsulates all of the configuration for the previous/next buttons , and the compare checkbox.431 // Encapsulates all of the configuration for the previous/next buttons. 325 432 revisions.view.Buttons = wp.Backbone.View.extend({ 326 433 tagName: 'div', 327 434 className: 'revisions-buttons', 328 template: wp.template( 'revisions-controls'),435 template: wp.template( 'revisions-buttons' ), 329 436 330 initialize: function() {331 this.$el.html( this.template() )332 },333 334 437 events: { 335 438 'click #next': 'nextRevision', 336 439 'click #previous': 'previousRevision' 337 440 }, 338 441 442 initialize: function() { 443 this.$el.html( this.template() ); 444 }, 445 446 ready: function() { 447 this.listenTo( this.model, 'change:diffId', this.disabledButtonCheck ); 448 }, 449 450 // Go to a specific modelindex, taking into account RTL mode. 339 451 gotoModel: function( toIndex ) { 340 452 var attributes = { 341 to: this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for R tl453 to: this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL. 342 454 }; 343 455 // If we're at the first revision, unset 'from'. 344 if ( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for R tl456 if ( isRtl ? this.model.revisions.length - toIndex - 1 : toIndex ) // Reverse directions for RTL 345 457 attributes.from = this.model.revisions.at( isRtl ? this.model.revisions.length - toIndex - 2 : toIndex - 1 ); 346 458 else 347 459 this.model.unset('from', { silent: true }); 348 460 349 461 this.model.set( attributes ); 462 463 // Update route 464 this.model.revisionsRouter.navigateRoute( attributes.to.id, attributes.from ? attributes.from.id : 0 ); 350 465 }, 351 466 467 // Go to the 'next' revision, direction takes into account RTL mode. 352 468 nextRevision: function() { 353 var toIndex = this.model.revisions.indexOf( this.model.get( 'to' ) );469 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to' ) ); 354 470 toIndex = isRtl ? toIndex - 1 : toIndex + 1; 355 471 this.gotoModel( toIndex ); 356 472 }, 357 473 474 // Go to the 'previous' revision, direction takes into account RTL mode. 358 475 previousRevision: function() { 359 var toIndex = this.model.revisions.indexOf( this.model.get('to') );476 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to' ) ); 360 477 toIndex = isRtl ? toIndex + 1 : toIndex - 1; 361 478 this.gotoModel( toIndex ); 362 479 }, 363 480 364 ready: function() { 365 this.listenTo( this.model, 'change:diffId', this.disabledButtonCheck ); 366 }, 367 368 // Check to see if the Previous or Next buttons need to be disabled or enabled 481 // Check to see if the Previous or Next buttons need to be disabled or enabled. 369 482 disabledButtonCheck: function() { 370 var maxVal = isRtl ? 0 :this.model.revisions.length - 1,371 minVal = isRtl ? this.model.revisions.length - 1 :0,372 next 483 var maxVal = this.model.revisions.length - 1, 484 minVal = 0, 485 next = $( '.revisions-next .button' ), 373 486 previous = $( '.revisions-previous .button' ), 374 val 487 val = this.model.revisions.indexOf( this.model.get( 'to' ) ); 375 488 376 // Disable "Next" button if you're on the last node 489 // Disable "Next" button if you're on the last node. 377 490 if ( maxVal === val ) 378 491 next.prop( 'disabled', true ); 379 492 else 380 493 next.prop( 'disabled', false ); 381 494 382 // Disable "Previous" button if you're on the first node 495 // Disable "Previous" button if you're on the first node. 383 496 if ( minVal === val ) 384 497 previous.prop( 'disabled', true ); 385 498 else 386 499 previous.prop( 'disabled', false ); 387 }, 500 } 501 }); 388 502 389 503 390 });391 392 504 // The slider view. 393 505 // Encapsulates all of the configuration for the jQuery UI slider into a view. 394 506 revisions.view.Slider = wp.Backbone.View.extend({ 395 507 tagName: 'div', 396 508 className: 'wp-slider', 397 509 510 events: { 511 'mousemove' : 'mousemove', 512 'mouseenter' : 'mouseenter', 513 'mouseleave' : 'mouseleave' 514 }, 515 398 516 initialize: function() { 399 517 _.bindAll( this, 'start', 'slide', 'stop' ); 400 518 401 519 // Create the slider model from the provided collection data. 402 // TODO: This should actually pull from the model's `to` key.403 520 var latestRevisionIndex = this.model.revisions.length - 1; 404 521 405 522 // Find the initially selected revision 406 523 var initiallySelectedRevisionIndex = 407 this.model.revisions.indexOf( 524 this.model.revisions.indexOf( 408 525 this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) ); 409 526 410 527 this.settings = new revisions.model.Slider({ … … 418 535 419 536 ready: function() { 420 537 this.$el.slider( this.settings.toJSON() ); 538 539 // Listen for changes in Compare Two Mode setting 540 this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings ); 541 421 542 this.settings.on( 'change', function( model, options ) { 422 // Apply changes to slider settings here. 423 this.$el.slider( { value: this.model.revisions.indexOf( this.model.get( 'to' ) ) } ); // Set handle to current to model 543 this.updateSliderSettings(); 424 544 }, this ); 425 // Reset to the initially selected revision426 this.slide( '', this.settings.attributes );427 545 428 546 // Listen for changes in the diffId 429 547 this.listenTo( this.model, 'change:diffId', this.diffIdChanged ); 430 548 549 // Reset to the initially selected revision 550 this.slide( '', this.settings.attributes ); 551 431 552 }, 432 553 554 mousemove: function( e ) { 555 var sliderLeft = Math.ceil( this.$el.offset().left ), 556 sliderWidth = Math.ceil( this.$el.width() ) + 2, 557 tickWidth = Math.ceil( ( sliderWidth ) / this.model.revisions.length ), 558 actualX = e.clientX - sliderLeft, 559 hoveringAt = Math.floor( actualX / tickWidth ); 560 561 // Reverse direction in Rtl mode. 562 if ( isRtl ) 563 hoveringAt = this.model.revisions.length - hoveringAt - 1; 564 565 // Ensure sane value for hoveringAt. 566 if ( hoveringAt < 0 ) 567 hoveringAt = 0; 568 else if ( hoveringAt >= this.model.revisions.length ) 569 hoveringAt = this.model.revisions.length - 1; 570 571 // Update the model 572 this.model.set( 'hoveringAt', hoveringAt ); 573 this.model.set( 'tooltipPosition', e.clientX ); 574 575 }, 576 577 mouseenter: function( e ) { 578 this.model.set( 'sliderHovering', true ); 579 }, 580 581 mouseleave: function( e ) { 582 this.model.set( 'sliderHovering', false ); 583 }, 584 585 updateSliderSettings: function() { 586 if ( isRtl ) { 587 this.$el.slider( { // Order reversed in RTL mode 588 value: this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 589 } ); 590 } else { 591 if ( this.model.get( 'compareTwoMode' ) ) { 592 this.$el.slider( { // Set handles to current from/to models 593 values: [ 594 this.model.revisions.indexOf( this.model.get( 'from' ) ), 595 this.model.revisions.indexOf( this.model.get( 'to' ) ) 596 ], 597 value: null, 598 range: true // Range mode ensures handles can't cross 599 } ); 600 } else { 601 this.$el.slider( { // Set handle to current to model 602 value: this.model.revisions.indexOf( this.model.get( 'to' ) ), 603 values: null, // Clear existing two handled values 604 range: false 605 } ); 606 } 607 } 608 if ( this.model.get( 'compareTwoMode' ) ){ 609 $( '.revisions' ).addClass( 'comparing-two-revisions' ); 610 611 // in RTL mode the 'left handle' is the second in the slider, 'right' is first 612 $( 'a.ui-slider-handle', this.$el ) 613 .first() 614 .addClass( isRtl ? 'right-handle' : 'left-handle' ) 615 .removeClass( isRtl ? 'left-handle' : 'right-handle' ); 616 $( 'a.ui-slider-handle', this.$el ) 617 .last() 618 .addClass( isRtl ? 'left-handle' : 'right-handle' ) 619 .removeClass( isRtl ? 'right-handle' : 'left-handle' ); 620 } else { 621 $( '.revisions' ).removeClass( 'comparing-two-revisions' ); 622 } 623 }, 624 433 625 diffIdChanged: function() { 434 626 // Reset the view settings when diffId is changed 435 this.settings.set( { 'value': this.model.revisions.indexOf( this.model.get( 'to' ) ) } ); 627 if ( this.model.get( 'compareTwoMode' ) ) { 628 this.settings.set( { 'values': [ 629 this.model.revisions.indexOf( this.model.get( 'from' ) ), 630 this.model.revisions.indexOf( this.model.get( 'to' ) ) 631 ] } ); 632 } else { 633 this.settings.set( { 'value': this.model.revisions.indexOf( this.model.get( 'to' ) ) } ); 634 } 436 635 }, 437 636 637 getSliderPosition: function( ui ){ 638 return isRtl ? this.model.revisions.length - ui.value - 1 : ui.value; 639 }, 640 438 641 start: function( event, ui ) { 439 // Track the mouse position to enable smooth dragging, overrides default jquery ui step behaviour 440 $( window ).mousemove( function( e ) { 441 var sliderLeft = $( '.wp-slider' ).offset().left, 442 sliderRight = sliderLeft + $( '.wp-slider' ).width(); 642 if ( ! this.model.get( 'compareTwoMode' ) ) 643 return; 443 644 444 // Follow mouse movements, as long as handle remains inside slider 645 // Track the mouse position to enable smooth dragging, overrides default jquery ui step behaviour . 646 $( window ).mousemove( function( e ) { 647 var sliderLeft = this.$el.offset().left, 648 sliderRight = sliderLeft + this.$el.width(); 649 650 // Follow mouse movements, as long as handle remains inside slider. 445 651 if ( e.clientX < sliderLeft ) { 446 $( ui.handle ).css( 'left', 0 ); // Mouse to left of slider 652 $( ui.handle ).css( 'left', 0 ); // Mouse to left of slider. 447 653 } else if ( e.clientX > sliderRight ) { 448 $( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider 654 $( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider. 449 655 } else { 450 $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider 656 $( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider. 451 657 } 452 } ); // End mousemove 658 } ); // End mousemove. 453 659 }, 454 660 455 661 slide: function( event, ui ) { 456 var attributes = { 457 to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.value - 1 : ui.value ) // Reverse directions for Rtl 458 }; 662 var attributes; 663 // Compare two revisions mode 664 if ( 'undefined' !== typeof ui.values && this.model.get( 'compareTwoMode' ) ) { 665 // Prevent sliders from occupying same spot 666 if ( ui.values[1] === ui.values[0] ) 667 return false; 459 668 460 // If we're at the first revision, unset 'from'. 461 if ( isRtl ? this.model.revisions.length - ui.value - 1 : ui.value ) // Reverse directions for Rtl 462 attributes.from = this.model.revisions.at( isRtl ? this.model.revisions.length - ui.value - 2 : ui.value - 1 ); 463 else 464 this.model.unset('from', { silent: true }); 669 attributes = { 670 to: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[1] - 1 : ui.values[1] ), // Reverse directions for RTL. 671 from: this.model.revisions.at( isRtl ? this.model.revisions.length - ui.values[0] - 1 : ui.values[0] ) // Reverse directions for RTL. 672 }; 673 } else { 674 // Compare single revision mode 675 var sliderPosition = this.getSliderPosition( ui ); 676 attributes = { 677 to: this.model.revisions.at( sliderPosition ) 678 }; 465 679 680 // If we're at the first revision, unset 'from'. 681 if ( sliderPosition ) // Reverse directions for RTL. 682 attributes.from = this.model.revisions.at( sliderPosition - 1 ); 683 else 684 this.model.unset('from', { silent: true }); 685 } 466 686 this.model.set( attributes ); 687 688 // Maintain state history when dragging 689 this.model.revisionsRouter.navigateRoute( attributes.to.id, ( attributes.from ? attributes.from.id : 0 ) ); 467 690 }, 468 691 469 692 stop: function( event, ui ) { 470 $( window ).unbind( 'mousemove' ); // Stop tracking the mouse 471 // Reset settings pops handle back to the step position 693 if ( ! this.model.get( 'compareTwoMode' ) ) 694 return; 695 696 // Stop tracking the mouse. 697 $( window ).unbind( 'mousemove' ); 698 699 // Reset settings pops handle back to the step position. 472 700 this.settings.trigger( 'change' ); 473 701 } 474 702 }); … … 486 714 } 487 715 }); 488 716 717 // The revisions router 718 // takes URLs with #hash fragments and routes them 719 revisions.router.Router = Backbone.Router.extend({ 720 model: null, 721 722 routes: { 723 'revision/from/:from/to/:to/handles/:handles': 'gotoRevisionId' 724 }, 725 726 navigateRoute: function( to, from ) { 727 var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/'; 728 if ( this.model.get( 'compareTwoMode' ) ){ 729 navigateTo = navigateTo + '2'; 730 } else { 731 navigateTo = navigateTo + '1'; 732 } 733 this.navigate( navigateTo ); 734 }, 735 736 gotoRevisionId: function( from, to, handles ) { 737 if ( '2' === handles ) { 738 this.model.set( { compareTwoMode: true } ); 739 } else { 740 this.model.set( { compareTwoMode: false } ); 741 } 742 743 if ( 'undefined' !== typeof this.model ) { 744 var selectedToRevision = 745 this.model.revisions.findWhere( { 'id': Number( to ) } ), 746 selectedFromRevision = 747 this.model.revisions.findWhere( { 'id': Number( from ) } ); 748 749 this.model.set( { 750 to: selectedToRevision, 751 from: selectedFromRevision } ); 752 } 753 } 754 }); 755 489 756 // Initialize the revisions UI. 490 757 revisions.init = function() { 491 758 revisions.view.frame = new revisions.view.Frame({ -
wp-admin/revision.php
115 115 </div> 116 116 117 117 <script id="tmpl-revisions-frame" type="text/html"> 118 <span class="spinner"></span>119 118 <div class="revisions-control-frame"></div> 120 119 <div class="revisions-diff-frame"></div> 121 120 </script> 122 121 123 <script id="tmpl-revisions-controls" type="text/html"> 124 125 <div class="revision-toggle-compare-mode"> 126 <label> 127 <input type="checkbox" class="compare-two-revisions" /> 128 <?php esc_attr_e( 'Compare two revisions' ); ?> 129 </label> 130 </div> 131 122 <script id="tmpl-revisions-buttons" type="text/html"> 132 123 <div class="revisions-previous"> 133 124 <input class="button" type="button" id="previous" value="<?php echo esc_attr_x( 'Previous', 'Button label for a previous revision' ); ?>" /> 134 125 </div> … … 138 129 </div> 139 130 </script> 140 131 132 <script id="tmpl-revisions-tooltip" type="text/html"> 133 <div class="ui-slider-tooltip ui-widget-content ui-corner-all "> 134 <# if ( 'undefined' !== typeof data && 'undefined' !== typeof data.author ) { #> 135 {{{ data.author.avatar }}} {{{ data.author.name }}}, 136 {{{ data.timeAgo }}} <?php _e( 'ago' ); ?> 137 ({{{ data.dateShort }}}) 138 <# } #> 139 </div> 140 <div class="arrow"></div> 141 </script> 141 142 143 <script id="tmpl-revisions-checkbox" type="text/html"> 144 <div class="revision-toggle-compare-mode"> 145 <label> 146 <input type="checkbox" class="compare-two-revisions" 147 <# 148 if ( 'undefined' !== typeof data && data.model.attributes.compareTwoMode ) { 149 #> checked="checked"<# 150 } 151 #> 152 /> 153 <?php esc_attr_e( 'Compare two revisions' ); ?> 154 </label> 155 </div> 156 </script> 157 142 158 <script id="tmpl-revisions-meta" type="text/html"> 143 159 <div id="diff-header"> 144 160 <div id="diff-header-from" class="diff-header"> 145 161 <div id="diff-title-from" class="diff-title"> 146 <strong> 147 <?php _ex( 'From:', 'Followed by post revision info' ); ?></strong> 148 <# if ( 'undefined' !== typeof data.from ) { #> 149 {{{ data.from.attributes.author.avatar }}} {{{ data.from.attributes.author.name }}}, 150 {{{ data.from.attributes.timeAgo }}} <?php _e( 'ago' ); ?> 151 ({{{ data.from.attributes.dateShort }}}) 152 <# } #> 153 162 <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong> 163 <# if ( 'undefined' !== typeof data.from ) { #> 164 {{{ data.from.attributes.author.avatar }}} {{{ data.from.attributes.author.name }}}, 165 {{{ data.from.attributes.timeAgo }}} <?php _e( 'ago' ); ?> 166 ({{{ data.from.attributes.dateShort }}}) 167 <# } #> 154 168 </div> 155 169 <div class="clear"></div> 156 170 </div> … … 158 172 <div id="diff-header-to" class="diff-header"> 159 173 <div id="diff-title-to" class="diff-title"> 160 174 <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong> 161 162 163 164 165 166 </div>175 <# if ( 'undefined' !== typeof data.to ) { #> 176 {{{ data.to.attributes.author.avatar }}} {{{ data.to.attributes.author.name }}}, 177 {{{ data.to.attributes.timeAgo }}} <?php _e( 'ago' ); ?> 178 ({{{ data.to.attributes.dateShort }}}) 179 <# } #> 180 </div> 167 181 168 182 <input type="button" id="restore-revision" class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" /> 169 183 </div> … … 177 191 <# }); #> 178 192 </script> 179 193 180 <script id="tmpl-revisions-diff-old" type="text/html">181 <div id="toggle-revision-compare-mode">182 <label>183 <input type="checkbox" id="compare-two-revisions" />184 <?php esc_attr_e( 'Compare two revisions' ); ?>185 </label>186 </div>187 194 188 <div id="diff-header">189 <div id="diff-header-from" class="diff-header">190 <div id="diff-title-from" class="diff-title">191 <strong><?php _ex( 'From:', 'Followed by post revision info' ); ?></strong> {{{ data.titleFrom }}}192 </div>193 <div class="clear"></div>194 </div>195 196 <div id="diff-header-to" class="diff-header">197 <div id="diff-title-to" class="diff-title">198 <strong><?php _ex( 'To:', 'Followed by post revision info' ); ?></strong> {{{ data.titleTo }}}199 </div>200 201 <input type="button" id="restore-revision" class="button button-primary" data-restore-link="{{{ data.restoreLink }}}" value="<?php esc_attr_e( 'Restore This Revision' )?>" />202 <div class="clear"></div>203 </div>204 </div>205 206 <div id="diff-table">{{{ data.diff }}}</div>207 </script>208 209 <script id="tmpl-revision-interact-old" type="text/html">210 <div id="diff-previous-revision">211 <input class="button" type="button" id="previous" value="<?php echo esc_attr_x( 'Previous', 'Button label for a previous revision' ); ?>" />212 </div>213 214 <div id="diff-next-revision">215 <input class="button" type="button" id="next" value="<?php echo esc_attr_x( 'Next', 'Button label for a next revision' ); ?>" />216 </div>217 218 </script>219 220 <script id="tmpl-revision-ticks" type="text/html">221 <div class="revision-tick completed-{{{ data.completed }}} scope-of-changes-{{{ data.scopeOfChanges }}}">222 <span class="ui-slider-tooltip ui-widget-content ui-corner-all hidden"></span>223 </div>224 </script>225 195 <?php 226 196 require_once( './admin-footer.php' );