hubl/src/scripts/menu-search-control.js

56 lines
2.0 KiB
JavaScript
Raw Normal View History

document.addEventListener("DOMContentLoaded", () => {
2021-04-02 08:41:18 +00:00
const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
MenuTabs.forEach(menuTab => {
const menuHeader = menuTab.querySelector('.jsMenuHeader');
const menuArrow = menuTab.querySelector('.jsMenuArrow')
const menuSub = menuTab.querySelector('.jsMenuSub');
const menuOption = menuTab.querySelector('.jsMenuOption');
const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
2021-04-06 11:24:07 +00:00
const isParent = (refNode, otherNode) => {
var parent = otherNode.parentNode;
do {
if (refNode == parent) {
return true;
} else {
parent = parent.parentNode;
}
} while (parent);
return false;
}
if (menuAdmin) {
menuAdmin.addEventListener("mouseover", function (ev) {
if (!isParent(this, ev.relatedTarget) && ev.target == this) {
menuAdmin.classList.toggle('hidden', false);
}
}, false);
menuAdmin.addEventListener("mouseout", function (ev) {
if (!isParent(this, ev.relatedTarget) && ev.target == this) {
menuAdmin.classList.toggle('hidden', true);
}
}, false);
menuAdmin.querySelector('solid-link').addEventListener('click', e => {
menuAdmin.classList.toggle('hidden', true);
});
}
2021-04-02 08:41:18 +00:00
menuHeader.addEventListener('click', e => {
menuArrow.classList.toggle('transform-up');
menuSub.classList.toggle('hidden');
});
menuOption.addEventListener('click', e => {
menuAdmin.classList.toggle('hidden');
e.stopPropagation();
});
});
2021-04-06 11:24:07 +00:00
2021-04-02 08:41:18 +00:00
const searchForm = document.querySelector('.menu-search');
searchForm.addEventListener('formChange', () => {
2021-04-06 11:24:07 +00:00
if (document.querySelector('.menu-search input').value != "") {
searchForm.style.backgroundColor = "#202B3C";
document.querySelector('#main__menu').classList.toggle('searching', true);
2021-04-02 08:41:18 +00:00
} else {
2021-04-06 11:24:07 +00:00
searchForm.style.backgroundColor = "var(--color-heading)";
document.querySelector('#main__menu').classList.toggle('searching', false);
2021-04-02 08:41:18 +00:00
}
})
});