eveAI/eveai_chat_client/static/assets/js/iconManager.js

// static/js/iconManager.js

/**
 * Een eenvoudige standalone icon manager voor Material Symbols Outlined
 * Deze kan direct worden gebruikt zonder Vue
 */
window.iconManager = {
    loadedIcons: [],

    /**
     * Laadt een Material Symbols Outlined icoon als het nog niet is geladen
     * @param {string} iconName - Naam van het icoon
     * @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
     */
    loadIcon: function(iconName, options = {}) {
        if (!iconName) return;

        if (this.loadedIcons.includes(iconName)) {
            return; // Icoon is al geladen
        }

        const defaultOptions = {
            opsz: 24,
            wght: 400,
            FILL: 0,
            GRAD: 0
        };

        const opts = { ...defaultOptions, ...options };

        // Genereer unieke ID voor het stylesheet element
        const styleId = `material-symbols-${iconName}`;

        // Controleer of het stylesheet al bestaat
        if (!document.getElementById(styleId)) {
            const link = document.createElement('link');
            link.id = styleId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${iconName}`;
            document.head.appendChild(link);
            console.log(`Material Symbol geladen: ${iconName}`);

            this.loadedIcons.push(iconName);
        }
    },

    /**
     * Laadt een set van Material Symbols Outlined iconen
     * @param {Array} iconNames - Array met icoonnamen
     * @param {Object} options - Opties voor de iconen
     */
    loadIcons: function(iconNames, options = {}) {
        if (!iconNames || !Array.isArray(iconNames) || iconNames.length === 0) {
            return;
        }

        // Filter alleen iconen die nog niet zijn geladen
        const newIcons = iconNames.filter(icon => !this.loadedIcons.includes(icon));

        if (newIcons.length === 0) {
            return; // Alle iconen zijn al geladen
        }

        const defaultOptions = {
            opsz: 24,
            wght: 400,
            FILL: 0,
            GRAD: 0
        };

        const opts = { ...defaultOptions, ...options };

        // Genereer unieke ID voor het stylesheet element
        const styleId = `material-symbols-set-${newIcons.join('-')}`;

        // Controleer of het stylesheet al bestaat
        if (!document.getElementById(styleId)) {
            const link = document.createElement('link');
            link.id = styleId;
            link.rel = 'stylesheet';
            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${newIcons.join(',')}`;
            document.head.appendChild(link);
            console.log(`Material Symbols geladen: ${newIcons.join(', ')}`);

            // Voeg de nieuwe iconen toe aan de geladen lijst
            this.loadedIcons.push(...newIcons);
        }
    }
};

// Functie om iconManager toe te voegen aan het DynamicForm component
function initDynamicFormWithIcons() {
    if (window.DynamicForm) {
        const originalCreated = window.DynamicForm.created || function() {};

        window.DynamicForm.created = function() {
            // Roep de oorspronkelijke created methode aan als die bestond
            originalCreated.call(this);

            // Laad het icoon als het beschikbaar is
            if (this.formData && this.formData.icon) {
                window.iconManager.loadIcon(this.formData.icon);
            }
        };

        // Voeg watcher toe voor formData.icon
        if (!window.DynamicForm.watch) {
            window.DynamicForm.watch = {};
        }

        window.DynamicForm.watch['formData.icon'] = {
            handler: function(newIcon) {
                if (newIcon) {
                    window.iconManager.loadIcon(newIcon);
                }
            },
            immediate: true
        };

        console.log('DynamicForm is uitgebreid met iconManager functionaliteit');
    } else {
        console.warn('DynamicForm component is niet beschikbaar. iconManager kan niet worden toegevoegd.');
    }
}

// Probeer het DynamicForm component te initialiseren zodra het document geladen is
document.addEventListener('DOMContentLoaded', function() {
    // Wacht een korte tijd om er zeker van te zijn dat DynamicForm is geladen
    setTimeout(initDynamicFormWithIcons, 100);
});

// Als DynamicForm al beschikbaar is, initialiseer direct
if (window.DynamicForm) {
    initDynamicFormWithIcons();
}