dwn/site/js/main.js

/**
 * DWN Window Manager - Website JavaScript
 * Vanilla JS for interactivity
 */

// Mobile Navigation Toggle
function toggleNav() {
    const navLinks = document.querySelector('.nav-links');
    const toggle = document.querySelector('.nav-toggle');

    navLinks.classList.toggle('active');
    toggle.classList.toggle('active');
}

// Close mobile nav when clicking outside
document.addEventListener('click', function(e) {
    const nav = document.querySelector('nav');
    const navLinks = document.querySelector('.nav-links');

    if (navLinks && navLinks.classList.contains('active')) {
        if (!nav.contains(e.target)) {
            navLinks.classList.remove('active');
        }
    }
});

// Close mobile nav when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        const navLinks = document.querySelector('.nav-links');
        if (navLinks) {
            navLinks.classList.remove('active');
        }
    });
});

// Tab functionality
function showTab(tabId) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });

    // Deactivate all tabs
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });

    // Show selected tab content
    const selectedContent = document.getElementById(tabId);
    if (selectedContent) {
        selectedContent.classList.add('active');
    }

    // Activate clicked tab
    event.target.classList.add('active');
}

// FAQ Accordion
function toggleFaq(button) {
    const faqItem = button.closest('.faq-item');
    const isActive = faqItem.classList.contains('active');

    // Close all FAQ items
    document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.remove('active');
    });

    // Open clicked item if it wasn't already open
    if (!isActive) {
        faqItem.classList.add('active');
    }
}

// Copy to clipboard functionality
function copyCode(button) {
    const codeBlock = button.closest('.code-header').nextElementSibling;
    const code = codeBlock.querySelector('code');

    if (code) {
        const text = code.textContent;

        navigator.clipboard.writeText(text).then(() => {
            // Show feedback
            const originalText = button.textContent;
            button.textContent = 'Copied!';
            button.style.background = 'var(--success)';

            setTimeout(() => {
                button.textContent = originalText;
                button.style.background = '';
            }, 2000);
        }).catch(err => {
            console.error('Failed to copy:', err);
            button.textContent = 'Error';
        });
    }
}

// Shortcut search/filter functionality
function filterShortcuts() {
    const searchInput = document.getElementById('shortcut-search');
    if (!searchInput) return;

    const filter = searchInput.value.toLowerCase();
    const tables = document.querySelectorAll('.shortcuts-table');

    tables.forEach(table => {
        const rows = table.querySelectorAll('tbody tr');
        let visibleCount = 0;

        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(filter)) {
                row.style.display = '';
                visibleCount++;
            } else {
                row.style.display = 'none';
            }
        });

        // Show/hide the entire table section if no matches
        const section = table.closest('.table-wrapper');
        const header = section ? section.previousElementSibling : null;

        if (section && header && header.tagName === 'H2') {
            if (visibleCount === 0 && filter !== '') {
                section.style.display = 'none';
                header.style.display = 'none';
            } else {
                section.style.display = '';
                header.style.display = '';
            }
        }
    });
}

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        if (href === '#') return;

        e.preventDefault();
        const target = document.querySelector(href);

        if (target) {
            const headerOffset = 80; // Account for fixed header
            const elementPosition = target.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });

            // Update URL without scrolling
            history.pushState(null, null, href);
        }
    });
});

// Highlight active section in docs sidebar
function updateActiveSection() {
    const sidebar = document.querySelector('.docs-sidebar');
    if (!sidebar) return;

    const sections = document.querySelectorAll('h2[id], h3[id]');
    const links = sidebar.querySelectorAll('a[href^="#"]');

    let currentSection = '';
    const scrollPos = window.scrollY + 100;

    sections.forEach(section => {
        if (section.offsetTop <= scrollPos) {
            currentSection = section.id;
        }
    });

    links.forEach(link => {
        link.classList.remove('active');
        if (link.getAttribute('href') === '#' + currentSection) {
            link.classList.add('active');
        }
    });
}

// Throttle scroll events
let scrollTimeout;
window.addEventListener('scroll', () => {
    if (scrollTimeout) return;

    scrollTimeout = setTimeout(() => {
        updateActiveSection();
        scrollTimeout = null;
    }, 100);
});

// Header background on scroll
function updateHeaderBackground() {
    const header = document.querySelector('header');
    if (!header) return;

    if (window.scrollY > 50) {
        header.style.background = 'rgba(26, 26, 46, 0.98)';
    } else {
        header.style.background = 'rgba(26, 26, 46, 0.95)';
    }
}

window.addEventListener('scroll', updateHeaderBackground);

// Animate elements on scroll (intersection observer)
function initScrollAnimations() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('fade-in');
                observer.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    });

    // Observe feature cards and other elements
    document.querySelectorAll('.feature-card, .card, .comparison-card, .testimonial').forEach(el => {
        el.style.opacity = '0';
        observer.observe(el);
    });
}

// Keyboard shortcut for search (/)
document.addEventListener('keydown', (e) => {
    if (e.key === '/' && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
        const searchInput = document.getElementById('shortcut-search');
        if (searchInput) {
            e.preventDefault();
            searchInput.focus();
        }
    }

    // Escape to close search/nav
    if (e.key === 'Escape') {
        const searchInput = document.getElementById('shortcut-search');
        if (searchInput && document.activeElement === searchInput) {
            searchInput.blur();
            searchInput.value = '';
            filterShortcuts();
        }

        const navLinks = document.querySelector('.nav-links');
        if (navLinks) {
            navLinks.classList.remove('active');
        }
    }
});

// External link handling - open in new tab
document.querySelectorAll('a[href^="http"]').forEach(link => {
    if (!link.hostname.includes(window.location.hostname)) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener noreferrer');
    }
});

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', () => {
    initScrollAnimations();
    updateActiveSection();
    updateHeaderBackground();

    // Set current year in footer if needed
    const yearSpan = document.querySelector('.current-year');
    if (yearSpan) {
        yearSpan.textContent = new Date().getFullYear();
    }
});

// Print-friendly handling
window.addEventListener('beforeprint', () => {
    // Expand all FAQs for printing
    document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.add('active');
    });

    // Show all tab contents
    document.querySelectorAll('.tab-content').forEach(content => {
        content.style.display = 'block';
    });
});

window.addEventListener('afterprint', () => {
    // Restore FAQ state
    document.querySelectorAll('.faq-item').forEach(item => {
        item.classList.remove('active');
    });

    // Restore tab state
    document.querySelectorAll('.tab-content').forEach(content => {
        content.style.display = '';
    });
});