wordpress-theme-aksrt/assets/js/docs-navigation.js

/**
 * Jio Docs Navigation
 *
 * Enhanced document sidebar navigation:
 * - Collapsible section toggles
 * - Keyboard navigation
 * - Current section auto-expand
 * - Sidebar search with live filtering
 *
 * @package Jio
 */

(function () {
  'use strict';

  var DocsNav = {
    sidebar: null,
    searchInput: null,
    items: [],

    init: function () {
      this.sidebar = document.querySelector('.jio-doc-sidebar');
      if (!this.sidebar || this.sidebar.dataset.jioDocsNavBound === '1') return;
      this.sidebar.dataset.jioDocsNavBound = '1';

      this.items = Array.from(this.sidebar.querySelectorAll('.jio-doc-sidebar__item'));
      this.searchInput = this.sidebar.querySelector('.jio-doc-sidebar__search-input');

      this.initToggle();
      this.initSearch();
      this.initKeyboard();
    },

    /**
     * Toggle collapsible sections
     */
    initToggle: function () {
      var self = this;
      this.sidebar.addEventListener('click', function (e) {
        var toggle = e.target.closest('.jio-doc-sidebar__toggle');
        if (!toggle) return;

        e.preventDefault();
        var link = toggle.closest('.jio-doc-sidebar__link');
        if (!link) return;

        var li = link.closest('.jio-doc-sidebar__item');
        if (!li) return;

        var sub = li.querySelector('.jio-doc-sidebar__sub, ul');
        if (!sub) return;

        var isOpen = li.classList.contains('is-open');
        li.classList.toggle('is-open');

        // Update icon
        toggle.classList.remove('fa-chevron-down', 'fa-chevron-right');
        toggle.classList.add(isOpen ? 'fa-chevron-right' : 'fa-chevron-down');

        // Toggle sub-visibility
        sub.style.display = isOpen ? 'none' : '';
      });

      // Auto-expand current path
      var currentItems = this.sidebar.querySelectorAll('.jio-doc-sidebar__item.is-current, .jio-doc-sidebar__item.is-ancestor');
      currentItems.forEach(function (item) {
        item.classList.add('is-open');
        var toggle = item.querySelector('.jio-doc-sidebar__toggle');
        if (toggle) {
          toggle.classList.remove('fa-chevron-right');
          toggle.classList.add('fa-chevron-down');
        }
        var sub = item.querySelector('.jio-doc-sidebar__sub, ul');
        if (sub) sub.style.display = '';
      });
    },

    /**
     * Live search filtering
     */
    initSearch: function () {
      if (!this.searchInput) return;

      var debounceTimer = null;
      var self = this;
      this.searchInput.addEventListener('input', function () {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(function () {
          self.filterItems(self.searchInput.value.trim().toLowerCase());
        }, 150);
      });
    },

    filterItems: function (query) {
      this.items.forEach(function (item) {
        var link = item.querySelector('.jio-doc-sidebar__link');
        var text = link ? link.textContent.toLowerCase() : '';
        if (query === '' || text.indexOf(query) >= 0) {
          item.style.display = '';
        } else {
          item.style.display = 'none';
        }
      });
    },

    /**
     * Keyboard navigation (arrow keys)
     */
    initKeyboard: function () {
      this.sidebar.addEventListener('keydown', function (e) {
        if (!['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(e.key)) return;

        var focused = document.activeElement;
        if (!focused || !focused.closest('.jio-doc-sidebar')) return;

        var links = Array.from(document.querySelectorAll('.jio-doc-sidebar__link'));
        var idx = links.indexOf(focused);

        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (idx < links.length - 1) links[idx + 1].focus();
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (idx > 0) links[idx - 1].focus();
        } else if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          focused.click();
        }
      });
    },
  };

  jQuery(document).off('auto_fun.jio-docs-navigation').on('auto_fun.jio-docs-navigation', function () { DocsNav.init(); });
})();