layout-c1373dcf54c1d1ba7f8a0aec8219389ce4ea1ee8f96ee0521d034d378da1f0d6.js 11 KB

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