320 lines
13 KiB
PHP
320 lines
13 KiB
PHP
<!-- Core -->
|
|
<script src="{{ asset('public/vendor/js-cookie/js.cookie.js') }}"></script>
|
|
|
|
<script type="text/javascript">
|
|
var company_currency_code = '{{ default_currency() }}';
|
|
</script>
|
|
|
|
@stack('scripts_start')
|
|
|
|
@apexchartsScripts
|
|
|
|
@stack('charts')
|
|
|
|
<!-- <script type="text/javascript" src="{{ asset('public/akaunting-js/hotkeys.js') }}" defer></script> -->
|
|
<script type="text/javascript" src="{{ asset('public/akaunting-js/generalAction.js') }}"></script>
|
|
<script type="text/javascript" src="{{ asset('public/akaunting-js/popper.js') }}"></script>
|
|
|
|
<script type="text/javascript">
|
|
"use strict";
|
|
|
|
var Layout = (function() {
|
|
|
|
const toggleButton = document.querySelector(".toggle-button");
|
|
const sideBar = document.querySelector(".js-main-menu");
|
|
const navbarMenu = document.querySelector(".js-menu");
|
|
const mainContent = document.querySelector(".main-menu");
|
|
const menus = document.querySelectorAll(".user-menu");
|
|
const menuButtons = document.querySelectorAll(".menu-button");
|
|
const detailsEL = mainContent.getElementsByTagName("details");
|
|
const sectionContent = document.querySelector(".main-content");
|
|
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");
|
|
} 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");
|
|
}
|
|
}
|
|
})
|
|
}
|
|
);
|
|
|
|
//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.remove("ltr:rotate-90", "rtl:-rotate-90");
|
|
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");
|
|
toggleButton.querySelector("span").classList.add("ltr:rotate-90", "rtl:-rotate-90");
|
|
}
|
|
|
|
function hiddenSidebar() {
|
|
sideBar.classList.add("menu-list-hidden");
|
|
|
|
toggleButton.classList.add("ltr:left-12", "rtl:right-12");
|
|
}
|
|
|
|
function unHiddenSidebar() {
|
|
toggleButton.classList.remove("ltr:left-12", "rtl:right-12");
|
|
|
|
sideBar.classList.remove("menu-list-hidden");
|
|
}
|
|
|
|
//if there are notifications, remove count badge
|
|
function notificationCount(action) {
|
|
let notification_count = document.querySelector('[data-notification-count]');
|
|
|
|
if (notification_count) {
|
|
notification_count.style = `display: ${action}`
|
|
}
|
|
}
|
|
|
|
//slide menu actions together responsive version
|
|
function slideMenu() {
|
|
if (document.body.clientWidth <= 1280) {
|
|
mobileMenuHidden();
|
|
} else {
|
|
if (sideBar.classList.contains("menu-list-hidden")) {
|
|
unHiddenSidebar();
|
|
|
|
if (document.body.clientWidth > "991") {
|
|
contentTransitionRight();
|
|
}
|
|
} else {
|
|
hiddenSidebar();
|
|
|
|
if (document.body.clientWidth > "991") {
|
|
contentTransitionLeft();
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
toggleButton.addEventListener("click", function() {
|
|
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");
|
|
iconButton.children[1].classList.add("hidden");
|
|
} else {
|
|
iconButton.children[0].classList.add("hidden");
|
|
iconButton.children[1].classList.remove("hidden");
|
|
}
|
|
}
|
|
|
|
//remove active (cancel text) class form target icon
|
|
menuButtons.forEach((button) => {
|
|
if (icon) {
|
|
if (button.getAttribute("data-menu") !== menuRef && iconButton.children[0].textContent != "cancel") {
|
|
button.children[0].textContent = button.children[0].getAttribute("name");
|
|
button.children[0].classList.remove("active"); // inactive icon
|
|
|
|
let split_id = button.children[0].id.split("-cancel");
|
|
button.children[0].id = split_id[0];
|
|
}
|
|
}
|
|
});
|
|
|
|
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");
|
|
iconButton.children[0].id += "-cancel";
|
|
|
|
menu.classList.remove("ltr:-left-80", "rtl:-right-80");
|
|
menu.classList.add("ltr:left-14", "rtl:right-14");
|
|
|
|
mainContent.classList.add("hidden");
|
|
toggleButton.classList.add("invisible");
|
|
menuClose.classList.remove("hidden");
|
|
|
|
//for hidden menu, show close icon scenario
|
|
if (sideBar.classList.contains("menu-list-hidden")) {
|
|
menuClose.classList.add("ltr:-right-57", "rtl:right-59");
|
|
menuClose.classList.remove("ltr:-right-2", "rtl:right-12");
|
|
} else {
|
|
menuClose.classList.add("ltr:-right-2", "rtl:right-12");
|
|
}
|
|
|
|
sectionContent.classList.remove("xl:ltr:ml-0", "xl:rtl:mr-0");
|
|
sectionContent.classList.add("xl:ltr:ml-64", "xl:rtl:mr-64");
|
|
//for hidden menu, show close icon scenario
|
|
|
|
if (menuRef === "notifications-menu") {
|
|
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");
|
|
|
|
let split_id = iconButton.children[0].id.split("-cancel");
|
|
iconButton.children[0].id = split_id[0];
|
|
|
|
menu.classList.add("ltr:-left-80", "rtl:-right-80");
|
|
menu.classList.remove("ltr:left-14", "rtl:right-14");
|
|
|
|
mainContent.classList.remove("hidden");
|
|
toggleButton.classList.remove("invisible");
|
|
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");
|
|
|
|
iconButton.children[0].textContent = icon;
|
|
iconButton.children[0].classList.remove("active");
|
|
|
|
mainContent.classList.remove("hidden");
|
|
this.classList.add("hidden");
|
|
|
|
toggleButton.classList.remove("invisible");
|
|
|
|
//for hidden menu, show close icon scenario
|
|
if (sideBar.classList.contains("menu-list-hidden")) {
|
|
sectionContent.classList.add("xl:ltr:ml-0", "xl:rtl:mr-0");
|
|
sectionContent.classList.remove("xl:ltr:ml-64", "xl:rtl:mr-64");
|
|
}
|
|
//for hidden menu, show close icon scenario
|
|
});
|
|
});
|
|
}
|
|
|
|
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']");
|
|
|
|
profile_menu_html.classList.add("ltr:left-14", "rtl:right-14");
|
|
profile_menu_html.classList.remove("ltr:-left-80", "rtl:-right-80");
|
|
|
|
profile_icon_html.children[0].textContent = "cancel";
|
|
profile_icon_html.children[0].classList.add("active");
|
|
|
|
profile_icon_html.children[0].classList.remove("hidden");
|
|
profile_icon_html.children[1].classList.add("hidden");
|
|
|
|
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']");
|
|
|
|
settings_menu_html.classList.add("ltr:left-14", "rtl:right-14");
|
|
settings_menu_html.classList.remove("ltr:-left-80", "rtl:-right-80");
|
|
|
|
settings_icon_html.children[0].textContent = "cancel";
|
|
settings_icon_html.children[0].classList.add("active");
|
|
settings_icon_html.children[0].id += "-cancel";
|
|
|
|
toggleButton.classList.add("invisible");
|
|
}
|
|
}
|
|
|
|
//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");
|
|
|
|
menuBackground.classList.add("visible");
|
|
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");
|
|
mainContent.classList.remove("hidden");
|
|
|
|
menus.forEach((menu) => {
|
|
menu.classList.remove("ltr:left-14", "rtl:right-14");
|
|
menu.classList.add("ltr:-left-80", "rtl:-right-80");
|
|
});
|
|
|
|
menuButtons.forEach((iconButton) => {
|
|
iconButton.children[0].classList.remove("active");
|
|
iconButton.children[0].textContent = iconButton.children[0].getAttribute("name");
|
|
});
|
|
|
|
menuBackground.classList.remove("visible");
|
|
menuBackground.classList.add("invisible");
|
|
}
|
|
|
|
document.querySelector(".js-hamburger-menu").addEventListener("click", function() {
|
|
mobileMenuActive();
|
|
});
|
|
|
|
menuBackground.addEventListener("click", function() {
|
|
mobileMenuHidden();
|
|
});
|
|
|
|
menuButtons.forEach((iconButton) =>
|
|
iconButton.addEventListener("click", function() {
|
|
toggleMenu(iconButton, event);
|
|
})
|
|
);
|
|
})(500);
|
|
</script>
|
|
|
|
@stack('body_css')
|
|
|
|
@stack('body_stylesheet')
|
|
|
|
@stack('body_js')
|
|
|
|
@stack('body_scripts')
|
|
|
|
@livewireScripts
|
|
|
|
<script src="{{ asset('public/vendor/alpinejs/alpine.min.js') }}"></script>
|
|
|
|
<!-- Livewire -->
|
|
<script type="text/javascript">
|
|
window.livewire_app_url = {{ company_id() }};
|
|
</script>
|
|
|
|
@stack('scripts_end') |