Files
asset-management-system/resources/assets/js/custom-switcher.js
Arya Dwi Putra 5514f7de5b first commit
2025-12-01 06:41:22 +07:00

1125 lines
48 KiB
JavaScript

"use strict";
import {ResizeMenu, toggleSidemenu, closedSidemenuFn, detachedFn, iconTextFn, doubletFn, menuClickFn, menuhoverFn, iconClickFn, iconHoverFn, setNavActive, clearNavDropdown,
checkHoriMenu, iconOverayFn} from './defaultmenu'
let mainContent;
(function () {
let html = document.querySelector('html');
mainContent = document.querySelector('.main-content');
if (document.querySelector("#switcher-canvas")) {
localStorageBackup2();
switcherClick();
checkOptions();
setTimeout(() => {
checkOptions();
}, 1000);
}
/* LTR to RTL */
// html.setAttribute("dir" , "rtl") // for rtl version
})();
function switcherClick() {
let ltrBtn, rtlBtn, verticalBtn, horiBtn, lightBtn, darkBtn, boxedBtn, defaultwidthBtn, fullwidthBtn, scrollHeaderBtn, scrollMenuBtn, fixedHeaderBtn, fixedMenuBtn, lightHeaderBtn, darkHeaderBtn, colorHeaderBtn, gradientHeaderBtn, lightMenuBtn, darkMenuBtn, colorMenuBtn, gradientMenuBtn, transparentMenuBtn, transparentHeaderBtn, regular, classic, modern,flat, defaultBtn, closedBtn, iconTextBtn, detachedBtn, overlayBtn, doubleBtn, menuClickBtn, menuHoverBtn, iconClickBtn, iconHoverBtn, primaryDefaultColor1Btn, primaryDefaultColor2Btn, primaryDefaultColor3Btn, primaryDefaultColor4Btn, primaryDefaultColor5Btn, bgDefaultColor1Btn, bgDefaultColor2Btn, bgDefaultColor3Btn, bgDefaultColor4Btn, bgDefaultColor5Btn, bgImage1Btn, bgImage2Btn, bgImage3Btn, bgImage4Btn, bgImage5Btn, ResetAll, resetBtn, loaderEnable, loaderDisable;
let html = document.querySelector('html');
lightBtn = document.querySelector('#switcher-light-theme');
darkBtn = document.querySelector('#switcher-dark-theme');
ltrBtn = document.querySelector('#switcher-ltr');
rtlBtn = document.querySelector('#switcher-rtl');
verticalBtn = document.querySelector('#switcher-vertical');
horiBtn = document.querySelector('#switcher-horizontal');
defaultwidthBtn = document.querySelector('#switcher-default-width');
boxedBtn = document.querySelector('#switcher-boxed');
fullwidthBtn = document.querySelector('#switcher-full-width');
fixedMenuBtn = document.querySelector('#switcher-menu-fixed');
scrollMenuBtn = document.querySelector('#switcher-menu-scroll');
fixedHeaderBtn = document.querySelector('#switcher-header-fixed');
scrollHeaderBtn = document.querySelector('#switcher-header-scroll');
lightHeaderBtn = document.querySelector('#switcher-header-light');
darkHeaderBtn = document.querySelector('#switcher-header-dark');
colorHeaderBtn = document.querySelector('#switcher-header-primary');
gradientHeaderBtn = document.querySelector('#switcher-header-gradient');
transparentHeaderBtn = document.querySelector('#switcher-header-transparent');
lightMenuBtn = document.querySelector('#switcher-menu-light');
darkMenuBtn = document.querySelector('#switcher-menu-dark');
colorMenuBtn = document.querySelector('#switcher-menu-primary');
gradientMenuBtn = document.querySelector('#switcher-menu-gradient');
transparentMenuBtn = document.querySelector('#switcher-menu-transparent');
regular = document.querySelector('#switcher-regular');
classic = document.querySelector('#switcher-classic');
modern = document.querySelector('#switcher-modern');
flat = document.querySelector('#switcher-flat');
defaultBtn = document.querySelector('#switcher-default-menu');
menuClickBtn = document.querySelector('#switcher-menu-click');
menuHoverBtn = document.querySelector('#switcher-menu-hover');
iconClickBtn = document.querySelector('#switcher-icon-click');
iconHoverBtn = document.querySelector('#switcher-icon-hover');
closedBtn = document.querySelector('#switcher-closed-menu');
iconTextBtn = document.querySelector('#switcher-icontext-menu');
overlayBtn = document.querySelector('#switcher-icon-overlay');
doubleBtn = document.querySelector('#switcher-double-menu');
detachedBtn = document.querySelector('#switcher-detached');
resetBtn = document.querySelector('#resetbtn');
primaryDefaultColor1Btn = document.querySelector('#switcher-primary');
primaryDefaultColor2Btn = document.querySelector('#switcher-primary1');
primaryDefaultColor3Btn = document.querySelector('#switcher-primary2');
primaryDefaultColor4Btn = document.querySelector('#switcher-primary3');
primaryDefaultColor5Btn = document.querySelector('#switcher-primary4');
bgDefaultColor1Btn = document.querySelector('#switcher-background');
bgDefaultColor2Btn = document.querySelector('#switcher-background1');
bgDefaultColor3Btn = document.querySelector('#switcher-background2');
bgDefaultColor4Btn = document.querySelector('#switcher-background3');
bgDefaultColor5Btn = document.querySelector('#switcher-background4');
bgImage1Btn = document.querySelector('#switcher-bg-img');
bgImage2Btn = document.querySelector('#switcher-bg-img1');
bgImage3Btn = document.querySelector('#switcher-bg-img2');
bgImage4Btn = document.querySelector('#switcher-bg-img3');
bgImage5Btn = document.querySelector('#switcher-bg-img4');
ResetAll = document.querySelector('#reset-all');
loaderEnable = document.querySelector('#switcher-loader-enable');
loaderDisable = document.querySelector('#switcher-loader-disable');
// primary theme
let primaryColor1Var = primaryDefaultColor1Btn.addEventListener('click', () => {
localStorage.setItem("primaryRGB", "42 ,16, 164");
html.style.setProperty('--primary-rgb', `42 ,16, 164`);
})
let primaryColor2Var = primaryDefaultColor2Btn.addEventListener('click', () => {
localStorage.setItem("primaryRGB", "125 ,0, 189");
html.style.setProperty('--primary-rgb', `125 ,0, 189`);
})
let primaryColor3Var = primaryDefaultColor3Btn.addEventListener('click', () => {
localStorage.setItem("primaryRGB", "4, 118, 141");
html.style.setProperty('--primary-rgb', `4, 118, 141`);
})
let primaryColor4Var = primaryDefaultColor4Btn.addEventListener('click', () => {
localStorage.setItem("primaryRGB", "138, 0, 32");
html.style.setProperty('--primary-rgb', `138, 0, 32`);
})
let primaryColor5Var = primaryDefaultColor5Btn.addEventListener('click', () => {
localStorage.setItem("primaryRGB", "9 ,124, 103");
html.style.setProperty('--primary-rgb', `9 ,124, 103`);
})
// Background theme
let backgroundColor1Var = bgDefaultColor1Btn.addEventListener('click', () => {
localStorage.setItem('bodyBgRGB', "0,8,52");
localStorage.setItem('bodylightRGB', "14,22,66");
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-menu-styles', 'dark');
html.setAttribute('data-header-styles', 'dark');
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
document.querySelector('html').style.setProperty('--body-bg-rgb2', localStorage.bodylightRGB);
document.querySelector('html').style.setProperty('--light-rgb', "14,22,66");
document.querySelector('html').style.setProperty('--form-control-bg', "rgb(14,22,66)");
document.querySelector('html').style.setProperty('--input-border', "rgba(255,255,255,0.1)");
document.querySelector('html').style.setProperty('--gray-3', "rgba(255,255,255,0.1)");
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
localStorage.setItem("vyzorMenu", "dark");
localStorage.setItem("vyzorHeader", "dark");
})
let backgroundColor2Var = bgDefaultColor2Btn.addEventListener('click', () => {
localStorage.setItem('bodyBgRGB', "58, 0, 109");
localStorage.setItem('bodylightRGB', "72 ,14, 123");
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-menu-styles', 'dark');
html.setAttribute('data-header-styles', 'dark');
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
document.querySelector('html').style.setProperty('--body-bg-rgb2', localStorage.bodylightRGB);
document.querySelector('html').style.setProperty('--light-rgb', "72 ,14, 123");
document.querySelector('html').style.setProperty('--form-control-bg', "rgb(72 ,14, 123)");
document.querySelector('html').style.setProperty('--input-border', "rgba(255,255,255,0.1)");
document.querySelector('html').style.setProperty('--gray-3', "rgba(255,255,255,0.1)");
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
localStorage.setItem("vyzorMenu", "dark");
localStorage.setItem("vyzorHeader", "dark");
})
let backgroundColor3Var = bgDefaultColor3Btn.addEventListener('click', () => {
localStorage.setItem('bodyBgRGB', "0 ,59, 70");
localStorage.setItem('bodylightRGB', "14, 73, 84");
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-menu-styles', 'dark');
html.setAttribute('data-header-styles', 'dark');
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
document.querySelector('html').style.setProperty('--body-bg-rgb2', localStorage.bodylightRGB);
document.querySelector('html').style.setProperty('--light-rgb', "14, 73, 84");
document.querySelector('html').style.setProperty('--form-control-bg', "rgb(14, 73, 84)");
document.querySelector('html').style.setProperty('--input-border', "rgba(255,255,255,0.1)");
document.querySelector('html').style.setProperty('--gray-3', "rgba(255,255,255,0.1)");
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
localStorage.setItem("vyzorMenu", "dark");
localStorage.setItem("vyzorHeader", "dark");
})
let backgroundColor4Var = bgDefaultColor4Btn.addEventListener('click', () => {
localStorage.setItem('bodyBgRGB', "65, 0, 0");
localStorage.setItem('bodylightRGB', "79 ,14, 14");
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-menu-styles', 'dark');
html.setAttribute('data-header-styles', 'dark');
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
document.querySelector('html').style.setProperty('--body-bg-rgb2', localStorage.bodylightRGB);
document.querySelector('html').style.setProperty('--light-rgb', "79 ,14, 14");
document.querySelector('html').style.setProperty('--form-control-bg', "rgb(79 ,14, 14)");
document.querySelector('html').style.setProperty('--input-border', "rgba(255,255,255,0.1)");
document.querySelector('html').style.setProperty('--gray-3', "rgba(255,255,255,0.1)");
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
localStorage.setItem("vyzorMenu", "dark");
localStorage.setItem("vyzorHeader", "dark");
})
let backgroundColor5Var = bgDefaultColor5Btn.addEventListener('click', () => {
localStorage.setItem('bodyBgRGB', "1 ,77, 46");
localStorage.setItem('bodylightRGB', "15 ,91, 60");
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-menu-styles', 'dark');
html.setAttribute('data-header-styles', 'dark');
document.querySelector('html').style.setProperty('--body-bg-rgb', localStorage.bodyBgRGB);
document.querySelector('html').style.setProperty('--body-bg-rgb2', localStorage.bodylightRGB);
document.querySelector('html').style.setProperty('--light-rgb', "15 ,91, 60");
document.querySelector('html').style.setProperty('--form-control-bg', "rgb(15 ,91, 60)");
document.querySelector('html').style.setProperty('--input-border', "rgba(255,255,255,0.1)");
document.querySelector('html').style.setProperty('--gray-3', "rgba(255,255,255,0.1)");
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
localStorage.setItem("vyzorMenu", "dark");
localStorage.setItem("vyzorHeader", "dark");
})
// Bg image
let bgImg1Var = bgImage1Btn.addEventListener('click', () => {
html.setAttribute('data-bg-img', 'bgimg1')
localStorage.setItem("bgimg", "bgimg1")
})
let bgImg2Var = bgImage2Btn.addEventListener('click', () => {
html.setAttribute('data-bg-img', 'bgimg2')
localStorage.setItem("bgimg", "bgimg2")
})
let bgImg3Var = bgImage3Btn.addEventListener('click', () => {
html.setAttribute('data-bg-img', 'bgimg3')
localStorage.setItem("bgimg", "bgimg3")
})
let bgImg4Var = bgImage4Btn.addEventListener('click', () => {
html.setAttribute('data-bg-img', 'bgimg4')
localStorage.setItem("bgimg", "bgimg4")
})
let bgImg5Var = bgImage5Btn.addEventListener('click', () => {
html.setAttribute('data-bg-img', 'bgimg5')
localStorage.setItem("bgimg", "bgimg5")
})
/* Light Layout Start */
let lightThemeVar = lightBtn.addEventListener('click', () => {
lightFn();
localStorage.setItem("vyzorHeader", 'light');
localStorage.removeItem("bodylightRGB")
localStorage.removeItem("bodyBgRGB")
localStorage.removeItem("vyzorMenu")
if (html.getAttribute('data-nav-layout') === 'horizontal') {
html.setAttribute('data-header-styles', 'transparent');
}
})
/* Light Layout End */
/* Dark Layout Start */
let darkThemeVar = darkBtn.addEventListener('click', () => {
darkFn();
localStorage.setItem("vyzorMenu", 'dark');
localStorage.setItem("vyzorHeader", 'transparent');
if (html.getAttribute('data-nav-layout') === 'horizontal') {
html.setAttribute('data-header-styles', 'dark');
}
});
/* Dark Layout End */
/* Light Menu Start */
let lightMenuVar = lightMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-styles', 'light');
localStorage.setItem("vyzorMenu", 'light');
});
/* Light Menu End */
/* Color Menu Start */
let colorMenuVar = colorMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-styles', 'color');
localStorage.setItem("vyzorMenu", 'color');
});
/* Color Menu End */
/* Dark Menu Start */
let darkMenuVar = darkMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-styles', 'dark');
localStorage.setItem("vyzorMenu", 'dark');
});
/* Dark Menu End */
/* Gradient Menu Start */
let gradientMenuVar = gradientMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-styles', 'gradient');
localStorage.setItem("vyzorMenu", 'gradient');
});
/* Gradient Menu End */
/* Transparent Menu Start */
let transparentMenuVar = transparentMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-styles', 'transparent');
localStorage.setItem("vyzorMenu", 'transparent');
});
/* Transparent Menu End */
/* Light Header Start */
let lightHeaderVar = lightHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-styles', 'light');
localStorage.setItem("vyzorHeader", 'light');
});
/* Light Header End */
/* Color Header Start */
let colorHeaderVar = colorHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-styles', 'color');
localStorage.setItem("vyzorHeader", 'color');
});
/* Color Header End */
/* Dark Header Start */
let darkHeaderVar = darkHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-styles', 'dark');
localStorage.setItem("vyzorHeader", 'dark');
});
/* Dark Header End */
/* Gradient Header Start */
let gradientHeaderVar = gradientHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-styles', 'gradient');
localStorage.setItem("vyzorHeader", 'gradient');
});
/* Gradient Header End */
/* Transparent Header Start */
let transparentHeaderVar = transparentHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-styles', 'transparent');
localStorage.setItem("vyzorHeader", 'transparent');
});
/* Transparent Header End */
/* Default Width Layout Start */
let defaultwidthVar = defaultwidthBtn.addEventListener('click', () => {
html.setAttribute('data-width', 'default');
localStorage.setItem("vyzordefaultwidth", true);
localStorage.removeItem("vyzorboxed");
localStorage.removeItem("vyzorfullwidth");
});
/* Default Width Layout End */
/* Full Width Layout Start */
let fullwidthVar = fullwidthBtn.addEventListener('click', () => {
html.setAttribute('data-width', 'fullwidth');
localStorage.setItem("vyzorfullwidth", true);
localStorage.removeItem("vyzorboxed");
localStorage.removeItem("vyzordefaultwidth");
});
/* Full Width Layout End */
/* Boxed Layout Start */
let boxedVar = boxedBtn.addEventListener('click', () => {
html.setAttribute('data-width', 'boxed');
localStorage.setItem("vyzorboxed", true);
localStorage.removeItem("vyzorfullwidth");
localStorage.removeItem("vyzordefaultwidth");
checkHoriMenu()
});
/* Boxed Layout End */
/* Flat page style Start */
let flatVar = flat.addEventListener('click', () => {
html.setAttribute('data-page-style', 'flat');
localStorage.setItem("vyzorflat", true);
localStorage.removeItem("vyzorclassic");
localStorage.removeItem("vyzormodern");
localStorage.removeItem("vyzorregular");
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.add('main-body-container');
}
});
/* Flat page style End */
/* Regular page style Start */
let shadowVar = regular.addEventListener('click', () => {
html.setAttribute('data-page-style', 'regular');
localStorage.setItem("vyzorregular", true);
localStorage.removeItem("vyzorclassic");
localStorage.removeItem("vyzormodern");
localStorage.removeItem("vyzorflat");
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
});
/* Regular page style End */
/* Classic page style Start */
let noShadowVar = classic.addEventListener('click', () => {
html.setAttribute('data-page-style', 'classic');
localStorage.setItem("vyzorclassic", true);
localStorage.removeItem("vyzorregular");
localStorage.removeItem("vyzormodern");
localStorage.removeItem("vyzorflat");
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
});
/* Classic page style End */
/* modern page style Start */
let modernVar = modern.addEventListener('click', () => {
html.setAttribute('data-page-style', 'modern');
localStorage.setItem("vyzormodern", true);
localStorage.removeItem("vyzorregular");
localStorage.removeItem("vyzorclassic");
localStorage.removeItem("vyzorflat");
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
});
/* modern page style End */
/* Header-Position Styles Start */
let fixedHeaderVar = fixedHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-position', 'fixed');
localStorage.setItem("vyzorheaderfixed", true);
localStorage.removeItem("vyzorheaderscrollable");
});
let scrollHeaderVar = scrollHeaderBtn.addEventListener('click', () => {
html.setAttribute('data-header-position', 'scrollable');
localStorage.setItem("vyzorheaderscrollable", true);
localStorage.removeItem("vyzorheaderfixed");
});
/* Header-Position Styles End */
/* Menu-Position Styles Start */
let fixedMenuVar = fixedMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-position', 'fixed');
localStorage.setItem("vyzormenufixed", true);
localStorage.removeItem("vyzormenuscrollable");
});
let scrollMenuVar = scrollMenuBtn.addEventListener('click', () => {
html.setAttribute('data-menu-position', 'scrollable');
localStorage.setItem("vyzormenuscrollable", true);
localStorage.removeItem("vyzormenufixed");
});
/* Menu-Position Styles End */
/* Default Sidemenu Start */
let defaultVar = defaultBtn.addEventListener('click', () => {
html.setAttribute('data-vertical-style', 'default');
html.setAttribute('data-nav-layout', 'vertical');
toggleSidemenu();
localStorage.setItem("vyzorverticalstyles", 'default');
document.querySelectorAll(".main-menu>li.open").forEach((ele) => {
if (!ele.classList.contains('active')) {
ele.classList.remove('open')
ele.querySelector('ul').style.display = 'none'
}
})
});
/* Default Sidemenu End */
/* Closed Sidemenu Start */
let closedVar = closedBtn.addEventListener('click', () => {
closedSidemenuFn();
localStorage.setItem("vyzorverticalstyles", 'closed');
document.querySelectorAll(".main-menu>li.open").forEach((ele) => {
if (!ele.classList.contains('active')) {
ele.classList.remove('open')
ele.querySelector('ul').style.display = 'none'
}
})
});
/* Closed Sidemenu End */
/* Hover Submenu Start */
let detachedVar = detachedBtn.addEventListener('click', () => {
detachedFn();
localStorage.setItem("vyzorverticalstyles", 'detached');
});
/* Hover Submenu End */
/* Icon Text Sidemenu Start */
let iconTextVar = iconTextBtn.addEventListener('click', () => {
iconTextFn();
localStorage.setItem("vyzorverticalstyles", 'icontext');
});
/* Icon Text Sidemenu End */
/* Icon Overlay Sidemenu Start */
let overlayVar = overlayBtn.addEventListener('click', () => {
iconOverayFn();
localStorage.setItem("vyzorverticalstyles", 'overlay');
document.querySelectorAll(".main-menu>li.open").forEach((ele) => {
if (!ele.classList.contains('active')) {
ele.classList.remove('open')
ele.querySelector('ul').style.display = 'none'
}
})
});
/* Icon Overlay Sidemenu End */
/* doublemenu Sidemenu Start */
let doubleVar = doubleBtn.addEventListener('click', () => {
doubletFn();
html.removeAttribute("data-nav-style", "");
localStorage.removeItem("vyzornavstyles");
localStorage.setItem("vyzorverticalstyles", 'doublemenu');
});
/* doublemenu Sidemenu End */
/* Menu Click Sidemenu Start */
let menuClickVar = menuClickBtn.addEventListener('click', () => {
html.removeAttribute('data-vertical-style');
menuClickFn();
localStorage.setItem("vyzornavstyles", 'menu-click');
localStorage.removeItem("vyzorverticalstyles");
document.querySelectorAll(".main-menu>li.open").forEach((ele) => {
if (!ele.classList.contains('active')) {
ele.classList.remove('open')
ele.querySelector('ul').style.display = 'none'
}
})
if (document.querySelector("html").getAttribute("data-nav-layout") == 'horizontal') {
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
ResizeMenu()
}
});
/* Menu Click Sidemenu End */
/* Menu Hover Sidemenu Start */
let menuhoverVar = menuHoverBtn.addEventListener('click', () => {
html.removeAttribute('data-vertical-style');
menuhoverFn();
localStorage.setItem("vyzornavstyles", 'menu-hover');
localStorage.removeItem("vyzorverticalstyles");
if (document.querySelector("html").getAttribute("data-nav-layout") == 'horizontal') {
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
ResizeMenu()
}
});
/* Menu Hover Sidemenu End */
/* icon Click Sidemenu Start */
let iconClickVar = iconClickBtn.addEventListener('click', () => {
html.removeAttribute('data-vertical-style');
iconClickFn();
localStorage.setItem("vyzornavstyles", 'icon-click');
localStorage.removeItem("vyzorverticalstyles");
if (document.querySelector("html").getAttribute("data-nav-layout") == 'horizontal') {
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
ResizeMenu()
document.querySelector("#slide-left").classList.add("d-none")
}
document.querySelectorAll(".main-menu>li.open").forEach((ele) => {
if (!ele.classList.contains('active')) {
ele.classList.remove('open')
ele.querySelector('ul').style.display = 'none'
}
})
});
/* icon Click Sidemenu End */
/* icon hover Sidemenu Start */
let iconhoverVar = iconHoverBtn.addEventListener('click', () => {
html.removeAttribute('data-vertical-style');
iconHoverFn();
localStorage.setItem("vyzornavstyles", 'icon-hover');
localStorage.removeItem("vyzorverticalstyles");
if (document.querySelector("html").getAttribute("data-nav-layout") == 'horizontal') {
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
ResizeMenu()
document.querySelector("#slide-left").classList.add("d-none")
}
});
/* icon hover Sidemenu End */
/* Sidemenu start*/
let verticalVar = verticalBtn.addEventListener('click', () => {
let mainContent = document.querySelector('.main-content');
// local storage
localStorage.removeItem("vyzorlayout");
localStorage.setItem("vyzorverticalstyles", 'default');
verticalFn();
setNavActive();
mainContent.removeEventListener('click', clearNavDropdown);
//
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
document.querySelectorAll(".slide").forEach((element) => {
if (
element.classList.contains("open") &&
!element.classList.contains("active")
) {
element.querySelector("ul").style.display = "none";
}
});
});
/* Sidemenu end */
/* horizontal start*/
let horiVar = horiBtn.addEventListener('click', () => {
let mainContent = document.querySelector('.main-content');
html.removeAttribute('data-vertical-style');
// local storage
localStorage.setItem("vyzorlayout", 'horizontal');
localStorage.removeItem("vyzorverticalstyles");
if (html.getAttribute('data-nav-layout') === 'horizontal') {
if (html.getAttribute('data-theme-mode') === 'light') {
html.setAttribute('data-header-styles', 'transparent');
html.setAttribute('data-menu-styles', 'transparent');
localStorage.setItem("vyzorMenu", ' transparent');
} else if (html.getAttribute('data-theme-mode') === 'dark') {
html.setAttribute('data-header-styles', 'dark');
}
}
horizontalClickFn();
clearNavDropdown();
mainContent.addEventListener('click', clearNavDropdown);
});
/* horizontal end*/
/* rtl start */
let rtlVar = rtlBtn.addEventListener('click', () => {
localStorage.setItem("vyzorrtl", true);
localStorage.removeItem("vyzorltr");
rtlFn();
if (document.querySelector(".noUi-target")) {
console.log("working");
document.querySelectorAll(".noUi-origin").forEach((e) => {
e.classList.add("transform-none");
});
}
});
/* rtl end */
/* ltr start */
let ltrVar = ltrBtn.addEventListener('click', () => {
// local storage
localStorage.setItem("vyzorltr", true);
localStorage.removeItem("vyzorrtl");
ltrFn();
if (document.querySelector(".noUi-target")) {
document.querySelectorAll(".noUi-origin").forEach((e) => {
e.classList.remove("transform-none");
});
}
});
/* ltr end */
// reset all start
let resetVar = ResetAll.addEventListener('click', () => {
ResetAllFn();
setNavActive();
document.querySelector('#switcher-menu-transparent').checked = true;
document.querySelectorAll(".slide").forEach((element) => {
if (
element.classList.contains("open") &&
!element.classList.contains("active")
) {
element.querySelector("ul").style.display = "none";
}
});
let html = document.querySelector('html');
html.setAttribute("data-toggled", "double-menu-open");
})
// reset all end
/* loader start */
loaderEnable.onclick = () => {
document.querySelector("html").setAttribute("loader", "enable");
localStorage.setItem("loaderEnable", "true")
}
loaderDisable.onclick = () => {
document.querySelector("html").setAttribute("loader", "disable");
localStorage.setItem("loaderEnable", "false")
}
/* loader end */
}
function ltrFn() {
let html = document.querySelector('html')
if (!document.querySelector("#style").href.includes('bootstrap.min.css')) {
document.querySelector("#style")?.setAttribute("href", "build/assets/libs/bootstrap/css/bootstrap.min.css");
}
html.setAttribute("dir", "ltr");
document.querySelector('#switcher-ltr').checked = true;
checkOptions();
}
function rtlFn() {
let html = document.querySelector('html');
html.setAttribute("dir", "rtl");
document.querySelector("#style")?.setAttribute("href", "build/assets/libs/bootstrap/css/bootstrap.rtl.min.css");
checkOptions();
}
function lightFn() {
let html = document.querySelector('html');
html.setAttribute('data-theme-mode', 'light');
html.setAttribute('data-header-styles', 'transparent');
html.setAttribute('data-menu-styles', 'transparent');
if (!localStorage.getItem('primaryRGB')) {
html.setAttribute('style', '')
}
document.querySelector('#switcher-light-theme').checked = true;
document.querySelector('#switcher-menu-transparent').checked = true;
document.querySelector('#switcher-header-transparent').checked = true;
localStorage.removeItem("vyzordarktheme");
localStorage.removeItem("vyzorbgColor");
localStorage.removeItem("vyzorheaderbg");
localStorage.removeItem("vyzorbgwhite");
localStorage.removeItem("vyzormenubg");
localStorage.removeItem("vyzormenubg");
checkOptions();
html.style.removeProperty('--body-bg-rgb');
html.style.removeProperty('--body-bg-rgb2');
html.style.removeProperty("--light-rgb");
html.style.removeProperty("--form-control-bg");
html.style.removeProperty("--gray-3");
html.style.removeProperty("--input-border");
document.querySelector("#switcher-background4").checked = false
document.querySelector("#switcher-background3").checked = false
document.querySelector("#switcher-background2").checked = false
document.querySelector("#switcher-background1").checked = false
document.querySelector("#switcher-background").checked = false
document.querySelector('#switcher-menu-transparent').checked = true;
document.querySelector('#switcher-header-transparent').checked = true;
}
function darkFn() {
let html = document.querySelector('html');
html.setAttribute('data-theme-mode', 'dark');
html.setAttribute('data-header-styles', 'transparent');
html.setAttribute('data-menu-styles', 'dark');
if (!localStorage.getItem('primaryRGB')) {
html.setAttribute('style', '')
}
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-dark').checked = true;
document.querySelector('html').style.removeProperty('--body-bg-rgb');
document.querySelector('html').style.removeProperty('--body-bg-rgb2');
document.querySelector('html').style.removeProperty('--light-rgb');
document.querySelector('html').style.removeProperty('--form-control-bg');
document.querySelector('html').style.removeProperty('--gray-3');
document.querySelector('html').style.removeProperty('--input-border');
localStorage.setItem("vyzordarktheme", true);
localStorage.removeItem("vyzorlighttheme");
localStorage.removeItem("bodyBgRGB");
localStorage.removeItem("vyzorbgColor");
localStorage.removeItem("vyzorheaderbg");
localStorage.removeItem("vyzorbgwhite");
localStorage.removeItem("vyzormenubg");
checkOptions();
document.querySelector("#switcher-background4").checked = false
document.querySelector("#switcher-background3").checked = false
document.querySelector("#switcher-background2").checked = false
document.querySelector("#switcher-background1").checked = false
document.querySelector("#switcher-background").checked = false
document.querySelector('#switcher-menu-transparent').checked = true;
document.querySelector('#switcher-header-transparent').checked = true;
}
function verticalFn() {
let html = document.querySelector('html');
html.setAttribute('data-nav-layout', 'vertical');
html.setAttribute('data-vertical-style', 'overlay');
html.removeAttribute('data-nav-style');
localStorage.removeItem('vyzornavstyles');
html.removeAttribute('data-toggled');
document.querySelector('#switcher-vertical').checked = true;
document.querySelector('#switcher-menu-click').checked = false;
document.querySelector('#switcher-menu-hover').checked = false;
document.querySelector('#switcher-icon-click').checked = false;
document.querySelector('#switcher-icon-hover').checked = false;
checkOptions();
}
function horizontalClickFn() {
document.querySelector('#switcher-horizontal').checked = true;
document.querySelector('#switcher-menu-click').checked = true;
// localStorage.setItem("vyzornavstyles", 'menu-click');
let html = document.querySelector('html');
html.setAttribute('data-nav-layout', 'horizontal');
html.removeAttribute('data-vertical-style');
if (!html.getAttribute('data-nav-style')) {
html.setAttribute('data-nav-style', 'menu-click');
}
// if (html.getAttribute('data-nav-layout') === 'horizontal' && !localStorage.vyzorHeader) {
// if (html.getAttribute('data-theme-mode') === 'light') {
// html.setAttribute('data-header-styles', 'light');
// } else if (html.getAttribute('data-theme-mode') === 'dark') {
// html.setAttribute('data-header-styles', 'dark');
// }
// }
if (!localStorage.vyzorMenu && !localStorage.bodylightRGB) {
html.setAttribute("data-menu-styles", "transparent")
document.querySelector('#switcher-menu-transparent').checked = true;
checkOptions();
}
checkOptions();
checkHoriMenu();
}
function ResetAllFn() {
let html = document.querySelector('html');
if (localStorage.getItem("vyzorlayout") == "horizontal") {
document.querySelector(".main-menu").style.display = "block"
}
checkOptions();
// clearing localstorage
localStorage.clear();
// reseting to light
lightFn();
//To reset the light-rgb
document.querySelector('html').removeAttribute("style")
// clearing attibutes
// removing header, menu, pageStyle & boxed
html.removeAttribute('data-nav-style');
html.removeAttribute('data-menu-position');
html.removeAttribute('data-header-position');
html.removeAttribute('data-page-style');
html.removeAttribute('data-width');
// removing theme styles
html.removeAttribute('data-bg-img');
// clear primary & bg color
html.style.removeProperty(`--primary-rgb`);
html.style.removeProperty(`--body-bg-rgb`);
// reseting to ltr
ltrFn();
// reseting to vertical
doubletFn();
html.setAttribute("data-toggled", "double-menu-close");
mainContent.removeEventListener('click', clearNavDropdown);
// reseting page style
document.querySelector('#switcher-classic').checked = false;
document.querySelector('#switcher-modern').checked = false;
document.querySelector('#switcher-flat').checked = true;
document.querySelector('#switcher-regular').checked = false;
// reseting layout width styles
document.querySelector('#switcher-default-width').checked = false;
document.querySelector('#switcher-full-width').checked = true;
document.querySelector('#switcher-boxed').checked = false;
// reseting menu position styles
document.querySelector('#switcher-menu-fixed').checked = true;
document.querySelector('#switcher-menu-scroll').checked = false;
// reseting header position styles
document.querySelector('#switcher-header-fixed').checked = true;
document.querySelector('#switcher-header-scroll').checked = false;
// reseting sidemenu layout styles
document.querySelector('#switcher-default-menu').checked = false;
document.querySelector('#switcher-closed-menu').checked = false;
document.querySelector('#switcher-icontext-menu').checked = false;
document.querySelector('#switcher-icon-overlay').checked = false;
document.querySelector('#switcher-detached').checked = false;
document.querySelector('#switcher-double-menu').checked = true;
// resetting theme primary
document.querySelector("#switcher-primary").checked = false
document.querySelector("#switcher-primary1").checked = false
document.querySelector("#switcher-primary2").checked = false
document.querySelector("#switcher-primary3").checked = false
document.querySelector("#switcher-primary4").checked = false
// resetting theme background
document.querySelector("#switcher-background").checked = false
document.querySelector("#switcher-background1").checked = false
document.querySelector("#switcher-background2").checked = false
document.querySelector("#switcher-background3").checked = false
document.querySelector("#switcher-background4").checked = false
// resetting navstyles
document.querySelector("#switcher-menu-click").checked = false
document.querySelector("#switcher-menu-hover").checked = false
document.querySelector("#switcher-icon-click").checked = false
document.querySelector("#switcher-icon-hover").checked = false
// to reset horizontal menu scroll
document.querySelector(".main-menu").style.marginLeft = "0px"
document.querySelector(".main-menu").style.marginRight = "0px"
}
function checkOptions() {
// dark
if (localStorage.getItem('vyzordarktheme')) {
document.querySelector('#switcher-dark-theme').checked = true;
}
// horizontal
if (localStorage.getItem('vyzorlayout') === "horizontal") {
document.querySelector('#switcher-horizontal').checked = true;
document.querySelector('#switcher-menu-click').checked = true;
}
else {
document.querySelector('#switcher-vertical').checked = true;
}
//RTL
if (localStorage.getItem('vyzorrtl')) {
document.querySelector('#switcher-rtl').checked = true;
}
else {
document.querySelector('#switcher-ltr').checked = true;
}
// light header
if (localStorage.getItem('vyzorHeader') === "light") {
document.querySelector('#switcher-header-light').checked = true;
}
// color header
if (localStorage.getItem('vyzorHeader') === "color") {
document.querySelector('#switcher-header-primary').checked = true;
}
// gradient header
if (localStorage.getItem('vyzorHeader') === "gradient") {
document.querySelector('#switcher-header-gradient').checked = true;
}
// dark header
if (localStorage.getItem('vyzorHeader') === "dark") {
document.querySelector('#switcher-header-dark').checked = true;
}
// transparent header
if (localStorage.getItem('vyzorHeader') === "transparent") {
document.querySelector('#switcher-header-transparent').checked = true;
}
// light menu
if (localStorage.getItem('vyzorMenu') === 'light') {
document.querySelector('#switcher-menu-light').checked = true;
}
// color menu
if (localStorage.getItem('vyzorMenu') === 'color') {
document.querySelector('#switcher-menu-primary').checked = true;
}
// gradient menu
if (localStorage.getItem('vyzorMenu') === 'gradient') {
document.querySelector('#switcher-menu-gradient').checked = true;
}
// dark menu
if (localStorage.getItem('vyzorMenu') === 'dark') {
document.querySelector('#switcher-menu-dark').checked = true;
}
// transparent menu
if (localStorage.getItem('vyzorMenu') === 'transparent') {
document.querySelector('#switcher-menu-transparent').checked = true;
}
//default width
if (localStorage.getItem('vyzordefaultwidth')) {
document.querySelector('#switcher-default-width').checked = true;
}
//full width
if (localStorage.getItem('vyzorfullwidth')) {
document.querySelector('#switcher-full-width').checked = true;
}
//boxed
if (localStorage.getItem('vyzorboxed')) {
document.querySelector('#switcher-boxed').checked = true;
}
//scrollable
if (localStorage.getItem('vyzorheaderscrollable')) {
document.querySelector('#switcher-header-scroll').checked = true;
}
if (localStorage.getItem('vyzormenuscrollable')) {
document.querySelector('#switcher-menu-scroll').checked = true;
}
//fixed
if (localStorage.getItem('vyzorheaderfixed')) {
document.querySelector('#switcher-header-fixed').checked = true;
}
if (localStorage.getItem('vyzormenufixed')) {
document.querySelector('#switcher-menu-fixed').checked = true;
}
//regular
if (localStorage.getItem('vyzorregular')) {
document.querySelector('#switcher-regular').checked = true;
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
}
//classic
if (localStorage.getItem('vyzorclassic')) {
document.querySelector('#switcher-classic').checked = true;
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
}
//modern
if (localStorage.getItem('vyzormodern')) {
document.querySelector('#switcher-modern').checked = true;
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.remove('main-body-container');
}
}
//flat
if (localStorage.getItem('vyzorflat')) {
document.querySelector('#switcher-flat').checked = true;
let containerDiv = document.querySelector('.page-container');
if (containerDiv) {
containerDiv.classList.add('main-body-container');
}
}
// sidemenu layout style
if (localStorage.vyzorverticalstyles) {
let verticalStyles = localStorage.getItem('vyzorverticalstyles');
switch (verticalStyles) {
case 'default':
document.querySelector('#switcher-default-menu').checked = true;
break;
case 'closed':
document.querySelector('#switcher-closed-menu').checked = true;
break;
case 'icontext':
document.querySelector('#switcher-icontext-menu').checked = true;
break;
case 'overlay':
document.querySelector('#switcher-icon-overlay').checked = true;
break;
case 'detached':
document.querySelector('#switcher-detached').checked = true;
break;
case 'doublemenu':
document.querySelector('#switcher-double-menu').checked = true;
break;
default:
document.querySelector('#switcher-double-menu').checked = true;
break;
}
}
// navigation menu style
if (localStorage.vyzornavstyles) {
let navStyles = localStorage.getItem('vyzornavstyles');
switch (navStyles) {
case 'menu-click':
document.querySelector('#switcher-menu-click').checked = true;
break;
case 'menu-hover':
document.querySelector('#switcher-menu-hover').checked = true;
break;
case 'icon-click':
document.querySelector('#switcher-icon-click').checked = true;
break;
case 'icon-hover':
document.querySelector('#switcher-icon-hover').checked = true;
break;
}
}
// loader
if (localStorage.loaderEnable != "true") {
document.querySelector("#switcher-loader-disable").checked = true
}
}
function localStorageBackup2() {
if (localStorage.bodyBgRGB || localStorage.bodylightRGB) {
document.querySelector('#switcher-dark-theme').checked = true;
document.querySelector('#switcher-menu-dark').checked = true;
document.querySelector('#switcher-header-transparent').checked = true;
}
if (localStorage.bodyBgRGB && localStorage.bodylightRGB) {
if (localStorage.bodyBgRGB == "0,8,52") {
document.querySelector("#switcher-background").checked = true
}
if (localStorage.bodyBgRGB == "58, 0, 109") {
document.querySelector("#switcher-background1").checked = true
}
if (localStorage.bodyBgRGB == "0 ,59, 70") {
document.querySelector("#switcher-background2").checked = true
}
if (localStorage.bodyBgRGB == "65, 0, 0") {
document.querySelector("#switcher-background3").checked = true
}
if (localStorage.bodyBgRGB == "1 ,77, 46") {
document.querySelector("#switcher-background4").checked = true
}
}
if (localStorage.primaryRGB) {
if (localStorage.primaryRGB == "42 ,16, 164") {
document.querySelector("#switcher-primary").checked = true
}
if (localStorage.primaryRGB == "125 ,0, 189") {
document.querySelector("#switcher-primary1").checked = true
}
if (localStorage.primaryRGB == "4, 118, 141") {
document.querySelector("#switcher-primary2").checked = true
}
if (localStorage.primaryRGB == "138, 0, 32") {
document.querySelector("#switcher-primary3").checked = true
}
if (localStorage.primaryRGB == "9 ,124, 103") {
document.querySelector("#switcher-primary4").checked = true
}
}
if (localStorage.loaderEnable == "true") {
document.querySelector("#switcher-loader-enable").checked = true
}
}