redesign menus

This commit is contained in:
2021-08-14 07:21:26 -07:00
parent 1cb1f0ec1f
commit df277e86ce
10 changed files with 192 additions and 72 deletions

View File

@@ -1,11 +1,71 @@
var menuButton = document.getElementById("selection-button");
let closeableMenus = [
"sortByRow",
"tagSelectionHeadingRow",
"tagSelectionRow",
"featureSelectionHeadingRow",
"featureSelectionRow",
];
menuButton.addEventListener("click", function () {
menuButton.classList.toggle("active");
var selectionMenu = document.getElementById("selection-menu");
if (selectionMenu.style.display === "block") {
selectionMenu.style.display = "none";
let areAnyCloseAbleMenusOpen = () =>
closeableMenus.some(
(x) => document.getElementById(x).style.display !== "none"
);
function closeMenus() {
closeableMenus.forEach(
(x) => (document.getElementById(x).style.display = "none")
);
}
function closeOptionMenu() {
document.getElementById("selection-options-menu").style.display = "none";
}
document.getElementById("plus-button").onclick = function () {
this.style.display = "none";
document.getElementById("minus-button").style.display = "inline-block";
document.getElementById("selection-options-menu").style.display = "flex";
closeMenus();
window.scrollTo(0, 0);
};
document.getElementById("minus-button").onclick = function () {
if (areAnyCloseAbleMenusOpen()) {
closeMenus();
} else {
selectionMenu.style.display = "block";
document.getElementById("selection-options-menu").style.display = "none";
this.style.display = "none";
document.getElementById("plus-button").style.display = "inline-block";
}
});
window.scrollTo(0, 0);
};
document.getElementById("button-for-showing-sort-option").onclick =
function () {
closeMenus();
document.getElementById("sortByRow").style.display = "flex";
};
document.getElementById("button-for-showing-columns").onclick = function () {};
document.getElementById("button-for-filter-by-tags").onclick = function () {
closeMenus();
document.getElementById("tagSelectionHeadingRow").style.display = "flex";
document.getElementById("tagSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-features").onclick = function () {
closeMenus();
document.getElementById("featureSelectionHeadingRow").style.display = "flex";
document.getElementById("featureSelectionRow").style.display = "flex";
};
document.getElementById("button-for-filter-by-tags-and-features").onclick =
function () {
closeMenus();
document.getElementById("tagSelectionHeadingRow").style.display = "flex";
document.getElementById("tagSelectionRow").style.display = "flex";
document.getElementById("featureSelectionHeadingRow").style.display =
"flex";
document.getElementById("featureSelectionRow").style.display = "flex";
};