Changeset 24595

Timestamp:

07/08/2013 09:37:03 PM (9 years ago)

Author:

markjaquith

Message:

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.

Location:

trunk/wp-admin

Files:

• css/colors-fresh.css (modified) (2 diffs)
• css/wp-admin-rtl.css (modified) (1 diff)
• css/wp-admin.css (modified) (2 diffs)
• js/revisions.js (modified) (5 diffs)
• revision.php (modified) (1 diff)

trunk/wp-admin/css/colors-fresh.css

@@ -1386 +1386 @@
 }
 
+
+.revisions-tickmarks {
+    background-color: #f7f7f7;
+}
+
+.revisions-tickmarks > div {
+    background-color: #ccc;
+}
+
 #diff-title-to strong {
     color: #08a;
@@ -1393 +1402 @@
 .wp-slider.ui-slider {
     border-color: #d7d7d7;
-    background: #f7f7f7;
+    background: transparent;
 }
 

trunk/wp-admin/css/wp-admin-rtl.css

@@ -1020 +1020 @@
 }
 
-.ui-tooltip-content img {
+.revisions img {
     float: right;
     margin-right: 0;
     margin-left: 5px;
+}
+
+.revisions-tooltip {
+    margin-left: -185px;
+}
+
+.revisions-tooltip-arrow {
+    margin-left: 150px;
 }
 

trunk/wp-admin/css/wp-admin.css

@@ -3506 +3506 @@
 }
 
+.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 {
     height: 140px;
@@ -3535 +3551 @@
 .wp-slider {
     width: 70%;
-    margin: 6px auto 0;
+    margin: 0 auto 0;
+    top: -3px;
 }
 

trunk/wp-admin/js/revisions.js

@@ -281 +281 @@
 
         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' );
         }
     });
@@ -308 +311 @@
             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
             this.views.add( new revisions.view.Slider({
@@ -318 +326 @@
                 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 ) );
         }
     });
@@ -512 +553 @@
         events: {
             'mousemove'  : 'mousemove',
-            'mouseenter' : 'mouseenter',
-            'mouseleave' : 'mouseleave'
+            'mouseleave' : 'mouseleave',
+            'mouseenter' : 'mouseenter'
         },
 
@@ -560 +601 @@
 
         mousemove: function( e ) {
-            var sliderLeft = Math.ceil( this.$el.offset().left ),
-                sliderWidth = Math.ceil( this.$el.width() ) + 2,
-                tickWidth = Math.ceil( ( sliderWidth ) / this.model.revisions.length ),
-                actualX = e.clientX - sliderLeft,
-                hoveringAt = Math.floor( actualX / tickWidth );
+            var tickCount = this.model.revisions.length - 1, // One tickmark per model
+                sliderLeft = Math.ceil( this.$el.offset().left ), // Left edge of slider
+                sliderWidth = this.$el.width(), // Width of slider
+                tickWidth = Math.floor( sliderWidth / tickCount ), // Calculated width of tickmark
+                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.
             if ( isRtl )
-                hoveringAt = this.model.revisions.length - hoveringAt - 1;
-
-            // Ensure sane value for hoveringAt.
-            if ( hoveringAt < 0 )
-                hoveringAt = 0;
-            else if ( hoveringAt >= this.model.revisions.length )
-                hoveringAt = this.model.revisions.length - 1;
+                currentModelIndex = this.model.revisions.length - currentModelIndex - 1;
+
+            // Ensure sane value for currentModelIndex.
+            if ( currentModelIndex < 0 )
+                currentModelIndex = 0;
+            else if ( currentModelIndex >= this.model.revisions.length )
+                currentModelIndex = this.model.revisions.length - 1;
 
             // Update the tooltip model
-            this.tooltip.model.set( 'revision', this.model.revisions.at( hoveringAt ) );
-            this.tooltip.model.set( 'position', e.clientX );
+            this.tooltip.model.set( 'revision', this.model.revisions.at( currentModelIndex ) );
+            this.tooltip.model.set( 'position', tooltipPosition );
+        },
+
+        mouseleave: function( e ) {
+            this.tooltip.hide();
         },
 
         mouseenter: function( e ) {
             this.tooltip.show();
-        },
-
-        mouseleave: function( e ) {
-            this.tooltip.hide();
         },
 

trunk/wp-admin/revision.php

@@ -153 +153 @@
 </script>
 
+<script id="tmpl-revisions-tickmarks" type="text/html">
+</script>
+
 <script id="tmpl-revisions-meta" type="text/html">
     <div id="diff-header">