WordPress/wp-admin/js/revisions.js

599 lines
18 KiB
JavaScript
Raw Normal View History

window.wp = window.wp || {};
(function($) {
wp.revisions = {
views : {},
Model : Backbone.Model.extend({
idAttribute : 'ID',
urlRoot : ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
'&show_autosaves=false&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
defaults: {
ID : 0,
revision_date_author : '',
revisiondiff : '<div class="diff-loading"><div class="spinner"></div></div>',
restoreaction : '',
revision_from_date_author : '',
revision_toload : false
},
url : function() {
return this.urlRoot + '&single_revision_id=' + this.id;
}
}),
app: _.extend({}, Backbone.Events),
App : Backbone.Router.extend({
_revisionDifflView : null,
_revisions : null,
_left_handle_revisions : null,
_right_handle_revisions : null,
_revisionsInteractions : null,
_revisionsOptions : null,
_left_diff : 0,
_right_diff : 1,
_autosaves : false,
_show_split_view : true,
_compareoneortwo : 1,
_left_model_loading : false, //keep track of model loads
_right_model_loading : false, //disallow slider interaction, also repeat loads, while loading
//TODO add ability to arrive on specific revision
routes : {
},
viewrevision : function( revision ) {
//coming soon
},
reload_toload_revisions : function( model_collection, reverse_direction ) {
var self = this;
var revisions_to_load = model_collection.where( { revision_toload : true } );
//console.log(revisions_to_load);
var delay=0;
_.each(revisions_to_load, function( the_model ) {
the_model.urlRoot = model_collection.url;
_.delay( function() {
the_model.fetch( {
update : true,
add : false,
remove : false,
//async : false,
success : function( model ) {
//console.log(model.get( 'ID' ) +'-'+self._revisions.at( self._right_diff ).get( 'ID' ));
if ( model.get( 'ID' ) === self._revisions.at( self._right_diff - 1 ).get( 'ID' ) ) { //reload if current model refreshed
//console.log('render');
self._revisionView.render();
}
}
} );
}, delay ) ;
delay = delay + 200; //stagger model loads by 200 ms to avoid hammering server with requests
}
);
},
start_left_model_loading : function() {
this._left_model_loading = true;
$('.revisiondiffcontainer').addClass('leftmodelloading');
},
stop_left_model_loading : function() {
this._left_model_loading = false;
$('.revisiondiffcontainer').removeClass('leftmodelloading');
},
start_right_model_loading : function() {
this._right_model_loading = true;
$('.revisiondiffcontainer').addClass('rightmodelloading');
},
stop_right_model_loading : function() {
this._right_model_loading = false;
$('.revisiondiffcontainer').removeClass('rightmodelloading');
},
reloadmodel : function() {
if ( 2 === this._compareoneortwo ) {
this.reloadleftright();
} else {
this.reloadmodelsingle();
}
},
reloadmodelsingle : function() {
var self = this;
self._revisions.url = ajaxurl + '?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + self._autosaves +
'&show_split_view=' + REVAPP._show_split_view +
'&nonce=' + wpRevisionsSettings.nonce;
self.start_right_model_loading();
this._revisions.fetch({ //reload revision data
success : function() {
self.stop_right_model_loading();
var revisioncount = self._revisions.length;
if ( self._right_diff > revisioncount ) //if right handle past rightmost, move
self._right_diff = revisioncount;
self._revisionView.render();
self.reload_toload_revisions( self._revisions );
$( '#slider' ).slider( 'option', 'max', revisioncount-1 ); //TODO test this, autsaves changed
},
error : function () {
self.stop_right_model_loading();
//console.log( 'Error loading revision data' );
}
});
},
reloadleft : function() {
var self = this;
self.start_left_model_loading();
self._left_handle_revisions = new wp.revisions.Collection();
self._left_handle_revisions.url =
ajaxurl +
'?action=revisions-data&compare_to=' + self._revisions.at( self._right_diff - 1 ).get( 'ID' ) +
'&post_id=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + self._autosaves +
'&show_split_view=' + self._show_split_view +
'&nonce=' + wpRevisionsSettings.nonce +
'&right_handle_at=' + ( self._right_diff );
self._left_handle_revisions.fetch({
success : function(){
self.stop_left_model_loading();
self.reload_toload_revisions( self._left_handle_revisions );
},
error : function () {
//console.log( 'Error loading revision data' );
self.stop_left_model_loading();
}
});
},
reloadright : function() {
var self = this;
self.start_right_model_loading();
self._right_handle_revisions = new wp.revisions.Collection();
if ( 0 === self._left_diff ) {
self._right_handle_revisions.url =
ajaxurl +
'?action=revisions-data&compare_to=' + wpRevisionsSettings.post_id +
'&post_id=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + self._autosaves +
'&show_split_view=' + self._show_split_view +
'&nonce=' + wpRevisionsSettings.nonce;
} else {
self._right_handle_revisions.url =
ajaxurl +
'?action=revisions-data&compare_to=' + self._revisions.at( self._left_diff - 1 ).get( 'ID' ) +
'&post_id=' + wpRevisionsSettings.post_id +
'&show_autosaves=' + self._autosaves +
'&show_split_view=' + self._show_split_view +
'&nonce=' + wpRevisionsSettings.nonce +
'&left_handle_at=' + (self._left_diff ) ;
}
self._right_handle_revisions.fetch({
success : function(){
self.stop_right_model_loading();
self.reload_toload_revisions( self._right_handle_revisions );
},
error : function ( response ) {
//console.log( 'Error loading revision data - ' + response.toSource() );
self.stop_right_model_loading();
}
});
},
reloadleftright : function() {
this.reloadleft();
this.reloadright();
},
/*
* initialize the revision application
*/
initialize : function( options ) {
var self = this; //store the application instance
if (this._revisions === null) {
self._autosaves = '';
self._revisions = new wp.revisions.Collection(); //set up collection
self.start_right_model_loading();
self._revisions.fetch({ //load revision data
success : function() {
self.stop_right_model_loading();
self.revisionDiffSetup();
}
});
}
return this;
},
revisionDiffSetup : function() {
this._revisionView = new wp.revisions.views.View({
model : this._revisions
});
this._revisionView.render();
$( '#diff_max, #diff_maxof' ).html( this._revisions.length );
$( '#diff_count' ).html( REVAPP._right_diff );
$( '#slider' ).slider( 'option', 'max', this._revisions.length - 1 );
this.reload_toload_revisions( this._revisions );
this._revisionsInteractions = new wp.revisions.views.Interact({
model : this._revisions
});
this._revisionsInteractions.render();
/*
//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=false&show_split_view=true&nonce=' + wpRevisionsSettings.nonce,
initialize : function() {
}
} );
_.extend(wp.revisions.views, {
//
//primary revision diff view
//
View : Backbone.View.extend({
el : $('#backbonerevisionsdiff')[0],
tagName : 'revisionvview',
className : 'revisionview-container',
template : wp.template('revision'),
revvapp : null,
comparetwochecked : '',
draggingleft : false,
initialize : function(){
},
//
//render the revisions
//
render : function() {
var addhtml = '';
//compare two revisions mode?
if ( 2 === REVAPP._compareoneortwo ) {
this.comparetwochecked = 'checked';
if ( this.draggingleft ) {
if ( this.model.at( REVAPP._left_diff ) ) {
addhtml = this.template( _.extend(
this.model.at( REVAPP._left_diff ).toJSON(),
{ comparetwochecked : this.comparetwochecked } //keep the checkmark checked
) );
}
} else { //dragging right handle
var thediff = REVAPP._right_diff;
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._right_diff - 1 ) ) {
addhtml = this.template( _.extend(
this.model.at( REVAPP._right_diff - 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
}
//console.log ( (this.model.at( REVAPP._right_diff - 1 )).url());
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' ) ) {
REVAPP._compareoneortwo = 2 ;
REVAPP.reloadleftright();
} else {
REVAPP._compareoneortwo = 1 ;
REVAPP._revisionView.draggingleft = false;
REVAPP._left_diff = 0;
REVAPP.reloadmodelsingle();
}
REVAPP._revisionsInteractions.render();
}
}),
//
//options view for show autosaves and show split view options
//
Options : Backbone.View.extend({
el : $('#backbonerevisionsoptions')[0],
tagName : 'revisionoptionsview',
className : 'revisionoptions-container',
template : wp.template('revisionoptions'),
initialize : function() {
},
//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._show_split_view = 'true';
$('.revisiondiffcontainer').addClass('diffsplit');
} else {
REVAPP._show_split_view = '';
$('.revisiondiffcontainer').removeClass('diffsplit');
}
REVAPP.reloadmodel();
}
}),
//
//main interactions view
//
Interact : Backbone.View.extend({
el : $('#backbonerevisionsinteract')[0],
tagName : 'revisionvinteract',
className : 'revisionvinteract-container',
template : wp.template('revisionvinteract'),
_restoreword : '',
initialize : function() {
this._restoreword = $( 'input#restore' ).attr( 'value' );
},
reset_restore_button : function() {
$( 'input#restore' ).attr( 'value', this._restoreword + ' ' + REVAPP._revisions.at( REVAPP._right_diff - 1 ).get( 'ID' ) );
},
render : function() {
var self = this;
var addhtml = this.template;
this.$el.html( addhtml );
$( '#diff_max, #diff_maxof' ).html( this.model.length );
$( '#diff_count' ).html( REVAPP._right_diff );
$( '#diff_left_count_inner' ).html( 0 === REVAPP._left_diff ? '' : 'revision' + REVAPP._left_diff );
self.reset_restore_button();
var modelcount = REVAPP._revisions.length;
slider = $( "#slider" );
if ( 1 === REVAPP._compareoneortwo ) {
//set up the slider with a single handle
slider.slider({
value : REVAPP._right_diff-1,
min : 0,
max : modelcount-1,
step : 1,
//slide interactions for one handles slider
slide : function( event, ui ) {
if ( REVAPP._right_model_loading ) //left model stoll loading, prevent sliding left handle
return false;
REVAPP._right_diff =( ui.value+1 );
$( '#diff_count' ).html( REVAPP._right_diff );
REVAPP._revisionView.render();
self.reset_restore_button();
}
});
$( '.revisiondiffcontainer' ).removeClass( 'comparetwo' );
} else { //comparing more than one, eg 2
//set up the slider with two handles
slider.slider({
values : [ REVAPP._left_diff, REVAPP._right_diff + 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._left_model_loading ) //left model stoll loading, prevent sliding left handle
return false;
if ( REVAPP._revisionView.model !== REVAPP._left_handle_revisions &&
null !== REVAPP._left_handle_revisions )
REVAPP._revisionView.model = REVAPP._left_handle_revisions;
REVAPP._revisionView.draggingleft = true;
REVAPP._left_diff_start = ui.values[ 0 ];
break;
case 2: //right
if ( REVAPP._right_model_loading ) //right model stoll loading, prevent sliding right handle
return false;
//one extra spot at left end when comparing two
if ( REVAPP._revisionView.model !== REVAPP._right_handle_revisions &&
null !== REVAPP._right_handle_revisions )
REVAPP._revisionView.model = REVAPP._right_handle_revisions;
REVAPP._revisionView.draggingleft = false;
REVAPP._right_diff_start = 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._left_model_loading ) //left model still loading, prevent sliding left handle
return false;
REVAPP._left_diff = ui.values[ 0 ] - 1; //one extra spot at left end when comparing two
break;
case 2: //right
if ( REVAPP._right_model_loading ) //right model still loading, prevent sliding right handle
return false;
REVAPP._right_diff = ui.values[ 1 ] - 1 ;
break;
}
$( '#diff_count' ).html( REVAPP._right_diff );
if ( 0 === REVAPP._left_diff ) {
$( '.revisiondiffcontainer' ).addClass( 'currentversion' );
} else {
$( '.revisiondiffcontainer' ).removeClass( 'currentversion' );
$( '#diff_left_count_inner' ).html( REVAPP._left_diff );
}
REVAPP._revisionView.render(); //render the diff view
self.reset_restore_button();
},
//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._left_diff_start === ui.values[ 0 ] || REVAPP._left_model_loading ) )
REVAPP.reloadright();
break;
case 2: //right
//right handle dragged & changed, reload left handle model if changed
if ( ! ( REVAPP._right_diff_start === ui.values[ 1 ] || REVAPP._right_model_loading ) ) {
REVAPP.reloadleft();
}
break;
}
}
}
});
$( '.revisiondiffcontainer' ).addClass( 'comparetwo' );
}
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._right_diff < this.model.length ) //unless at right boundry
REVAPP._right_diff = REVAPP._right_diff + 1 ;
REVAPP._revisionView.render();
$( '#diff_count' ).html( REVAPP._right_diff );
$( '#slider' ).slider( 'value', REVAPP._right_diff - 1 ).trigger( 'slide' );
this.reset_restore_button();
},
//go the the previous revision
previousrevision : function() {
if ( REVAPP._right_diff > 1 ) //unless at left boundry
REVAPP._right_diff = REVAPP._right_diff - 1 ;
REVAPP._revisionView.render();
$( '#diff_count' ).html( REVAPP._right_diff );
$( '#slider' ).slider( 'value', REVAPP._right_diff - 1 ).trigger( 'slide' );
this.reset_restore_button();
}
})
});
//instantiate Revision Application
REVAPP = new wp.revisions.App();
//TODO consider enable back button to step back thru states?
//Backbone.history.start({pushState: true});
}(jQuery));