Tick marks are back for revisions
* Simple tick marks * Tooltips snap to tick marks * Tooltips arrow reverses side for LTR/RTL * Fix for routing issue where just the hash is changed in the URL bar relating to compare two mode see #24425. props adamsilverstein, ocean90. git-svn-id: http://core.svn.wordpress.org/trunk@24595 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
740d141e1d
commit
561db4a6da
|
@ -1385,6 +1385,15 @@ table.diff .diff-addedline ins {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.revisions-tickmarks {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.revisions-tickmarks > div {
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
#diff-title-to strong {
|
#diff-title-to strong {
|
||||||
color: #08a;
|
color: #08a;
|
||||||
}
|
}
|
||||||
|
@ -1392,7 +1401,7 @@ table.diff .diff-addedline ins {
|
||||||
/* jQuery UI Slider */
|
/* jQuery UI Slider */
|
||||||
.wp-slider.ui-slider {
|
.wp-slider.ui-slider {
|
||||||
border-color: #d7d7d7;
|
border-color: #d7d7d7;
|
||||||
background: #f7f7f7;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wp-slider .ui-slider-handle {
|
.wp-slider .ui-slider-handle {
|
||||||
|
|
|
@ -1019,12 +1019,20 @@ th.sorted a span {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui-tooltip-content img {
|
.revisions img {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.revisions-tooltip {
|
||||||
|
margin-left: -185px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.revisions-tooltip-arrow {
|
||||||
|
margin-left: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
/*------------------------------------------------------------------------------
|
/*------------------------------------------------------------------------------
|
||||||
11.3 - Featured Images
|
11.3 - Featured Images
|
||||||
------------------------------------------------------------------------------*/
|
------------------------------------------------------------------------------*/
|
||||||
|
|
|
@ -3505,6 +3505,22 @@ td.plugin-title p {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.revisions-tickmarks {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto 0;
|
||||||
|
height: 0.8em;
|
||||||
|
z-index: 2;
|
||||||
|
top: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.revisions-tickmarks > div {
|
||||||
|
height: 0.8em;
|
||||||
|
width: 1px;
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10002;
|
||||||
|
}
|
||||||
|
|
||||||
.comparing-two-revisions .revisions-controls {
|
.comparing-two-revisions .revisions-controls {
|
||||||
height: 140px;
|
height: 140px;
|
||||||
}
|
}
|
||||||
|
@ -3534,7 +3550,8 @@ td.plugin-title p {
|
||||||
|
|
||||||
.wp-slider {
|
.wp-slider {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
margin: 6px auto 0;
|
margin: 0 auto 0;
|
||||||
|
top: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Revision meta box */
|
/* Revision meta box */
|
||||||
|
|
|
@ -280,7 +280,10 @@ window.wp = window.wp || {};
|
||||||
},
|
},
|
||||||
|
|
||||||
updateCompareTwoMode: function() {
|
updateCompareTwoMode: function() {
|
||||||
this.$el.toggleClass( 'comparing-two-revisions' );
|
if ( this.model.get( 'compareTwoMode' ) )
|
||||||
|
this.$el.addClass( 'comparing-two-revisions' );
|
||||||
|
else
|
||||||
|
this.$el.removeClass( 'comparing-two-revisions' );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -307,6 +310,11 @@ window.wp = window.wp || {};
|
||||||
});
|
});
|
||||||
this.views.add( tooltip );
|
this.views.add( tooltip );
|
||||||
|
|
||||||
|
// Add the Tickmarks view
|
||||||
|
this.views.add( new revisions.view.Tickmarks({
|
||||||
|
model: this.model
|
||||||
|
}));
|
||||||
|
|
||||||
// Add the Slider view with a reference to the tooltip view
|
// 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,
|
||||||
|
@ -317,6 +325,39 @@ window.wp = window.wp || {};
|
||||||
this.views.add( new revisions.view.Meta({
|
this.views.add( new revisions.view.Meta({
|
||||||
model: this.model
|
model: this.model
|
||||||
}) );
|
}) );
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// The tickmarks view
|
||||||
|
// This contains the slider tickmarks.
|
||||||
|
revisions.view.Tickmarks = wp.Backbone.View.extend({
|
||||||
|
tagName: 'div',
|
||||||
|
className: 'revisions-tickmarks',
|
||||||
|
template: wp.template('revisions-tickmarks'),
|
||||||
|
|
||||||
|
numberOfTickmarksSet: function() {
|
||||||
|
var tickCount = this.model.revisions.length - 1, // One tickmark per model
|
||||||
|
sliderWidth = $( '.wp-slider' ).parent().width() * 0.7, // Width of slider is 70% of container (reset on resize)
|
||||||
|
tickWidth = Math.floor( sliderWidth / tickCount ), // Divide width by # of tickmarks, round down
|
||||||
|
newSiderWidth = ( ( tickWidth + 1 ) * tickCount ) + 1, // Calculate the actual width
|
||||||
|
tickNumber;
|
||||||
|
|
||||||
|
$( '.wp-slider' ).css( 'width', newSiderWidth ); // Reset the slider width to match the calculated tick size
|
||||||
|
this.$el.css( 'width', newSiderWidth ); // Match the tickmark div width
|
||||||
|
|
||||||
|
for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
|
||||||
|
this.$el.append( '<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>' );
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
var self = this;
|
||||||
|
self.numberOfTickmarksSet();
|
||||||
|
$( window ).on( 'resize', _.debounce( function() {
|
||||||
|
self.$el.html( '' );
|
||||||
|
self.numberOfTickmarksSet();
|
||||||
|
}, 50 ) );
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -511,8 +552,8 @@ window.wp = window.wp || {};
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'mousemove' : 'mousemove',
|
'mousemove' : 'mousemove',
|
||||||
'mouseenter' : 'mouseenter',
|
'mouseleave' : 'mouseleave',
|
||||||
'mouseleave' : 'mouseleave'
|
'mouseenter' : 'mouseenter'
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function( options ) {
|
initialize: function( options ) {
|
||||||
|
@ -559,35 +600,37 @@ window.wp = window.wp || {};
|
||||||
},
|
},
|
||||||
|
|
||||||
mousemove: function( e ) {
|
mousemove: function( e ) {
|
||||||
var sliderLeft = Math.ceil( this.$el.offset().left ),
|
var tickCount = this.model.revisions.length - 1, // One tickmark per model
|
||||||
sliderWidth = Math.ceil( this.$el.width() ) + 2,
|
sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
|
||||||
tickWidth = Math.ceil( ( sliderWidth ) / this.model.revisions.length ),
|
sliderWidth = this.$el.width(), // Width of slider
|
||||||
actualX = e.clientX - sliderLeft,
|
tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
|
||||||
hoveringAt = Math.floor( actualX / tickWidth );
|
actualX = e.clientX - sliderLeft, // Offset of mouse position in slider
|
||||||
|
currentModelIndex = Math.floor( ( actualX + tickWidth / 2 ) / tickWidth ), // Calculate the model index
|
||||||
|
tooltipPosition = sliderLeft + 2 + currentModelIndex * tickWidth; // Stick tooltip to tickmark
|
||||||
|
|
||||||
// Reverse direction in RTL mode.
|
// Reverse direction in RTL mode.
|
||||||
if ( isRtl )
|
if ( isRtl )
|
||||||
hoveringAt = this.model.revisions.length - hoveringAt - 1;
|
currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
|
||||||
|
|
||||||
// Ensure sane value for hoveringAt.
|
// Ensure sane value for currentModelIndex.
|
||||||
if ( hoveringAt < 0 )
|
if ( currentModelIndex < 0 )
|
||||||
hoveringAt = 0;
|
currentModelIndex = 0;
|
||||||
else if ( hoveringAt >= this.model.revisions.length )
|
else if ( currentModelIndex >= this.model.revisions.length )
|
||||||
hoveringAt = this.model.revisions.length - 1;
|
currentModelIndex = this.model.revisions.length - 1;
|
||||||
|
|
||||||
// Update the tooltip model
|
// Update the tooltip model
|
||||||
this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) );
|
this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
|
||||||
this.tooltip.model.set( 'position', e.clientX );
|
this.tooltip.model.set( 'position', tooltipPosition );
|
||||||
},
|
|
||||||
|
|
||||||
mouseenter: function( e ) {
|
|
||||||
this.tooltip.show();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mouseleave: function( e ) {
|
mouseleave: function( e ) {
|
||||||
this.tooltip.hide();
|
this.tooltip.hide();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mouseenter: function( e ) {
|
||||||
|
this.tooltip.show();
|
||||||
|
},
|
||||||
|
|
||||||
updateSliderSettings: function() {
|
updateSliderSettings: function() {
|
||||||
if ( this.model.get( 'compareTwoMode' ) ) {
|
if ( this.model.get( 'compareTwoMode' ) ) {
|
||||||
var leftValue, rightValue;
|
var leftValue, rightValue;
|
||||||
|
|
|
@ -152,6 +152,9 @@ require_once( './admin-header.php' );
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script id="tmpl-revisions-tickmarks" type="text/html">
|
||||||
|
</script>
|
||||||
|
|
||||||
<script id="tmpl-revisions-meta" type="text/html">
|
<script id="tmpl-revisions-meta" type="text/html">
|
||||||
<div id="diff-header">
|
<div id="diff-header">
|
||||||
<div id="diff-header-from" class="diff-header">
|
<div id="diff-header-from" class="diff-header">
|
||||||
|
|
Loading…
Reference in New Issue