hubl/src/scripts/navigate-event.js

162 lines
5.1 KiB
JavaScript
Raw Normal View History

2020-05-08 13:27:44 +00:00
// auxiliary function closes the user profile menu
function closeUserControls() {
let userControls = Array.from(document.querySelectorAll(".user-controls"));
userControls.forEach(e => e.removeAttribute("open"));
}
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) {
2020-05-08 13:27:44 +00:00
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
vC.classList.toggle("sidebar-is-closed")
);
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
2020-05-08 13:27:44 +00:00
}
}
2020-05-08 13:27:44 +00:00
function openRightMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
});
Array.from(document.querySelectorAll(".views-container")).forEach(vC =>
vC.classList.toggle("sidebar-is-closed")
);
}
document.addEventListener("DOMContentLoaded", function () {
const componentSet = new Set(window.hubl.components.map(c => c.type));
// Workaround - No "navigate" event after the login on `/login`
if (window.location.pathname == "/login") {
const sibAuth = document.querySelector("sib-auth");
if (sibAuth) {
sibAuth.getUser()
.then(user => {
if (user !== null) {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: window.hubl.getRoute("dashboard", true)
}
}),
);
}
});
}
}
//- View change event
window.addEventListener("navigate", e => {
if (componentSet.has('admin')) {
const onlyAdmin = document.querySelector('.only-on-admin');
if (onlyAdmin) {
if (e.detail.route.startsWith('admin-')) {
onlyAdmin.removeAttribute('hidden');
} else {
onlyAdmin.setAttribute('hidden', '');
}
}
for (component of window.hubl.components) {
let adminTarget = document.querySelector(`solid-route[name="admin-${component.route}"]`);
let adminTargetTwo = document.querySelector(`.jsRightMenu solid-link[next="admin-${component.route}"]`);
if (e.detail.route.startsWith(`admin-${component.route}`)) {
if (adminTarget) adminTarget.setAttribute('active', '');
if (adminTargetTwo) adminTargetTwo.setAttribute('active', '');
} else {
if (adminTarget) adminTarget.removeAttribute('active');
if (adminTargetTwo) adminTargetTwo.removeAttribute('active');
}
}
}
closeLeftMenu();
closeUserControls();
if (e.detail.route.startsWith('login')) {
const sibAuth = document.querySelector("sib-auth");
if (sibAuth) {
sibAuth.getUser()
2021-02-17 18:22:22 +00:00
.then(user => {
if (user !== null) {
window.dispatchEvent(
new CustomEvent('requestNavigation', {
detail: {
route: window.hubl.getRoute("dashboard", true)
2021-02-17 18:22:22 +00:00
}
}),
);
}
});
}
}
});
// Document -> close menu
document.addEventListener("click", event => {
if (!event.target.closest(".user-controls")) {
closeUserControls();
}
if (
!event.target.closest("#main__menu") &&
event.target.id != "toggleMainMenu"
) {
closeLeftMenu();
}
if (
!event.target.closest(".jsOffsiteToggle")
) {
closeRightMenu();
}
});
2020-05-08 13:27:44 +00:00
// listen for keypress
document.onkeydown = e => {
e = e || window.event;
if (e.key === "Escape" || e.key === "Esc") {
closeUserControls();
closeLeftMenu();
closeRightMenu();
}
};
2020-05-08 13:27:44 +00:00
const toggleMainMenu = document.querySelector("#toggleMainMenu")
if (toggleMainMenu) {
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", "");
}
});
}
2020-05-08 13:27:44 +00:00
const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener("click", () => {
if (rightMenu.hasAttribute("open")) {
closeRightMenu();
} else {
openRightMenu();
}
2020-05-08 13:27:44 +00:00
});
});
2020-05-08 13:27:44 +00:00
Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
el => {
el.addEventListener("click", () => {
openRightMenu();
});
}
);
});