From 5b7c246af16028f0900a79fdaeb20c5de306ed60 Mon Sep 17 00:00:00 2001 From: Burak Civan Date: Mon, 20 Jun 2022 14:02:25 +0300 Subject: [PATCH] added notes for scripts --- .../components/layouts/admin/scripts.blade.php | 18 +++++++++++++++++- .../layouts/portal/scripts.blade.php | 15 +++++++++++++++ 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/resources/views/components/layouts/admin/scripts.blade.php b/resources/views/components/layouts/admin/scripts.blade.php index 3afad24b9..84f19c3c7 100644 --- a/resources/views/components/layouts/admin/scripts.blade.php +++ b/resources/views/components/layouts/admin/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")) { @@ -52,18 +54,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"); } + //if there are notifications, remove count badge function notificationCount(action) { let notification_count = document.querySelector('[data-notification-count]'); @@ -72,6 +77,7 @@ } } + //slide menu actions together responsive version function slideMenu() { if (document.body.clientWidth <= 1280) { mobileMenuHidden(); @@ -99,10 +105,12 @@ 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"); + //if event target, profile if (iconButton.getAttribute("data-menu") === "profile-menu") { if (iconButton.children[0].textContent != "cancel") { iconButton.children[0].classList.remove("hidden"); @@ -113,6 +121,7 @@ } } + //remove active (cancel text) class form target icon menuButtons.forEach((button) => { if (icon) { if (button.getAttribute("data-menu") !== menuRef && iconButton.children[0].textContent != "cancel") { @@ -123,6 +132,7 @@ }); menus.forEach((menu) => { + //add active (cancel text) class form target icon if (menu.classList.contains(menuRef) && iconButton.children[0].textContent != "cancel") { iconButton.children[0].textContent = "cancel"; iconButton.children[0].classList.add("active"); @@ -135,6 +145,7 @@ notificationCount("none"); + //remove active (cancel text) class form target icon } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") { iconButton.children[0].textContent = icon; iconButton.children[0].classList.remove("active"); @@ -146,12 +157,13 @@ menuClose.classList.add("hidden"); notificationCount("flex"); - + //left menu slide to left } else { menu.classList.add("ltr:-left-80", "rtl:-right-80"); menu.classList.remove("ltr:left-14", "rtl:right-14"); } + //close icon click event menuClose.addEventListener("click", function() { menu.classList.add("ltr:-left-80", "rtl:-right-80"); menu.classList.remove("ltr:left-14", "rtl:right-14"); @@ -165,6 +177,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 +193,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 +207,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 +216,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..33a36c78f 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,10 +92,12 @@ 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"); + //if event target, profile if (iconButton.getAttribute("data-menu") === "profile-menu") { if (iconButton.children[0].textContent != "cancel") { iconButton.children[0].classList.remove("hidden"); @@ -101,6 +108,7 @@ } } + //remove active (cancel text) class form target icon menuButtons.forEach((button) => { if (icon) { if (button.getAttribute("data-menu") !== menuRef && iconButton.children[0].textContent != "cancel") { @@ -111,6 +119,7 @@ }); menus.forEach((menu) => { + //add active (cancel text) class form target icon if (menu.classList.contains(menuRef) && iconButton.children[0].textContent != "cancel") { iconButton.children[0].textContent = "cancel"; iconButton.children[0].classList.add("active"); @@ -121,6 +130,7 @@ toggleButton.classList.add("invisible"); menuClose.classList.remove("hidden"); + //remove active (cancel text) class form target icon } else if (menu.classList.contains(menuRef) && iconButton.children[0].textContent == "cancel") { iconButton.children[0].textContent = icon; iconButton.children[0].classList.remove("active"); @@ -130,11 +140,13 @@ mainContent.classList.remove("hidden"); toggleButton.classList.remove("invisible"); menuClose.classList.add("hidden"); + //left menu slide to left } else { menu.classList.add("ltr:-left-80", "rtl:-right-80"); menu.classList.remove("ltr:left-14", "rtl:right-14"); } + //close icon click event menuClose.addEventListener("click", function() { menu.classList.add("ltr:-left-80", "rtl:-right-80"); iconButton.children[0].textContent = icon; @@ -147,6 +159,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 +177,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 +186,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");