demo.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. /**
  2. Demo script to handle the theme demo
  3. **/
  4. var Demo = function () {
  5. // Handle Theme Settings
  6. var handleTheme = function () {
  7. var panel = $('.theme-panel');
  8. if ($('body').hasClass('page-boxed') === false) {
  9. $('.layout-option', panel).val("fluid");
  10. }
  11. $('.sidebar-option', panel).val("default");
  12. $('.page-header-option', panel).val("fixed");
  13. $('.page-footer-option', panel).val("default");
  14. if ($('.sidebar-pos-option').attr("disabled") === false) {
  15. $('.sidebar-pos-option', panel).val(Metronic.isRTL() ? 'right' : 'left');
  16. }
  17. //handle theme layout
  18. var resetLayout = function () {
  19. $("body").
  20. removeClass("page-boxed").
  21. removeClass("page-footer-fixed").
  22. removeClass("page-sidebar-fixed").
  23. removeClass("page-header-fixed").
  24. removeClass("page-sidebar-reversed");
  25. $('.page-header > .page-header-inner').removeClass("container");
  26. if ($('.page-container').parent(".container").size() === 1) {
  27. $('.page-container').insertAfter('body > .clearfix');
  28. }
  29. if ($('.page-footer > .container').size() === 1) {
  30. $('.page-footer').html($('.page-footer > .container').html());
  31. } else if ($('.page-footer').parent(".container").size() === 1) {
  32. $('.page-footer').insertAfter('.page-container');
  33. $('.scroll-to-top').insertAfter('.page-footer');
  34. }
  35. $(".top-menu > .navbar-nav > li.dropdown").removeClass("dropdown-dark");
  36. $('body > .container').remove();
  37. };
  38. var lastSelectedLayout = '';
  39. var setLayout = function () {
  40. var layoutOption = $('.layout-option', panel).val();
  41. var sidebarOption = $('.sidebar-option', panel).val();
  42. var headerOption = $('.page-header-option', panel).val();
  43. var footerOption = $('.page-footer-option', panel).val();
  44. var sidebarPosOption = $('.sidebar-pos-option', panel).val();
  45. var sidebarStyleOption = $('.sidebar-style-option', panel).val();
  46. var sidebarMenuOption = $('.sidebar-menu-option', panel).val();
  47. var headerTopDropdownStyle = $('.page-header-top-dropdown-style-option', panel).val();
  48. if (sidebarOption == "fixed" && headerOption == "default") {
  49. alert('Default Header with Fixed Sidebar option is not supported. Proceed with Fixed Header with Fixed Sidebar.');
  50. $('.page-header-option', panel).val("fixed");
  51. $('.sidebar-option', panel).val("fixed");
  52. sidebarOption = 'fixed';
  53. headerOption = 'fixed';
  54. }
  55. resetLayout(); // reset layout to default state
  56. if (layoutOption === "boxed") {
  57. $("body").addClass("page-boxed");
  58. // set header
  59. $('.page-header > .page-header-inner').addClass("container");
  60. var cont = $('body > .clearfix').after('<div class="container"></div>');
  61. // set content
  62. $('.page-container').appendTo('body > .container');
  63. // set footer
  64. if (footerOption === 'fixed') {
  65. $('.page-footer').html('<div class="container">' + $('.page-footer').html() + '</div>');
  66. } else {
  67. $('.page-footer').appendTo('body > .container');
  68. }
  69. }
  70. if (lastSelectedLayout != layoutOption) {
  71. //layout changed, run responsive handler:
  72. Metronic.runResizeHandlers();
  73. }
  74. lastSelectedLayout = layoutOption;
  75. //header
  76. if (headerOption === 'fixed') {
  77. $("body").addClass("page-header-fixed");
  78. $(".page-header").removeClass("navbar-static-top").addClass("navbar-fixed-top");
  79. } else {
  80. $("body").removeClass("page-header-fixed");
  81. $(".page-header").removeClass("navbar-fixed-top").addClass("navbar-static-top");
  82. }
  83. //sidebar
  84. if ($('body').hasClass('page-full-width') === false) {
  85. if (sidebarOption === 'fixed') {
  86. $("body").addClass("page-sidebar-fixed");
  87. $("page-sidebar-menu").addClass("page-sidebar-menu-fixed");
  88. $("page-sidebar-menu").removeClass("page-sidebar-menu-default");
  89. Layout.initFixedSidebarHoverEffect();
  90. } else {
  91. $("body").removeClass("page-sidebar-fixed");
  92. $("page-sidebar-menu").addClass("page-sidebar-menu-default");
  93. $("page-sidebar-menu").removeClass("page-sidebar-menu-fixed");
  94. $('.page-sidebar-menu').unbind('mouseenter').unbind('mouseleave');
  95. }
  96. }
  97. // top dropdown style
  98. if (headerTopDropdownStyle === 'dark') {
  99. $(".top-menu > .navbar-nav > li.dropdown").addClass("dropdown-dark");
  100. } else {
  101. $(".top-menu > .navbar-nav > li.dropdown").removeClass("dropdown-dark");
  102. }
  103. //footer
  104. if (footerOption === 'fixed') {
  105. $("body").addClass("page-footer-fixed");
  106. } else {
  107. $("body").removeClass("page-footer-fixed");
  108. }
  109. //sidebar style
  110. if (sidebarStyleOption === 'compact') {
  111. $(".page-sidebar-menu").addClass("page-sidebar-menu-compact");
  112. } else {
  113. $(".page-sidebar-menu").removeClass("page-sidebar-menu-compact");
  114. }
  115. //sidebar menu
  116. if (sidebarMenuOption === 'hover') {
  117. if (sidebarOption == 'fixed') {
  118. $('.sidebar-menu-option', panel).val("accordion");
  119. alert("Hover Sidebar Menu is not compatible with Fixed Sidebar Mode. Select Default Sidebar Mode Instead.");
  120. } else {
  121. $(".page-sidebar-menu").addClass("page-sidebar-menu-hover-submenu");
  122. }
  123. } else {
  124. $(".page-sidebar-menu").removeClass("page-sidebar-menu-hover-submenu");
  125. }
  126. //sidebar position
  127. if (Metronic.isRTL()) {
  128. if (sidebarPosOption === 'left') {
  129. $("body").addClass("page-sidebar-reversed");
  130. $('#frontend-link').tooltip('destroy').tooltip({
  131. placement: 'right'
  132. });
  133. } else {
  134. $("body").removeClass("page-sidebar-reversed");
  135. $('#frontend-link').tooltip('destroy').tooltip({
  136. placement: 'left'
  137. });
  138. }
  139. } else {
  140. if (sidebarPosOption === 'right') {
  141. $("body").addClass("page-sidebar-reversed");
  142. $('#frontend-link').tooltip('destroy').tooltip({
  143. placement: 'left'
  144. });
  145. } else {
  146. $("body").removeClass("page-sidebar-reversed");
  147. $('#frontend-link').tooltip('destroy').tooltip({
  148. placement: 'right'
  149. });
  150. }
  151. }
  152. Layout.fixContentHeight(); // fix content height
  153. Layout.initFixedSidebar(); // reinitialize fixed sidebar
  154. };
  155. // handle theme colors
  156. var setColor = function (color) {
  157. var color_ = (Metronic.isRTL() ? color + '-rtl' : color);
  158. $('#style_color').attr("href", Layout.getLayoutCssPath() + 'themes/' + color_ + ".css");
  159. };
  160. $('.theme-colors > li', panel).click(function () {
  161. var color = $(this).attr("data-theme");
  162. setColor(color);
  163. $('ul > li', panel).removeClass("active");
  164. $(this).addClass("active");
  165. if (color === 'dark') {
  166. $('.page-actions .btn').removeClass('red-haze').addClass('btn-default btn-transparent');
  167. } else {
  168. $('.page-actions .btn').removeClass('btn-default btn-transparent').addClass('red-haze');
  169. }
  170. });
  171. // set default theme options:
  172. if ($("body").hasClass("page-boxed")) {
  173. $('.layout-option', panel).val("boxed");
  174. }
  175. if ($("body").hasClass("page-sidebar-fixed")) {
  176. $('.sidebar-option', panel).val("fixed");
  177. }
  178. if ($("body").hasClass("page-header-fixed")) {
  179. $('.page-header-option', panel).val("fixed");
  180. }
  181. if ($("body").hasClass("page-footer-fixed")) {
  182. $('.page-footer-option', panel).val("fixed");
  183. }
  184. if ($("body").hasClass("page-sidebar-reversed")) {
  185. $('.sidebar-pos-option', panel).val("right");
  186. }
  187. if ($(".page-sidebar-menu").hasClass("page-sidebar-menu-light")) {
  188. $('.sidebar-style-option', panel).val("light");
  189. }
  190. if ($(".page-sidebar-menu").hasClass("page-sidebar-menu-hover-submenu")) {
  191. $('.sidebar-menu-option', panel).val("hover");
  192. }
  193. var sidebarOption = $('.sidebar-option', panel).val();
  194. var headerOption = $('.page-header-option', panel).val();
  195. var footerOption = $('.page-footer-option', panel).val();
  196. var sidebarPosOption = $('.sidebar-pos-option', panel).val();
  197. var sidebarStyleOption = $('.sidebar-style-option', panel).val();
  198. var sidebarMenuOption = $('.sidebar-menu-option', panel).val();
  199. $('.layout-option, .page-header-top-dropdown-style-option, .page-header-option, .sidebar-option, .page-footer-option, .sidebar-pos-option, .sidebar-style-option, .sidebar-menu-option', panel).change(setLayout);
  200. };
  201. // handle theme style
  202. var setThemeStyle = function(style) {
  203. var file = (style === 'rounded' ? 'components-rounded' : 'components');
  204. file = (Metronic.isRTL() ? file + '-rtl' : file);
  205. $('#style_components').attr("href", Metronic.getGlobalCssPath() + file + ".css");
  206. if ($.cookie) {
  207. $.cookie('layout-style-option', style);
  208. }
  209. };
  210. return {
  211. //main function to initiate the theme
  212. init: function() {
  213. // handles style customer tool
  214. handleTheme();
  215. // handle layout style change
  216. $('.theme-panel .layout-style-option').change(function() {
  217. setThemeStyle($(this).val());
  218. });
  219. // set layout style from cookie
  220. if ($.cookie && $.cookie('layout-style-option') === 'rounded') {
  221. setThemeStyle($.cookie('layout-style-option'));
  222. $('.theme-panel .layout-style-option').val($.cookie('layout-style-option'));
  223. }
  224. }
  225. };
  226. }();