sipadu_mbip/public/assets/js/vertical/vertical-layout.js

"use strict!"
$(document).ready(function() {
    // variable

    var Navbarbg = "themelight1"; // navbar color themelight1 / theme1
    var headerbg = "theme1"; //  navbar color theme1 / theme2 / theme3 / theme4 / theme5 / theme6
    var menucaption = "theme1"; //  menu caption color theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9
    var bgpattern = "theme1"; //  background pattern theme1 / theme2 / theme3 / theme4 / theme5 / theme6
    var activeitemtheme = "theme1"; //  menu active color theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9 / theme10 / theme11 / theme12
    var frametype = "theme1"; //  preset frame color theme1 / theme2 / theme3 / theme4 / theme5 / theme6
    var layout_type = "light"; //  theme layout dark / light
    var nav_image = "false"; //  navbar image bg false / true
    var active_image = "img1"; //  avtive navbar image layout img1 / img2 / img3 / img4 / img5 / img6
    var layout_width = "wide"; //  theme layout wide / box
    var menu_effect_desktop = "shrink"; //  navbar effect in desktop  shrink / overlay / push
    var menu_effect_tablet = "overlay"; //  navbar effect in tablet  shrink / overlay / push
    var menu_effect_phone = "overlay"; //  navbar effect in phone  shrink / overlay / push

    function setCookie(cname, cvalue, exdays) {
		var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    function checkCookie() {
        var temp = getCookie("NavbarBackground");
        if (temp != "") {
            Navbarbg = temp;
        }
        var temp = getCookie("header-theme");
        if (temp != "") {
            headerbg = temp;
        }
        var temp = getCookie("menu-title-theme");
        if (temp != "") {
            menucaption = temp;
        }
        var temp = getCookie("themebg-pattern");
        if (temp != "") {
            bgpattern = temp;
        }
        var temp = getCookie("active-item-theme");
        if (temp != "") {
            activeitemtheme = temp;
        }
        var temp = getCookie("fream-type");
        if (temp != "") {
            frametype = temp;
        }
        var temp = getCookie("layoutlayout");
        if (temp != "") {
            layout_type = temp;
        }
        var temp = getCookie("sidebar-img");
        if (temp != "") {
            nav_image = temp;
        }
        var temp = getCookie("sidebar-img-type");
        if (temp != "") {
            active_image = temp;
        }
        var temp = getCookie("vertical-layout");
        if (temp != "") {
            layout_width = temp;
        }
        var temp = getCookie("vertical-effect");
        if (temp != "") {
            menu_effect_desktop = temp;
        }
    }
    checkCookie();
    $("#pcoded").pcodedmenu({
        themelayout: 'vertical',
        verticalMenuplacement: 'left', // value should be left/right
        verticalMenulayout: layout_width, // value should be wide/box
        MenuTrigger: 'click', // click / hover
        SubMenuTrigger: 'click', // click / hover
        activeMenuClass: 'active',
        ThemeBackgroundPattern: bgpattern, // pattern1, pattern2, pattern3, pattern4, pattern5, pattern6
        HeaderBackground: headerbg, // theme1, theme2, theme3, theme4, theme5  header color
        LHeaderBackground: menucaption, // theme1, theme2, theme3, theme4, theme5, theme6   brand color
        NavbarBackground: Navbarbg, // themelight1, theme1  // light  and dark sidebar
        ActiveItemBackground: activeitemtheme, // theme1, theme2, theme3, theme4, theme5, theme6, theme7, theme8, theme9, theme10, theme11, theme12  mennu active item color
        SubItemBackground: 'theme2',
        ActiveItemStyle: 'style0',
        ItemBorder: true,
        ItemBorderStyle: 'none',
        NavbarImage: nav_image,
        ActiveNavbarImage: active_image,
        freamtype: frametype,
        SubItemBorder: true,
        DropDownIconStyle: 'style3', // Value should be style1,style2,style3
        menutype: 'st2', // Value should be st1, st2, st3, st4, st5 menu icon style
        layouttype: layout_type, // Value should be light / dark
        FixedNavbarPosition: true, // Value should be true / false  header postion
        FixedHeaderPosition: true, // Value should be true / false  sidebar menu postion
        collapseVerticalLeftHeader: true,
        VerticalSubMenuItemIconStyle: 'style7', // value should be style1, style2, style3, style4, style5, style6
        VerticalNavigationView: 'view1',
        verticalMenueffect: {
            desktop: menu_effect_desktop,
            tablet: menu_effect_tablet,
            phone: menu_effect_phone,
        },
        defaultVerticalMenu: {
            desktop: "expanded", // value should be offcanvas/collapsed/expanded/compact/compact-acc/fullpage/ex-popover/sub-expanded
            tablet: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
            phone: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
        },
        onToggleVerticalMenu: {
            desktop: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
            tablet: "expanded", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
            phone: "expanded", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
        },

    });

    function handlenavimg() {
        $('.theme-color > a.navbg-pattern').on("click", function() {
            var value = $(this).attr("navbg-pattern");
            $('.pcoded').attr('sidebar-img-type', value);
            setCookie("sidebar-img-type", value, 1);
        });
    };
    handlenavimg();
    /* layout type Change function Start */
    function handlelayouttheme() {
        $('.theme-color > a.Layout-type').on("click", function() {
            var layout = $(this).attr("layout-type");
            $('.pcoded').attr("layout-type", layout);
            setCookie("layoutlayout", layout, 1);
            if (layout == 'dark') {
                $('.pcoded-header').attr("header-theme", "theme6");
                $('.pcoded-navbar').attr("navbar-theme", "theme1");
                $('.pcoded').attr("sidebar-img", "false");
                $('body').addClass('dark');
                $('body').attr("themebg-pattern", "theme6");
                $('.pcoded-navigation-label').attr("menu-title-theme", "theme9");
                setCookie("header-theme", "theme6", 1);
                setCookie("NavbarBackground", "theme1", 1);
                setCookie("menu-title-theme", "theme9", 1);
                setCookie("themebg-pattern", "theme6", 1);
                setCookie("sidebar-img", "false", 1);
            }
            if (layout == 'light') {
                $('.pcoded-header').attr("header-theme", "theme1");
                $('.pcoded-navbar').attr("navbar-theme", "themelight1");
                $('.pcoded').attr("sidebar-img", "false");
                $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
                $('body').removeClass('dark');
                $('body').attr("themebg-pattern", "theme1");
                setCookie("header-theme", "theme1", 1);
                setCookie("NavbarBackground", "themelight1", 1);
                setCookie("menu-title-theme", "theme1", 1);
                setCookie("themebg-pattern", "theme1", 1);
                setCookie("sidebar-img", "false", 1);
            }
            if (layout == 'img') {
                $('.pcoded-header').attr("header-theme", "theme1");
                $('.pcoded-navbar').attr("navbar-theme", "themelight1");
                $('.pcoded-navbar').attr("navbar-theme", "themelight1");
                $('.pcoded').attr("sidebar-img", "true");
                $('.pcoded').attr("frame-type", "theme1");
                $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
                setCookie("header-theme", "theme1", 1);
                setCookie("NavbarBackground", "themelight1", 1);
                setCookie("menu-title-theme", "theme1", 1);
                setCookie("themebg-pattern", "theme1", 1);
                setCookie("sidebar-img", "true", 1);
                setCookie("fream-type", "theme1" ,1);
            }
            if (layout == 'reset') {
                setCookie("NavbarBackground", null, 0);
                setCookie("header-theme", null, 0);
                setCookie("menu-title-theme", null, 0);
                setCookie("themebg-pattern", null, 0);
                setCookie("active-item-theme", null, 0);
                setCookie("fream-type", null, 0);
                setCookie("layoutlayout", null, 0);
                setCookie("sidebar-img", null, 0);
                setCookie("sidebar-img-type", null, 0);
                setCookie("vertical-layout", null, 0);
                setCookie("vertical-effect", null, 0);
                location.reload();
            }
        });
    };
    handlelayouttheme();

    /* Left header Theme Change function Start */
    function handleleftheadertheme() {
        $('.theme-color > a.leftheader-theme').on("click", function() {
            var lheadertheme = $(this).attr("lheader-theme");
            $('.pcoded-navigation-label').attr("menu-title-theme", lheadertheme);
            setCookie("menu-title-theme", lheadertheme, 1);
        });
    };
    handleleftheadertheme();
    /* Left header Theme Change function Close */
    /* header Theme Change function Start */
    function handleheadertheme() {
        $('.theme-color > a.header-theme').on("click", function() {
            var headertheme = $(this).attr("header-theme");
            var activeitem = $(this).attr("active-item-color");
            $('.pcoded-header').attr("header-theme", headertheme);
            $('.pcoded-navbar').attr("active-item-theme", activeitem);
            $('.pcoded').attr("fream-type", headertheme);
            $('.pcoded-navigation-label').attr("menu-title-theme", headertheme);
            $('body').attr("themebg-pattern", headertheme);

            // coockies
            setCookie("header-theme", headertheme, 1);
            setCookie("active-item-theme", activeitem, 1);
            setCookie("menu-title-theme", headertheme, 1);
            setCookie("themebg-pattern", headertheme, 1);
            setCookie("fream-type", headertheme, 1);
        });
    };
    handleheadertheme();
    /* header Theme Change function Close */
    /* Navbar Theme Change function Start */
    function handlenavbartheme() {
        $('.theme-color > a.navbar-theme').on("click", function() {
            var navbartheme = $(this).attr("navbar-theme");
            $('.pcoded-navbar').attr("navbar-theme", navbartheme);
            $('.pcoded').attr("sidebar-img", "false");
            setCookie("NavbarBackground", navbartheme, 1);
            setCookie("sidebar-img", "false", 1);
            if (navbartheme == 'themelight1') {
                $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
                setCookie("menu-title-theme", "theme1", 1);
            }
            if (navbartheme == 'theme1') {
                $('.pcoded-navigation-label').attr("menu-title-theme", "theme9");
                setCookie("menu-title-theme", "theme9", 1);
            }
        });
    };

    handlenavbartheme();
    /* Navbar Theme Change function Close */
    /* Active Item Theme Change function Start */
    function handleactiveitemtheme() {
        $('.theme-color > a.active-item-theme').on("click", function() {
            var activeitemtheme = $(this).attr("active-item-theme");
            $('.pcoded-navbar').attr("active-item-theme", activeitemtheme);
            setCookie("active-item-theme", activeitemtheme, 1);
        });
    };

    handleactiveitemtheme();
    /* Active Item Theme Change function Close */

    /* Theme background pattren Change function Start */
    function handlethemebgpattern() {
        $('.theme-color > a.themebg-pattern').on("click", function() {
            var themebgpattern = $(this).attr("themebg-pattern");
            $('body').attr("themebg-pattern", themebgpattern);
            setCookie("themebg-pattern", themebgpattern, 1);
        });
    };

    handlethemebgpattern();
    /* Theme background pattren Change function Close */

    /* Theme Layout Change function start*/
    function handlethemeverticallayout() {
        $('#theme-layout').change(function() {
            if ($(this).is(":checked")) {
                $('.pcoded').attr('vertical-layout', "box");
                setCookie("vertical-layout", "box", 1);
                $('#bg-pattern-visiblity').removeClass('d-none');

            } else {
                $('.pcoded').attr('vertical-layout', "wide");
                setCookie("vertical-layout", "wide", 1);
                $('#bg-pattern-visiblity').addClass('d-none');
            }
        });
    };
    handlethemeverticallayout();
    /* Theme Layout Change function Close*/
    /* Menu effect change function start*/
    function handleverticalMenueffect() {
        $('#vertical-menu-effect').val('shrink').on('change', function(get_value) {
            get_value = $(this).val();
            $('.pcoded').attr('vertical-effect', get_value);
            setCookie("vertical-effect", get_value, 1);
        });
    };

    handleverticalMenueffect();
    /* Menu effect change function Close*/

    /* Vertical Item border Style change function Start*/
    function handleverticalboderstyle() {
        $('#vertical-border-style').val('solid').on('change', function(get_value) {
            get_value = $(this).val();
            $('.pcoded-navbar .pcoded-item').attr('item-border-style', get_value);
        });
    };

    handleverticalboderstyle();
    /* Vertical Item border Style change function Close*/

    /* Vertical Dropdown Icon change function Start*/
    function handleVerticalDropDownIconStyle() {
        $('#vertical-dropdown-icon').val('style1').on('change', function(get_value) {
            get_value = $(this).val();
            $('.pcoded-navbar .pcoded-hasmenu').attr('dropdown-icon', get_value);
        });
    };

    handleVerticalDropDownIconStyle();
    /* Vertical Dropdown Icon change function Close*/
    /* Vertical SubItem Icon change function Start*/

    function handleVerticalSubMenuItemIconStyle() {
        $('#vertical-subitem-icon').val('style5').on('change', function(get_value) {
            get_value = $(this).val();
            $('.pcoded-navbar .pcoded-hasmenu').attr('subitem-icon', get_value);
        });
    };

    handleVerticalSubMenuItemIconStyle();
    /* Vertical SubItem Icon change function Close*/
    /* Vertical Navbar Position change function Start*/
    function handlesidebarposition() {
        $('#sidebar-position').change(function() {
            if ($(this).is(":checked")) {
                $('.pcoded-navbar').attr("pcoded-navbar-position", 'fixed');
                $('.pcoded-header .pcoded-left-header').attr("pcoded-lheader-position", 'fixed');
            } else {
                $('.pcoded-navbar').attr("pcoded-navbar-position", 'absolute');
                $('.pcoded-header .pcoded-left-header').attr("pcoded-lheader-position", 'relative');
            }
        });
    };

    handlesidebarposition();
    /* Vertical Navbar Position change function Close*/
    /* Vertical Header Position change function Start*/
    function handleheaderposition() {
        $('#header-position').change(function() {
            if ($(this).is(":checked")) {
                $('.pcoded-header').attr("pcoded-header-position", 'fixed');
                $('.pcoded-navbar').attr("pcoded-header-position", 'fixed');
                $('.pcoded-main-container').css('margin-top', $(".pcoded-header").outerHeight());
            } else {
                $('.pcoded-header').attr("pcoded-header-position", 'relative');
                $('.pcoded-navbar').attr("pcoded-header-position", 'relative');
                $('.pcoded-main-container').css('margin-top', '0px');
            }
        });
    };
    handleheaderposition();
    /* Vertical Header Position change function Close*/
    /*  collapseable Left Header Change Function Start here*/
    function handlecollapseLeftHeader() {
        $('#collapse-left-header').change(function() {
            if ($(this).is(":checked")) {
                $('.pcoded-header, .pcoded ').removeClass('iscollapsed');
                $('.pcoded-header, .pcoded').addClass('nocollapsed');
            } else {
                $('.pcoded-header, .pcoded').addClass('iscollapsed');
                $('.pcoded-header, .pcoded').removeClass('nocollapsed');
            }
        });
    };
    handlecollapseLeftHeader();
    /*  collapseable Left Header Change Function Close here*/
});

function handlemenutype(get_value) {
    $('.pcoded').attr('nav-type', get_value);
};

handlemenutype("st2");