Ticket #24425: 24425.slider.diff

wp-admin/css/colors-fresh.css

@@ -1391 +1391 @@
 }
 
 .revisions-tickmarks > div {
-        background-color: #ccc;
+        border-color: #aaa;
 }
 
 #diff-title-to strong {

wp-admin/css/wp-admin.css

@@ -3512 +3512 @@
         height: 0.8em;
         z-index: 2;
         top: 7px;
+        width: 70%;
+        box-sizing: border-box;
 }
 
 .revisions-tickmarks > div {
-        height: 0.8em;
-        width: 1px;
-        float: left;
         position: relative;
+        height: 100%;
+        float: left;
         z-index: 10002;
+        border-style: solid;
+        border-width: 0 0 0 1px;
+        box-sizing: border-box;
+}
+
+.revisions-tickmarks > div:first-of-type {
+        border-left-width: 0;
 }
 
 .comparing-two-revisions .revisions-controls {

wp-admin/js/revisions.js

@@ -403 +403 @@
 
                         // Add the tooltip view
                         var tooltip = new revisions.view.Tooltip({
-                                model: new revisions.model.Tooltip()
+                                model: new revisions.model.Tooltip(),
+                                revisions: this.model.revisions
                         });
                         this.views.add( tooltip );
 
@@ -431 +432 @@
         revisions.view.Tickmarks = wp.Backbone.View.extend({
                 className: '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;
+                render: function() {
+                        var tickCount, tickWidth;
 
-                        $('.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
+                        tickCount = this.model.revisions.length - 1;
+                        tickWidth = 1 / tickCount;
 
-                        for ( tickNumber = 0; tickNumber <= tickCount; tickNumber++ ){
-                                this.$el.append('<div style="left:' + ( tickWidth * tickNumber ) + 'px;"></div>');
-                        }
+                        this.$el.html('');
+                        _(tickCount).times( function(){ this.$el.append( '<div></div>' ); }, this );
+
+                        this.$('div').css( 'width', ( 100 * tickWidth ) + '%' );
                 },
 
                 ready: function() {
-                        var self = this;
-                        self.numberOfTickmarksSet();
-                        $( window ).on( 'resize', _.debounce( function() {
-                                self.$el.html('');
-                                self.numberOfTickmarksSet();
-                        }, 50 ) );
+                        this.render();
                 }
         });
 
@@ -527 +520 @@
                 className: 'revisions-tooltip',
                 template: wp.template('revisions-tooltip'),
 
-                initialize: function() {
+                initialize: function( options ) {
+                        this.revisions = options.revisions;
                         this.listenTo( this.model, 'change', this.render );
                 },
 
@@ -545 +539 @@
                 },
 
                 render: function() {
+                        var offset;
                         // Check if a revision exists.
-                        if ( null === this.model.get('revision') )
+                        if ( _.isNull( this.model.get('revision') ) )
                                 return;
 
                         // Insert revision data.
                         this.$el.html( this.template( this.model.get('revision').toJSON() ) );
 
                         // Set the position.
-                        var offset = $('.revisions-buttons').offset().left;
-                        this.$el.css( 'left', this.model.get('position') - offset );
+                        offset = this.revisions.indexOf( this.model.get('revision') ) / ( this.revisions.length - 1 );
+                        // 15% to get us to the start of the slider
+                        // 0.7 to convert the slider-relative percentage to a page-relative percentage
+                        // 100 to convert to a percentage
+                        offset = 15 + (0.7 * offset * 100 ); // Now in a percentage
+                        this.$el.css( 'left', offset + '%' );
                 }
         });
 
@@ -680 +679 @@
                 },
 
                 mousemove: function( e ) {
-                        var tickCount = this.model.revisions.length - 1, // One tickmark per model
-                                sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
+                        var zoneCount = this.model.revisions.length - 1, // One fewer zone than models
+                                sliderLeft = this.$el.offset().left, // Left edge of slider
                                 sliderWidth = this.$el.width(), // Width of slider
-                                tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
+                                tickWidth = sliderWidth / zoneCount, // Calculated width of zone
                                 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
+                                currentModelIndex = Math.floor( ( actualX + ( tickWidth / 2 )  ) / tickWidth ); // Calculate the model index
 
                         // Reverse direction in RTL mode.
                         if ( isRtl )
@@ -700 +698 @@
 
                         // Update the tooltip model
                         this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
-                        this.tooltip.model.set( 'position', tooltipPosition );
                 },
 
-                mouseleave: function( e ) {
+                mouseleave: function() {
                         this.tooltip.hide();
                 },
 
-                mouseenter: function( e ) {
+                mouseenter: function() {
                         this.tooltip.show();
                 },