milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Initial support for RTL layouts

Browse source
This commit is contained in:
Hadi Charara 2022-07-02 15:50:52 -04:00
parent 941fe35103
commit 0f994ccb5b
19 changed files with 212 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
import './emby-slider.scss';
import 'webcomponents.js/webcomponents-lite';
import '../emby-input/emby-input';
import { getIsRTL } from '../../scripts/globalize';
/* eslint-disable indent */
@ -32,6 +33,10 @@ import '../emby-input/emby-input';
let fraction = (clientX - rect.left) / rect.width;
if (getIsRTL()) {
fraction = (rect.width - (clientX - rect.left)) / rect.width;
}
// Snap to step
const valueRange = range.max - range.min;
if (range.step !== 'any' && valueRange !== 0) {
@ -111,6 +116,9 @@ import '../emby-input/emby-input';
const bubbleRect = bubble.getBoundingClientRect();
let bubblePos = bubbleTrackRect.width * value / 100;
if (getIsRTL()) {
bubblePos = bubbleTrackRect.width - bubblePos;
}
bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
bubble.style.left = bubblePos + 'px';
@ -411,7 +419,11 @@ import '../emby-input/emby-input';
function setRange(elem, startPercent, endPercent) {
const style = elem.style;
style.left = Math.max(startPercent, 0) + '%';
if (getIsRTL()) {
style.right = Math.max(startPercent, 0) + '%';
} else {
style.left = Math.max(startPercent, 0) + '%';
}
const widthPercent = endPercent - startPercent;
style.width = Math.max(Math.min(widthPercent, 100), 0) + '%';