Merge pull request #786 from dmitrylyzo/perfect_slider

Fix slider positioning on click and (try to) make it look the same in different browsers

src/elements/emby-slider/emby-slider.css

@@ -29,6 +29,8 @@
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     display: block;
+
+    font-size: inherit; /* Chrome and Firefox override font size for 'input' */
 }
 
 .mdl-slider::-moz-focus-outer {
@@ -43,17 +45,6 @@
     background: transparent;
 }
 
-.mdl-slider::-moz-range-track {
-    background: #444;
-    border: none;
-    width: calc(100% - 20px);
-}
-
-.mdl-slider::-moz-range-progress {
-    background: #00a4dc;
-    width: calc(100% - 20px);
-}
-
 .mdl-slider::-ms-track {
     background: none;
     color: transparent;
@@ -70,22 +61,25 @@
     display: none;
 }
 
+.slider-browser-edge {
+    margin-left: -0.16em;
+    margin-right: -0.16em;
+    width: 150%; /* need to occupy space */
+}
+
 .mdl-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 1.2em;
+    width: 1.08em;
-    height: 1.2em;
+    height: 1.08em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
     border: none;
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: 0.2s;
+    pointer-events: none;
 }
 
-.mdl-slider-hoverthumb::-webkit-slider-thumb {
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
-    transform: none;
-}
-
-.mdl-slider:hover::-webkit-slider-thumb {
     transform: scale(1.3);
 }
 
@@ -99,34 +93,41 @@
 
 .mdl-slider::-moz-range-thumb {
     -moz-appearance: none;
-    width: 0.9em;
+    width: 1.08em;
-    height: 0.9em;
+    height: 1.08em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
     background-image: none;
     border: none;
-    transform: scale(1.4, 1.4);
+    transition: 0.2s;
+}
+
+.mdl-slider-hoverthumb:hover::-moz-range-thumb {
+    transform: scale(1.3);
+}
+
+.mdl-slider.show-focus:focus::-moz-range-thumb {
+    transform: scale(1.3);
 }
 
 .mdl-slider::-ms-thumb {
     -webkit-appearance: none;
-    width: 1.8em;
+    width: 1.4em;
-    height: 1.8em;
+    height: 1.4em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
     border: none;
-    transform: scale(0.9, 0.9);
+    transform: scale(0.771429);
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: 0.2s;
 }
 
-.mdl-slider-hoverthumb::-ms-thumb {
+.mdl-slider-hoverthumb:hover::-ms-thumb {
-    margin-left: -0.4em;
+    transform: none;
-    transform: scale(0.5, 0.5);
 }
 
-.mdl-slider:hover::-ms-thumb {
+.mdl-slider.show-focus:focus::-ms-thumb {
     transform: none;
 }
 
@@ -142,14 +143,6 @@
     display: none;
 }
 
-.mdl-slider-ie-container {
-    height: 1.25em;
-    overflow: visible;
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
 .mdl-slider-container {
     height: 1.25em;
     position: relative;
@@ -161,15 +154,16 @@
 .mdl-slider-background-flex-container {
     width: 100%;
     box-sizing: border-box;
-    margin-top: -0.05em;
     top: 50%;
+    left: 0;
     position: absolute;
+    padding: 0 0.54em; /* half of slider thumb size */
 }
 
 .mdl-slider-background-flex {
     background: #333;
     height: 0.2em;
-    margin-top: -0.08em;
+    margin-top: -0.1em;
     width: 100%;
     top: 50%;
     left: 0;
@@ -217,11 +211,18 @@
     bottom: 0;
 }
 
+.sliderBubbleTrack {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 0.54em; /* half of slider thumb size */
+}
+
 .sliderBubble {
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate3d(-48%, -120%, 0);
+    transform: translate3d(-50%, -120%, 0);
     background: #282828;
     color: #fff;
     display: flex;

src/elements/emby-slider/emby-slider.js

@@ -3,7 +3,6 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
-    var supportsNativeProgressStyle = browser.firefox;
     var supportsValueSetOverride = false;
 
     var enableWidthWithTransform;
@@ -17,10 +16,67 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         }
     }
 
+    /**
+     * Returns slider fraction corresponding to client position.
+     *
+     * @param {Object} range slider itself
+     * @param {number} clientX client X-coordinate
+     * @return {number} slider fraction
+     */
+    function mapClientToFraction(range, clientX) {
+        var rect = range.sliderBubbleTrack.getBoundingClientRect();
+
+        var fraction = (clientX - rect.left) / rect.width;
+
+        // Snap to step
+        var valueRange = range.max - range.min;
+        if (range.step !== 'any' && valueRange !== 0) {
+            var step = (range.step || 1) / valueRange;
+            fraction = Math.round(fraction / step) * step;
+        }
+
+        return Math.min(Math.max(fraction, 0), 1);
+    }
+
+    /**
+     * Returns slider value corresponding to slider fraction.
+     *
+     * @param {Object} range slider itself
+     * @param {number} fraction slider fraction
+     * @return {number} slider value
+     */
+    function mapFractionToValue(range, fraction) {
+        var value = (range.max - range.min) * fraction;
+
+        // Snap to step
+        if (range.step !== 'any') {
+            var step = range.step || 1;
+            value = Math.round(value / step) * step;
+        }
+
+        value += parseFloat(range.min);
+
+        return Math.min(Math.max(value, range.min), range.max);
+    }
+
+    /**
+     * Returns slider fraction corresponding to slider value.
+     *
+     * @param {Object} range slider itself
+     * @param {number} value slider value (snapped to step)
+     * @return {number} slider fraction
+     */
+    function mapValueToFraction(range, value) {
+        var valueRange = range.max - range.min;
+        var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
+        return Math.min(Math.max(fraction, 0), 1);
+    }
+
     function updateValues() {
 
         // Do not update values when dragging with keyboard to keep current progress for reference
-        if (!!this.keyboardDragging) {
+        // Do not update values when touched to keep current progress for reference
+        if (!!this.keyboardDragging || !!this.touched) {
             return;
         }
 
@@ -48,8 +104,13 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateBubble(range, value, bubble, bubbleText) {
 
         requestAnimationFrame(function () {
+            var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
+            var bubbleRect = bubble.getBoundingClientRect();
 
-            bubble.style.left = value + '%';
+            var bubblePos = bubbleTrackRect.width * value / 100;
+            bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
+
+            bubble.style.left = bubblePos + 'px';
 
             if (range.getBubbleHtml) {
                 value = range.getBubbleHtml(value);
@@ -57,7 +118,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                 if (range.getBubbleText) {
                     value = range.getBubbleText(value);
                 } else {
-                    value = Math.round(value);
+                    value = mapFractionToValue(range, value / 100).toLocaleString();
                 }
                 value = '<h1 class="sliderBubbleText">' + value + '</h1>';
             }
@@ -84,6 +145,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         if (browser.noFlex) {
             this.classList.add('slider-no-webkit-thumb');
         }
+        if (browser.edge || browser.msie) {
+            this.classList.add('slider-browser-edge');
+        }
         if (!layoutManager.mobile) {
             this.classList.add('mdl-slider-hoverthumb');
         }
@@ -96,29 +160,28 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         var htmlToInsert = '';
 
-        if (!supportsNativeProgressStyle) {
+        htmlToInsert += '<div class="mdl-slider-background-flex-container">';
-            htmlToInsert += '<div class="mdl-slider-background-flex-container">';
+        htmlToInsert += '<div class="mdl-slider-background-flex">';
-            htmlToInsert += '<div class="mdl-slider-background-flex">';
+        htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
-            htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
 
-            // the more of these, the more ranges we can display
+        // the more of these, the more ranges we can display
-            htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
+        htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
 
-            if (enableWidthWithTransform) {
+        if (enableWidthWithTransform) {
-                htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
+            htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
-            } else {
+        } else {
-                htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
+            htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
-            }
-
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
         }
 
-        htmlToInsert += '<div class="sliderBubble hide"></div>';
+        htmlToInsert += '</div>';
+        htmlToInsert += '</div>';
+        htmlToInsert += '</div>';
+
+        htmlToInsert += '<div class="sliderBubbleTrack"><div class="sliderBubble hide"></div></div>';
 
         containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
 
+        this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
         this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
         this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
         var sliderBubble = containerElement.querySelector('.sliderBubble');
@@ -128,7 +191,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, 'input', function (e) {
             this.dragging = true;
 
-            updateBubble(this, this.value, sliderBubble);
+            var bubbleValue = mapValueToFraction(this, this.value) * 100;
+            updateBubble(this, bubbleValue, sliderBubble);
 
             if (hasHideClass) {
                 sliderBubble.classList.remove('hide');
@@ -152,10 +216,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
             if (!this.dragging) {
-                var rect = this.getBoundingClientRect();
+                var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
-                var clientX = e.clientX;
+
-                var bubbleValue = (clientX - rect.left) / rect.width;
-                bubbleValue *= 100;
                 updateBubble(this, bubbleValue, sliderBubble);
 
                 if (hasHideClass) {
@@ -175,13 +237,50 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
-        if (!supportsNativeProgressStyle) {
+        // HACK: iPhone/iPad do not change input by touch
+        if (browser.iOS) {
+            dom.addEventListener(this, 'touchstart', function (e) {
+                if (e.targetTouches.length !== 1) {
+                    return;
+                }
 
-            if (supportsValueSetOverride) {
+                this.touched = true;
-                this.addEventListener('valueset', updateValues);
+
-            } else {
+                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
-                startInterval(this);
+                this.value = mapFractionToValue(this, fraction);
-            }
+
+                this.dispatchEvent(new Event('input', {
+                    bubbles: true,
+                    cancelable: false
+                }));
+
+                // Reset dragging (from 'input' event) so that real dragging can be detected
+                var range = this;
+                setTimeout(function () {
+                    range.dragging = false;
+                }, 0);
+            }, {
+                passive: true
+            });
+
+            dom.addEventListener(this, 'touchend', function (e) {
+                if (!this.dragging) {
+                    this.dispatchEvent(new Event('change', {
+                        bubbles: true,
+                        cancelable: false
+                    }));
+                }
+
+                this.touched = false;
+            }, {
+                passive: true
+            });
+        }
+
+        if (supportsValueSetOverride) {
+            this.addEventListener('valueset', updateValues);
+        } else {
+            startInterval(this);
         }
     };