2020-05-08 13:27:44 +00:00
|
|
|
// auxiliary function closes the user profile menu
|
|
|
|
function closeUserControls() {
|
2021-01-22 13:21:25 +00:00
|
|
|
let userControls = Array.from(document.querySelectorAll(".user-controls"));
|
|
|
|
userControls.forEach(e => e.removeAttribute("open"));
|
2020-05-08 13:27:44 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function closeLeftMenu() {
|
|
|
|
let leftMenu = document.querySelector("#main__menu");
|
|
|
|
if (leftMenu) leftMenu.removeAttribute("open");
|
|
|
|
}
|
|
|
|
|
|
|
|
function closeRightMenu() {
|
|
|
|
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
|
|
|
if (Array.from(rightMenu).filter(el => el.hasAttribute("open")).length > 0) {
|
|
|
|
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
|
|
|
vC.classList.toggle("sidebar-is-closed")
|
|
|
|
);
|
2021-01-22 13:50:03 +00:00
|
|
|
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
|
|
|
|
el.querySelector('.text-right').setAttribute('hidden', '');
|
|
|
|
el.querySelector('.text-left').removeAttribute('hidden');
|
|
|
|
});
|
2020-05-08 13:27:44 +00:00
|
|
|
Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function openRightMenu() {
|
|
|
|
let rightMenu = document.querySelectorAll(".jsRightMenu");
|
|
|
|
Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
|
2021-01-22 13:50:03 +00:00
|
|
|
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
|
|
|
|
el.querySelector('.text-left').setAttribute('hidden', '');
|
|
|
|
el.querySelector('.text-right').removeAttribute('hidden');
|
|
|
|
});
|
2020-05-08 13:27:44 +00:00
|
|
|
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
|
|
|
|
vC.classList.toggle("sidebar-is-closed")
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-08-24 12:50:22 +00:00
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
2020-05-08 13:27:44 +00:00
|
|
|
|
|
|
|
//- View change event
|
2021-01-22 13:21:25 +00:00
|
|
|
window.addEventListener("navigate", e => {
|
|
|
|
if(e.detail.route.startsWith('admin-')) {
|
|
|
|
document.querySelector('.only-on-admin').removeAttribute('hidden');
|
|
|
|
} else {
|
|
|
|
document.querySelector('.only-on-admin').setAttribute('hidden','');
|
|
|
|
}
|
|
|
|
if(e.detail.route.startsWith("admin-communities")) {
|
|
|
|
document.querySelector('solid-route[name="admin-communities"]').setAttribute('active','');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').setAttribute('active','');
|
|
|
|
} else {
|
|
|
|
document.querySelector('solid-route[name="admin-communities"]').removeAttribute('active');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-communities"]').removeAttribute('active');
|
|
|
|
}
|
|
|
|
if(e.detail.route.startsWith("admin-circles")) {
|
|
|
|
document.querySelector('solid-route[name="admin-circles"]').setAttribute('active','');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').setAttribute('active','');
|
|
|
|
} else {
|
|
|
|
document.querySelector('solid-route[name="admin-circles"]').removeAttribute('active');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-circles"]').removeAttribute('active');
|
|
|
|
}
|
|
|
|
if(e.detail.route.startsWith("admin-projects")) {
|
|
|
|
document.querySelector('solid-route[name="admin-projects"]').setAttribute('active','');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-projects"]').setAttribute('active','');
|
|
|
|
} else {
|
|
|
|
document.querySelector('solid-route[name="admin-projects"]').removeAttribute('active');
|
|
|
|
document.querySelector('.jsRightMenu solid-link[next="admin-projects"]').removeAttribute('active');
|
|
|
|
}
|
2020-05-08 13:27:44 +00:00
|
|
|
closeLeftMenu();
|
|
|
|
closeUserControls();
|
|
|
|
});
|
|
|
|
// Document -> close menu
|
|
|
|
document.addEventListener("click", event => {
|
2021-01-22 13:21:25 +00:00
|
|
|
if (!event.target.closest(".user-controls")) {
|
2020-05-08 13:27:44 +00:00
|
|
|
closeUserControls();
|
|
|
|
}
|
|
|
|
if (
|
|
|
|
!event.target.closest("#main__menu") &&
|
|
|
|
event.target.id != "toggleMainMenu"
|
|
|
|
) {
|
|
|
|
closeLeftMenu();
|
|
|
|
}
|
|
|
|
if (
|
2021-01-22 13:50:03 +00:00
|
|
|
!event.target.closest(".jsOffsiteToggle")
|
2020-05-08 13:27:44 +00:00
|
|
|
) {
|
|
|
|
closeRightMenu();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// listen for keypress
|
|
|
|
document.onkeydown = e => {
|
|
|
|
e = e || window.event;
|
|
|
|
if (e.key === "Escape" || e.key === "Esc") {
|
|
|
|
closeUserControls();
|
|
|
|
closeLeftMenu();
|
|
|
|
closeRightMenu();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-08-24 12:50:22 +00:00
|
|
|
document.querySelector("#toggleMainMenu").addEventListener("click", () => {
|
2020-05-08 13:27:44 +00:00
|
|
|
let leftMenu = document.querySelector("#main__menu");
|
|
|
|
if (leftMenu.hasAttribute("open")) {
|
|
|
|
closeLeftMenu();
|
|
|
|
} else {
|
|
|
|
leftMenu.setAttribute("open", "");
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
|
|
|
|
rightMenus.forEach(rightMenu => {
|
|
|
|
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
|
2020-08-24 12:50:22 +00:00
|
|
|
btnRightMenu.addEventListener("click", () => {
|
2020-05-08 13:27:44 +00:00
|
|
|
if (rightMenu.hasAttribute("open")) {
|
|
|
|
closeRightMenu();
|
|
|
|
} else {
|
|
|
|
openRightMenu();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
|
|
|
|
el => {
|
2020-08-24 12:50:22 +00:00
|
|
|
el.addEventListener("click", () => {
|
2020-05-08 13:27:44 +00:00
|
|
|
openRightMenu();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
);
|
|
|
|
});
|