layout.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. /**
  2. Core script to handle the entire theme and core functions
  3. **/
  4. var Layout = function () {
  5. var layoutImgPath = 'admin/layout3/img/';
  6. var layoutCssPath = 'admin/layout3/css/';
  7. //* BEGIN:CORE HANDLERS *//
  8. // this function handles responsive layout on screen size resize or mobile device rotate.
  9. // Handles header
  10. var handleHeader = function () {
  11. // handle search box expand/collapse
  12. $('.page-header').on('click', '.search-form', function (e) {
  13. $(this).addClass("open");
  14. $(this).find('.form-control').focus();
  15. $('.page-header .search-form .form-control').on('blur', function (e) {
  16. $(this).closest('.search-form').removeClass("open");
  17. $(this).unbind("blur");
  18. });
  19. });
  20. // handle hor menu search form on enter press
  21. $('.page-header').on('keypress', '.hor-menu .search-form .form-control', function (e) {
  22. if (e.which == 13) {
  23. $(this).closest('.search-form').submit();
  24. return false;
  25. }
  26. });
  27. // handle header search button click
  28. $('.page-header').on('mousedown', '.search-form.open .submit', function (e) {
  29. e.preventDefault();
  30. e.stopPropagation();
  31. $(this).closest('.search-form').submit();
  32. });
  33. };
  34. // Handles main menu
  35. var handleMainMenu = function () {
  36. // handle menu toggler icon click
  37. $(".page-header .menu-toggler").on("click", function(event) {
  38. if (Metronic.getViewPort().width < 992) {
  39. var menu = $(".page-header .page-header-menu");
  40. if (menu.hasClass("page-header-menu-opened")) {
  41. menu.slideUp(300);
  42. menu.removeClass("page-header-menu-opened");
  43. } else {
  44. menu.slideDown(300);
  45. menu.addClass("page-header-menu-opened");
  46. }
  47. if ($('body').hasClass('page-header-top-fixed')) {
  48. Metronic.scrollTop();
  49. }
  50. }
  51. });
  52. // handle sub dropdown menu click for mobile devices only
  53. $(".dropdown-submenu > a").on("click", function(e) {
  54. if (Metronic.getViewPort().width < 992) {
  55. if ($(this).next().hasClass('dropdown-menu')) {
  56. e.stopPropagation();
  57. if ($(this).parent().hasClass("open")) {
  58. $(this).parent().removeClass("open");
  59. $(this).next().hide();
  60. } else {
  61. $(this).parent().addClass("open");
  62. $(this).next().show();
  63. }
  64. }
  65. }
  66. });
  67. // handle hover dropdown menu for desktop devices only
  68. if (Metronic.getViewPort().width >= 992) {
  69. $('[data-hover="megamenu-dropdown"]').not('.hover-initialized').each(function() {
  70. $(this).dropdownHover();
  71. $(this).addClass('hover-initialized');
  72. });
  73. }
  74. $(document).on('click', '.mega-menu-dropdown .dropdown-menu', function (e) {
  75. e.stopPropagation();
  76. });
  77. // handle fixed mega menu(minimized)
  78. $(window).scroll(function() {
  79. var offset = 75;
  80. if ($('body').hasClass('page-header-menu-fixed')) {
  81. if ($(window).scrollTop() > offset){
  82. $(".page-header-menu").addClass("fixed");
  83. } else {
  84. $(".page-header-menu").removeClass("fixed");
  85. }
  86. }
  87. if ($('body').hasClass('page-header-top-fixed')) {
  88. if ($(window).scrollTop() > offset){
  89. $(".page-header-top").addClass("fixed");
  90. } else {
  91. $(".page-header-top").removeClass("fixed");
  92. }
  93. }
  94. });
  95. };
  96. // Handle sidebar menu links
  97. var handleMainMenuActiveLink = function(mode, el) {
  98. var url = location.hash.toLowerCase();
  99. var menu = $('.hor-menu');
  100. if (mode === 'click' || mode === 'set') {
  101. el = $(el);
  102. } else if (mode === 'match') {
  103. menu.find("li > a").each(function() {
  104. var path = $(this).attr("href").toLowerCase();
  105. // url match condition
  106. if (path.length > 1 && url.substr(1, path.length - 1) == path.substr(1)) {
  107. el = $(this);
  108. return;
  109. }
  110. });
  111. }
  112. if (!el || el.size() == 0) {
  113. return;
  114. }
  115. if (el.attr('href').toLowerCase() === 'javascript:;' || el.attr('href').toLowerCase() === '#') {
  116. return;
  117. }
  118. // disable active states
  119. menu.find('li.active').removeClass('active');
  120. menu.find('li > a > .selected').remove();
  121. menu.find('li.open').removeClass('open');
  122. el.parents('li').each(function () {
  123. $(this).addClass('active');
  124. if ($(this).parent('ul.navbar-nav').size() === 1) {
  125. $(this).find('> a').append('<span class="selected"></span>');
  126. }
  127. });
  128. };
  129. // Handles main menu on window resize
  130. var handleMainMenuOnResize = function() {
  131. // handle hover dropdown menu for desktop devices only
  132. if (Metronic.getViewPort().width >= 992) {
  133. $('.hor-menu [data-hover="megamenu-dropdown"]').not('.hover-initialized').each(function() {
  134. $(this).dropdownHover();
  135. $(this).addClass('hover-initialized');
  136. });
  137. $('.hor-menu .navbar-nav li.open').removeClass('open');
  138. $(".page-header-menu").css("display", "block").removeClass('page-header-menu-opened');
  139. } else {
  140. $(".page-header-menu").css("display", "none");
  141. // disable hover bootstrap dropdowns plugin
  142. $('.hor-menu [data-hover="megamenu-dropdown"].hover-initialized').each(function() {
  143. $(this).unbind('hover');
  144. $(this).parent().unbind('hover').find('.dropdown-submenu').each(function() {
  145. $(this).unbind('hover');
  146. });
  147. $(this).removeClass('hover-initialized');
  148. });
  149. }
  150. };
  151. var handleContentHeight = function() {
  152. var height;
  153. //if ($('body').height() < Metronic.getViewPort().height) {
  154. height = Metronic.getViewPort().height -
  155. $('.page-header').outerHeight() -
  156. $('.page-footer').outerHeight();
  157. $('.page-content').css('min-height', height);
  158. //}
  159. };
  160. // Handles the go to top button at the footer
  161. var handleGoTop = function () {
  162. var offset = 100;
  163. var duration = 500;
  164. if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) { // ios supported
  165. $(window).bind("touchend touchcancel touchleave", function(e){
  166. if ($(this).scrollTop() > offset) {
  167. $('.scroll-to-top').fadeIn(duration);
  168. } else {
  169. $('.scroll-to-top').fadeOut(duration);
  170. }
  171. });
  172. } else { // general
  173. $(window).scroll(function() {
  174. if ($(this).scrollTop() > offset) {
  175. $('.scroll-to-top').fadeIn(duration);
  176. } else {
  177. $('.scroll-to-top').fadeOut(duration);
  178. }
  179. });
  180. }
  181. $('.scroll-to-top').click(function(e) {
  182. e.preventDefault();
  183. $('html, body').animate({scrollTop: 0}, duration);
  184. return false;
  185. });
  186. };
  187. //* END:CORE HANDLERS *//
  188. return {
  189. // Main init methods to initialize the layout
  190. // IMPORTANT!!!: Do not modify the core handlers call order.
  191. initHeader: function() {
  192. handleHeader(); // handles horizontal menu
  193. handleMainMenu(); // handles menu toggle for mobile
  194. Metronic.addResizeHandler(handleMainMenuOnResize); // handle main menu on window resize
  195. if (Metronic.isAngularJsApp()) {
  196. handleMainMenuActiveLink('match'); // init sidebar active links
  197. }
  198. },
  199. initContent: function() {
  200. handleContentHeight(); // handles content height
  201. },
  202. initFooter: function() {
  203. handleGoTop(); //handles scroll to top functionality in the footer
  204. },
  205. init: function () {
  206. this.initHeader();
  207. this.initContent();
  208. this.initFooter();
  209. },
  210. setMainMenuActiveLink: function(mode, el) {
  211. handleMainMenuActiveLink(mode, el);
  212. },
  213. closeMainMenu: function() {
  214. $('.hor-menu').find('li.open').removeClass('open');
  215. if (Metronic.getViewPort().width < 992 && $('.page-header-menu').is(":visible")) { // close the menu on mobile view while laoding a page
  216. $('.page-header .menu-toggler').click();
  217. }
  218. },
  219. getLayoutImgPath: function() {
  220. return Metronic.getAssetsPath() + layoutImgPath;
  221. },
  222. getLayoutCssPath: function() {
  223. return Metronic.getAssetsPath() + layoutCssPath;
  224. }
  225. };
  226. }();