Aniworld/src/server/web/static/js/mobile_responsive.js

/**
 * Mobile Responsive Module
 * Handles mobile-specific functionality and responsive behavior
 */

(function() {
    'use strict';

    let isMobile = false;

    /**
     * Initialize mobile responsive features
     */
    function initMobileResponsive() {
        detectMobile();
        setupResponsiveHandlers();
        console.log('[Mobile Responsive] Initialized');
    }

    /**
     * Detect if device is mobile
     */
    function detectMobile() {
        isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        if (isMobile) {
            document.body.classList.add('mobile-device');
        }
    }

    /**
     * Setup responsive event handlers
     */
    function setupResponsiveHandlers() {
        window.addEventListener('resize', handleResize);
        handleResize(); // Initial call
    }

    /**
     * Handle window resize
     */
    function handleResize() {
        const width = window.innerWidth;
        
        if (width < 768) {
            applyMobileLayout();
        } else {
            applyDesktopLayout();
        }
    }

    /**
     * Apply mobile-specific layout
     */
    function applyMobileLayout() {
        document.body.classList.add('mobile-layout');
        document.body.classList.remove('desktop-layout');
    }

    /**
     * Apply desktop-specific layout
     */
    function applyDesktopLayout() {
        document.body.classList.add('desktop-layout');
        document.body.classList.remove('mobile-layout');
    }

    // Export functions
    window.MobileResponsive = {
        isMobile: () => isMobile
    };

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initMobileResponsive);
    } else {
        initMobileResponsive();
    }

})();