[ Index ] |
PHP Cross Reference of WordPress |
[Summary view] [Print] [Text view]
1 /** 2 * @file Revisions interface functions, Backbone classes and 3 * the revisions.php document.ready bootstrap. 4 * 5 * @output wp-admin/js/revisions.js 6 */ 7 8 /* global isRtl */ 9 10 window.wp = window.wp || {}; 11 12 (function($) { 13 var revisions; 14 /** 15 * Expose the module in window.wp.revisions. 16 */ 17 revisions = wp.revisions = { model: {}, view: {}, controller: {} }; 18 19 // Link post revisions data served from the back end. 20 revisions.settings = window._wpRevisionsSettings || {}; 21 22 // For debugging. 23 revisions.debug = false; 24 25 /** 26 * wp.revisions.log 27 * 28 * A debugging utility for revisions. Works only when a 29 * debug flag is on and the browser supports it. 30 */ 31 revisions.log = function() { 32 if ( window.console && revisions.debug ) { 33 window.console.log.apply( window.console, arguments ); 34 } 35 }; 36 37 // Handy functions to help with positioning. 38 $.fn.allOffsets = function() { 39 var offset = this.offset() || {top: 0, left: 0}, win = $(window); 40 return _.extend( offset, { 41 right: win.width() - offset.left - this.outerWidth(), 42 bottom: win.height() - offset.top - this.outerHeight() 43 }); 44 }; 45 46 $.fn.allPositions = function() { 47 var position = this.position() || {top: 0, left: 0}, parent = this.parent(); 48 return _.extend( position, { 49 right: parent.outerWidth() - position.left - this.outerWidth(), 50 bottom: parent.outerHeight() - position.top - this.outerHeight() 51 }); 52 }; 53 54 /** 55 * ======================================================================== 56 * MODELS 57 * ======================================================================== 58 */ 59 revisions.model.Slider = Backbone.Model.extend({ 60 defaults: { 61 value: null, 62 values: null, 63 min: 0, 64 max: 1, 65 step: 1, 66 range: false, 67 compareTwoMode: false 68 }, 69 70 initialize: function( options ) { 71 this.frame = options.frame; 72 this.revisions = options.revisions; 73 74 // Listen for changes to the revisions or mode from outside. 75 this.listenTo( this.frame, 'update:revisions', this.receiveRevisions ); 76 this.listenTo( this.frame, 'change:compareTwoMode', this.updateMode ); 77 78 // Listen for internal changes. 79 this.on( 'change:from', this.handleLocalChanges ); 80 this.on( 'change:to', this.handleLocalChanges ); 81 this.on( 'change:compareTwoMode', this.updateSliderSettings ); 82 this.on( 'update:revisions', this.updateSliderSettings ); 83 84 // Listen for changes to the hovered revision. 85 this.on( 'change:hoveredRevision', this.hoverRevision ); 86 87 this.set({ 88 max: this.revisions.length - 1, 89 compareTwoMode: this.frame.get('compareTwoMode'), 90 from: this.frame.get('from'), 91 to: this.frame.get('to') 92 }); 93 this.updateSliderSettings(); 94 }, 95 96 getSliderValue: function( a, b ) { 97 return isRtl ? this.revisions.length - this.revisions.indexOf( this.get(a) ) - 1 : this.revisions.indexOf( this.get(b) ); 98 }, 99 100 updateSliderSettings: function() { 101 if ( this.get('compareTwoMode') ) { 102 this.set({ 103 values: [ 104 this.getSliderValue( 'to', 'from' ), 105 this.getSliderValue( 'from', 'to' ) 106 ], 107 value: null, 108 range: true // Ensures handles cannot cross. 109 }); 110 } else { 111 this.set({ 112 value: this.getSliderValue( 'to', 'to' ), 113 values: null, 114 range: false 115 }); 116 } 117 this.trigger( 'update:slider' ); 118 }, 119 120 // Called when a revision is hovered. 121 hoverRevision: function( model, value ) { 122 this.trigger( 'hovered:revision', value ); 123 }, 124 125 // Called when `compareTwoMode` changes. 126 updateMode: function( model, value ) { 127 this.set({ compareTwoMode: value }); 128 }, 129 130 // Called when `from` or `to` changes in the local model. 131 handleLocalChanges: function() { 132 this.frame.set({ 133 from: this.get('from'), 134 to: this.get('to') 135 }); 136 }, 137 138 // Receives revisions changes from outside the model. 139 receiveRevisions: function( from, to ) { 140 // Bail if nothing changed. 141 if ( this.get('from') === from && this.get('to') === to ) { 142 return; 143 } 144 145 this.set({ from: from, to: to }, { silent: true }); 146 this.trigger( 'update:revisions', from, to ); 147 } 148 149 }); 150 151 revisions.model.Tooltip = Backbone.Model.extend({ 152 defaults: { 153 revision: null, 154 offset: {}, 155 hovering: false, // Whether the mouse is hovering. 156 scrubbing: false // Whether the mouse is scrubbing. 157 }, 158 159 initialize: function( options ) { 160 this.frame = options.frame; 161 this.revisions = options.revisions; 162 this.slider = options.slider; 163 164 this.listenTo( this.slider, 'hovered:revision', this.updateRevision ); 165 this.listenTo( this.slider, 'change:hovering', this.setHovering ); 166 this.listenTo( this.slider, 'change:scrubbing', this.setScrubbing ); 167 }, 168 169 170 updateRevision: function( revision ) { 171 this.set({ revision: revision }); 172 }, 173 174 setHovering: function( model, value ) { 175 this.set({ hovering: value }); 176 }, 177 178 setScrubbing: function( model, value ) { 179 this.set({ scrubbing: value }); 180 } 181 }); 182 183 revisions.model.Revision = Backbone.Model.extend({}); 184 185 /** 186 * wp.revisions.model.Revisions 187 * 188 * A collection of post revisions. 189 */ 190 revisions.model.Revisions = Backbone.Collection.extend({ 191 model: revisions.model.Revision, 192 193 initialize: function() { 194 _.bindAll( this, 'next', 'prev' ); 195 }, 196 197 next: function( revision ) { 198 var index = this.indexOf( revision ); 199 200 if ( index !== -1 && index !== this.length - 1 ) { 201 return this.at( index + 1 ); 202 } 203 }, 204 205 prev: function( revision ) { 206 var index = this.indexOf( revision ); 207 208 if ( index !== -1 && index !== 0 ) { 209 return this.at( index - 1 ); 210 } 211 } 212 }); 213 214 revisions.model.Field = Backbone.Model.extend({}); 215 216 revisions.model.Fields = Backbone.Collection.extend({ 217 model: revisions.model.Field 218 }); 219 220 revisions.model.Diff = Backbone.Model.extend({ 221 initialize: function() { 222 var fields = this.get('fields'); 223 this.unset('fields'); 224 225 this.fields = new revisions.model.Fields( fields ); 226 } 227 }); 228 229 revisions.model.Diffs = Backbone.Collection.extend({ 230 initialize: function( models, options ) { 231 _.bindAll( this, 'getClosestUnloaded' ); 232 this.loadAll = _.once( this._loadAll ); 233 this.revisions = options.revisions; 234 this.postId = options.postId; 235 this.requests = {}; 236 }, 237 238 model: revisions.model.Diff, 239 240 ensure: function( id, context ) { 241 var diff = this.get( id ), 242 request = this.requests[ id ], 243 deferred = $.Deferred(), 244 ids = {}, 245 from = id.split(':')[0], 246 to = id.split(':')[1]; 247 ids[id] = true; 248 249 wp.revisions.log( 'ensure', id ); 250 251 this.trigger( 'ensure', ids, from, to, deferred.promise() ); 252 253 if ( diff ) { 254 deferred.resolveWith( context, [ diff ] ); 255 } else { 256 this.trigger( 'ensure:load', ids, from, to, deferred.promise() ); 257 _.each( ids, _.bind( function( id ) { 258 // Remove anything that has an ongoing request. 259 if ( this.requests[ id ] ) { 260 delete ids[ id ]; 261 } 262 // Remove anything we already have. 263 if ( this.get( id ) ) { 264 delete ids[ id ]; 265 } 266 }, this ) ); 267 if ( ! request ) { 268 // Always include the ID that started this ensure. 269 ids[ id ] = true; 270 request = this.load( _.keys( ids ) ); 271 } 272 273 request.done( _.bind( function() { 274 deferred.resolveWith( context, [ this.get( id ) ] ); 275 }, this ) ).fail( _.bind( function() { 276 deferred.reject(); 277 }) ); 278 } 279 280 return deferred.promise(); 281 }, 282 283 // Returns an array of proximal diffs. 284 getClosestUnloaded: function( ids, centerId ) { 285 var self = this; 286 return _.chain([0].concat( ids )).initial().zip( ids ).sortBy( function( pair ) { 287 return Math.abs( centerId - pair[1] ); 288 }).map( function( pair ) { 289 return pair.join(':'); 290 }).filter( function( diffId ) { 291 return _.isUndefined( self.get( diffId ) ) && ! self.requests[ diffId ]; 292 }).value(); 293 }, 294 295 _loadAll: function( allRevisionIds, centerId, num ) { 296 var self = this, deferred = $.Deferred(), 297 diffs = _.first( this.getClosestUnloaded( allRevisionIds, centerId ), num ); 298 if ( _.size( diffs ) > 0 ) { 299 this.load( diffs ).done( function() { 300 self._loadAll( allRevisionIds, centerId, num ).done( function() { 301 deferred.resolve(); 302 }); 303 }).fail( function() { 304 if ( 1 === num ) { // Already tried 1. This just isn't working. Give up. 305 deferred.reject(); 306 } else { // Request fewer diffs this time. 307 self._loadAll( allRevisionIds, centerId, Math.ceil( num / 2 ) ).done( function() { 308 deferred.resolve(); 309 }); 310 } 311 }); 312 } else { 313 deferred.resolve(); 314 } 315 return deferred; 316 }, 317 318 load: function( comparisons ) { 319 wp.revisions.log( 'load', comparisons ); 320 // Our collection should only ever grow, never shrink, so `remove: false`. 321 return this.fetch({ data: { compare: comparisons }, remove: false }).done( function() { 322 wp.revisions.log( 'load:complete', comparisons ); 323 }); 324 }, 325 326 sync: function( method, model, options ) { 327 if ( 'read' === method ) { 328 options = options || {}; 329 options.context = this; 330 options.data = _.extend( options.data || {}, { 331 action: 'get-revision-diffs', 332 post_id: this.postId 333 }); 334 335 var deferred = wp.ajax.send( options ), 336 requests = this.requests; 337 338 // Record that we're requesting each diff. 339 if ( options.data.compare ) { 340 _.each( options.data.compare, function( id ) { 341 requests[ id ] = deferred; 342 }); 343 } 344 345 // When the request completes, clear the stored request. 346 deferred.always( function() { 347 if ( options.data.compare ) { 348 _.each( options.data.compare, function( id ) { 349 delete requests[ id ]; 350 }); 351 } 352 }); 353 354 return deferred; 355 356 // Otherwise, fall back to `Backbone.sync()`. 357 } else { 358 return Backbone.Model.prototype.sync.apply( this, arguments ); 359 } 360 } 361 }); 362 363 364 /** 365 * wp.revisions.model.FrameState 366 * 367 * The frame state. 368 * 369 * @see wp.revisions.view.Frame 370 * 371 * @param {object} attributes Model attributes - none are required. 372 * @param {object} options Options for the model. 373 * @param {revisions.model.Revisions} options.revisions A collection of revisions. 374 */ 375 revisions.model.FrameState = Backbone.Model.extend({ 376 defaults: { 377 loading: false, 378 error: false, 379 compareTwoMode: false 380 }, 381 382 initialize: function( attributes, options ) { 383 var state = this.get( 'initialDiffState' ); 384 _.bindAll( this, 'receiveDiff' ); 385 this._debouncedEnsureDiff = _.debounce( this._ensureDiff, 200 ); 386 387 this.revisions = options.revisions; 388 389 this.diffs = new revisions.model.Diffs( [], { 390 revisions: this.revisions, 391 postId: this.get( 'postId' ) 392 } ); 393 394 // Set the initial diffs collection. 395 this.diffs.set( this.get( 'diffData' ) ); 396 397 // Set up internal listeners. 398 this.listenTo( this, 'change:from', this.changeRevisionHandler ); 399 this.listenTo( this, 'change:to', this.changeRevisionHandler ); 400 this.listenTo( this, 'change:compareTwoMode', this.changeMode ); 401 this.listenTo( this, 'update:revisions', this.updatedRevisions ); 402 this.listenTo( this.diffs, 'ensure:load', this.updateLoadingStatus ); 403 this.listenTo( this, 'update:diff', this.updateLoadingStatus ); 404 405 // Set the initial revisions, baseUrl, and mode as provided through attributes. 406 407 this.set( { 408 to : this.revisions.get( state.to ), 409 from : this.revisions.get( state.from ), 410 compareTwoMode : state.compareTwoMode 411 } ); 412 413 // Start the router if browser supports History API. 414 if ( window.history && window.history.pushState ) { 415 this.router = new revisions.Router({ model: this }); 416 if ( Backbone.History.started ) { 417 Backbone.history.stop(); 418 } 419 Backbone.history.start({ pushState: true }); 420 } 421 }, 422 423 updateLoadingStatus: function() { 424 this.set( 'error', false ); 425 this.set( 'loading', ! this.diff() ); 426 }, 427 428 changeMode: function( model, value ) { 429 var toIndex = this.revisions.indexOf( this.get( 'to' ) ); 430 431 // If we were on the first revision before switching to two-handled mode, 432 // bump the 'to' position over one. 433 if ( value && 0 === toIndex ) { 434 this.set({ 435 from: this.revisions.at( toIndex ), 436 to: this.revisions.at( toIndex + 1 ) 437 }); 438 } 439 440 // When switching back to single-handled mode, reset 'from' model to 441 // one position before the 'to' model. 442 if ( ! value && 0 !== toIndex ) { // '! value' means switching to single-handled mode. 443 this.set({ 444 from: this.revisions.at( toIndex - 1 ), 445 to: this.revisions.at( toIndex ) 446 }); 447 } 448 }, 449 450 updatedRevisions: function( from, to ) { 451 if ( this.get( 'compareTwoMode' ) ) { 452 // @todo Compare-two loading strategy. 453 } else { 454 this.diffs.loadAll( this.revisions.pluck('id'), to.id, 40 ); 455 } 456 }, 457 458 // Fetch the currently loaded diff. 459 diff: function() { 460 return this.diffs.get( this._diffId ); 461 }, 462 463 /* 464 * So long as `from` and `to` are changed at the same time, the diff 465 * will only be updated once. This is because Backbone updates all of 466 * the changed attributes in `set`, and then fires the `change` events. 467 */ 468 updateDiff: function( options ) { 469 var from, to, diffId, diff; 470 471 options = options || {}; 472 from = this.get('from'); 473 to = this.get('to'); 474 diffId = ( from ? from.id : 0 ) + ':' + to.id; 475 476 // Check if we're actually changing the diff id. 477 if ( this._diffId === diffId ) { 478 return $.Deferred().reject().promise(); 479 } 480 481 this._diffId = diffId; 482 this.trigger( 'update:revisions', from, to ); 483 484 diff = this.diffs.get( diffId ); 485 486 // If we already have the diff, then immediately trigger the update. 487 if ( diff ) { 488 this.receiveDiff( diff ); 489 return $.Deferred().resolve().promise(); 490 // Otherwise, fetch the diff. 491 } else { 492 if ( options.immediate ) { 493 return this._ensureDiff(); 494 } else { 495 this._debouncedEnsureDiff(); 496 return $.Deferred().reject().promise(); 497 } 498 } 499 }, 500 501 // A simple wrapper around `updateDiff` to prevent the change event's 502 // parameters from being passed through. 503 changeRevisionHandler: function() { 504 this.updateDiff(); 505 }, 506 507 receiveDiff: function( diff ) { 508 // Did we actually get a diff? 509 if ( _.isUndefined( diff ) || _.isUndefined( diff.id ) ) { 510 this.set({ 511 loading: false, 512 error: true 513 }); 514 } else if ( this._diffId === diff.id ) { // Make sure the current diff didn't change. 515 this.trigger( 'update:diff', diff ); 516 } 517 }, 518 519 _ensureDiff: function() { 520 return this.diffs.ensure( this._diffId, this ).always( this.receiveDiff ); 521 } 522 }); 523 524 525 /** 526 * ======================================================================== 527 * VIEWS 528 * ======================================================================== 529 */ 530 531 /** 532 * wp.revisions.view.Frame 533 * 534 * Top level frame that orchestrates the revisions experience. 535 * 536 * @param {object} options The options hash for the view. 537 * @param {revisions.model.FrameState} options.model The frame state model. 538 */ 539 revisions.view.Frame = wp.Backbone.View.extend({ 540 className: 'revisions', 541 template: wp.template('revisions-frame'), 542 543 initialize: function() { 544 this.listenTo( this.model, 'update:diff', this.renderDiff ); 545 this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); 546 this.listenTo( this.model, 'change:loading', this.updateLoadingStatus ); 547 this.listenTo( this.model, 'change:error', this.updateErrorStatus ); 548 549 this.views.set( '.revisions-control-frame', new revisions.view.Controls({ 550 model: this.model 551 }) ); 552 }, 553 554 render: function() { 555 wp.Backbone.View.prototype.render.apply( this, arguments ); 556 557 $('html').css( 'overflow-y', 'scroll' ); 558 $('#wpbody-content .wrap').append( this.el ); 559 this.updateCompareTwoMode(); 560 this.renderDiff( this.model.diff() ); 561 this.views.ready(); 562 563 return this; 564 }, 565 566 renderDiff: function( diff ) { 567 this.views.set( '.revisions-diff-frame', new revisions.view.Diff({ 568 model: diff 569 }) ); 570 }, 571 572 updateLoadingStatus: function() { 573 this.$el.toggleClass( 'loading', this.model.get('loading') ); 574 }, 575 576 updateErrorStatus: function() { 577 this.$el.toggleClass( 'diff-error', this.model.get('error') ); 578 }, 579 580 updateCompareTwoMode: function() { 581 this.$el.toggleClass( 'comparing-two-revisions', this.model.get('compareTwoMode') ); 582 } 583 }); 584 585 /** 586 * wp.revisions.view.Controls 587 * 588 * The controls view. 589 * 590 * Contains the revision slider, previous/next buttons, the meta info and the compare checkbox. 591 */ 592 revisions.view.Controls = wp.Backbone.View.extend({ 593 className: 'revisions-controls', 594 595 initialize: function() { 596 _.bindAll( this, 'setWidth' ); 597 598 // Add the button view. 599 this.views.add( new revisions.view.Buttons({ 600 model: this.model 601 }) ); 602 603 // Add the checkbox view. 604 this.views.add( new revisions.view.Checkbox({ 605 model: this.model 606 }) ); 607 608 // Prep the slider model. 609 var slider = new revisions.model.Slider({ 610 frame: this.model, 611 revisions: this.model.revisions 612 }), 613 614 // Prep the tooltip model. 615 tooltip = new revisions.model.Tooltip({ 616 frame: this.model, 617 revisions: this.model.revisions, 618 slider: slider 619 }); 620 621 // Add the tooltip view. 622 this.views.add( new revisions.view.Tooltip({ 623 model: tooltip 624 }) ); 625 626 // Add the tickmarks view. 627 this.views.add( new revisions.view.Tickmarks({ 628 model: tooltip 629 }) ); 630 631 // Add the slider view. 632 this.views.add( new revisions.view.Slider({ 633 model: slider 634 }) ); 635 636 // Add the Metabox view. 637 this.views.add( new revisions.view.Metabox({ 638 model: this.model 639 }) ); 640 }, 641 642 ready: function() { 643 this.top = this.$el.offset().top; 644 this.window = $(window); 645 this.window.on( 'scroll.wp.revisions', {controls: this}, function(e) { 646 var controls = e.data.controls, 647 container = controls.$el.parent(), 648 scrolled = controls.window.scrollTop(), 649 frame = controls.views.parent; 650 651 if ( scrolled >= controls.top ) { 652 if ( ! frame.$el.hasClass('pinned') ) { 653 controls.setWidth(); 654 container.css('height', container.height() + 'px' ); 655 controls.window.on('resize.wp.revisions.pinning click.wp.revisions.pinning', {controls: controls}, function(e) { 656 e.data.controls.setWidth(); 657 }); 658 } 659 frame.$el.addClass('pinned'); 660 } else if ( frame.$el.hasClass('pinned') ) { 661 controls.window.off('.wp.revisions.pinning'); 662 controls.$el.css('width', 'auto'); 663 frame.$el.removeClass('pinned'); 664 container.css('height', 'auto'); 665 controls.top = controls.$el.offset().top; 666 } else { 667 controls.top = controls.$el.offset().top; 668 } 669 }); 670 }, 671 672 setWidth: function() { 673 this.$el.css('width', this.$el.parent().width() + 'px'); 674 } 675 }); 676 677 // The tickmarks view. 678 revisions.view.Tickmarks = wp.Backbone.View.extend({ 679 className: 'revisions-tickmarks', 680 direction: isRtl ? 'right' : 'left', 681 682 initialize: function() { 683 this.listenTo( this.model, 'change:revision', this.reportTickPosition ); 684 }, 685 686 reportTickPosition: function( model, revision ) { 687 var offset, thisOffset, parentOffset, tick, index = this.model.revisions.indexOf( revision ); 688 thisOffset = this.$el.allOffsets(); 689 parentOffset = this.$el.parent().allOffsets(); 690 if ( index === this.model.revisions.length - 1 ) { 691 // Last one. 692 offset = { 693 rightPlusWidth: thisOffset.left - parentOffset.left + 1, 694 leftPlusWidth: thisOffset.right - parentOffset.right + 1 695 }; 696 } else { 697 // Normal tick. 698 tick = this.$('div:nth-of-type(' + (index + 1) + ')'); 699 offset = tick.allPositions(); 700 _.extend( offset, { 701 left: offset.left + thisOffset.left - parentOffset.left, 702 right: offset.right + thisOffset.right - parentOffset.right 703 }); 704 _.extend( offset, { 705 leftPlusWidth: offset.left + tick.outerWidth(), 706 rightPlusWidth: offset.right + tick.outerWidth() 707 }); 708 } 709 this.model.set({ offset: offset }); 710 }, 711 712 ready: function() { 713 var tickCount, tickWidth; 714 tickCount = this.model.revisions.length - 1; 715 tickWidth = 1 / tickCount; 716 this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px'); 717 718 _(tickCount).times( function( index ){ 719 this.$el.append( '<div style="' + this.direction + ': ' + ( 100 * tickWidth * index ) + '%"></div>' ); 720 }, this ); 721 } 722 }); 723 724 // The metabox view. 725 revisions.view.Metabox = wp.Backbone.View.extend({ 726 className: 'revisions-meta', 727 728 initialize: function() { 729 // Add the 'from' view. 730 this.views.add( new revisions.view.MetaFrom({ 731 model: this.model, 732 className: 'diff-meta diff-meta-from' 733 }) ); 734 735 // Add the 'to' view. 736 this.views.add( new revisions.view.MetaTo({ 737 model: this.model 738 }) ); 739 } 740 }); 741 742 // The revision meta view (to be extended). 743 revisions.view.Meta = wp.Backbone.View.extend({ 744 template: wp.template('revisions-meta'), 745 746 events: { 747 'click .restore-revision': 'restoreRevision' 748 }, 749 750 initialize: function() { 751 this.listenTo( this.model, 'update:revisions', this.render ); 752 }, 753 754 prepare: function() { 755 return _.extend( this.model.toJSON()[this.type] || {}, { 756 type: this.type 757 }); 758 }, 759 760 restoreRevision: function() { 761 document.location = this.model.get('to').attributes.restoreUrl; 762 } 763 }); 764 765 // The revision meta 'from' view. 766 revisions.view.MetaFrom = revisions.view.Meta.extend({ 767 className: 'diff-meta diff-meta-from', 768 type: 'from' 769 }); 770 771 // The revision meta 'to' view. 772 revisions.view.MetaTo = revisions.view.Meta.extend({ 773 className: 'diff-meta diff-meta-to', 774 type: 'to' 775 }); 776 777 // The checkbox view. 778 revisions.view.Checkbox = wp.Backbone.View.extend({ 779 className: 'revisions-checkbox', 780 template: wp.template('revisions-checkbox'), 781 782 events: { 783 'click .compare-two-revisions': 'compareTwoToggle' 784 }, 785 786 initialize: function() { 787 this.listenTo( this.model, 'change:compareTwoMode', this.updateCompareTwoMode ); 788 }, 789 790 ready: function() { 791 if ( this.model.revisions.length < 3 ) { 792 $('.revision-toggle-compare-mode').hide(); 793 } 794 }, 795 796 updateCompareTwoMode: function() { 797 this.$('.compare-two-revisions').prop( 'checked', this.model.get('compareTwoMode') ); 798 }, 799 800 // Toggle the compare two mode feature when the compare two checkbox is checked. 801 compareTwoToggle: function() { 802 // Activate compare two mode? 803 this.model.set({ compareTwoMode: $('.compare-two-revisions').prop('checked') }); 804 } 805 }); 806 807 // The tooltip view. 808 // Encapsulates the tooltip. 809 revisions.view.Tooltip = wp.Backbone.View.extend({ 810 className: 'revisions-tooltip', 811 template: wp.template('revisions-meta'), 812 813 initialize: function() { 814 this.listenTo( this.model, 'change:offset', this.render ); 815 this.listenTo( this.model, 'change:hovering', this.toggleVisibility ); 816 this.listenTo( this.model, 'change:scrubbing', this.toggleVisibility ); 817 }, 818 819 prepare: function() { 820 if ( _.isNull( this.model.get('revision') ) ) { 821 return; 822 } else { 823 return _.extend( { type: 'tooltip' }, { 824 attributes: this.model.get('revision').toJSON() 825 }); 826 } 827 }, 828 829 render: function() { 830 var otherDirection, 831 direction, 832 directionVal, 833 flipped, 834 css = {}, 835 position = this.model.revisions.indexOf( this.model.get('revision') ) + 1; 836 837 flipped = ( position / this.model.revisions.length ) > 0.5; 838 if ( isRtl ) { 839 direction = flipped ? 'left' : 'right'; 840 directionVal = flipped ? 'leftPlusWidth' : direction; 841 } else { 842 direction = flipped ? 'right' : 'left'; 843 directionVal = flipped ? 'rightPlusWidth' : direction; 844 } 845 otherDirection = 'right' === direction ? 'left': 'right'; 846 wp.Backbone.View.prototype.render.apply( this, arguments ); 847 css[direction] = this.model.get('offset')[directionVal] + 'px'; 848 css[otherDirection] = ''; 849 this.$el.toggleClass( 'flipped', flipped ).css( css ); 850 }, 851 852 visible: function() { 853 return this.model.get( 'scrubbing' ) || this.model.get( 'hovering' ); 854 }, 855 856 toggleVisibility: function() { 857 if ( this.visible() ) { 858 this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 ); 859 } else { 860 this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } ); 861 } 862 return; 863 } 864 }); 865 866 // The buttons view. 867 // Encapsulates all of the configuration for the previous/next buttons. 868 revisions.view.Buttons = wp.Backbone.View.extend({ 869 className: 'revisions-buttons', 870 template: wp.template('revisions-buttons'), 871 872 events: { 873 'click .revisions-next .button': 'nextRevision', 874 'click .revisions-previous .button': 'previousRevision' 875 }, 876 877 initialize: function() { 878 this.listenTo( this.model, 'update:revisions', this.disabledButtonCheck ); 879 }, 880 881 ready: function() { 882 this.disabledButtonCheck(); 883 }, 884 885 // Go to a specific model index. 886 gotoModel: function( toIndex ) { 887 var attributes = { 888 to: this.model.revisions.at( toIndex ) 889 }; 890 // If we're at the first revision, unset 'from'. 891 if ( toIndex ) { 892 attributes.from = this.model.revisions.at( toIndex - 1 ); 893 } else { 894 this.model.unset('from', { silent: true }); 895 } 896 897 this.model.set( attributes ); 898 }, 899 900 // Go to the 'next' revision. 901 nextRevision: function() { 902 var toIndex = this.model.revisions.indexOf( this.model.get('to') ) + 1; 903 this.gotoModel( toIndex ); 904 }, 905 906 // Go to the 'previous' revision. 907 previousRevision: function() { 908 var toIndex = this.model.revisions.indexOf( this.model.get('to') ) - 1; 909 this.gotoModel( toIndex ); 910 }, 911 912 // Check to see if the Previous or Next buttons need to be disabled or enabled. 913 disabledButtonCheck: function() { 914 var maxVal = this.model.revisions.length - 1, 915 minVal = 0, 916 next = $('.revisions-next .button'), 917 previous = $('.revisions-previous .button'), 918 val = this.model.revisions.indexOf( this.model.get('to') ); 919 920 // Disable "Next" button if you're on the last node. 921 next.prop( 'disabled', ( maxVal === val ) ); 922 923 // Disable "Previous" button if you're on the first node. 924 previous.prop( 'disabled', ( minVal === val ) ); 925 } 926 }); 927 928 929 // The slider view. 930 revisions.view.Slider = wp.Backbone.View.extend({ 931 className: 'wp-slider', 932 direction: isRtl ? 'right' : 'left', 933 934 events: { 935 'mousemove' : 'mouseMove' 936 }, 937 938 initialize: function() { 939 _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' ); 940 this.listenTo( this.model, 'update:slider', this.applySliderSettings ); 941 }, 942 943 ready: function() { 944 this.$el.css('width', ( this.model.revisions.length * 50 ) + 'px'); 945 this.$el.slider( _.extend( this.model.toJSON(), { 946 start: this.start, 947 slide: this.slide, 948 stop: this.stop 949 }) ); 950 951 this.$el.hoverIntent({ 952 over: this.mouseEnter, 953 out: this.mouseLeave, 954 timeout: 800 955 }); 956 957 this.applySliderSettings(); 958 }, 959 960 mouseMove: function( e ) { 961 var zoneCount = this.model.revisions.length - 1, // One fewer zone than models. 962 sliderFrom = this.$el.allOffsets()[this.direction], // "From" edge of slider. 963 sliderWidth = this.$el.width(), // Width of slider. 964 tickWidth = sliderWidth / zoneCount, // Calculated width of zone. 965 actualX = ( isRtl ? $(window).width() - e.pageX : e.pageX ) - sliderFrom, // Flipped for RTL - sliderFrom. 966 currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 ) ) / tickWidth ); // Calculate the model index. 967 968 // Ensure sane value for currentModelIndex. 969 if ( currentModelIndex < 0 ) { 970 currentModelIndex = 0; 971 } else if ( currentModelIndex >= this.model.revisions.length ) { 972 currentModelIndex = this.model.revisions.length - 1; 973 } 974 975 // Update the tooltip mode. 976 this.model.set({ hoveredRevision: this.model.revisions.at( currentModelIndex ) }); 977 }, 978 979 mouseLeave: function() { 980 this.model.set({ hovering: false }); 981 }, 982 983 mouseEnter: function() { 984 this.model.set({ hovering: true }); 985 }, 986 987 applySliderSettings: function() { 988 this.$el.slider( _.pick( this.model.toJSON(), 'value', 'values', 'range' ) ); 989 var handles = this.$('a.ui-slider-handle'); 990 991 if ( this.model.get('compareTwoMode') ) { 992 // In RTL mode the 'left handle' is the second in the slider, 'right' is first. 993 handles.first() 994 .toggleClass( 'to-handle', !! isRtl ) 995 .toggleClass( 'from-handle', ! isRtl ); 996 handles.last() 997 .toggleClass( 'from-handle', !! isRtl ) 998 .toggleClass( 'to-handle', ! isRtl ); 999 } else { 1000 handles.removeClass('from-handle to-handle'); 1001 } 1002 }, 1003 1004 start: function( event, ui ) { 1005 this.model.set({ scrubbing: true }); 1006 1007 // Track the mouse position to enable smooth dragging, 1008 // overrides default jQuery UI step behavior. 1009 $( window ).on( 'mousemove.wp.revisions', { view: this }, function( e ) { 1010 var handles, 1011 view = e.data.view, 1012 leftDragBoundary = view.$el.offset().left, 1013 sliderOffset = leftDragBoundary, 1014 sliderRightEdge = leftDragBoundary + view.$el.width(), 1015 rightDragBoundary = sliderRightEdge, 1016 leftDragReset = '0', 1017 rightDragReset = '100%', 1018 handle = $( ui.handle ); 1019 1020 // In two handle mode, ensure handles can't be dragged past each other. 1021 // Adjust left/right boundaries and reset points. 1022 if ( view.model.get('compareTwoMode') ) { 1023 handles = handle.parent().find('.ui-slider-handle'); 1024 if ( handle.is( handles.first() ) ) { 1025 // We're the left handle. 1026 rightDragBoundary = handles.last().offset().left; 1027 rightDragReset = rightDragBoundary - sliderOffset; 1028 } else { 1029 // We're the right handle. 1030 leftDragBoundary = handles.first().offset().left + handles.first().width(); 1031 leftDragReset = leftDragBoundary - sliderOffset; 1032 } 1033 } 1034 1035 // Follow mouse movements, as long as handle remains inside slider. 1036 if ( e.pageX < leftDragBoundary ) { 1037 handle.css( 'left', leftDragReset ); // Mouse to left of slider. 1038 } else if ( e.pageX > rightDragBoundary ) { 1039 handle.css( 'left', rightDragReset ); // Mouse to right of slider. 1040 } else { 1041 handle.css( 'left', e.pageX - sliderOffset ); // Mouse in slider. 1042 } 1043 } ); 1044 }, 1045 1046 getPosition: function( position ) { 1047 return isRtl ? this.model.revisions.length - position - 1: position; 1048 }, 1049 1050 // Responds to slide events. 1051 slide: function( event, ui ) { 1052 var attributes, movedRevision; 1053 // Compare two revisions mode. 1054 if ( this.model.get('compareTwoMode') ) { 1055 // Prevent sliders from occupying same spot. 1056 if ( ui.values[1] === ui.values[0] ) { 1057 return false; 1058 } 1059 if ( isRtl ) { 1060 ui.values.reverse(); 1061 } 1062 attributes = { 1063 from: this.model.revisions.at( this.getPosition( ui.values[0] ) ), 1064 to: this.model.revisions.at( this.getPosition( ui.values[1] ) ) 1065 }; 1066 } else { 1067 attributes = { 1068 to: this.model.revisions.at( this.getPosition( ui.value ) ) 1069 }; 1070 // If we're at the first revision, unset 'from'. 1071 if ( this.getPosition( ui.value ) > 0 ) { 1072 attributes.from = this.model.revisions.at( this.getPosition( ui.value ) - 1 ); 1073 } else { 1074 attributes.from = undefined; 1075 } 1076 } 1077 movedRevision = this.model.revisions.at( this.getPosition( ui.value ) ); 1078 1079 // If we are scrubbing, a scrub to a revision is considered a hover. 1080 if ( this.model.get('scrubbing') ) { 1081 attributes.hoveredRevision = movedRevision; 1082 } 1083 1084 this.model.set( attributes ); 1085 }, 1086 1087 stop: function() { 1088 $( window ).off('mousemove.wp.revisions'); 1089 this.model.updateSliderSettings(); // To snap us back to a tick mark. 1090 this.model.set({ scrubbing: false }); 1091 } 1092 }); 1093 1094 // The diff view. 1095 // This is the view for the current active diff. 1096 revisions.view.Diff = wp.Backbone.View.extend({ 1097 className: 'revisions-diff', 1098 template: wp.template('revisions-diff'), 1099 1100 // Generate the options to be passed to the template. 1101 prepare: function() { 1102 return _.extend({ fields: this.model.fields.toJSON() }, this.options ); 1103 } 1104 }); 1105 1106 // The revisions router. 1107 // Maintains the URL routes so browser URL matches state. 1108 revisions.Router = Backbone.Router.extend({ 1109 initialize: function( options ) { 1110 this.model = options.model; 1111 1112 // Maintain state and history when navigating. 1113 this.listenTo( this.model, 'update:diff', _.debounce( this.updateUrl, 250 ) ); 1114 this.listenTo( this.model, 'change:compareTwoMode', this.updateUrl ); 1115 }, 1116 1117 baseUrl: function( url ) { 1118 return this.model.get('baseUrl') + url; 1119 }, 1120 1121 updateUrl: function() { 1122 var from = this.model.has('from') ? this.model.get('from').id : 0, 1123 to = this.model.get('to').id; 1124 if ( this.model.get('compareTwoMode' ) ) { 1125 this.navigate( this.baseUrl( '?from=' + from + '&to=' + to ), { replace: true } ); 1126 } else { 1127 this.navigate( this.baseUrl( '?revision=' + to ), { replace: true } ); 1128 } 1129 }, 1130 1131 handleRoute: function( a, b ) { 1132 var compareTwo = _.isUndefined( b ); 1133 1134 if ( ! compareTwo ) { 1135 b = this.model.revisions.get( a ); 1136 a = this.model.revisions.prev( b ); 1137 b = b ? b.id : 0; 1138 a = a ? a.id : 0; 1139 } 1140 } 1141 }); 1142 1143 /** 1144 * Initialize the revisions UI for revision.php. 1145 */ 1146 revisions.init = function() { 1147 var state; 1148 1149 // Bail if the current page is not revision.php. 1150 if ( ! window.adminpage || 'revision-php' !== window.adminpage ) { 1151 return; 1152 } 1153 1154 state = new revisions.model.FrameState({ 1155 initialDiffState: { 1156 // wp_localize_script doesn't stringifies ints, so cast them. 1157 to: parseInt( revisions.settings.to, 10 ), 1158 from: parseInt( revisions.settings.from, 10 ), 1159 // wp_localize_script does not allow for top-level booleans so do a comparator here. 1160 compareTwoMode: ( revisions.settings.compareTwoMode === '1' ) 1161 }, 1162 diffData: revisions.settings.diffData, 1163 baseUrl: revisions.settings.baseUrl, 1164 postId: parseInt( revisions.settings.postId, 10 ) 1165 }, { 1166 revisions: new revisions.model.Revisions( revisions.settings.revisionData ) 1167 }); 1168 1169 revisions.view.frame = new revisions.view.Frame({ 1170 model: state 1171 }).render(); 1172 }; 1173 1174 $( revisions.init ); 1175 }(jQuery));
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
Generated: Fri Oct 4 01:00:02 2024 | Cross-referenced by PHPXref 0.7.1 |