WordPress/wp-admin/js/revisions.js

773 lines
23 KiB
JavaScript

window.wp = window.wp || {};
(function($) {
wp.revisions = {
views: {},
Model: Backbone.Model.extend({
idAttribute: 'ID',
urlRoot: ajaxurl + '?action=revisions-data' +
'&show_autosaves=true&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
defaults: {
ID: 0,
revision_date_author: '',
revision_date_author_short: '',
revisiondiff: '<div class="diff-loading"><div class="spinner"></div></div>',
restoreaction: '',
revision_from_date_author: '',
revision_toload: false,
lines_added: 0,
lines_deleted: 0,
scope_of_changes: 'none',
previous_revision_id: 0
},
url: function() {
if ( 1 === REVAPP._compareOneOrTwo ) {
return this.urlRoot +
'&single_revision_id=' + this.id +
'&compare_to=' + this.get( 'previous_revision_id' ) +
'&post_id=' + wpRevisionsSettings.post_id;
} else {
return this.urlRoot +
'&single_revision_id=' + this.id;
}
}
}),
app: _.extend({}, Backbone.Events),
App: Backbone.Router.extend({
_revisions: null,
_leftHandleRevisions: null,
_rightHandleRevisions: null,
_revisionsInteractions: null,
_revisionsOptions: null,
_leftDiff: 1,
_rightDiff: 1,
_autosaves: true,
_showSplitView: true,
_compareOneOrTwo: 1,
_leftModelLoading: false, // keep track of model loads
_rightModelLoading: false, // disallow slider interaction, also repeat loads, while loading
_tickmarkView: null, // the slider tickmarks
routes: {
},
reloadToLoadRevisions: function( model_collection, reverse_direction ) {
var self = this,
revisionsToLoad = model_collection.where( { revision_toload: true } ),
delay = 0;
// match slider to passed revision_id
_.each( revisionsToLoad, function( theModel ) {
if ( theModel.get( 'ID' ) == wpRevisionsSettings.revision_id ) {
self._rightDiff = self._revisions.indexOf( theModel ) + 1;
}
});
_.each( revisionsToLoad, function( theModel ) {
theModel.urlRoot = model_collection.url;
_.delay( function() {
theModel.fetch( {
update: true,
add: false,
remove: false,
success: function( model ) {
model.set( 'revision_toload', 'false' );
// stop spinner when all models are loaded
if ( 0 === model_collection.where( { revision_toload: true } ).length )
self.stopModelLoadingSpinner();
self._tickmarkView.render();
var total_changes = model.get( 'lines_added' ) + model.get( 'lines_deleted'),
scope_of_changes = 'vsmall';
// Note: hard coded scope of changes
// TODO change to dynamic based on range of values
if ( total_changes > 1 && total_changes <= 3 ) {
scope_of_changes = 'small';
} else if(total_changes > 3 && total_changes <= 5 ) {
scope_of_changes = 'med';
} else if(total_changes > 5 && total_changes <= 10 ) {
scope_of_changes = 'large';
} else if(total_changes > 10 ) {
scope_of_changes = 'vlarge';
}
model.set( 'scope_of_changes', scope_of_changes );
if ( 0 !== self._rightDiff &&
model.get( 'ID' ) === self._revisions.at( self._rightDiff - 1 ).get( 'ID' ) ) {
// reload if current model refreshed
self._revisionView.render();
}
}
} );
}, delay ) ;
delay = delay + 150; // stagger model loads to avoid hammering server with requests
}
);
},
startLeftModelLoading: function() {
this._leftModelLoading = true;
$('.revisiondiffcontainer').addClass('leftmodelloading');
},
stopLeftModelLoading: function() {
this._leftModelLoading = false;
},
startRightModelLoading: function() {
this._rightModelLoading = true;
$('.revisiondiffcontainer').addClass('rightmodelloading');
},
stopRightModelLoading: function() {
this._rightModelLoading = false;
},
stopModelLoadingSpinner: function() {
$('.revisiondiffcontainer').removeClass('rightmodelloading');
$('.revisiondiffcontainer').removeClass('leftmodelloading');
},
reloadModel: function() {
if ( 2 === this._compareOneOrTwo ) {
this.reloadLeftRight();
} else {
this.reloadModelSingle();
}
},
// load the models for the single handle mode
reloadModelSingle: function() {
var self = this;
self._revisions.url = ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + self._autosaves +
'&show_split_view=' + self._showSplitView +
'&nonce=' + wpRevisionsSettings.nonce;
self.startRightModelLoading();
self._revisions.fetch({ // reload revision data
success: function() {
console.log('loaded');
// self.stopRightModelLoading();
// REVAPP._rightDiff -= 1;
var revisionCount = self._revisions.length;
self._revisionView.model = self._revisions;
self._revisionView.render();
self.reloadToLoadRevisions( self._revisions );
self._tickmarkView.model = self._revisions;
self._tickmarkView.render();
$( '#slider' ).slider( 'option', 'max', revisionCount - 1 ); // TODO: test this, if autosave option changed
$( '#slider' ).slider( 'value', self._rightDiff - 1 ).trigger( 'slide' );
},
error: function() {
self.stopRightModelLoading();
}
});
},
// load the models for the left handle
reloadLeft: function() {
var self = this;
self.startLeftModelLoading();
self._leftHandleRevisions = new wp.revisions.Collection();
self._leftHandleRevisions.url =
ajaxurl +
'?action=revisions-data&compare_to=' + self._revisions.at( self._rightDiff - 1 ).get( 'ID' ) +
'&post_id=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + REVAPP._autosaves +
'&show_split_view=' + REVAPP._showSplitView +
'&nonce=' + wpRevisionsSettings.nonce +
'&right_handle_at=' + ( self._rightDiff );
self._leftHandleRevisions.fetch({
success: function(){
self.stopLeftModelLoading();
self.reloadToLoadRevisions( self._leftHandleRevisions );
self._tickmarkView.model = self._leftHandleRevisions;
$( '#slider' ).slider( 'option', 'max', self._revisions.length );
// ensure right handle not beyond length, in particular if viewing autosaves is switched from on to off
// the number of models in the collection might get shorter, this ensures right handle is not beyond last model
if ( self._rightDiff > self._revisions.length )
self._rightDiff = self._revisions.length;
},
error: function() {
self.stopLeftModelLoading();
}
});
},
// load the models for the right handle
reloadRight: function() {
var self = this;
self.startRightModelLoading();
self._rightHandleRevisions = new wp.revisions.Collection();
self._rightHandleRevisions.url =
ajaxurl +
'?action=revisions-data&compare_to=' + ( self._revisions.at( self._leftDiff ).get( 'ID' ) - 1 )+
'&post_id=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + REVAPP._autosaves +
'&show_split_view=' + REVAPP._showSplitView +
'&nonce=' + wpRevisionsSettings.nonce;
self._rightHandleRevisions.fetch({
success: function(){
self.stopRightModelLoading();
self.reloadToLoadRevisions( self._rightHandleRevisions );
self._tickmarkView.model = self._rightHandleRevisions;
$( '#slider' ).slider( 'option', 'max', self._revisions.length );
$( '#slider' ).slider( 'values', [ REVAPP._leftDiff, REVAPP._rightDiff] ).trigger( 'slide' );
// REVAPP._revisionView.render();
},
error: function( response ) {
self.stopRightModelLoading();
}
});
},
reloadLeftRight: function() {
this.startRightModelLoading();
this.startLeftModelLoading();
this.reloadLeft();
this.reloadRight();
},
/*
* initialize the revision application
*/
initialize: function( options ) {
var self = this; // store the application instance
if (this._revisions === null) {
self._revisions = new wp.revisions.Collection(); // set up collection
self.startRightModelLoading();
self._revisions.fetch({ // load revision data
success: function() {
self.stopRightModelLoading();
// self._rightHandleRevisions = self._revisions;
self.completeApplicationSetup();
}
});
}
return this;
},
addTooltip: function( handle, message ) {
handle.attr( 'title', '' ).tooltip({
track: false,
position: {
my: "left-30 top-66",
at: "top left",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( $( this ) );
}
},
show: false,
hide: false,
content: function() {
return message;
}
} );
},
/**/
completeApplicationSetup: function() {
this._revisionView = new wp.revisions.views.View({
model: this._revisions
});
this._revisionView.render();
$( '#slider' ).slider( 'option', 'max', this._revisions.length - 1 );
this.reloadToLoadRevisions( this._revisions );
this._revisionsInteractions = new wp.revisions.views.Interact({
model: this._revisions
});
this._revisionsInteractions.render();
this._tickmarkView = new wp.revisions.views.Tickmarks({
model: this._revisions
});
this._tickmarkView.render();
this._tickmarkView.resetTicks();
/*
.on( 'mouseup', function( event ) {
REVAPP._keep_tooltip_open = false;
$( this ).find('.ui-slider-tooltip').hide();
} ).on( 'mousedown', function( event ) {
REVAPP._keep_tooltip_open = true;
} ).on( 'mouseout', function( event ) {
if ( REVAPP._keep_tooltip_open)
event.stopImmediatePropagation();
});
*/
/*
// Options hidden for now, moving to screen options
this._revisionsOptions = new wp.revisions.views.Options({
model: this._revisions
});
this._revisionsOptions.render();
*/
}
})
};
wp.revisions.Collection = Backbone.Collection.extend({
model: wp.revisions.Model,
url: ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
'&show_autosaves=true&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
initialize: function() {
}
} );
_.extend(wp.revisions.views, {
// Ticks inside slider view
Tickmarks: Backbone.View.extend({
el: $('#diff-slider-ticks')[0],
tagName: 'diff-slider-ticks-view',
className: 'diff-slider-ticks-container',
template: wp.template('revision-ticks'),
model: wp.revisions.Model,
resetTicks: function() {
var sliderMax = $( '#slider' ).slider( 'option', 'max');
var sliderWidth = $( '#slider' ).width();
var adjustMax = ( 2 === REVAPP._compareOneOrTwo ) ? 1 : 0;
var tickWidth = Math.floor( sliderWidth / ( sliderMax - adjustMax ) );
// TODO: adjust right margins for wider ticks so they stay centered on handle stop point
// set minimum and maximum widths for tick marks
tickWidth = (tickWidth > 50 ) ? 50 : tickWidth;
tickWidth = (tickWidth < 10 ) ? 10 : tickWidth;
sliderWidth = tickWidth * (sliderMax - adjustMax ) + 1;
$( '#slider' ).width( sliderWidth );
$( '.diff-slider-ticks-wrapper' ).width( sliderWidth );
$( '#diffslider' ).width( sliderWidth );
$( '#diff-slider-ticks' ).width( sliderWidth );
var aTickWidth = $( '.revision-tick' ).width();
if ( tickWidth !== aTickWidth ) { // is the width already set correctly?
$( '.revision-tick' ).each( function( ) {
$(this).css( 'margin-right', tickWidth - 1 + 'px'); // space the ticks out using right margin
});
if( 2 === REVAPP._compareOneOrTwo ) {
$( '.revision-tick' ).first().remove(); // TODO - remove the check
}
$( '.revision-tick' ).last().css( 'margin-right', '0' ); // last tick gets no right margin
}
},
// render the tickmark view
render: function() {
var self = this;
if ( null !== self.model ) {
var addHtml = "";
_.each ( self.model.models, function( theModel ) {
addHtml = addHtml + self.template ( theModel.toJSON() );
});
self.$el.html( addHtml );
}
self.resetTicks();
return self;
}
}),
// primary revision diff view
View: Backbone.View.extend({
el: $('#backbonerevisionsdiff')[0],
tagName: 'revisionvview',
className: 'revisionview-container',
template: wp.template('revision'),
comparetwochecked: '',
draggingLeft: false,
// render the revisions
render: function() {
var addHtml = '';
var thediff;
// compare two revisions mode?
if ( 2 === REVAPP._compareOneOrTwo ) {
this.comparetwochecked = 'checked';
if ( this.draggingLeft ) {
thediff = REVAPP._leftDiff -1;
if ( this.model.at( thediff ) ) {
addHtml = this.template( _.extend(
this.model.at( thediff ).toJSON(),
{ comparetwochecked: this.comparetwochecked } // keep the checkmark checked
) );
}
} else { // dragging right handle
thediff = REVAPP._rightDiff -1;
if ( this.model.at( thediff ) ) {
addHtml = this.template( _.extend(
this.model.at( thediff ).toJSON(),
{ comparetwochecked: this.comparetwochecked } // keep the checkmark checked
) );
}
}
} else { // end compare two revisions mode, eg only one slider handle
this.comparetwochecked = '';
if ( this.model.at( REVAPP._rightDiff - 1 ) ) {
addHtml = this.template( _.extend(
this.model.at( REVAPP._rightDiff - 1 ).toJSON(),
{ comparetwochecked: this.comparetwochecked } // keep the checkmark unchecked
) );
}
}
this.$el.html( addHtml );
if ( this.model.length < 3 ) {
$( 'div#comparetworevisions' ).hide(); // don't allow compare two if fewer than three revisions
}
if ( this.model.length < 2 ) {
$( 'div#diffslider' ).hide(); // don't allow compare two if fewer than three revisions
$( 'div.diff-slider-ticks-wrapper' ).hide();
}
// add tooltips to the handles
if ( 2 === REVAPP._compareOneOrTwo ) {
REVAPP.addTooltip ( $( 'a.ui-slider-handle.left-handle' ),
( REVAPP._leftDiff < 0 ) ? '' : REVAPP._revisions.at( REVAPP._leftDiff - 1 ).get( 'revision_date_author_short' ) );
REVAPP.addTooltip ( $( 'a.ui-slider-handle.right-handle' ),
( REVAPP._rightDiff > REVAPP._revisions.length ) ? '' : REVAPP._revisions.at( REVAPP._rightDiff - 1 ).get( 'revision_date_author_short' ) );
} else {
REVAPP.addTooltip ( $( 'a.ui-slider-handle' ),
( REVAPP._rightDiff > REVAPP._revisions.length ) ? '' : REVAPP._revisions.at( REVAPP._rightDiff - 1 ).get( 'revision_date_author_short' ) );
}
// hide the restore button when on the last sport/current post data
if ( REVAPP._rightDiff === REVAPP._revisions.length ){
$( '.restore-button' ).hide();
} else {
$( '.restore-button' ).show();
}
return this;
},
// the compare two button is in this view, add the interaction here
events: {
'click #comparetwo': 'clickcomparetwo'
},
// turn on/off the compare two mmode
clickcomparetwo: function(){
self = this;
if ( $( 'input#comparetwo' ).is( ':checked' ) ) { // compare 2 mode
REVAPP._compareOneOrTwo = 2 ;
if ( 1 === REVAPP._rightDiff )
REVAPP._rightDiff = 2;
REVAPP._revisionView.draggingLeft = false;
wpRevisionsSettings.revision_id = ''; // reset passed revision id so switching back to one handle mode doesn't re-select revision
REVAPP.reloadLeftRight();
REVAPP._revisionView.model = REVAPP._rightHandleRevisions;
} else { // compare one mode
REVAPP._compareOneOrTwo = 1 ;
REVAPP._revisionView.draggingLeft = false;
// REVAPP._leftDiff = 0;
// REVAPP._rightDiff = (REVAPP._revisions.length <= REVAPP._rightDiff ) ? REVAPP._rightDiff + 1 : REVAPP._rightDiff + 1;
REVAPP.reloadModelSingle();
}
// REVAPP._revisionView.render();
REVAPP._revisionsInteractions.render();
REVAPP._tickmarkView.render();
}
}),
// options view for show autosaves and show split view options
/* DISABLED for now
Options: Backbone.View.extend({
el: $('#backbonerevisionsoptions')[0],
tagName: 'revisionoptionsview',
className: 'revisionoptions-container',
template: wp.template('revisionoptions'),
// render the options view
render: function() {
var addHtml = this.template;
this.$el.html( addHtml );
return this;
},
// add options interactions
events: {
'click #toggleshowautosaves': 'toggleshowautosaves',
'click #showsplitview': 'showsplitview'
},
// toggle include autosaves
toggleshowautosaves: function() {
var self = this;
if ( $( '#toggleshowautosaves' ).is( ':checked' ) ) {
REVAPP._autosaves = true ;
} else {
REVAPP._autosaves = false ;
}
// refresh the model data
REVAPP.reloadModel();
},
// toggle showing the split diff view
showsplitview: function() {
var self = this;
if ( $( 'input#showsplitview' ).is( ':checked' ) ) {
REVAPP._showSplitView = 'true';
$('.revisiondiffcontainer').addClass('diffsplit');
} else {
REVAPP._showSplitView = '';
$('.revisiondiffcontainer').removeClass('diffsplit');
}
REVAPP.reloadModel();
}
}),
*/
// main interactions view
Interact: Backbone.View.extend({
el: $('#backbonerevisionsinteract')[0],
tagName: 'revisionvinteract',
className: 'revisionvinteract-container',
template: wp.template('revisionvinteract'),
initialize: function() {
},
render: function() {
var self = this;
var addHtml = this.template;
this.$el.html( addHtml );
var modelcount = REVAPP._revisions.length;
slider = $( "#slider" );
if ( 1 === REVAPP._compareOneOrTwo ) {
// set up the slider with a single handle
slider.slider({
value: REVAPP._rightDiff - 1,
min: 0,
max: modelcount - 1,
step: 1,
// slide interactions for one handles slider
slide: function( event, ui ) {
REVAPP._rightDiff = ( ui.value + 1 );
REVAPP._revisionView.render();
/*
$( 'a.ui-slider-handle' ).tooltip( {
content: REVAPP._revisions.at( ui.value ).get( 'revision_date_author_short' ),
position: {
my: "top-65",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});// .trigger( 'close' ).trigger( 'open' );
*/
}
});
$( '.revisiondiffcontainer' ).removeClass( 'comparetwo' );
} else { // comparing more than one, eg 2
// set up the slider with two handles
slider.slider({
values: [ REVAPP._leftDiff, REVAPP._rightDiff + 1 ],
min: 1,
max: modelcount + 1,
step: 1,
range: true,
// in two handled mode when user starts dragging, swap in precalculated diff for handle
start: function(event, ui ) {
var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
switch ( index ) {
case 1: // left handle drag
if ( REVAPP._leftModelLoading ) // left model still loading, prevent sliding left handle
return false;
REVAPP._revisionView.draggingLeft = true;
if ( REVAPP._revisionView.model !== REVAPP._leftHandleRevisions &&
null !== REVAPP._leftHandleRevisions ) {
REVAPP._revisionView.model = REVAPP._leftHandleRevisions;
REVAPP._tickmarkView.model = REVAPP._leftHandleRevisions;
REVAPP._tickmarkView.render();
}
REVAPP._leftDiffStart = ui.values[ 0 ];
break;
case 2: // right
if ( REVAPP._rightModelLoading || 0 === REVAPP._rightHandleRevisions.length) // right model still loading, prevent sliding right handle
return false;
if ( REVAPP._revisionView.model !== REVAPP._rightHandleRevisions &&
null !== REVAPP._rightHandleRevisions ) {
REVAPP._revisionView.model = REVAPP._rightHandleRevisions;
REVAPP._tickmarkView.model = REVAPP._rightHandleRevisions;
REVAPP._tickmarkView.render();
}
REVAPP._revisionView.draggingLeft = false;
REVAPP._rightDiffStart = ui.values[1];
break;
}
},
// when sliding in two handled mode change appropriate value
slide: function( event, ui ) {
if ( ui.values[0] === ui.values[1] ) // prevent compare to self
return false;
var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
switch ( index ) {
case 1: // left
if ( REVAPP._leftModelLoading ) // left model still loading, prevent sliding left handle
return false;
REVAPP._leftDiff = ui.values[0];
break;
case 2: // right
if ( REVAPP._rightModelLoading ) // right model still loading, prevent sliding right handle
return false;
REVAPP._rightDiff = ui.values[1];
break;
}
if ( 0 === REVAPP._leftDiff ) {
$( '.revisiondiffcontainer' ).addClass( 'currentversion' );
} else {
$( '.revisiondiffcontainer' ).removeClass( 'currentversion' );
}
REVAPP._revisionView.render();
},
// when the user stops sliding in 2 handle mode, recalculate diffs
stop: function( event, ui ) {
if ( 2 === REVAPP._compareOneOrTwo ) {
// calculate and generate a diff for comparing to the left handle
// and the right handle, swap out when dragging
var index = $( ui.handle ).index(); // 0 (left) or 1 (right)
switch ( index ) {
case 1: // left
// left handle dragged & changed, reload right handle model
if ( REVAPP._leftDiffStart !== ui.values[0] )
REVAPP.reloadRight();
break;
case 2: // right
// REVAPP._rightDiff = ( 1 >= REVAPP._rightDiff ) ? 1 : REVAPP._rightDiff - 1;
// right handle dragged & changed, reload left handle model if changed
if ( REVAPP._rightDiffStart !== ui.values[1] )
REVAPP.reloadLeft();
break;
}
}
}
});
$( '.revisiondiffcontainer' ).addClass( 'comparetwo' );
$( '#diffslider a.ui-slider-handle' ).first().addClass( 'left-handle' ).next().addClass( 'right-handle' );
}
return this;
},
// next and previous buttons, only available in compare one mode
events: {
'click #next': 'nextRevision',
'click #previous': 'previousRevision'
},
// go to the next revision
nextRevision: function() {
if ( REVAPP._rightDiff < this.model.length ) // unless at right boundry
REVAPP._rightDiff = REVAPP._rightDiff + 1 ;
REVAPP._revisionView.render();
$( '#slider' ).slider( 'value', REVAPP._rightDiff - 1 ).trigger( 'slide' );
},
// go the the previous revision
previousRevision: function() {
if ( REVAPP._rightDiff > 1 ) // unless at left boundry
REVAPP._rightDiff = REVAPP._rightDiff - 1 ;
REVAPP._revisionView.render();
$( '#slider' ).slider( 'value', REVAPP._rightDiff - 1 ).trigger( 'slide' );
}
})
});
// instantiate Revision Application
REVAPP = new wp.revisions.App();
}(jQuery));