cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 10:58:20 -07:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #786 from dmitrylyzo/perfect_slider

Browse Source 
Fix slider positioning on click and (try to) make it look the same in different browsers
This commit is contained in:
dkanada 2020-02-15 01:12:40 +09:00 committed by GitHub
commit 92d14bed85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 172 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/elements/emby-slider/emby-slider.css
View File

@ -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;

161
src/elements/emby-slider/emby-slider.js
View File

@ -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">';
htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
htmlToInsert += '<div class="mdl-slider-background-flex-container">';
htmlToInsert += '<div class="mdl-slider-background-flex">';
htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
// the more of these, the more ranges we can display
htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
// the more of these, the more ranges we can display
htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
if (enableWidthWithTransform) {
htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
} else {
htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
}
htmlToInsert += '</div>';
htmlToInsert += '</div>';
htmlToInsert += '</div>';
if (enableWidthWithTransform) {
htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
} else {
htmlToInsert += '<div class="mdl-slider-background-lower"></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 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,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.addEventListener('valueset', updateValues);
} else {
startInterval(this);
}
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);
}
};