Updated styles to use logical properties/values

- Intended to improve RTL support in the interface.
- Also adds hebrew to language dropdown since that was missing.

Related to #1794
This commit is contained in:
Dan Brown
2020-04-05 13:07:19 +01:00
parent f84bf8e883
commit f94fd44ff6
21 changed files with 228 additions and 184 deletions

View File

@ -11,6 +11,7 @@ class DropDown {
this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]');
this.moveMenu = elem.hasAttribute('dropdown-move-menu');
this.toggle = elem.querySelector('[dropdown-toggle]');
this.direction = (document.dir === 'rtl') ? 'right' : 'left';
this.body = document.body;
this.showing = false;
this.setupListeners();
@ -28,7 +29,11 @@ class DropDown {
this.rect = this.menu.getBoundingClientRect();
this.body.appendChild(this.menu);
this.menu.style.position = 'fixed';
this.menu.style.left = `${this.rect.left}px`;
if (this.direction === 'right') {
this.menu.style.right = `${(this.rect.right - this.rect.width)}px`;
} else {
this.menu.style.left = `${this.rect.left}px`;
}
this.menu.style.top = `${this.rect.top}px`;
this.menu.style.width = `${this.rect.width}px`;
}
@ -67,7 +72,7 @@ class DropDown {
this.toggle.setAttribute('aria-expanded', 'false');
if (this.moveMenu) {
this.menu.style.position = '';
this.menu.style.left = '';
this.menu.style[this.direction] = '';
this.menu.style.top = '';
this.menu.style.width = '';
this.container.appendChild(this.menu);