terminal.css/index.js

/**
 * terminal.css - Terminal CSS Component Library
 * JavaScript Utilities
 * Version: 3.0.0
 */

/**
 * Toggle FAQ item
 * @param {HTMLElement} element - The FAQ question element that was clicked
 */
function toggleFaq(element) {
  const faqItem = element.parentElement;
  const wasActive = faqItem.classList.contains('is-active');
  
  // Close all FAQ items
  document.querySelectorAll('.faq-item').forEach(item => {
    item.classList.remove('is-active');
  });
  
  // Open clicked item if it wasn't active
  if (!wasActive) {
    faqItem.classList.add('is-active');
  }
}

/**
 * Show a toast notification
 * @param {string} type - Toast type: 'primary', 'success', 'danger', 'warning', 'info'
 * @param {string} title - Toast title
 * @param {string} message - Toast message
 * @param {number} duration - Duration in milliseconds (default: 5000)
 */
function showToast(type, title, message, duration = 5000) {
  const container = document.getElementById('toastContainer');
  
  // Create toast element
  const toast = document.createElement('div');
  toast.className = `toast is-${type}`;
  
  // Icon mapping
  const icons = {
    primary: '▸',
    success: '✓',
    danger: '✕',
    warning: '⚠',
    info: 'ℹ'
  };
  
  toast.innerHTML = `
    <div class="toast-icon">${icons[type] || '▸'}</div>
    <div class="toast-content">
      <div class="toast-title">${title}</div>
      <div class="toast-message">${message}</div>
    </div>
    <button class="toast-close" onclick="dismissToast(this)">×</button>
  `;
  
  container.appendChild(toast);
  
  // Auto dismiss after duration
  setTimeout(() => {
    dismissToast(toast.querySelector('.toast-close'));
  }, duration);
}

/**
 * Dismiss a toast notification
 * @param {HTMLElement} closeButton - The close button element that was clicked
 */
function dismissToast(closeButton) {
  const toast = closeButton.closest('.toast');
  if (toast) {
    toast.classList.add('is-dismissing');
    
    // Remove from DOM after animation
    setTimeout(() => {
      toast.remove();
    }, 300);
  }
}

function initializeThemeSwitcher() {
    const themeSelector = document.getElementById("theme-selector");
    const themeSwitcher = document.getElementById("theme-switcher");

    if (!themeSwitcher) {
        return;
    }

    function applyTheme(theme) {
      themeSwitcher.setAttribute("href", `themes/${theme}.css`);
      localStorage.setItem("theme", theme);
      if (themeSelector) {
        themeSelector.value = theme;
      }
    }

    if (themeSelector) {
        themeSelector.addEventListener("change", () => {
            applyTheme(themeSelector.value);
        });
    }

    const savedTheme = localStorage.getItem("theme") || "default";
    applyTheme(savedTheme);
}

document.addEventListener("DOMContentLoaded", initializeThemeSwitcher);