From a752e44e066c5df9fb9b2a0522589155af3be914 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 15 Apr 2021 21:49:06 +0200
Subject: [PATCH] fix: js right menu handler
---
src/scripts/navigate-event.js | 97 ++++++++++---------
src/styles/content/_index.scss | 4 +
src/views/page-admin.pug | 2 +-
.../partials/admin/page-admin-chat-create.pug | 12 +--
4 files changed, 62 insertions(+), 53 deletions(-)
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index 739df7af..9fb041a6 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -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();
+ }
});
}
);
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 8ca009fe..782105b0 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -108,6 +108,10 @@ main {
right: 0;
}
}
+
+ .jsMobileRightMenuButton {
+ float: right;
+ }
}
/* Add scrollbar to the left menu and to the content */
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index f7adb473..6e715bf0 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -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
diff --git a/src/views/partials/admin/page-admin-chat-create.pug b/src/views/partials/admin/page-admin-chat-create.pug
index b59d8a1a..a2a70bbe 100644
--- a/src/views/partials/admin/page-admin-chat-create.pug
+++ b/src/views/partials/admin/page-admin-chat-create.pug
@@ -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'
--
GitLab