From 284132043ac7263852699fe4300d7c38d909d0ef Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Mon, 20 Jun 2022 13:54:12 +0300 Subject: [PATCH] added notes for menu actions --- .../layouts/admin/scripts.blade.php | 33 ++++++++++++------- .../layouts/portal/scripts.blade.php | 9 +++++ 2 files changed, 31 insertions(+), 11 deletions(-) diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php index 3afad24b9..faa77891a 100644 --- a/resources/views/components/layouts/admin/scripts.blade.php +++ b/resources/views/components/layouts/admin/scripts.blade.php @@ -31,39 +31,43 @@ const menuBackground = document.querySelector(".js-menu-background"); const menuClose = document.querySelector("[data-menu-close]"); + //animation for notification icon if (document.querySelector('[data-menu="notifications-menu"]')) { setTimeout(function() { document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate"); }, 6000); } + //chevron active class action Array.from(detailsEL).forEach((el) => { - el.addEventListener("toggle", function(e) { - if (e.target.querySelector(".material-icons-outlined")) { - e.target.querySelector(".material-icons").classList.toggle("rotate-180"); + el.addEventListener("toggle", function(e) { + if (e.target.querySelector(".material-icons-outlined")) { + e.target.querySelector(".material-icons").classList.toggle("rotate-180"); + } else { + if (e.target.querySelectorAll(".material-icons")[1]) { + e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180"); } else { - if (e.target.querySelectorAll(".material-icons")[1]) { - e.target.querySelectorAll(".material-icons")[1].classList.toggle("rotate-180"); - } else { - e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180"); - } + e.target.querySelectorAll(".material-icons")[0].classList.toggle("rotate-180"); } - }) - } - ); + } + }) + }); + //container animation when left menu shrinking function contentTransitionLeft() { sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0"); sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64"); toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90"); } + //container animation when left menu unshrinking function contentTransitionRight() { sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0"); sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64"); toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90"); } + //if there are notifications, remove count badge function notificationCount(action) { let notification_count = document.querySelector('[data-notification-count]'); @@ -72,6 +76,7 @@ } } + //slide menu actions together responsive version function slideMenu() { if (document.body.clientWidth <= 1280) { mobileMenuHidden(); @@ -99,6 +104,8 @@ slideMenu(); }); + + //general left menu actions (show settings menu etc..) function toggleMenu(iconButton, event) { const menuRef = iconButton.getAttribute("data-menu"); const icon = iconButton.children[0].getAttribute("name"); @@ -165,6 +172,7 @@ } if (document.body.clientWidth >= 1280) { + //if url have profile menu, profile menu show if (is_profile_menu == 1) { let profile_menu_html = document.querySelector(".profile-menu"); let profile_icon_html = document.querySelector("[data-menu='profile-menu']"); @@ -180,6 +188,7 @@ toggleButton.classList.add("invisible"); } + //if url have settings menu, settings menu show if (is_settings_menu == 1) { let settings_menu_html = document.querySelector(".settings-menu"); let settings_icon_html = document.querySelector("[data-menu='settings-menu']"); @@ -193,6 +202,7 @@ } } + //if mobile menu, menu is active function mobileMenuActive() { navbarMenu.classList.add("ltr:left-0", "rtl:right-0"); navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80"); @@ -201,6 +211,7 @@ menuBackground.classList.remove("invisible"); } + //if mobile menu, menu is hidden function mobileMenuHidden() { navbarMenu.classList.remove("ltr:left-0", "rtl:right-0"); navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80"); diff --git a/resources/views/components/layouts/portal/scripts.blade.php b/resources/views/components/layouts/portal/scripts.blade.php index 71c9a68a5..3b91738bb 100644 --- a/resources/views/components/layouts/portal/scripts.blade.php +++ b/resources/views/components/layouts/portal/scripts.blade.php @@ -31,12 +31,14 @@ const menuBackground = document.querySelector(".js-menu-background"); const menuClose = document.querySelector("[data-menu-close]"); + //animation for notification icon if (document.querySelector('[data-menu="notifications-menu"]')) { setTimeout(function() { document.querySelector('[data-menu="notifications-menu"]').classList.remove("animate-vibrate"); }, 6000); } + //chevron active class action Array.from(detailsEL).forEach((el) => { el.addEventListener("toggle", function(e) { if(e.target.querySelector(".material-icons-outlined")) { @@ -48,18 +50,21 @@ } ); + //container animation when left menu shrinking function contentTransitionLeft() { sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0"); sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64"); toggleButton.querySelector("span").classList.add("ltr:-rotate-90", "rtl:rotate-90"); } + //container animation when left menu unshrinking function contentTransitionRight() { sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0"); sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64"); toggleButton.querySelector("span").classList.remove("ltr:-rotate-90", "rtl:rotate-90"); } + //slide menu actions together responsive version function slideMenu() { if (document.body.clientWidth <= 1280) { mobileMenuHidden(); @@ -87,6 +92,7 @@ slideMenu(); }); + //general left menu actions (show settings menu etc..) function toggleMenu(iconButton, event) { const menuRef = iconButton.getAttribute("data-menu"); const icon = iconButton.children[0].getAttribute("name"); @@ -147,6 +153,7 @@ } if (document.body.clientWidth >= 1280) { + //if url have profile menu, profile menu show if (is_profile_menu == 1) { let profile_menu_html = document.querySelector(".profile-menu"); let profile_icon_html = document.querySelector("[data-menu='profile-menu']"); @@ -164,6 +171,7 @@ } } + //if mobile menu, menu is active function mobileMenuActive() { navbarMenu.classList.add("ltr:left-0", "rtl:right-0"); navbarMenu.classList.remove("ltr:-left-80", "rtl:-right-80"); @@ -172,6 +180,7 @@ menuBackground.classList.remove("invisible"); } + //if mobile menu, menu is hidden function mobileMenuHidden() { navbarMenu.classList.remove("ltr:left-0", "rtl:right-0"); navbarMenu.classList.add("ltr:-left-80", "rtl:-right:80");