ssh-edit/js/auto-hide-nav.js

/**
 * Auto-Hide Navigation Script - jQuery Version
 * Smoothly hides navigation when scrolling down and shows it when scrolling up
 */

(function($) {
  'use strict';
  
  // Configuration
  const config = {
      scrollThreshold: 100,        // Start hiding after this many pixels
      mouseRevealZone: 100,        // Show header when mouse is within this many pixels from top
      animationDuration: 300,      // Animation duration in ms
      debounceDelay: 10           // Scroll event debounce delay
  };
  
  // State management
  let state = {
      lastScrollTop: 0,
      isVisible: true,
      headerHeight: 0,
      ticking: false
  };
  
  // DOM elements
  let $header, $body;
  
  // Initialize when document is ready
  $(document).ready(function() {
      init();
  });
  
  function init() {
      // console.log('Auto-hide navigation: jQuery script loaded');
      
      // Find header elements - Try multiple selectors for Twenty Twenty-Five
      $header = $('header').first();
      if (!$header.length) {
          $header = $('.wp-site-header').first();
      }
      if (!$header.length) {
          $header = $('.wp-block-template-part[data-area="header"]').first();
      }
      if (!$header.length) {
          $header = $('[class*="header"]').first();
      }
      if (!$header.length) {
          $header = $('nav').first();
      }
      
      $body = $('body');
      
      // console.log('Header element found:', $header[0]);
      // console.log('Header length:', $header.length);
      
      if (!$header.length) {
          console.warn('Auto-hide navigation: No header element found');
          return;
      }
      
      // Add identifying class for our CSS
      $header.addClass('srh-auto-hide-header');
      
      // Setup
      calculateHeaderHeight();
      bindEvents();
      
      // Initial state
      updateHeaderState();
      
      // console.log('Auto-hide navigation: Initialization complete');
      // console.log('Header height calculated:', state.headerHeight);
  }
  
  function calculateHeaderHeight() {
      if (!$header.length) return;
      
      state.headerHeight = $header.outerHeight() || 80;
      $('html').css('--header-height', state.headerHeight + 'px');
      
      // console.log('Header height:', state.headerHeight);
  }
  
  function bindEvents() {
      // Scroll event with debouncing
      $(window).on('scroll', debounce(handleScroll, config.debounceDelay));
      
      // Resize event
      $(window).on('resize', debounce(calculateHeaderHeight, 100));
      
      // Mouse movement for revealing header
      $(document).on('mousemove', handleMouseMove);
      
      // Keyboard events for accessibility
      $(document).on('keydown', handleKeydown);
      
      // Focus events for accessibility
      $header.find('a, button, input, textarea, select, [tabindex]').on('focus', showHeader);
      
      // Smooth scroll for anchor links
      $(document).on('click', 'a[href^="#"]', handleAnchorClick);
      
      // console.log('Events bound successfully');
  }
  
  function handleScroll() {
      if (!state.ticking) {
          requestAnimationFrame(updateHeaderState);
          state.ticking = true;
      }
  }
  
  function updateHeaderState() {
      const scrollTop = $(window).scrollTop();
      
      // Add scrolled class for styling
      if (scrollTop > 50) {
          $body.addClass('header-offset');
          $header.addClass('header-scrolled');
      } else {
          $body.removeClass('header-offset');
          $header.removeClass('header-scrolled');
      }
      
      // Hide/show logic
      if (scrollTop > config.scrollThreshold) {
          if (scrollTop > state.lastScrollTop && state.isVisible) {
              // Scrolling down - hide header
              hideHeader();
          } else if (scrollTop < state.lastScrollTop && !state.isVisible) {
              // Scrolling up - show header
              showHeader();
          }
      } else if (!state.isVisible) {
          // Near top - always show header
          showHeader();
      }
      
      state.lastScrollTop = scrollTop;
      state.ticking = false;
  }
  
  function hideHeader() {
      if (!state.isVisible) return;
      
      // console.log('Hiding header');
      state.isVisible = false;
      $header.removeClass('header-visible').addClass('header-hidden');
      
      // Dispatch custom event
      $(document).trigger('headerHidden', {
          headerElement: $header[0],
          isVisible: state.isVisible,
          scrollTop: state.lastScrollTop
      });
  }
  
  function showHeader() {
      if (state.isVisible) return;
      
      // console.log('Showing header');
      state.isVisible = true;
      $header.removeClass('header-hidden').addClass('header-visible');
      
      // Dispatch custom event
      $(document).trigger('headerVisible', {
          headerElement: $header[0],
          isVisible: state.isVisible,
          scrollTop: state.lastScrollTop
      });
  }
  
  function handleMouseMove(e) {
      if (e.clientY < config.mouseRevealZone && 
          $(window).scrollTop() > config.scrollThreshold && 
          !state.isVisible) {
          showHeader();
      }
  }
  
  function handleKeydown(e) {
      // Show header on Tab or Escape for accessibility
      if (e.key === 'Tab' || e.key === 'Escape') {
          showHeader();
      }
  }
  
  function handleAnchorClick(e) {
      const $link = $(e.currentTarget);
      const targetId = $link.attr('href').substring(1);
      const $target = $('#' + targetId);
      
      if ($target.length) {
          e.preventDefault();
          
          const offsetTop = $target.offset().top - state.headerHeight;
          
          $('html, body').animate({
              scrollTop: offsetTop
          }, 600);
      }
  }
  
  function debounce(func, wait) {
      let timeout;
      return function executedFunction() {
          const context = this;
          const args = arguments;
          const later = function() {
              clearTimeout(timeout);
              func.apply(context, args);
          };
          clearTimeout(timeout);
          timeout = setTimeout(later, wait);
      };
  }
  
  // Public API
  window.SRHNavigation = {
      show: showHeader,
      hide: hideHeader,
      toggle: function() {
          state.isVisible ? hideHeader() : showHeader();
      },
      getState: function() {
          return $.extend({}, state);
      },
      updateConfig: function(newConfig) {
          $.extend(config, newConfig);
      },
      getHeader: function() {
          return $header;
      }
  };
    
})(jQuery);