mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 10:58:20 -07:00
Merge pull request #786 from dmitrylyzo/perfect_slider
Fix slider positioning on click and (try to) make it look the same in different browsers
This commit is contained in:
dkanada
GitHub
commit
92d14bed85
@ -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;
|
||||
height: 1.2em;
|
||||
width: 1.08em;
|
||||
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 {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.mdl-slider:hover::-webkit-slider-thumb {
|
||||
.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
@ -99,34 +93,41 @@
|
||||
|
||||
.mdl-slider::-moz-range-thumb {
|
||||
-moz-appearance: none;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
width: 1.08em;
|
||||
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;
|
||||
height: 1.8em;
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transform: scale(0.9, 0.9);
|
||||
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);
|
||||
transform: scale(0.771429);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-ms-thumb {
|
||||
margin-left: -0.4em;
|
||||
transform: scale(0.5, 0.5);
|
||||
.mdl-slider-hoverthumb:hover::-ms-thumb {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@ -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,7 +160,6 @@ 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">';
|
||||
htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
|
||||
@ -113,12 +176,12 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
|
||||
htmlToInsert += '</div>';
|
||||
htmlToInsert += '</div>';
|
||||
htmlToInsert += '</div>';
|
||||
}
|
||||
|
||||
htmlToInsert += '<div class="sliderBubble hide"></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 clientX = e.clientX;
|
||||
var bubbleValue = (clientX - rect.left) / rect.width;
|
||||
bubbleValue *= 100;
|
||||
var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
|
||||
|
||||
updateBubble(this, bubbleValue, sliderBubble);
|
||||
|
||||
if (hasHideClass) {
|
||||
@ -175,14 +237,51 @@ 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;
|
||||
}
|
||||
|
||||
this.touched = true;
|
||||
|
||||
var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
|
||||
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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user