Revisions improvements

* Consolidated router code
* Corrected routing behavior
* Tooltip model
* Removed mouse dragging code

props adamsilverstein, ocean90. see #24425.

git-svn-id: http://core.svn.wordpress.org/trunk@24565 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-07-05 17:44:47 +00:00
parent a62e681239
commit 37db654d60
2 changed files with 61 additions and 81 deletions

View File

@ -3778,10 +3778,6 @@ body .ui-slider-tooltip {
padding: 4px 4px; padding: 4px 4px;
} }
.revisions-tooltip {
display: none;
}
.arrow { .arrow {
width: 70px; width: 70px;
height: 16px; height: 16px;

View File

@ -23,6 +23,13 @@ window.wp = window.wp || {};
} }
}); });
revisions.model.Tooltip = Backbone.Model.extend({
defaults: {
revision: null,
position: 0
}
});
revisions.model.Revision = Backbone.Model.extend({}); revisions.model.Revision = Backbone.Model.extend({});
revisions.model.Revisions = Backbone.Collection.extend({ revisions.model.Revisions = Backbone.Collection.extend({
@ -289,12 +296,15 @@ window.wp = window.wp || {};
})); }));
// Add the tooltip view // Add the tooltip view
this.views.add( new revisions.view.Tooltip({ var tooltip = new revisions.view.Tooltip({
model: this.model model: new revisions.model.Tooltip()
})); });
// Add the Slider view this.views.add( tooltip );
// Add the Slider view with a reference to the tooltip view
this.views.add( new revisions.view.Slider({ this.views.add( new revisions.view.Slider({
model: this.model model: this.model,
tooltip: tooltip
}) ); }) );
// Add the Meta view // Add the Meta view
@ -394,35 +404,34 @@ window.wp = window.wp || {};
template: wp.template( 'revisions-tooltip' ), template: wp.template( 'revisions-tooltip' ),
initialize: function() { initialize: function() {
this.listenTo( this.model, 'change:sliderHovering', this.sliderHoveringChanged ); this.listenTo( this.model, 'change', this.render );
this.listenTo( this.model, 'change:tooltipPosition', this.tooltipPositionChanged );
}, },
ready: function() { ready: function() {
// Hide tooltip on start.
this.$el.addClass( 'hidden' );
}, },
// Show or hide tooltip based on sliderHovering is true show: function() {
sliderHoveringChanged: function() { this.$el.removeClass( 'hidden' );
if ( this.model.get( 'sliderHovering' ) ) {
this.$el.show();
} else {
this.$el.hide();
}
}, },
tooltipPositionChanged: function() { hide: function() {
this.$el.html( this.template( this.model.revisions.at( this.model.get( 'hoveringAt') ).toJSON() ) ); this.$el.addClass( 'hidden' );
this.setTooltip( this.model.get( 'tooltipPosition' ) );
}, },
setTooltip: function( tooltipPosition ) { render: function() {
// Check if a revision exists.
if ( null === this.model.get( 'revision' ) )
return;
this.$el.html( this.template( this.model.get( 'revision' ).toJSON() ) );
var offset = $( '.revisions-buttons' ).offset().left, var offset = $( '.revisions-buttons' ).offset().left,
calculatedX = tooltipPosition - offset; calculatedX = this.model.get( 'position' ) - offset;
$( '.ui-slider-tooltip', this.$el ).css( 'left', calculatedX );
this.$el.find( '.ui-slider-tooltip' ).css( 'left', calculatedX ); $( '.arrow', this.$el ).css( 'left', calculatedX );
this.$el.find( '.arrow' ).css( 'left', calculatedX );
} }
}); });
@ -486,16 +495,10 @@ window.wp = window.wp || {};
val = this.model.revisions.indexOf( this.model.get( 'to' ) ); val = this.model.revisions.indexOf( this.model.get( 'to' ) );
// Disable "Next" button if you're on the last node. // Disable "Next" button if you're on the last node.
if ( maxVal === val ) next.prop( 'disabled', ( maxVal === val ) );
next.prop( 'disabled', true );
else
next.prop( 'disabled', false );
// Disable "Previous" button if you're on the first node. // Disable "Previous" button if you're on the first node.
if ( minVal === val ) previous.prop( 'disabled', ( minVal === val ) );
previous.prop( 'disabled', true );
else
previous.prop( 'disabled', false );
} }
}); });
@ -512,9 +515,11 @@ window.wp = window.wp || {};
'mouseleave' : 'mouseleave' 'mouseleave' : 'mouseleave'
}, },
initialize: function() { initialize: function( options ) {
_.bindAll( this, 'start', 'slide', 'stop' ); _.bindAll( this, 'start', 'slide', 'stop' );
this.tooltip = options.tooltip;
// Create the slider model from the provided collection data. // Create the slider model from the provided collection data.
var latestRevisionIndex = this.model.revisions.length - 1; var latestRevisionIndex = this.model.revisions.length - 1;
@ -533,21 +538,24 @@ window.wp = window.wp || {};
}, },
ready: function() { ready: function() {
// Refresh the currently selected revision position in case router has set it.
this.settings.attributes.value = this.model.revisions.indexOf(
this.model.revisions.findWhere( { id: Number( revisions.settings.selectedRevision ) } ) );
this.slide( '', this.settings.attributes );
this.$el.slider( this.settings.toJSON() ); this.$el.slider( this.settings.toJSON() );
// Listen for changes in Compare Two Mode setting // Listen for changes in Compare Two Mode setting
this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings ); this.listenTo( this.model, 'change:compareTwoMode', this.updateSliderSettings );
this.settings.on( 'change', function( model, options ) { this.settings.on( 'change', function() {
this.updateSliderSettings(); this.updateSliderSettings();
}, this ); }, this );
// Listen for changes in the diffId // Listen for changes in the diffId
this.listenTo( this.model, 'change:diffId', this.diffIdChanged ); this.listenTo( this.model, 'change:diffId', this.diffIdChanged );
// Reset to the initially selected revision
this.slide( '', this.settings.attributes );
}, },
mousemove: function( e ) { mousemove: function( e ) {
@ -567,18 +575,17 @@ window.wp = window.wp || {};
else if ( hoveringAt >= this.model.revisions.length ) else if ( hoveringAt >= this.model.revisions.length )
hoveringAt = this.model.revisions.length - 1; hoveringAt = this.model.revisions.length - 1;
// Update the model // Update the tooltip model
this.model.set( 'hoveringAt', hoveringAt ); this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) );
this.model.set( 'tooltipPosition', e.clientX ); this.tooltip.model.set( 'position', e.clientX );
}, },
mouseenter: function( e ) { mouseenter: function( e ) {
this.model.set( 'sliderHovering', true ); this.tooltip.show();
}, },
mouseleave: function( e ) { mouseleave: function( e ) {
this.model.set( 'sliderHovering', false ); this.tooltip.hide();
}, },
updateSliderSettings: function() { updateSliderSettings: function() {
@ -638,23 +645,6 @@ window.wp = window.wp || {};
}, },
start: function( event, ui ) { start: function( event, ui ) {
if ( ! this.model.get( 'compareTwoMode' ) )
return;
// Track the mouse position to enable smooth dragging, overrides default jquery ui step behaviour .
$( window ).mousemove( function( e ) {
var sliderLeft = this.$el.offset().left,
sliderRight = sliderLeft + this.$el.width();
// Follow mouse movements, as long as handle remains inside slider.
if ( e.clientX < sliderLeft ) {
$( ui.handle ).css( 'left', 0 ); // Mouse to left of slider.
} else if ( e.clientX > sliderRight ) {
$( ui.handle ).css( 'left', sliderRight - sliderLeft); // Mouse to right of slider.
} else {
$( ui.handle ).css( 'left', e.clientX - sliderLeft ); // Mouse in slider.
}
} ); // End mousemove.
}, },
slide: function( event, ui ) { slide: function( event, ui ) {
@ -686,13 +676,10 @@ window.wp = window.wp || {};
}, },
stop: function( event, ui ) { stop: function( event, ui ) {
if ( ! this.model.get( 'compareTwoMode' ) ) if ( this.model.get( 'compareTwoMode' ) )
return; return;
// Stop tracking the mouse. // Reset settings props handle back to the step position.
$( window ).unbind( 'mousemove' );
// Reset settings pops handle back to the step position.
this.settings.trigger( 'change' ); this.settings.trigger( 'change' );
} }
}); });
@ -726,10 +713,10 @@ window.wp = window.wp || {};
navigateRoute: function( to, from ) { navigateRoute: function( to, from ) {
var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/'; var navigateTo = '/revision/from/' + from + '/to/' + to + '/handles/';
if ( this.model.get( 'compareTwoMode' ) ){ if ( this.model.get( 'compareTwoMode' ) ) {
navigateTo = navigateTo + '2'; navigateTo += '2';
} else { } else {
navigateTo = navigateTo + '1'; navigateTo += '1';
} }
this.navigate( navigateTo ); this.navigate( navigateTo );
}, },
@ -740,11 +727,7 @@ window.wp = window.wp || {};
}, 250 ), }, 250 ),
gotoRevisionId: function( from, to, handles ) { gotoRevisionId: function( from, to, handles ) {
if ( '2' === handles ) { this.model.set( { compareTwoMode: ( '2' === handles ) } );
this.model.set( { compareTwoMode: true } );
} else {
this.model.set( { compareTwoMode: false } );
}
if ( 'undefined' !== typeof this.model ) { if ( 'undefined' !== typeof this.model ) {
var selectedToRevision = var selectedToRevision =
@ -756,6 +739,7 @@ window.wp = window.wp || {};
to: selectedToRevision, to: selectedToRevision,
from: selectedFromRevision } ); from: selectedFromRevision } );
} }
revisions.settings.selectedRevision = to;
} }
}); });