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

fix a lot of problems and add js for menus

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2020-01-20 13:57:03 +01:00
parent 36a045cacb
commit 83e6957934
15 changed files with 169 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/scripts/index.js
View File

@ -48,14 +48,33 @@ function closeUserControls() {
if (userControls) userControls.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) {
Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
Array.from(rightMenu).forEach(el => el.removeAttribute('open'));
}
}
function openRightMenu() {
let rightMenu = document.querySelectorAll('.jsRightMenu');
Array.from(rightMenu).forEach(el => el.setAttribute('open', ''));
Array.from(document.querySelectorAll('.views-container')).forEach(vC => vC.classList.toggle('sidebar-is-closed'));
}
document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
const viewsContainer = Array.from(document.querySelectorAll('.views-container'));
//- View change event
// window.addEventListener('navigate', (event) => {
// });
window.addEventListener('navigate', (event) => {
closeLeftMenu();
closeUserControls();
});
//- Toggle sub-menus
menuWrappers.forEach(menuWrapper => {
@ -65,35 +84,26 @@ document.addEventListener('DOMContentLoaded', function (event) {
});
});
//- Open/close menu on the right
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
rightMenus.forEach(rM => rM.classList.toggle('offsite-is-closed'));
viewsContainer.forEach(vC => vC.classList.toggle('sidebar-is-closed'));
})
});
//- Watch every sib-forms & update data-src of linked sib-display
document.querySelectorAll('sib-form').forEach(function(el) {
el.addEventListener("save", function(event) {
document.querySelectorAll('sib-form').forEach(function (el) {
el.addEventListener("save", function (event) {
//clear cache on this resource
//NOTE: this is required because the cache is not refreshed after POSTing changes on the resource
if(el.component.resource != null) el.component.resource.clearCache();
if (el.component.resource != null) el.component.resource.clearCache();
// if of the edited resource || id of the container of the created resource
const resourceId = event.detail.resource['@id'] || el.dataset.src;
//update all displays which use this resource
Array.from(document.querySelectorAll('sib-display'))
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
.forEach(e => e.dataset.src = e.dataset.src); // and update them
.filter(sibDisplay => sibDisplay.component.resourceId == resourceId) // keep only elements with resource == edited resource
.forEach(e => e.dataset.src = e.dataset.src); // and update them
});
});
document.querySelector('sib-auth').getUser().then(user => {
if (user !== null) {
document.querySelectorAll('.notLoggedIn').forEach(el => el.style.visibility = 'visible');
// Hide login button if already logged
document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
// Set current user id on set-user-id of sib-display
@ -106,13 +116,52 @@ document.addEventListener('DOMContentLoaded', function (event) {
// Document -> close menu
document.addEventListener("click", event => {
if (!event.target.closest('#user-controls')) closeUserControls();
if (!event.target.closest('#user-controls')) {
closeUserControls();
}
if (!event.target.closest('#main__menu') && event.target.id != "toggleMainMenu") {
closeLeftMenu();
}
if (!event.target.className.includes('jsMobileSidebarOpenButton') && !event.target.className.includes('jsOffsiteToggle')) {
closeRightMenu();
}
});
document.querySelector('#toggleMainMenu').addEventListener('click', event => {
let leftMenu = document.querySelector('#main__menu');
if (leftMenu.hasAttribute('open')) {
closeLeftMenu();
} else {
leftMenu.setAttribute('open', '');
}
});
Array.from(document.querySelectorAll('.jsMobileSidebarOpenButton')).forEach(el => {
el.addEventListener('click', event => {
openRightMenu();
});
});
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
rightMenus.forEach(rightMenu => {
const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
btnRightMenu.addEventListener('click', e => {
if (rightMenu.hasAttribute('open')) {
closeRightMenu();
} else {
openRightMenu();
}
})
});
// listen for keypress
document.onkeydown = (e) => {
e = e || window.event;
if (e.key === "Escape" || e.key === "Esc") closeUserControls();
if (e.key === "Escape" || e.key === "Esc") {
closeUserControls();
closeLeftMenu();
closeRightMenu();
}
};
});