Autoparts-DB/pos/static/js/splash-loader.js

/**
 * splash-loader.js — PWA splash screen + dynamic favicon
 * Show an animated splash while the app loads, then fade out.
 * Also provides dynamic favicon updates for notifications / offline states.
 */
(function() {
    'use strict';

    // ─── Create splash element ──────────────────────────────────────────────
    var splash = document.createElement('div');
    splash.id = 'nx-splash';
    splash.style.cssText = 'position:fixed;inset:0;z-index:99999;' +
        'background:linear-gradient(135deg,#0d0d0d 0%,#1a1205 100%);' +
        'display:flex;flex-direction:column;align-items:center;justify-content:center;' +
        'transition:opacity 0.5s ease,visibility 0.5s ease;';

    // Logo SVG (animated)
    var logoSvg = '<svg width="80" height="80" viewBox="0 0 80 80" style="margin-bottom:24px;">' +
        '<defs><linearGradient id="nxg" x1="0%" y1="0%" x2="100%" y2="100%">' +
        '<stop offset="0%" style="stop-color:#F5A623"/>' +
        '<stop offset="100%" style="stop-color:#E08E00"/>' +
        '</linearGradient></defs>' +
        '<circle cx="40" cy="40" r="36" fill="none" stroke="url(#nxg)" stroke-width="3" stroke-dasharray="226" stroke-dashoffset="226" style="animation:nxDraw 1.2s ease forwards;">' +
        '<animateTransform attributeName="transform" type="rotate" from="0 40 40" to="360 40 40" dur="8s" repeatCount="indefinite"/>' +
        '</circle>' +
        '<text x="40" y="48" text-anchor="middle" fill="#F5A623" font-family="system-ui,sans-serif" font-weight="800" font-size="28" style="animation:nxFadeIn 0.6s 0.4s ease both;">N</text>' +
        '</svg>';

    var title = '<div style="font-family:system-ui,sans-serif;font-size:20px;font-weight:700;color:#eee;letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;">Nexus</div>';
    var subtitle = '<div style="font-family:system-ui,sans-serif;font-size:13px;color:#888;letter-spacing:4px;text-transform:uppercase;">Autoparts POS</div>';
    var spinner = '<div class="nx-loader" style="margin-top:32px;width:32px;height:32px;"><div class="nx-loader__ring"></div><div class="nx-loader__ring"></div></div>';

    splash.innerHTML = logoSvg + title + subtitle + spinner;

    // Inject keyframes if not present
    if (!document.getElementById('nx-splash-styles')) {
        var style = document.createElement('style');
        style.id = 'nx-splash-styles';
        style.textContent = '@keyframes nxDraw { to { stroke-dashoffset:0; } } @keyframes nxFadeIn { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:translateY(0); } }';
        document.head.appendChild(style);
    }

    document.body.appendChild(splash);

    // Hide splash when DOM is ready + minimum display time
    var minDisplay = 800;
    var startTime = Date.now();

    function hideSplash() {
        var elapsed = Date.now() - startTime;
        var remaining = Math.max(0, minDisplay - elapsed);
        setTimeout(function() {
            splash.style.opacity = '0';
            splash.style.visibility = 'hidden';
            setTimeout(function() { splash.remove(); }, 500);
        }, remaining);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', hideSplash);
    } else {
        hideSplash();
    }

    // ─── Dynamic Favicon ────────────────────────────────────────────────────
    window.NexusFavicon = {
        canvas: null,
        ctx: null,
        link: null,
        baseColor: '#F5A623',

        init: function() {
            this.canvas = document.createElement('canvas');
            this.canvas.width = 64;
            this.canvas.height = 64;
            this.ctx = this.canvas.getContext('2d');
            this.link = document.querySelector('link[rel*="icon"]') || document.createElement('link');
            this.link.rel = 'shortcut icon';
            this.link.type = 'image/png';
            document.head.appendChild(this.link);
            this.setNormal();
        },

        draw: function(color, badge) {
            var ctx = this.ctx;
            var c = this.canvas;
            ctx.clearRect(0, 0, 64, 64);

            // Background circle
            ctx.beginPath();
            ctx.arc(32, 32, 30, 0, Math.PI * 2);
            ctx.fillStyle = color || this.baseColor;
            ctx.fill();

            // Letter N
            ctx.fillStyle = '#0d0d0d';
            ctx.font = 'bold 36px system-ui,sans-serif';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('N', 32, 33);

            // Badge dot
            if (badge) {
                ctx.beginPath();
                ctx.arc(52, 12, 10, 0, Math.PI * 2);
                ctx.fillStyle = '#ef4444';
                ctx.fill();
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 11px system-ui,sans-serif';
                ctx.fillText(badge > 9 ? '9+' : String(badge), 52, 13);
            }

            this.link.href = c.toDataURL('image/png');
        },

        setNormal: function() { this.draw(this.baseColor); },
        setOffline: function() { this.draw('#666'); },
        setNotify: function(count) { this.draw(this.baseColor, count); },
    };

    // Auto-init favicon
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() { NexusFavicon.init(); });
    } else {
        NexusFavicon.init();
    }

    // Update favicon on online/offline
    window.addEventListener('online', function() { if (window.NexusFavicon) NexusFavicon.setNormal(); });
    window.addEventListener('offline', function() { if (window.NexusFavicon) NexusFavicon.setOffline(); });
})();