Changeset 24603
- Timestamp:
- 07/09/2013 07:33:15 AM (12 years ago)
- File:
-
- 1 edited
-
trunk/wp-admin/js/revisions.js (modified) (33 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/wp-admin/js/revisions.js
r24602 r24603 48 48 49 49 revisions.model.Diff = Backbone.Model.extend({ 50 initialize: function( attributes, options) {50 initialize: function( attributes, options ) { 51 51 var fields = this.get('fields'); 52 52 this.unset('fields'); … … 57 57 58 58 revisions.model.Diffs = Backbone.Collection.extend({ 59 initialize: function( models, options) {59 initialize: function( models, options ) { 60 60 this.revisions = options.revisions; 61 61 this.requests = {}; … … 131 131 getProximalDiffIds: function() { 132 132 var previous = 0, ids = []; 133 this.revisions.each( _.bind( function( revision) {133 this.revisions.each( _.bind( function( revision ) { 134 134 ids.push( previous + ':' + revision.id ); 135 135 previous = revision.id; … … 161 161 sync: function( method, model, options ) { 162 162 if ( 'read' === method ) { 163 options 163 options = options || {}; 164 164 options.context = this; 165 options.data 165 options.data = _.extend( options.data || {}, { 166 166 action: 'get-revision-diffs', 167 167 post_id: revisions.settings.postId … … 233 233 234 234 this.listenTo( this.model, 'change:diffId', this.updateDiff ); 235 236 235 this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); 237 236 … … 270 269 if ( this.model.get('diffId') !== diff.id ) 271 270 return; 271 272 272 this.views.set( '.revisions-diff-frame', new revisions.view.Diff({ 273 273 model: diff 274 })); 275 this.model.trigger( 'renderDiff' ); 274 }) ); 275 276 this.model.trigger('renderDiff'); 276 277 }); 277 278 }, … … 291 292 this.views.add( new revisions.view.Buttons({ 292 293 model: this.model 293 }) );294 }) ); 294 295 295 296 // Add the checkbox view 296 297 this.views.add( new revisions.view.Checkbox({ 297 298 model: this.model 298 }) );299 }) ); 299 300 300 301 // Add the tooltip view … … 307 308 this.views.add( new revisions.view.Tickmarks({ 308 309 model: this.model 309 }) );310 }) ); 310 311 311 312 // Add the Slider view with a reference to the tooltip view … … 331 332 numberOfTickmarksSet: function() { 332 333 var tickCount = this.model.revisions.length - 1, // One tickmark per model 333 sliderWidth = $( '.wp-slider').parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)334 sliderWidth = $('.wp-slider').parent().width() * 0.7, // Width of slider is 70% of container (reset on resize) 334 335 tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down 335 336 newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width 336 337 tickNumber; 337 338 338 $( '.wp-slider').css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size339 $('.wp-slider').css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size 339 340 this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width 340 341 341 342 for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){ 342 this.$el.append( '<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>');343 this.$el.append('<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>'); 343 344 } 344 345 }, … … 348 349 self.numberOfTickmarksSet(); 349 350 $( window ).on( 'resize', _.debounce( function() { 350 self.$el.html( '');351 self.$el.html(''); 351 352 self.numberOfTickmarksSet(); 352 353 }, 50 ) ); 353 354 } 354 355 }); … … 376 377 this.$el.html( this.template( this.model.toJSON() ) ); 377 378 378 $( '#restore-revision' ).prop( 'disabled', this.model.get( 'to').attributes.current );379 $('#restore-revision').prop( 'disabled', this.model.get('to').attributes.current ); 379 380 } 380 381 }); … … 384 385 revisions.view.Checkbox = wp.Backbone.View.extend({ 385 386 className: 'revisions-checkbox', 386 template: wp.template( 'revisions-checkbox'),387 template: wp.template('revisions-checkbox'), 387 388 388 389 events: { … … 395 396 396 397 updateCompareTwoMode: function() { 397 if ( this.model.get( 'compareTwoMode') ) {398 $( '.compare-two-revisions').prop( 'checked', true );398 if ( this.model.get('compareTwoMode') ) { 399 $('.compare-two-revisions').prop( 'checked', true ); 399 400 // in RTL mode the 'left handle' is the second in the slider, 'right' is first 400 $( '.wp-slider a.ui-slider-handle').first().addClass( isRtl ? 'right-handle' : 'left-handle' );401 $( '.wp-slider a.ui-slider-handle').last().addClass( isRtl ? 'left-handle' : 'right-handle' );401 $('.wp-slider a.ui-slider-handle').first().addClass( isRtl ? 'right-handle' : 'left-handle' ); 402 $('.wp-slider a.ui-slider-handle').last().addClass( isRtl ? 'left-handle' : 'right-handle' ); 402 403 } else { 403 $( '.compare-two-revisions').prop( 'checked', false );404 $( '.wp-slider a.ui-slider-handle' ).removeClass( 'left-handle' ).removeClass( 'right-handle');404 $('.compare-two-revisions').prop( 'checked', false ); 405 $('.wp-slider a.ui-slider-handle').removeClass('left-handle').removeClass('right-handle'); 405 406 } 406 407 … … 410 411 compareTwoToggle: function( event ) { 411 412 // Activate compare two mode? 412 this.model.set( { compareTwoMode: $( '.compare-two-revisions' ).prop( 'checked' ) });413 this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') }); 413 414 414 415 // Update route 415 this.model.revisionsRouter.navigateRoute( this.model.get( 'to').id, this.model.get( 'from').id );416 this.model.revisionsRouter.navigateRoute( this.model.get('to').id, this.model.get('from').id ); 416 417 }, 417 418 … … 419 420 // Hide compare two mode toggle when fewer than three revisions. 420 421 if ( this.model.revisions.length < 3 ) 421 $( '.revision-toggle-compare-mode').hide();422 $('.revision-toggle-compare-mode').hide(); 422 423 423 424 this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); … … 433 434 revisions.view.Tooltip = wp.Backbone.View.extend({ 434 435 className: 'revisions-tooltip', 435 template: wp.template( 'revisions-tooltip'),436 template: wp.template('revisions-tooltip'), 436 437 437 438 initialize: function() { … … 441 442 ready: function() { 442 443 // Hide tooltip on start. 443 this.$el.addClass( 'hidden');444 this.$el.addClass('hidden'); 444 445 }, 445 446 446 447 show: function() { 447 this.$el.removeClass( 'hidden');448 this.$el.removeClass('hidden'); 448 449 }, 449 450 450 451 hide: function() { 451 this.$el.addClass( 'hidden');452 this.$el.addClass('hidden'); 452 453 }, 453 454 454 455 render: function() { 455 456 // Check if a revision exists. 456 if ( null === this.model.get( 'revision') )457 if ( null === this.model.get('revision') ) 457 458 return; 458 459 459 460 // Insert revision data. 460 this.$el.html( this.template( this.model.get( 'revision').toJSON() ) );461 this.$el.html( this.template( this.model.get('revision').toJSON() ) ); 461 462 462 463 // Set the position. 463 var offset = $( '.revisions-buttons').offset().left;464 this.$el.css( 'left', this.model.get( 'position') - offset );464 var offset = $('.revisions-buttons').offset().left; 465 this.$el.css( 'left', this.model.get('position') - offset ); 465 466 } 466 467 }); … … 470 471 revisions.view.Buttons = wp.Backbone.View.extend({ 471 472 className: 'revisions-buttons', 472 template: wp.template( 'revisions-buttons'),473 template: wp.template('revisions-buttons'), 473 474 474 475 events: { … … 504 505 // Go to the 'next' revision, direction takes into account RTL mode. 505 506 nextRevision: function() { 506 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to') );507 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') ); 507 508 toIndex = isRtl ? toIndex - 1 : toIndex + 1; 508 509 this.gotoModel( toIndex ); … … 511 512 // Go to the 'previous' revision, direction takes into account RTL mode. 512 513 previousRevision: function() { 513 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to' ) ) - 1 : this.model.revisions.indexOf( this.model.get( 'to') );514 var toIndex = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : this.model.revisions.indexOf( this.model.get('to') ); 514 515 toIndex = isRtl ? toIndex + 1 : toIndex - 1; 515 516 this.gotoModel( toIndex ); … … 520 521 var maxVal = this.model.revisions.length - 1, 521 522 minVal = 0, 522 next = $( '.revisions-next .button'),523 previous = $( '.revisions-previous .button'),524 val = this.model.revisions.indexOf( this.model.get( 'to') );523 next = $('.revisions-next .button'), 524 previous = $('.revisions-previous .button'), 525 val = this.model.revisions.indexOf( this.model.get('to') ); 525 526 526 527 // Disable "Next" button if you're on the last node. … … 555 556 var initiallySelectedRevisionIndex = 556 557 this.model.revisions.indexOf( 557 this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) }) );558 this.model.revisions.findWhere({ id: Number( revisions.settings.selectedRevision ) }) ); 558 559 559 560 this.settings = new revisions.model.Slider({ … … 569 570 // Refresh the currently selected revision position in case router has set it. 570 571 this.settings.attributes.value = this.model.revisions.indexOf( 571 this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) }) );572 this.model.revisions.findWhere({ id: Number( revisions.settings.selectedRevision ) }) ); 572 573 573 574 // And update the slider in case the route has set it. … … 620 621 621 622 updateSliderSettings: function() { 622 if ( this.model.get( 'compareTwoMode') ) {623 if ( this.model.get('compareTwoMode') ) { 623 624 var leftValue, rightValue; 624 625 625 626 // In single handle mode, the 1st stored revision is 'blank' and the 'from' model is not set 626 627 // In this case we move the to index over one 627 if ( 'undefined' == typeof this.model.get( 'from') ) {628 if ( 'undefined' == typeof this.model.get('from') ) { 628 629 if ( isRtl ) { 629 leftValue = this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to') ) - 2;630 leftValue = this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 2; 630 631 rightValue = leftValue + 1; 631 632 } else { 632 leftValue = this.model.revisions.indexOf( this.model.get( 'to') );633 leftValue = this.model.revisions.indexOf( this.model.get('to') ); 633 634 rightValue = leftValue + 1; 634 635 } 635 636 } else { 636 leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to') ) - 1 :637 this.model.revisions.indexOf( this.model.get( 'from') ),638 rightValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'from') ) - 1 :639 this.model.revisions.indexOf( this.model.get( 'to') );637 leftValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : 638 this.model.revisions.indexOf( this.model.get('from') ), 639 rightValue = isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('from') ) - 1 : 640 this.model.revisions.indexOf( this.model.get('to') ); 640 641 } 641 642 … … 653 654 this.$el.slider( { // Set handle to current to model 654 655 // Reverse order for RTL. 655 value: isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get( 'to') ) - 1 :656 this.model.revisions.indexOf( this.model.get( 'to') ),656 value: isRtl ? this.model.revisions.length - this.model.revisions.indexOf( this.model.get('to') ) - 1 : 657 this.model.revisions.indexOf( this.model.get('to') ), 657 658 values: null, // Clear existing two handled values 658 659 range: false … … 660 661 } 661 662 662 if ( this.model.get( 'compareTwoMode') ){663 if ( this.model.get('compareTwoMode') ){ 663 664 // in RTL mode the 'left handle' is the second in the slider, 'right' is first 664 665 $( 'a.ui-slider-handle', this.$el ) … … 675 676 diffIdChanged: function() { 676 677 // Reset the view settings when diffId is changed 677 if ( this.model.get( 'compareTwoMode') ) {678 this.settings.set( 679 this.model.revisions.indexOf( this.model.get( 'from') ),680 this.model.revisions.indexOf( this.model.get( 'to') )681 ] });678 if ( this.model.get('compareTwoMode') ) { 679 this.settings.set({ 'values': [ 680 this.model.revisions.indexOf( this.model.get('from') ), 681 this.model.revisions.indexOf( this.model.get('to') ) 682 ] }); 682 683 } else { 683 this.settings.set( { 'value': this.model.revisions.indexOf( this.model.get( 'to' ) ) });684 this.settings.set({ 'value': this.model.revisions.indexOf( this.model.get('to') ) }); 684 685 } 685 686 }, … … 703 704 // In two handle mode, ensure handles can't be dragged past each other. 704 705 // Adjust left/right boundaries and reset points. 705 if ( view.model.get( 'compareTwoMode') ) {706 var rightHandle = $( ui.handle ).parent().find( '.right-handle'),707 leftHandle = $( ui.handle ).parent().find( '.left-handle');708 709 if ( $( ui.handle ).hasClass( 'left-handle') ) {706 if ( view.model.get('compareTwoMode') ) { 707 var rightHandle = $( ui.handle ).parent().find('.right-handle'), 708 leftHandle = $( ui.handle ).parent().find('.left-handle'); 709 710 if ( $( ui.handle ).hasClass('left-handle') ) { 710 711 // Dragging the left handle, boundary is right handle. 711 712 // RTL mode calculations reverse directions. … … 744 745 var attributes; 745 746 // Compare two revisions mode 746 if ( 'undefined' !== typeof ui.values && this.model.get( 'compareTwoMode') ) {747 if ( 'undefined' !== typeof ui.values && this.model.get('compareTwoMode') ) { 747 748 // Prevent sliders from occupying same spot 748 749 if ( ui.values[1] === ui.values[0] ) … … 765 766 attributes.from = this.model.revisions.at( sliderPosition - 1 ); 766 767 else 767 this.model.unset( 'from', { silent: true });768 this.model.unset( 'from', { silent: true }); 768 769 } 769 770 this.model.set( attributes ); … … 771 772 772 773 stop: function( event, ui ) { 773 $( window ).off( 'mousemove');774 $( window ).off('mousemove'); 774 775 775 776 // Reset settings props handle back to the step position. 776 this.settings.trigger( 'change');777 this.settings.trigger('change'); 777 778 } 778 779 }); … … 806 807 navigateRoute: function( to, from ) { 807 808 var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/'; 808 if ( this.model.get( 'compareTwoMode') ) {809 if ( this.model.get('compareTwoMode') ) { 809 810 navigateTo += '2'; 810 811 } else { … … 823 824 824 825 if ( 'undefined' !== typeof this.model ) { 825 var selectedToRevision = 826 this.model.revisions.findWhere( { 'id': Number( to ) } ), 827 selectedFromRevision = 828 this.model.revisions.findWhere( { 'id': Number( from ) } ); 829 830 this.model.set( { 831 to: selectedToRevision, 832 from: selectedFromRevision } ); 826 var selectedToRevision = this.model.revisions.findWhere({ 'id': Number( to ) }), 827 selectedFromRevision = this.model.revisions.findWhere({ 'id': Number( from ) }); 828 829 this.model.set({ 830 to: selectedToRevision, 831 from: selectedFromRevision 832 }); 833 833 } 834 834 revisions.settings.selectedRevision = to;
Note: See TracChangeset
for help on using the changeset viewer.