autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: js right menu handler

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2021-04-15 21:49:06 +02:00
parent db3d158116
commit a752e44e06
4 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/scripts/navigate-event.js
View File

@ -19,13 +19,27 @@ function closeRightMenu() {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
Array.from(rightMenu).forEach(el => {
el.removeAttribute("open");
el.classList.add('sm-hidden');
Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
ac.classList.remove('icon-close');
ac.classList.add('icon-options-vertical');
});
});
}
}
function openRightMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
Array.from(rightMenu).forEach(el => {
el.setAttribute("open", "");
el.classList.remove('sm-hidden');
Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
ac.classList.remove('icon-options-vertical');
ac.classList.add('icon-close');
});
});
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
@ -35,48 +49,31 @@ function openRightMenu() {
);
}
const adminControl = document.querySelector('.jsMobileSidebarAdminControl');
const buttons = adminControl.querySelectorAll('.jsMobileRightMenuButton');
const rightMenu = adminControl.querySelector('.jsRightMenu');
Array.from(buttons).forEach(button =>
button.addEventListener("click", () => {
if (button.classList.contains('icon-close')) {
button.classList.remove('icon-close');
button.classList.add('icon-options-vertical');
rightMenu.classList.add('sm-hidden');
}
else {
button.classList.remove('icon-options-vertical');
button.classList.add('icon-close');
rightMenu.classList.remove('sm-hidden');
};
})
)
const contentControls = Array.from(document.querySelectorAll('.jsMobileContentSidebarControl'));
contentControls.forEach(
contentControl => {
const contentSidebar = contentControl.querySelector('.jsRightMenu');
const contentButtons = contentControl.querySelectorAll('.jsMobileRightMenuButton');
Array.from(contentButtons).forEach(contentButton =>
contentButton.addEventListener('click', () => {
if (contentButton.classList.contains('icon-close')) {
contentButton.classList.remove('icon-close');
contentButton.classList.add('icon-options-vertical');
contentSidebar.classList.add('sm-hidden');
}
else {
contentButton.classList.remove('icon-options-vertical');
contentButton.classList.add('icon-close');
contentSidebar.classList.remove('sm-hidden');
};
})
)
function closeRightMobileMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
if (Array.from(rightMenu).filter(el => el.hasAttribute("mobile-open")).length > 0) {
Array.from(rightMenu).forEach(el => {
el.removeAttribute("mobile-open");
el.classList.add('sm-hidden');
Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
ac.classList.remove('icon-close');
ac.classList.add('icon-options-vertical');
});
});
}
);
}
function openRightMobileMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
Array.from(rightMenu).forEach(el => {
el.setAttribute("mobile-open", "");
el.classList.remove('sm-hidden');
Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
ac.classList.remove('icon-options-vertical');
ac.classList.add('icon-close');
});
});
}
document.addEventListener("DOMContentLoaded", function () {
const componentSet = new Set(window.hubl.components.map(c => c.type));
@ -155,9 +152,11 @@ document.addEventListener("DOMContentLoaded", function () {
closeLeftMenu();
}
if (
!event.target.closest(".jsOffsiteToggle")
!event.target.closest(".jsOffsiteToggle") &&
!event.target.classList.contains('jsMobileRightMenuButton')
) {
closeRightMenu();
closeRightMobileMenu();
}
});
@ -168,6 +167,7 @@ document.addEventListener("DOMContentLoaded", function () {
closeUserControls();
closeLeftMenu();
closeRightMenu();
closeRightMobileMenu();
}
};
@ -195,10 +195,15 @@ document.addEventListener("DOMContentLoaded", function () {
});
});
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
Array.from(document.querySelectorAll(".jsMobileRightMenuButton")).forEach(
el => {
el.addEventListener("click", () => {
openRightMenu();
if (el.closest('.jsMobileContentSidebarControl').querySelector('nav.jsRightMenu').hasAttribute("mobile-open")) {
closeRightMobileMenu();
} else {
openRightMobileMenu();
}
});
}
);