extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-06-26 04:21:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[refactor] improve dropdown

Browse Source
This commit is contained in:
zombieFox 2019-10-21 00:52:33 +01:00
parent ead89076b2
commit 81fc16151c
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/form.css
View File

@ -1308,7 +1308,7 @@ input[type="range"]:disabled::-moz-range-progress {
border-radius: var(--theme-radius); border-radius: var(--theme-radius);
padding: 0.5em 0; padding: 0.5em 0;
position: absolute; position: absolute;
top: calc(100% + calc(var(--layout-line-width) * 2)); top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
min-width: 12em; min-width: 12em;

55
src/js/dropdown.js
View File

@ -1,5 +1,7 @@
var dropdown = (function() { var dropdown = (function() {
var _currentFormDropdown = null;
var mod = {}; var mod = {};
mod.open = function() { mod.open = function() {
@ -36,6 +38,22 @@ var dropdown = (function() {
var bind = {}; var bind = {};
var documentEvent = {};
documentEvent.add = function() {
document.addEventListener("click", documentEvent.clickOut, false);
};
documentEvent.remove = function() {
document.removeEventListener("click", documentEvent.clickOut, false);
};
documentEvent.clickOut = function() {
if (!event.path.includes(_currentFormDropdown)) {
close();
};
};
bind.formDropdown = function() { bind.formDropdown = function() {
var allFormDropdown = helper.eA(".form-dropdown"); var allFormDropdown = helper.eA(".form-dropdown");
allFormDropdown.forEach(function(arrayItem, index) { allFormDropdown.forEach(function(arrayItem, index) {
@ -43,14 +61,14 @@ var dropdown = (function() {
var formDropdownToggle = formDropdown.querySelector(".form-dropdown-toggle"); var formDropdownToggle = formDropdown.querySelector(".form-dropdown-toggle");
var allFormDropdownMenuItem = formDropdown.querySelectorAll(".form-dropdown-menu-item"); var allFormDropdownMenuItem = formDropdown.querySelectorAll(".form-dropdown-menu-item");
formDropdownToggle.addEventListener("click", function() { formDropdownToggle.addEventListener("click", function() {
_currentFormDropdown = formDropdown;
mod.toggle(); mod.toggle();
render.toggle(formDropdown); render.toggle();
render.offset(formDropdown);
}, false); }, false);
allFormDropdownMenuItem.forEach(function(arrayItem, index) { allFormDropdownMenuItem.forEach(function(arrayItem, index) {
arrayItem.addEventListener("click", function() { arrayItem.addEventListener("click", function() {
mod.close(); mod.close();
render.close(formDropdown); render.close();
}, false); }, false);
}); });
}); });
@ -58,8 +76,8 @@ var dropdown = (function() {
var render = {}; var render = {};
render.offset = function(formDropdown) { render.offset = function() {
var formDropdownMenu = formDropdown.querySelector(".form-dropdown-menu"); var formDropdownMenu = _currentFormDropdown.querySelector(".form-dropdown-menu");
var box = formDropdownMenu.getBoundingClientRect(); var box = formDropdownMenu.getBoundingClientRect();
if (box.left + box.width > window.innerWidth) { if (box.left + box.width > window.innerWidth) {
formDropdownMenu.style.right = "0"; formDropdownMenu.style.right = "0";
@ -69,28 +87,33 @@ var dropdown = (function() {
}; };
}; };
render.toggle = function(formDropdown) { render.toggle = function() {
if (formDropdown.classList.contains("form-dropdown-open")) { if (_currentFormDropdown.classList.contains("form-dropdown-open")) {
mod.close(); mod.close();
helper.removeClass(formDropdown, "form-dropdown-open"); helper.removeClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.remove();
render.offset();
_currentFormDropdown = null;
} else { } else {
mod.open(); mod.open();
helper.addClass(formDropdown, "form-dropdown-open"); _currentFormDropdown = _currentFormDropdown;
helper.addClass(_currentFormDropdown, "form-dropdown-open");
documentEvent.add(_currentFormDropdown);
render.offset();
}; };
}; };
render.close = function(formDropdown) { render.close = function() {
mod.close(); mod.close();
helper.removeClass(formDropdown, "form-dropdown-open"); helper.removeClass(_currentFormDropdown, "form-dropdown-open");
}; documentEvent.remove();
render.offset();
render.open = function(formDropdown) { _currentFormDropdown = null;
mod.open();
helper.addClass(formDropdown, "form-dropdown-open");
}; };
var close = function() { var close = function() {
mod.close(); mod.close();
render.close();
var allFormDropdown = helper.eA(".form-dropdown"); var allFormDropdown = helper.eA(".form-dropdown");
allFormDropdown.forEach(function(arrayItem, index) { allFormDropdown.forEach(function(arrayItem, index) {
helper.removeClass(arrayItem, "form-dropdown-open"); helper.removeClass(arrayItem, "form-dropdown-open");