frontend-pro.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. /**
  2. * File fronend-pro.js
  3. *
  4. * Handles toggling the navigation menu for Addon widget
  5. *
  6. * @package Astra
  7. */
  8. astraToggleSetupPro = function( mobileHeaderType, body, menu_click_listeners ) {
  9. var flag = false;
  10. var menuToggleAllLength;
  11. if ( 'off-canvas' === mobileHeaderType || 'full-width' === mobileHeaderType ) {
  12. // comma separated selector added, if menu is outside of Off-Canvas then submenu is not clickable, it work only for Off-Canvas area with dropdown style.
  13. var __main_header_all = document.querySelectorAll( '#ast-mobile-popup, #ast-mobile-header' );
  14. if ( body.classList.contains('ast-header-break-point') ) {
  15. var menu_toggle_all = document.querySelectorAll('#ast-mobile-header .main-header-menu-toggle');
  16. } else {
  17. menu_toggle_all = document.querySelectorAll('#ast-desktop-header .main-header-menu-toggle');
  18. }
  19. menuToggleAllLength = menu_toggle_all.length;
  20. } else {
  21. if ( body.classList.contains('ast-header-break-point') ) {
  22. var __main_header_all = document.querySelectorAll( '#ast-mobile-header' ),
  23. menu_toggle_all = document.querySelectorAll( '#ast-mobile-header .main-header-menu-toggle' );
  24. } else {
  25. var __main_header_all = document.querySelectorAll( '#ast-desktop-header' ),
  26. menu_toggle_all = document.querySelectorAll( '#ast-desktop-header .main-header-menu-toggle' );
  27. }
  28. menuToggleAllLength = menu_toggle_all.length;
  29. flag = menuToggleAllLength > 0 ? false : true;
  30. menuToggleAllLength = flag ? 1 : menuToggleAllLength;
  31. }
  32. if ( menuToggleAllLength > 0 || flag ) {
  33. for (var i = 0; i < menuToggleAllLength; i++) {
  34. if ( !flag ) {
  35. menu_toggle_all[i].setAttribute('data-index', i);
  36. if (!menu_click_listeners[i]) {
  37. menu_click_listeners[i] = menu_toggle_all[i];
  38. menu_toggle_all[i].addEventListener('click', astraNavMenuToggle, false);
  39. }
  40. }
  41. if ('undefined' !== typeof __main_header_all[i]) {
  42. // To handle the comma seprated selector added above we need this loop.
  43. for( var mainHeaderCount =0; mainHeaderCount < __main_header_all.length; mainHeaderCount++ ){
  44. if (document.querySelector('header.site-header').classList.contains('ast-builder-menu-toggle-link')) {
  45. var astra_menu_toggle = __main_header_all[mainHeaderCount].querySelectorAll('ul.main-header-menu .menu-item-has-children > .menu-link, ul.main-header-menu .ast-menu-toggle');
  46. } else {
  47. var astra_menu_toggle = __main_header_all[mainHeaderCount].querySelectorAll('ul.main-header-menu .ast-menu-toggle');
  48. }
  49. // Add Eventlisteners for Submenu.
  50. if (astra_menu_toggle.length > 0) {
  51. for (var j = 0; j < astra_menu_toggle.length; j++) {
  52. astra_menu_toggle[j].addEventListener('click', AstraToggleSubMenu, false);
  53. }
  54. }
  55. }
  56. }
  57. }
  58. }
  59. }
  60. astraNavMenuTogglePro = function ( event, body, mobileHeaderType, thisObj ) {
  61. event.preventDefault();
  62. var desktop_header = event.target.closest('#ast-desktop-header');
  63. var desktop_header_content = document.querySelector('#masthead > #ast-desktop-header .ast-desktop-header-content');
  64. if ( null !== desktop_header && undefined !== desktop_header && '' !== desktop_header ) {
  65. var desktop_toggle = desktop_header.querySelector( '.main-header-menu-toggle' );
  66. } else {
  67. var desktop_toggle = document.querySelector('#masthead > #ast-desktop-header .main-header-menu-toggle');
  68. }
  69. var desktop_menu = document.querySelector('#masthead > #ast-desktop-header .ast-desktop-header-content .main-header-bar-navigation');
  70. if ( 'desktop' === event.currentTarget.trigger_type ) {
  71. if ( null !== desktop_menu && '' !== desktop_menu && undefined !== desktop_menu ) {
  72. astraToggleClass(desktop_menu, 'toggle-on');
  73. if (desktop_menu.classList.contains('toggle-on')) {
  74. desktop_menu.style.display = 'block';
  75. } else {
  76. desktop_menu.style.display = '';
  77. }
  78. }
  79. astraToggleClass(desktop_toggle, 'toggled');
  80. if ( desktop_toggle.classList.contains( 'toggled' ) ) {
  81. body.classList.add("ast-main-header-nav-open");
  82. if ( 'dropdown' === mobileHeaderType ) {
  83. desktop_header_content.style.display = 'block';
  84. }
  85. } else {
  86. body.classList.remove("ast-main-header-nav-open");
  87. desktop_header_content.style.display = 'none';
  88. }
  89. return;
  90. }
  91. var __main_header_all = document.querySelectorAll('#masthead > #ast-mobile-header .main-header-bar-navigation');
  92. menu_toggle_all = document.querySelectorAll( '#masthead > #ast-mobile-header .main-header-menu-toggle' )
  93. var event_index = '0';
  94. var sticky_header = false;
  95. if ( null !== thisObj.closest( '#ast-fixed-header' ) ) {
  96. __main_header_all = document.querySelectorAll('#ast-fixed-header > #ast-mobile-header .main-header-bar-navigation');
  97. menu_toggle_all = document.querySelectorAll( '#ast-fixed-header .main-header-menu-toggle' )
  98. event_index = '0';
  99. sticky_header = true;
  100. }
  101. if ('undefined' === typeof __main_header_all[event_index]) {
  102. return false;
  103. }
  104. var menuHasChildren = __main_header_all[event_index].querySelectorAll('.menu-item-has-children');
  105. for (var i = 0; i < menuHasChildren.length; i++) {
  106. menuHasChildren[i].classList.remove('ast-submenu-expanded');
  107. var menuHasChildrenSubMenu = menuHasChildren[i].querySelectorAll('.sub-menu');
  108. for (var j = 0; j < menuHasChildrenSubMenu.length; j++) {
  109. menuHasChildrenSubMenu[j].style.display = 'none';
  110. }
  111. }
  112. var menu_class = thisObj.getAttribute('class') || '';
  113. if ( menu_class.indexOf('main-header-menu-toggle') !== -1 ) {
  114. astraToggleClass(__main_header_all[event_index], 'toggle-on');
  115. astraToggleClass(menu_toggle_all[event_index], 'toggled');
  116. if ( sticky_header && 1 < menu_toggle_all.length ) {
  117. astraToggleClass(menu_toggle_all['1'], 'toggled');
  118. }
  119. if (__main_header_all[event_index].classList.contains('toggle-on')) {
  120. __main_header_all[event_index].style.display = 'block';
  121. body.classList.add("ast-main-header-nav-open");
  122. } else {
  123. __main_header_all[event_index].style.display = '';
  124. body.classList.remove("ast-main-header-nav-open");
  125. }
  126. }
  127. }