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

fix: js right menu handler

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
Show Stats 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();
}
});
}
);

4
src/styles/content/_index.scss
View File

@ -108,6 +108,10 @@ main {
right: 0;
}
}
.jsMobileRightMenuButton {
float: right;
}
}
/* Add scrollbar to the left menu and to the content */

2
src/views/page-admin.pug
View File

@ -1,4 +1,4 @@
.with-sidebar.jsMobileSidebarAdminControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
.with-sidebar.jsMobileContentSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
.scrollbar-content.views-container.sidebar-is-closed
for component of components
if component.route

12
src/views/partials/admin/page-admin-chat-create.pug
View File

@ -13,12 +13,6 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
div
div
div#loader-users-create.loader.loader-top
div
div
div
div
div.segment.margin-bottom-medium
div.segment
solid-display.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(
@ -29,6 +23,12 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
loader-id='loader-users-title'
)
div#loader-users-create.loader.loader-top
div
div
div
div
solid-form.form#selected-community(
bind-resources
nested-field='members'