Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

vertical-layout.min.js 17KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. "use strict!"
  2. $(document).ready(function () {
  3. // variable
  4. var Navbarbg="themelight1"; // navbar color themelight1 / theme1
  5. var headerbg ="theme1"; // navbar color theme1 / theme2 / theme3 / theme4 / theme5 / theme6
  6. var menucaption ="theme1"; // menu caption color theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9
  7. var bgpattern ="theme1"; // background pattern theme1 / theme2 / theme3 / theme4 / theme5 / theme6
  8. var activeitemtheme ="theme1"; // menu active color theme1 / theme2 / theme3 / theme4 / theme5 / theme6 / theme7 / theme8 / theme9 / theme10 / theme11 / theme12
  9. var frametype = "theme1"; // preset frame color theme1 / theme2 / theme3 / theme4 / theme5 / theme6
  10. var layout_type = "light"; // theme layout dark / light
  11. var nav_image = "true"; // navbar image bg false / true
  12. var active_image = "img1"; // avtive navbar image layout img1 / img2 / img3 / img4 / img5 / img6
  13. var layout_width = "wide"; // theme layout wide / box
  14. var menu_effect_desktop = "shrink"; // navbar effect in desktop shrink / overlay / push
  15. var menu_effect_tablet = "overlay"; // navbar effect in tablet shrink / overlay / push
  16. var menu_effect_phone = "overlay"; // navbar effect in phone shrink / overlay / push
  17. function setCookie(cname,cvalue,exdays) {
  18. }
  19. $("#pcoded").pcodedmenu({
  20. themelayout: 'vertical',
  21. verticalMenuplacement: 'left', // value should be left/right
  22. verticalMenulayout: layout_width, // value should be wide/box
  23. MenuTrigger: 'click', // click / hover
  24. SubMenuTrigger: 'click', // click / hover
  25. activeMenuClass: 'active',
  26. ThemeBackgroundPattern: bgpattern, // pattern1, pattern2, pattern3, pattern4, pattern5, pattern6
  27. HeaderBackground: headerbg, // theme1, theme2, theme3, theme4, theme5 header color
  28. LHeaderBackground: menucaption, // theme1, theme2, theme3, theme4, theme5, theme6 brand color
  29. NavbarBackground: Navbarbg, // themelight1, theme1 // light and dark sidebar
  30. ActiveItemBackground: activeitemtheme, // theme1, theme2, theme3, theme4, theme5, theme6, theme7, theme8, theme9, theme10, theme11, theme12 mennu active item color
  31. SubItemBackground: 'theme2',
  32. ActiveItemStyle: 'style0',
  33. ItemBorder: true,
  34. ItemBorderStyle: 'none',
  35. NavbarImage:nav_image,
  36. ActiveNavbarImage: active_image,
  37. freamtype:frametype,
  38. SubItemBorder: true,
  39. DropDownIconStyle: 'style3', // Value should be style1,style2,style3
  40. menutype: 'st2', // Value should be st1, st2, st3, st4, st5 menu icon style
  41. layouttype:layout_type, // Value should be light / dark
  42. FixedNavbarPosition: true, // Value should be true / false header postion
  43. FixedHeaderPosition: true, // Value should be true / false sidebar menu postion
  44. collapseVerticalLeftHeader: true,
  45. VerticalSubMenuItemIconStyle: 'style7', // value should be style1, style2, style3, style4, style5, style6
  46. VerticalNavigationView: 'view1',
  47. verticalMenueffect: {
  48. desktop: menu_effect_desktop,
  49. tablet: menu_effect_tablet,
  50. phone: menu_effect_phone,
  51. },
  52. defaultVerticalMenu: {
  53. desktop: "expanded", // value should be offcanvas/collapsed/expanded/compact/compact-acc/fullpage/ex-popover/sub-expanded
  54. tablet: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
  55. phone: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
  56. },
  57. onToggleVerticalMenu: {
  58. desktop: "offcanvas", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
  59. tablet: "expanded", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
  60. phone: "expanded", // value should be offcanvas/collapsed/expanded/compact/fullpage/ex-popover/sub-expanded
  61. },
  62. });
  63. function handlenavimg() {
  64. $('.theme-color > a.navbg-pattern').on("click", function () {
  65. var value = $(this).attr("navbg-pattern");
  66. $('.pcoded').attr('sidebar-img-type', value);
  67. setCookie("sidebar-img-type", value, 1);
  68. });
  69. };
  70. handlenavimg();
  71. /* layout type Change function Start */
  72. function handlelayouttheme() {
  73. $('.theme-color > a.Layout-type').on("click", function () {
  74. var layout = $(this).attr("layout-type");
  75. $('.pcoded').attr("layout-type", layout);
  76. setCookie("layoutlayout", layout, 1);
  77. if(layout=='dark'){
  78. $('.pcoded-header').attr("header-theme", "theme6");
  79. $('.pcoded-navbar').attr("navbar-theme", "theme1");
  80. $('.pcoded').attr("sidebar-img", "false");
  81. $('body').addClass('dark');
  82. $('body').attr("themebg-pattern", "theme6");
  83. $('.pcoded-navigation-label').attr("menu-title-theme", "theme9");
  84. }
  85. if(layout=='light'){
  86. $('.pcoded-header').attr("header-theme", "theme1");
  87. $('.pcoded-navbar').attr("navbar-theme", "themelight1");
  88. $('.pcoded').attr("sidebar-img", "false");
  89. $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
  90. $('body').removeClass('dark');
  91. $('body').attr("themebg-pattern", "theme1");
  92. }
  93. if(layout=='img'){
  94. $('.pcoded-header').attr("header-theme", "theme1");
  95. $('.pcoded-navbar').attr("navbar-theme", "themelight1");
  96. $('.pcoded-navbar').attr("navbar-theme", "themelight1");
  97. $('.pcoded').attr("sidebar-img", "true");
  98. $('.pcoded').attr("frame-type", "theme1");
  99. $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
  100. }
  101. });
  102. };
  103. handlelayouttheme();
  104. /* Left header logo Change function Start */
  105. // function handleogortheme() {
  106. // $('.theme-color > a.logo-theme').on("click", function () {
  107. // var logotheme = $(this).attr("logo-theme");
  108. // $('.navbar-logo').attr("logo-theme", logotheme);
  109. // });
  110. // };
  111. // handleogortheme();
  112. /* Left header Theme Change function Start */
  113. function handleleftheadertheme() {
  114. $('.theme-color > a.leftheader-theme').on("click", function () {
  115. var lheadertheme = $(this).attr("lheader-theme");
  116. $('.pcoded-navigation-label').attr("menu-title-theme", lheadertheme);
  117. setCookie("menu-title-theme", lheadertheme, 1);
  118. });
  119. };
  120. handleleftheadertheme();
  121. /* Left header Theme Change function Close */
  122. /* header Theme Change function Start */
  123. function handleheadertheme() {
  124. $('.theme-color > a.header-theme').on("click", function () {
  125. var headertheme = $(this).attr("header-theme");
  126. var activeitem = $(this).attr("active-item-color");
  127. $('.pcoded-header').attr("header-theme", headertheme);
  128. $('.pcoded-navbar').attr("active-item-theme", activeitem);
  129. $('.pcoded').attr("fream-type", headertheme);
  130. $('.pcoded-navigation-label').attr("menu-title-theme", headertheme);
  131. $('body').attr("themebg-pattern", headertheme);
  132. // coockies
  133. setCookie("header-theme", headertheme, 1);
  134. setCookie("active-item-theme", activeitem, 1);
  135. setCookie("menu-title-theme", headertheme, 1);
  136. setCookie("themebg-pattern", headertheme, 1);
  137. setCookie("fream-type", headertheme, 1);
  138. });
  139. };
  140. handleheadertheme();
  141. /* header Theme Change function Close */
  142. /* Navbar Theme Change function Start */
  143. function handlenavbartheme() {
  144. $('.theme-color > a.navbar-theme').on("click", function () {
  145. var navbartheme = $(this).attr("navbar-theme");
  146. $('.pcoded-navbar').attr("navbar-theme", navbartheme);
  147. $('.pcoded').attr("sidebar-img", "false");
  148. setCookie("NavbarBackground", navbartheme, 1);
  149. setCookie("sidebar-img", "false", 1);
  150. if(navbartheme=='themelight1'){
  151. $('.pcoded-navigation-label').attr("menu-title-theme", "theme1");
  152. setCookie("menu-title-theme", "theme1", 1);
  153. }
  154. if(navbartheme=='theme1'){
  155. $('.pcoded-navigation-label').attr("menu-title-theme", "theme9");
  156. setCookie("menu-title-theme", "theme9", 1);
  157. }
  158. });
  159. };
  160. handlenavbartheme();
  161. /* Navbar Theme Change function Close */
  162. /* Active Item Theme Change function Start */
  163. function handleactiveitemtheme() {
  164. $('.theme-color > a.active-item-theme').on("click", function () {
  165. var activeitemtheme = $(this).attr("active-item-theme");
  166. $('.pcoded-navbar').attr("active-item-theme", activeitemtheme);
  167. setCookie("active-item-theme", activeitemtheme, 1);
  168. });
  169. };
  170. handleactiveitemtheme();
  171. /* Active Item Theme Change function Close */
  172. /* SubItem Theme Change function Start */
  173. // function handlesubitemtheme() {
  174. // $('.theme-color > a.sub-item-theme').on("click", function () {
  175. // var subitemtheme = $(this).attr("sub-item-theme");
  176. // $('.pcoded-navbar').attr("sub-item-theme", subitemtheme);
  177. // });
  178. // };
  179. //
  180. // handlesubitemtheme();
  181. /* SubItem Theme Change function Close */
  182. /* Theme background pattren Change function Start */
  183. function handlethemebgpattern() {
  184. $('.theme-color > a.themebg-pattern').on("click", function () {
  185. var themebgpattern = $(this).attr("themebg-pattern");
  186. $('body').attr("themebg-pattern", themebgpattern);
  187. setCookie("themebg-pattern", themebgpattern, 1);
  188. });
  189. };
  190. handlethemebgpattern();
  191. /* Theme background pattren Change function Close */
  192. /* Vertical Navigation View Change function start*/
  193. // function handleVerticalNavigationViewChange() {
  194. // $('#navigation-view').val('view1').on('change', function (get_value) {
  195. // get_value = $(this).val();
  196. // $('.pcoded').attr('vnavigation-view', get_value);
  197. // });
  198. // };
  199. //
  200. // handleVerticalNavigationViewChange();
  201. /* Theme Layout Change function Close*/
  202. /* Theme Layout Change function start*/
  203. function handlethemeverticallayout() {
  204. $('#theme-layout').change(function () {
  205. if ($(this).is(":checked")) {
  206. $('.pcoded').attr('vertical-layout', "box");
  207. setCookie("vertical-layout", "box", 1);
  208. $('#bg-pattern-visiblity').removeClass('d-none');
  209. } else {
  210. $('.pcoded').attr('vertical-layout', "wide");
  211. setCookie("vertical-layout", "wide", 1);
  212. $('#bg-pattern-visiblity').addClass('d-none');
  213. }
  214. });
  215. };
  216. handlethemeverticallayout();
  217. /* Theme Layout Change function Close*/
  218. /* Menu effect change function start*/
  219. function handleverticalMenueffect() {
  220. $('#vertical-menu-effect').val('shrink').on('change', function (get_value) {
  221. get_value = $(this).val();
  222. $('.pcoded').attr('vertical-effect', get_value);
  223. setCookie("vertical-effect", get_value, 1);
  224. });
  225. };
  226. handleverticalMenueffect();
  227. /* Menu effect change function Close*/
  228. /* Vertical Menu Placement change function start*/
  229. // function handleverticalMenuplacement() {
  230. // $('#vertical-navbar-placement').val('left').on('change', function (get_value) {
  231. // get_value = $(this).val();
  232. // $('.pcoded').attr('vertical-placement', get_value);
  233. // $('.pcoded-navbar').attr("pcoded-navbar-position", 'absolute');
  234. // $('.pcoded-header .pcoded-left-header').attr("pcoded-lheader-position", 'relative');
  235. // });
  236. // };
  237. // handleverticalMenuplacement();
  238. /* Vertical Menu Placement change function Close*/
  239. /* Vertical Active Item Style change function Start*/
  240. // function handleverticalActiveItemStyle() {
  241. // $('#vertical-activeitem-style').val('style1').on('change', function (get_value) {
  242. // get_value = $(this).val();
  243. // $('.pcoded-navbar').attr('active-item-style', get_value);
  244. // });
  245. // };
  246. // handleverticalActiveItemStyle();
  247. /* Vertical Active Item Style change function Close*/
  248. /* Vertical Item border change function Start*/
  249. // function handleVerticalIItemBorder() {
  250. // $('#vertical-item-border').change(function () {
  251. // if ($(this).is(":checked")) {
  252. // $('.pcoded-navbar .pcoded-item').attr('item-border', 'false');
  253. // } else {
  254. // $('.pcoded-navbar .pcoded-item').attr('item-border', 'true');
  255. // }
  256. // });
  257. // };
  258. //
  259. // handleVerticalIItemBorder();
  260. /* Vertical Item border change function Close*/
  261. /* Vertical SubItem border change function Start*/
  262. // function handleVerticalSubIItemBorder() {
  263. // $('#vertical-subitem-border').change(function () {
  264. // if ($(this).is(":checked")) {
  265. // $('.pcoded-navbar .pcoded-item').attr('subitem-border', 'false');
  266. // } else {
  267. // $('.pcoded-navbar .pcoded-item').attr('subitem-border', 'true');
  268. // }
  269. // });
  270. // };
  271. //
  272. // handleVerticalSubIItemBorder();
  273. /* Vertical SubItem border change function Close*/
  274. /* Vertical Item border Style change function Start*/
  275. function handleverticalboderstyle() {
  276. $('#vertical-border-style').val('solid').on('change', function (get_value) {
  277. get_value = $(this).val();
  278. $('.pcoded-navbar .pcoded-item').attr('item-border-style', get_value);
  279. });
  280. };
  281. handleverticalboderstyle();
  282. /* Vertical Item border Style change function Close*/
  283. /* Vertical Dropdown Icon change function Start*/
  284. function handleVerticalDropDownIconStyle() {
  285. $('#vertical-dropdown-icon').val('style1').on('change', function (get_value) {
  286. get_value = $(this).val();
  287. $('.pcoded-navbar .pcoded-hasmenu').attr('dropdown-icon', get_value);
  288. });
  289. };
  290. handleVerticalDropDownIconStyle();
  291. /* Vertical Dropdown Icon change function Close*/
  292. /* Vertical SubItem Icon change function Start*/
  293. function handleVerticalSubMenuItemIconStyle() {
  294. $('#vertical-subitem-icon').val('style5').on('change', function (get_value) {
  295. get_value = $(this).val();
  296. $('.pcoded-navbar .pcoded-hasmenu').attr('subitem-icon', get_value);
  297. });
  298. };
  299. handleVerticalSubMenuItemIconStyle();
  300. /* Vertical SubItem Icon change function Close*/
  301. /* Vertical Navbar Position change function Start*/
  302. function handlesidebarposition() {
  303. $('#sidebar-position').change(function () {
  304. if ($(this).is(":checked")) {
  305. $('.pcoded-navbar').attr("pcoded-navbar-position", 'fixed');
  306. $('.pcoded-header .pcoded-left-header').attr("pcoded-lheader-position", 'fixed');
  307. } else {
  308. $('.pcoded-navbar').attr("pcoded-navbar-position", 'absolute');
  309. $('.pcoded-header .pcoded-left-header').attr("pcoded-lheader-position", 'relative');
  310. }
  311. });
  312. };
  313. handlesidebarposition();
  314. /* Vertical Navbar Position change function Close*/
  315. /* Vertical Header Position change function Start*/
  316. function handleheaderposition() {
  317. $('#header-position').change(function () {
  318. if ($(this).is(":checked")) {
  319. $('.pcoded-header').attr("pcoded-header-position", 'fixed');
  320. $('.pcoded-navbar').attr("pcoded-header-position", 'fixed');
  321. $('.pcoded-main-container').css('margin-top', $(".pcoded-header").outerHeight());
  322. } else {
  323. $('.pcoded-header').attr("pcoded-header-position", 'relative');
  324. $('.pcoded-navbar').attr("pcoded-header-position", 'relative');
  325. $('.pcoded-main-container').css('margin-top', '0px');
  326. }
  327. });
  328. };
  329. handleheaderposition();
  330. /* Vertical Header Position change function Close*/
  331. /* collapseable Left Header Change Function Start here*/
  332. function handlecollapseLeftHeader() {
  333. $('#collapse-left-header').change(function () {
  334. if ($(this).is(":checked")) {
  335. $('.pcoded-header, .pcoded ').removeClass('iscollapsed');
  336. $('.pcoded-header, .pcoded').addClass('nocollapsed');
  337. } else {
  338. $('.pcoded-header, .pcoded').addClass('iscollapsed');
  339. $('.pcoded-header, .pcoded').removeClass('nocollapsed');
  340. }
  341. });
  342. };
  343. handlecollapseLeftHeader();
  344. /* collapseable Left Header Change Function Close here*/
  345. });
  346. function handlemenutype(get_value) {
  347. $('.pcoded').attr('nav-type', get_value);
  348. };
  349. handlemenutype("st2");