extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2024-11-30 03:54:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[bug] fix dropdown being cut off the bottom of page

Browse Source
This commit is contained in:
zombieFox 2019-11-17 13:33:13 +00:00
parent 67d55a8e58
commit 1bcaa0406a
2 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/css/form.css
View File

@ -1383,8 +1383,6 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius);
padding: 0.5em 0;
position: absolute;
top: calc(100% + calc(var(--layout-line-width) * 2));
left: 0;
width: 100%;
min-width: 12em;
box-shadow: var(--layout-shadow-large);
@ -1393,6 +1391,22 @@ input[type="range"]:disabled::-moz-range-progress {
display: none;
}
.form-dropdown-menu-left {
right: 0;
}
.form-dropdown-menu-right {
left: 0;
}
.form-dropdown-menu-top {
bottom: calc(100% + calc(var(--layout-line-width) * 2));
}
.form-dropdown-menu-bottom {
top: calc(100% + calc(var(--layout-line-width) * 2));
}
.form-dropdown-open .form-dropdown-menu {
display: flex;
flex-direction: column;

44
src/js/dropdown.js
View File

@ -78,39 +78,47 @@ var dropdown = (function() {
render.offset = function() {
var formDropdownMenu = _currentFormDropdown.querySelector(".form-dropdown-menu");
var box = formDropdownMenu.getBoundingClientRect();
if (box.left + box.width > window.innerWidth) {
formDropdownMenu.style.right = "0";
formDropdownMenu.style.left = "inherit";
if (state.get().dropdown) {
var box = formDropdownMenu.getBoundingClientRect();
if (box.right > window.innerWidth) {
helper.addClass(formDropdownMenu, "form-dropdown-menu-left");
} else {
helper.addClass(formDropdownMenu, "form-dropdown-menu-right");
};
if (box.bottom > window.innerHeight) {
helper.addClass(formDropdownMenu, "form-dropdown-menu-top");
} else {
helper.addClass(formDropdownMenu, "form-dropdown-menu-bottom");
};
} else {
formDropdownMenu.removeAttribute("style");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-left");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-right");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-top");
helper.removeClass(formDropdownMenu, "form-dropdown-menu-bottom");
};
};
render.toggle = function() {
if (_currentFormDropdown.classList.contains("form-dropdown-open")) {
mod.close();
helper.removeClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.remove();
render.offset();
_currentFormDropdown = null;
if (state.get().dropdown) {
render.open();
} else {
mod.open();
_currentFormDropdown = _currentFormDropdown;
helper.addClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.add(_currentFormDropdown);
render.offset();
render.close();
};
};
render.close = function() {
mod.close();
helper.removeClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.remove();
render.offset();
documentEvent.remove();
_currentFormDropdown = null;
};
render.open = function() {
helper.addClass(_currentFormDropdown, "form-dropdown-open");
render.offset();
documentEvent.add();
};
var close = function() {
mod.close();
render.close();