mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Fix slider bubble position

Browse source
This commit is contained in:
Dmitry Lyzo 2020-02-08 20:04:39 +03:00
parent c44b94a7b7
commit 20a20ff9d1
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/elements/emby-slider/emby-slider.css
View file

@ -220,6 +220,13 @@
bottom: 0; bottom: 0;
} }
.sliderBubbleTrack {
position: absolute;
left: 0;
right: 0;
margin: 0 0.54em; /* half of slider thumb size */
}
.sliderBubble { .sliderBubble {
position: absolute; position: absolute;
top: 0; top: 0;

11
src/elements/emby-slider/emby-slider.js
View file

@ -115,10 +115,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
htmlToInsert += '</div>'; htmlToInsert += '</div>';
} }
htmlToInsert += '<div class="sliderBubble hide"></div>'; htmlToInsert += '<div class="sliderBubbleTrack"><div class="sliderBubble hide"></div></div>';
containerElement.insertAdjacentHTML('beforeend', htmlToInsert); containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower'); this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper'); this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
var sliderBubble = containerElement.querySelector('.sliderBubble'); var sliderBubble = containerElement.querySelector('.sliderBubble');
@ -152,10 +153,16 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) { dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
if (!this.dragging) { if (!this.dragging) {
var rect = this.getBoundingClientRect(); var rect = this.sliderBubbleTrack.getBoundingClientRect();
var clientX = e.clientX; var clientX = e.clientX;
var bubbleValue = (clientX - rect.left) / rect.width; var bubbleValue = (clientX - rect.left) / rect.width;
bubbleValue *= 100; bubbleValue *= 100;
if (this.step !== 0) {
bubbleValue = Math.round(bubbleValue / this.step) * this.step;
}
bubbleValue = Math.min(Math.max(bubbleValue, 0), 100);
updateBubble(this, bubbleValue, sliderBubble); updateBubble(this, bubbleValue, sliderBubble);
if (hasHideClass) { if (hasHideClass) {