dynamic-components.js

// Dynamic Components Loader
// This file handles loading navbar and footer components dynamically across all pages

document.addEventListener("DOMContentLoaded", function () {
    // Load navbar
    loadNavbar();
    
    // Load footer
    loadFooter();
    
    // Initialize theme
    initializeTheme();
    
    // Initialize mobile menu
    initializeMobileMenu();
    
    // Initialize signup button
    initializeSignupButton();

    // Initialize login button
    initializeLoginButton();
    
    // Initialize newsletter form
    initializeNewsletterForm();
});

// Function to load navbar
function loadNavbar() {
    const navbarPlaceholder = document.getElementById("navbar-placeholder");
    
    if (navbarPlaceholder) {
        // Create navbar HTML directly to avoid CORS issues with file:// protocol
        const navbarHTML = `
<!-- Navbar -->
<header>
  <div class="container">
    <!-- Logo -->
    <a href="./index.html" class="logo-text">
      <img src="./Images/lisbook-logo-1.png" alt="Lisbook Logo" width="26" height="26" />
      <span>Lisbook</span>
    </a>

    <!-- Navigation Menu -->
    <nav id="menu">
      <!-- Close button for mobile -->
      <button id="menu-close" class="menu-close-btn" aria-label="Close menu">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

      <!-- Navigation Links -->
      <a href="./index.html" class="nav-link">Home</a>
      <a href="./explore.html" class="nav-link" id="explore">Explore</a>
      <a href="./scan.html" class="nav-link">Scan Book</a>
      <a href="./about.html" class="nav-link" id="about">About</a>
      <a href="./contact.html" class="nav-link">Contact</a>
      <a href="./faq.html" class="nav-link">FAQs</a>

      <!-- Theme Toggle -->
      <button id="theme-toggle" class="icon-btn" aria-label="Toggle theme">
        <svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="hidden">
          <circle cx="12" cy="12" r="5"></circle>
          <line x1="12" y1="1" x2="12" y2="3"></line>
          <line x1="12" y1="21" x2="12" y2="23"></line>
          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
          <line x1="1" y1="12" x2="3" y2="12"></line>
          <line x1="21" y1="12" x2="23" y2="12"></line>
          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
        </svg>
        <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
      </button>

      <!-- Profile Link -->
      <a href="./profile.html" class="icon-btn" aria-label="Profile">
        <i class="bi bi-person-circle"></i>
      </a>

      <!-- Language Selector -->
      <div class="language-selector">
        <select id="language" onchange="changeLanguage()" aria-label="Select language">
          <option value="en">English</option>
          <option value="fr">Français</option>
          <option value="es">Español</option>
          <option value="zh">简体中文</option>
        </select>
      </div>

      <!-- Auth Buttons -->
      <button id="signupButton" class="btn-auth">Sign up</button>
      <button id="loginButton" class="btn-auth">Login</button>
    </nav>

    <!-- Mobile Menu Toggle -->
    <button id="menu-toggle" class="menu-toggle-btn" aria-label="Menu">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
    </button>
  </div>
</header>
        `;

        navbarPlaceholder.innerHTML = navbarHTML;
        console.log('✓ Navbar loaded successfully');
    }
}

// Function to load footer
function loadFooter() {
    const footerPlaceholder = document.getElementById("footer-placeholder");

    if (footerPlaceholder) {
        // Create footer HTML directly to avoid CORS issues with file:// protocol
        const footerHTML = `
<!-- Footer -->
<div class="container border-top" style="margin-top: 80px">
  <footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-3 mt-5 pb-5 g-4">
    <div class="col mb-3">
      <div class="footer-brand">
        <a href="./index.html" class="brand-link text-decoration-none">
          <img src="./Images/lisbook-logo-1.png" alt="Lisbook Logo" width="84" />
        </a>
        <div class="brand-text">
          <div class="brand-title">Lisbook</div>
          <p class="brand-tagline">LisBook is a straightforward audiobook player designed for simplicity and ease of use.</p>
        </div>
      </div>
    </div>

    <div class="col mb-3">
      <h5 class="fw-bold h5 mb-3 text-uppercase footer-col-title">Important Link</h5>
      <ul class="nav flex-column ms-2">
        <li class="nav-item mb-2"><a href="index.html" class="p-0">Home</a></li>
        <li class="nav-item mb-2"><a href="about.html" class="p-0">About</a></li>
        <li class="nav-item mb-2"><a href="contact.html" class="p-0">Contact</a></li>
        <li class="nav-item mb-2"><a href="faq.html" class="p-0">FAQs</a></li>
        <li class="nav-item mb-2"><a href="profile.html" class="p-0">Profile</a></li>
      </ul>
    </div>

    <div class="col mb-3">
      <h5 class="fw-bold h5 mb-3 text-uppercase footer-col-title">Features</h5>
      <ul class="nav flex-column ms-2">
        <li class="nav-item mb-2"><a href="#" class="p-0">Play/Pause</a></li>
        <li class="nav-item mb-2"><a href="#" class="p-0">Skip Chapters</a></li>
        <li class="nav-item mb-2"><a href="#" class="p-0">Change Speed</a></li>
        <li class="nav-item mb-2"><a href="#" class="p-0">Change Volume</a></li>
        <li class="nav-item mb-2"><a href="#" class="p-0">Change Theme</a></li>
      </ul>
    </div>

    <div class="col mb-3">
      <h5 class="fw-bold h5 mb-3 text-uppercase footer-col-title">Follow Us</h5>
      <ul class="nav flex-column ms-2">
        <li class="nav-item mb-2">
          <a href="https://www.instagram.com/dev_with_ctoic" class="p-0" target="_blank"><i class="bi bi-instagram me-2"></i> Instagram</a>
        </li>
        <li class="nav-item mb-2">
          <a href="https://x.com/Ct0ic" class="p-0" target="_blank"><i class="bi bi-twitter-x me-2"></i> Twitter-X</a>
        </li>
        <li class="nav-item mb-2">
          <a href="https://www.linkedin.com/in/ctoic/" class="p-0" target="_blank"><i class="bi bi-linkedin me-2"></i> LinkedIn</a>
        </li>
        <li class="nav-item mb-2">
          <a href="https://github.com/Ctoic" class="p-0" target="_blank"><i class="bi bi-github me-2"></i> GitHub</a>
        </li>
      </ul>
    </div>

    <!-- Newsletter Section -->
    <div class="col mb-3">
      <h5 class="fw-bold h5 mb-3 text-uppercase footer-col-title">Stay Updated</h5>
      <p class="mb-3">Subscribe to our newsletter for updates on new features and audiobooks.</p>
      <form id="newsletterForm" class="d-flex flex-column gap-2">
        <input 
          type="email" 
          class="form-control py-2 px-3" 
          id="newsletterEmail" 
          placeholder="Enter your email"
          required
        >
        <div class="invalid-feedback">Please provide a valid email address.</div>
        <button type="submit" class="btn btn-success py-2 px-3 w-100">Subscribe</button>
      </form>
      <div id="newsletterMessage" class="mt-2 small"></div>
    </div>
  </footer>
</div>

<div class="bg-white-900 p-4 text-center">
  <div class="text-gray-500">&copy; 2024 Lisbook | All Rights Reserved</div>
</div>
        `;

        footerPlaceholder.innerHTML = footerHTML;
        console.log('✓ Footer loaded successfully');
    }
}

// Initialize theme functionality
function initializeTheme() {
    // Theme toggle functionality
    const themeToggle = document.getElementById('theme-toggle');
    const sunIcon = document.getElementById('sun-icon');
    const moonIcon = document.getElementById('moon-icon');

    if (themeToggle && sunIcon && moonIcon) {
        themeToggle.addEventListener('click', function() {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
            
            // Update theme
            document.documentElement.setAttribute('data-theme', newTheme);
            document.body.classList.remove('light-theme', 'dark-theme');
            document.body.classList.add(newTheme + '-theme');
            
            // Update icons
            if (newTheme === 'light') {
                sunIcon.classList.remove('hidden');
                moonIcon.classList.add('hidden');
            } else {
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
            }
            
            // Save to localStorage
            try {
                localStorage.setItem('theme', newTheme);
            } catch (e) {
                console.warn('Could not save theme to localStorage', e);
            }
        });
    }
}

// Initialize mobile menu functionality
function initializeMobileMenu() {
    const menuToggle = document.getElementById('menu-toggle');
    const menu = document.getElementById('menu');
    const menuClose = document.getElementById('menu-close');

    if (menuToggle && menu) {
        // Toggle menu on button click
        menuToggle.addEventListener('click', function(e) {
            e.stopPropagation();
            menu.classList.add('active');
            document.body.classList.add('menu-open');
        });

        // Close menu function
        function closeMenu() {
            menu.classList.remove('active');
            document.body.classList.remove('menu-open');
        }

        // Close menu when clicking close button
        if (menuClose) {
            menuClose.addEventListener('click', function(e) {
                e.stopPropagation();
                closeMenu();
            });
        }

        // Close menu when clicking backdrop
        document.addEventListener('click', function(e) {
            if (menu.classList.contains('active') && 
                !menu.contains(e.target) && 
                !menuToggle.contains(e.target)) {
                closeMenu();
            }
        });

        // Close menu when clicking on navigation links
        const menuLinks = menu.querySelectorAll('.nav-link');
        menuLinks.forEach(link => {
            link.addEventListener('click', function() {
                closeMenu();
            });
        });

        // Prevent clicks inside menu from closing it
        menu.addEventListener('click', function(e) {
            e.stopPropagation();
        });

        // Close menu with Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && menu.classList.contains('active')) {
                closeMenu();
            }
        });
    }
}

// Initialize signup button functionality
function initializeSignupButton() {
    const signupButton = document.getElementById("signupButton");
    
    if (signupButton) {
        signupButton.addEventListener("click", function() {
            window.location.href = "pages/signup.html";
        });
    }
}

// Initialize login button functionality
function initializeLoginButton() {
    const loginButton = document.getElementById("loginButton");
    
    if (loginButton) {
        loginButton.addEventListener("click", function() {
            window.location.href = "pages/login.html";
        });
    }
}

// Initialize newsletter form functionality
function initializeNewsletterForm() {
    const form = document.getElementById('newsletterForm');
    const emailInput = document.getElementById('newsletterEmail');
    const messageDiv = document.getElementById('newsletterMessage');

    if (form && emailInput && messageDiv) {
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            const email = emailInput.value.trim();

            // Simple email validation
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!email || !emailRegex.test(email)) {
                emailInput.classList.add('is-invalid');
                messageDiv.innerHTML = '<div class="alert alert-danger">Please provide a valid email address.</div>';
                return;
            }

            emailInput.classList.remove('is-invalid');
            messageDiv.innerHTML = '<div class="alert alert-success">Thank you for subscribing!</div>';
            emailInput.value = '';

            setTimeout(() => {
                messageDiv.innerHTML = '';
            }, 5000);
        });
    }
}

// Language change function (for iframe communication)
function changeLanguage() {
    const language = document.getElementById('language').value;
    const iframe = document.getElementById('gd-iframe');
    if (iframe && iframe.contentWindow) {
        iframe.contentWindow.postMessage({ type: 'changeLanguage', language: language }, '*');
    }
}