CasperSecurity
"use strict"
function addSwitcher()
{
var dzSwitcher='<div class="sidebar-right"> <div class="bg-overlay"></div><span><a class="sidebar-right-trigger wave-effect wave-effect-x" data-bs-toggle="tooltip" data-placement="right" data-original-title="Change Layout" href="javascript:void(0);"><span><i class="fa fa-cog fa-spin"></i></span></a><a class="sidebar-close-trigger" href="javascript:void(0);"><span><i class="la-times las"></i></span></a> <div class="sidebar-right-inner dz-tab-area"> <h4 class="dark:text-black">Pick your style <a href="javascript:void(0);" onclick="deleteAllCookie()" class="py-[5px] px-3 text-[13px] rounded text-white bg-primary leading-[18px] inline-block border border-primary btn-sm duration-500 hover:bg-hover-primary pull-right">Delete All Cookie</a></h4> <div class="card-tabs"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a class="nav-link tab-btn active" href="javascript:void(0);" data-tab="tab1">Theme</a></li><li class="nav-item"><a class="nav-link tab-btn" href="javascript:void(0);" data-tab="tab2">Header</a></li><li class="nav-item"><a class="nav-link tab-btn" href="javascript:void(0);" data-tab="tab3">Content</a></li></ul> </div><div class="tab-content-area tabs tab-content-default tabcontent-border"> <div class="tab-content active show" id="tab1"> <div class="admin-settings"> <div class="row"> <div class="w-full mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Background</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="theme_version" name="theme_version"> <option value="light">Light</option> <option value="dark">Dark</option> </select> </div><div class="w-1/2 mb-5"> <p class="text-[#353535] text-base mb-2 font-medium">Primary Color</p><div> <span data-placement="top" data-bs-toggle="tooltip" title="Color 1"> <input class="chk-col-primary filled-in" id="primary_color_1" name="primary_bg" type="radio" value="color_1"> <label for="primary_color_1" class="bg-label-pattern"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_2" name="primary_bg" type="radio" value="color_2"> <label for="primary_color_2"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_3" name="primary_bg" type="radio" value="color_3"> <label for="primary_color_3"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_4" name="primary_bg" type="radio" value="color_4"> <label for="primary_color_4"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_5" name="primary_bg" type="radio" value="color_5"> <label for="primary_color_5"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_6" name="primary_bg" type="radio" value="color_6"> <label for="primary_color_6"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_7" name="primary_bg" type="radio" value="color_7"> <label for="primary_color_7"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_8" name="primary_bg" type="radio" value="color_8"> <label for="primary_color_8"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_9" name="primary_bg" type="radio" value="color_9"> <label for="primary_color_9"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_10" name="primary_bg" type="radio" value="color_10"> <label for="primary_color_10"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_11" name="primary_bg" type="radio" value="color_11"> <label for="primary_color_11"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_12" name="primary_bg" type="radio" value="color_12"> <label for="primary_color_12"></label> </span> <span> <input class="chk-col-primary filled-in" id="primary_color_13" name="primary_bg" type="radio" value="color_13"> <label for="primary_color_13"></label> </span> </div></div><div class="w-1/2 mb-5"> <p class="text-[#353535] text-base mb-2 font-medium">Navigation Header</p><div> <span> <input class="chk-col-primary filled-in" id="nav_header_color_1" name="navigation_header" type="radio" value="color_1"> <label for="nav_header_color_1" class="bg-label-pattern"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_2" name="navigation_header" type="radio" value="color_2"> <label for="nav_header_color_2"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_3" name="navigation_header" type="radio" value="color_3"> <label for="nav_header_color_3"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_4" name="navigation_header" type="radio" value="color_4"> <label for="nav_header_color_4"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_5" name="navigation_header" type="radio" value="color_5"> <label for="nav_header_color_5"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_6" name="navigation_header" type="radio" value="color_6"> <label for="nav_header_color_6"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_7" name="navigation_header" type="radio" value="color_7"> <label for="nav_header_color_7"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_8" name="navigation_header" type="radio" value="color_8"> <label for="nav_header_color_8" class="border border-[#CCCCCC]"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_9" name="navigation_header" type="radio" value="color_9"> <label for="nav_header_color_9"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_10" name="navigation_header" type="radio" value="color_10"> <label for="nav_header_color_10"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_11" name="navigation_header" type="radio" value="color_11"> <label for="nav_header_color_11"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_12" name="navigation_header" type="radio" value="color_12"> <label for="nav_header_color_12"></label> </span> <span> <input class="chk-col-primary filled-in" id="nav_header_color_13" name="navigation_header" type="radio" value="color_13"> <label for="nav_header_color_13"></label> </span></div></div><div class="w-1/2 mb-5"> <p class="text-[#353535] text-base mb-2 font-medium">Header</p><div> <span> <input class="chk-col-primary filled-in" id="header_color_1" name="header_bg" type="radio" value="color_1"> <label for="header_color_1" class="bg-label-pattern"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_2" name="header_bg" type="radio" value="color_2"> <label for="header_color_2"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_3" name="header_bg" type="radio" value="color_3"> <label for="header_color_3"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_4" name="header_bg" type="radio" value="color_4"> <label for="header_color_4"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_5" name="header_bg" type="radio" value="color_5"> <label for="header_color_5"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_6" name="header_bg" type="radio" value="color_6"> <label for="header_color_6"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_7" name="header_bg" type="radio" value="color_7"> <label for="header_color_7"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_8" name="header_bg" type="radio" value="color_8"> <label for="header_color_8" class="border border-[#CCCCCC]"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_9" name="header_bg" type="radio" value="color_9"> <label for="header_color_9"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_10" name="header_bg" type="radio" value="color_10"> <label for="header_color_10"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_11" name="header_bg" type="radio" value="color_11"> <label for="header_color_11"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_12" name="header_bg" type="radio" value="color_12"> <label for="header_color_12"></label> </span> <span> <input class="chk-col-primary filled-in" id="header_color_13" name="header_bg" type="radio" value="color_13"> <label for="header_color_13"></label> </span> </div></div><div class="w-1/2 mb-5"> <p class="text-[#353535] text-base mb-2 font-medium">Sidebar</p><div> <span> <input class="chk-col-primary filled-in" id="sidebar_color_1" name="sidebar_bg" type="radio" value="color_1"> <label for="sidebar_color_1" class="bg-label-pattern"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_2" name="sidebar_bg" type="radio" value="color_2"> <label for="sidebar_color_2"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_3" name="sidebar_bg" type="radio" value="color_3"> <label for="sidebar_color_3"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_4" name="sidebar_bg" type="radio" value="color_4"> <label for="sidebar_color_4"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_5" name="sidebar_bg" type="radio" value="color_5"> <label for="sidebar_color_5"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_6" name="sidebar_bg" type="radio" value="color_6"> <label for="sidebar_color_6"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_7" name="sidebar_bg" type="radio" value="color_7"> <label for="sidebar_color_7"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_8" name="sidebar_bg" type="radio" value="color_8"> <label for="sidebar_color_8" class="border border-[#CCCCCC]"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_9" name="sidebar_bg" type="radio" value="color_9"> <label for="sidebar_color_9"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_10" name="sidebar_bg" type="radio" value="color_10"> <label for="sidebar_color_10"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_11" name="sidebar_bg" type="radio" value="color_11"> <label for="sidebar_color_11"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_12" name="sidebar_bg" type="radio" value="color_12"> <label for="sidebar_color_12"></label> </span> <span> <input class="chk-col-primary filled-in" id="sidebar_color_13" name="sidebar_bg" type="radio" value="color_13"> <label for="sidebar_color_13"></label> </span></div></div></div></div></div><div class="tab-content" id="tab2"> <div class="admin-settings"> <div class="row"> <div class="w-1/2 mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Layout</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="theme_layout" name="theme_layout"> <option value="vertical">Vertical</option> <option value="horizontal">Horizontal</option> </select> </div><div class="w-1/2 mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Header position</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="header_position" name="header_position"> <option value="static">Static</option> <option value="fixed">Fixed</option> </select> </div><div class="w-1/2 mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Sidebar</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="sidebar_style" name="sidebar_style"> <option value="full">Full</option> <option value="mini">Mini</option> <option value="compact">Compact</option> <option value="modern">Modern</option> <option value="overlay">Overlay</option> <option value="icon-hover">Icon-hover</option> </select> </div><div class="w-1/2 mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Sidebar position</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="sidebar_position" name="sidebar_position"> <option value="static">Static</option> <option value="fixed">Fixed</option> </select> </div></div></div></div><div class="tab-content" id="tab3"> <div class="admin-settings"> <div class="row"> <div class="w-full mb-5 switcher-select"> <p class="text-[#353535] text-base mb-2 font-medium">Body Font</p><select class="nice-select style-1 py-1.5 px-3 bg-transparent text-sm font-normal outline-none relative focus:ring-0 border border-b-color text-black h-[2.813rem] leading-[1.813rem]" id="typography" name="typography"> <option value="roboto">Roboto</option> <option value="poppins">Poppins</option> <option value="opensans">Open Sans</option> </select> </div></div></div></div></div><div class="note-text"><span class="text-danger">*Note :</span> This theme switcher is not part of product. It is only for demo. you will get all guideline in documentation. please check <a href="https://w3crm.dexignzone.com/tailwind/doc" target="_blank" class="text-primary">documentation.</a></div></div></div>';
if($("#dzSwitcher").length == 0) {
jQuery('body').append(dzSwitcher);
//const ps = new PerfectScrollbar('.sidebar-right-inner');
//console.log(ps.reach.x);
//ps.isRtl = false;
$('.sidebar-right-trigger,.sidebar-switcher-trigger').on('click', function() {
$('.sidebar-right').toggleClass('show');
});
$('.sidebar-close-trigger,.bg-overlay').on('click', function() {
$('.sidebar-right').removeClass('show');
});
}
}
(function($) {
"use strict"
addSwitcher();
const body = $('body');
const html = $('html');
//get the DOM elements from right sidebar
const typographySelect = $('#typography');
const versionSelect = $('#theme_version');
const layoutSelect = $('#theme_layout');
const sidebarStyleSelect = $('#sidebar_style');
const sidebarPositionSelect = $('#sidebar_position');
const headerPositionSelect = $('#header_position');
const containerLayoutSelect = $('#container_layout');
const themeDirectionSelect = $('#theme_direction');
//change the theme typography controller
typographySelect.on('change', function() {
body.attr('data-typography', this.value);
setCookie('typography', this.value);
});
//change the theme version controller
versionSelect.on('change', function() {
body.attr('data-theme-version', this.value);
setCookie('version', this.value);
});
//change the sidebar position controller
sidebarPositionSelect.on('change', function() {
this.value === "fixed" && body.attr('data-sidebar-style') === "modern" && body.attr('data-layout') === "vertical" ?
alert("Sorry, Modern sidebar layout dosen't support fixed position!") :
body.attr('data-sidebar-position', this.value);
setCookie('sidebarPosition', this.value);
setTimeout(function(){
$(window).trigger('resize');
},200);
});
//change the header position controller
headerPositionSelect.on('change', function() {
body.attr('data-header-position', this.value);
setCookie('headerPosition', this.value);
setTimeout(function(){
$(window).trigger('resize');
},200);
});
//change the theme direction (rtl, ltr) controller
themeDirectionSelect.on('change', function() {
html.attr('dir', this.value);
html.attr('class', '');
html.addClass(this.value);
body.attr('direction', this.value);
setCookie('direction', this.value);
});
//change the theme layout controller
layoutSelect.on('change', function() {
if(body.attr('data-sidebar-style') === 'overlay') {
body.attr('data-sidebar-style', 'full');
body.attr('data-layout', this.value);
return;
}
body.attr('data-layout', this.value);
setCookie('layout', this.value);
setTimeout(function(){
$(window).trigger('resize');
},200);
});
//change the container layout controller
containerLayoutSelect.on('change', function() {
if(this.value === "boxed") {
if(body.attr('data-layout') === "vertical" && body.attr('data-sidebar-style') === "full") {
body.attr('data-sidebar-style', 'overlay');
body.attr('data-container', this.value);
setTimeout(function(){
$(window).trigger('resize');
},200);
return;
}
}
body.attr('data-container', this.value);
setCookie('containerLayout', this.value);
});
//change the sidebar style controller
sidebarStyleSelect.on('change', function() {
if(body.attr('data-layout') === "horizontal") {
if(this.value === "overlay") {
alert("Sorry! Overlay is not possible in Horizontal layout.");
return;
}
}
if(body.attr('data-layout') === "vertical") {
if(body.attr('data-container') === "boxed" && this.value === "full") {
alert("Sorry! Full menu is not available in Vertical Boxed layout.");
return;
}
if(this.value === "modern" && body.attr('data-sidebar-position') === "fixed") {
alert("Sorry! Modern sidebar layout is not available in the fixed position. Please change the sidebar position into Static.");
return;
}
}
body.attr('data-sidebar-style', this.value);
if(body.attr('data-sidebar-style') === 'icon-hover') {
$('.deznav').on('hover',function() {
$('#main-wrapper').addClass('iconhover-toggle');
}, function() {
$('#main-wrapper').removeClass('iconhover-toggle');
});
}
setCookie('sidebarStyle', this.value);
//if(body.attr('data-sidebar-style') === 'mini' || body.attr('data-sidebar-style') === 'full') {
setTimeout(function(){
$(window).trigger('resize');
},200);
//}
});
//change the nav-header background controller
$('input[name="navigation_header"]').on('click', function() {
body.attr('data-nav-headerbg', this.value);
setCookie('navheaderBg', this.value);
});
//change the header background controller
$('input[name="header_bg"]').on('click', function() {
body.attr('data-headerbg', this.value);
setCookie('headerBg', this.value);
});
//change the sidebar background controller
$('input[name="sidebar_bg"]').on('click', function() {
body.attr('data-sidebarbg', this.value);
setCookie('sidebarBg', this.value);
});
//change the primary color controller
$('input[name="primary_bg"]').on('click', function() {
body.attr('data-primary', this.value);
setCookie('primary', this.value);
});
$('input[name="secondary_bg"]').on('click', function() {
body.attr('data-secondary', this.value);
setCookie('secondary', this.value);
});
})(jQuery);