mobile-cart.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /**
  2. *
  3. * Handle Mobile Cart events.
  4. *
  5. * @since 3.1.0
  6. * @package Astra
  7. */
  8. (function () {
  9. var cart_flyout = document.getElementById('astra-mobile-cart-drawer'),
  10. main_header_masthead = document.getElementById('masthead');
  11. // Return if masthead not exixts.
  12. if (!main_header_masthead) {
  13. return;
  14. }
  15. var woo_data = '',
  16. mobileHeader = main_header_masthead.querySelector("#ast-mobile-header"),
  17. edd_data = '';
  18. if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
  19. woo_data = cart_flyout.querySelector('.widget_shopping_cart.woocommerce');
  20. edd_data = cart_flyout.querySelector('.widget_edd_cart_widget');
  21. }
  22. /**
  23. * Opens the Cart Flyout.
  24. */
  25. cartFlyoutOpen = function (event) {
  26. event.preventDefault();
  27. var current_cart = event.currentTarget.cart_type;
  28. if ('woocommerce' === current_cart && document.body.classList.contains('woocommerce-cart')) {
  29. return;
  30. }
  31. cart_flyout.classList.remove('active');
  32. cart_flyout.classList.remove('woocommerce-active');
  33. cart_flyout.classList.remove('edd-active');
  34. if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
  35. cart_flyout.classList.add('active');
  36. document.documentElement.classList.add('ast-mobile-cart-active');
  37. if (undefined !== edd_data && '' !== edd_data && null !== edd_data) {
  38. edd_data.style.display = 'block';
  39. if ('woocommerce' === current_cart) {
  40. edd_data.style.display = 'none';
  41. cart_flyout.classList.add('woocommerce-active');
  42. }
  43. }
  44. if (undefined !== woo_data && '' !== woo_data && null !== woo_data) {
  45. woo_data.style.display = 'block';
  46. if ('edd' === current_cart) {
  47. woo_data.style.display = 'none';
  48. cart_flyout.classList.add('edd-active');
  49. }
  50. }
  51. }
  52. }
  53. /**
  54. * Closes the Cart Flyout.
  55. */
  56. cartFlyoutClose = function (event) {
  57. event.preventDefault();
  58. if (undefined !== cart_flyout && '' !== cart_flyout && null !== cart_flyout) {
  59. cart_flyout.classList.remove('active');
  60. document.documentElement.classList.remove('ast-mobile-cart-active');
  61. }
  62. }
  63. /**
  64. * Main Init Function.
  65. */
  66. function cartInit() {
  67. // Close Popup if esc is pressed.
  68. document.addEventListener('keyup', function (event) {
  69. // 27 is keymap for esc key.
  70. if (event.keyCode === 27) {
  71. event.preventDefault();
  72. cart_flyout.classList.remove('active');
  73. document.documentElement.classList.remove('ast-mobile-cart-active');
  74. updateTrigger();
  75. }
  76. });
  77. // Close Popup on outside click.
  78. document.addEventListener('click', function (event) {
  79. var target = event.target;
  80. var cart_modal = document.querySelector('.ast-mobile-cart-active .astra-mobile-cart-overlay');
  81. if (target === cart_modal) {
  82. cart_flyout.classList.remove('active');
  83. document.documentElement.classList.remove('ast-mobile-cart-active');
  84. }
  85. });
  86. if (undefined !== mobileHeader && '' !== mobileHeader && null !== mobileHeader) {
  87. // Mobile Header Cart Flyout.
  88. var woo_carts = document.querySelectorAll('.ast-mobile-header-wrap .ast-header-woo-cart');
  89. var edd_cart = document.querySelector('.ast-mobile-header-wrap .ast-header-edd-cart');
  90. var cart_close = document.querySelector('.astra-cart-drawer-close');
  91. if( 0 < woo_carts.length ){
  92. woo_carts.forEach(function callbackFn(woo_cart) {
  93. if (undefined !== woo_cart && '' !== woo_cart && null !== woo_cart && cart_flyout) {
  94. woo_cart.addEventListener("click", cartFlyoutOpen, false);
  95. woo_cart.cart_type = 'woocommerce';
  96. }
  97. })
  98. }
  99. if (undefined !== edd_cart && '' !== edd_cart && null !== edd_cart && cart_flyout) {
  100. edd_cart.addEventListener("click", cartFlyoutOpen, false);
  101. edd_cart.cart_type = 'edd';
  102. }
  103. if (undefined !== cart_close && '' !== cart_close && null !== cart_close) {
  104. cart_close.addEventListener("click", cartFlyoutClose, false);
  105. }
  106. }
  107. }
  108. // Get the screen inner width.
  109. var screenInnerWidth = window.innerWidth;
  110. window.addEventListener('resize', function () {
  111. // Close Cart
  112. var cart_close = document.querySelector('.astra-cart-drawer-close');
  113. if ( undefined !== cart_close && '' !== cart_close && null !== cart_close && 'INPUT' !== document.activeElement.tagName && cart_flyout.classList.contains( 'active' ) ) {
  114. // Get the modified screen inner width.
  115. var modifiedInnerWidth = window.innerWidth;
  116. if ( modifiedInnerWidth !== screenInnerWidth ) {
  117. screenInnerWidth = modifiedInnerWidth;
  118. cart_close.click();
  119. }
  120. }
  121. });
  122. window.addEventListener('load', function () {
  123. cartInit();
  124. });
  125. document.addEventListener('astLayoutWidthChanged', function () {
  126. cartInit();
  127. });
  128. document.addEventListener('astPartialContentRendered', function () {
  129. cartInit();
  130. });
  131. var layoutChangeDelay;
  132. window.addEventListener('resize', function () {
  133. clearTimeout(layoutChangeDelay);
  134. layoutChangeDelay = setTimeout(function () {
  135. cartInit();
  136. document.dispatchEvent(new CustomEvent("astLayoutWidthChanged", {"detail": {'response': ''}}));
  137. }, 50);
  138. });
  139. })();