primary-navigation.js 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. /**
  2. * File primary-navigation.js.
  3. *
  4. * This files only gets added to themes that support the mobile nav on side
  5. */
  6. ( function() {
  7. /**
  8. * Menu Toggle Behaviors
  9. *
  10. * @param {Element} element
  11. */
  12. var navMenu = function ( buttonId, inputId ) {
  13. var wrapper = document.body;
  14. var toggleButton = document.getElementById( buttonId );
  15. var toggleInput = document.getElementById( inputId );
  16. if ( toggleButton ) {
  17. toggleButton.onclick = function() {
  18. if ( true == toggleInput.checked ) {
  19. wrapper.classList.remove( 'lock-scrolling' );
  20. } else {
  21. wrapper.classList.add( 'lock-scrolling' );
  22. }
  23. toggleButton.focus();
  24. }
  25. }
  26. document.addEventListener( 'click', function( event ) {
  27. // If target onclick is <a> with # within the href attribute
  28. if ( event.target.hash && event.target.hash.includes( '#' ) ) {
  29. wrapper.classList.remove( 'lock-scrolling' );
  30. if (toggleInput) {
  31. toggleInput.checked = false;
  32. }
  33. // Wait 550 and scroll to the anchor.
  34. setTimeout(function () {
  35. var anchor = document.getElementById(event.target.hash.slice(1));
  36. anchor.scrollIntoView();
  37. }, 550);
  38. }
  39. } );
  40. }
  41. window.addEventListener( 'load', function() {
  42. navMenu( 'toggle-menu', 'toggle' );
  43. navMenu( 'toggle-cart', 'woocommerce-toggle' );
  44. } );
  45. } )();