136 lines
4.6 KiB
JavaScript
136 lines
4.6 KiB
JavaScript
// 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();
|
|
}
|