tractatus/public/js/researcher-page.js

/**
 * Researcher Page - Accordion & Research Inquiry Modal
 * Handles expandable/collapsible sections and research inquiry modal
 * Implements WAI-ARIA Authoring Practices for accordions
 */

document.addEventListener('DOMContentLoaded', function() {
  // ============================================================================
  // ACCORDION FUNCTIONALITY
  // ============================================================================

  // Get all accordion buttons
  const accordionButtons = document.querySelectorAll('[data-accordion]');

  accordionButtons.forEach(button => {
    // Click handler
    button.addEventListener('click', function() {
      const accordionId = this.dataset.accordion;
      toggleAccordion(accordionId, this);
    });

    // Keyboard handler (Enter and Space)
    button.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        const accordionId = this.dataset.accordion;
        toggleAccordion(accordionId, this);
      }
    });
  });

  /**
   * Toggle accordion section open/closed
   * @param {string} id - Accordion section ID
   * @param {HTMLElement} button - The button element that triggered toggle
   */
  function toggleAccordion(id, button) {
    const content = document.getElementById(id + '-content');
    const icon = document.getElementById(id + '-icon');

    if (content && icon) {
      const isExpanded = content.classList.contains('active');

      // Toggle CSS classes for visual state
      content.classList.toggle('active');
      icon.classList.toggle('active');

      // Update ARIA state
      button.setAttribute('aria-expanded', isExpanded ? 'false' : 'true');
    }
  }

  // ============================================================================
  // RESEARCH INQUIRY MODAL FUNCTIONALITY
  // ============================================================================

  const modal = document.getElementById('research-inquiry-modal');
  const openButton = document.getElementById('research-inquiry-button');
  const alexanderOpenButton = document.getElementById('alexander-research-inquiry-button');
  const closeButton = document.getElementById('close-modal');
  const cancelButton = document.getElementById('cancel-modal');
  const form = document.getElementById('research-inquiry-form');
  const successMessage = document.getElementById('success-message');
  const closeSuccessButton = document.getElementById('close-success');

  // Function to open modal
  function openModal() {
    modal.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // Prevent background scrolling
  }

  // Open modal from main button
  if (openButton) {
    openButton.addEventListener('click', openModal);
  }

  // Open modal from Alexander section button
  if (alexanderOpenButton) {
    alexanderOpenButton.addEventListener('click', openModal);
  }

  // Close modal function
  function closeModal() {
    modal.classList.add('hidden');
    document.body.style.overflow = ''; // Restore scrolling
    form.classList.remove('hidden');
    successMessage.classList.add('hidden');
    form.reset();
  }

  // Close button
  if (closeButton) {
    closeButton.addEventListener('click', closeModal);
  }

  // Cancel button
  if (cancelButton) {
    cancelButton.addEventListener('click', closeModal);
  }

  // Close success button
  if (closeSuccessButton) {
    closeSuccessButton.addEventListener('click', closeModal);
  }

  // Close on background click
  if (modal) {
    modal.addEventListener('click', function(e) {
      if (e.target === modal) {
        closeModal();
      }
    });
  }

  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
      closeModal();
    }
  });

  // Form submission
  if (form) {
    form.addEventListener('submit', async function(e) {
      e.preventDefault();

      // Get form data
      const formData = new FormData(form);

      // Get all selected needs
      const needs = [];
      document.querySelectorAll('input[name="needs"]:checked').forEach(checkbox => {
        needs.push(checkbox.value);
      });

      // Build submission object
      const data = {
        researchQuestion: formData.get('research-question'),
        methodology: formData.get('methodology'),
        context: formData.get('context'),
        needs: needs,
        otherNeeds: formData.get('other-needs'),
        institution: formData.get('institution'),
        name: formData.get('name'),
        email: formData.get('email'),
        timeline: formData.get('timeline'),
        submittedAt: new Date().toISOString()
      };

      try {
        // Send to server (API endpoint to be implemented)
        const response = await fetch('/api/research-inquiry', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        });

        if (response.ok) {
          // Show success message
          form.classList.add('hidden');
          successMessage.classList.remove('hidden');
        } else {
          // Handle error
          alert('An error occurred submitting your inquiry. Please try again or email contact@agenticgovernance.digital directly.');
        }
      } catch (error) {
        console.error('Submission error:', error);
        alert('An error occurred submitting your inquiry. Please try again or email contact@agenticgovernance.digital directly.');
      }
    });
  }
});