131 lines
4.3 KiB
JavaScript
131 lines
4.3 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);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Export de iconManager functie om te gebruiken in Vue componenten
|
|
// Dit vervangt de complexe injectie in het DynamicForm component
|
|
export { iconManager as default };
|
|
|
|
// We exporteren iconManager als default, maar houden ook de window.iconManager beschikbaar
|
|
// voor backwards compatibility met bestaande code
|
|
|
|
// Maak een Vue mixin die iconManager toevoegt aan elk component dat het nodig heeft
|
|
export const IconManagerMixin = {
|
|
created() {
|
|
// Check of er een formData.icon property is
|
|
if (this.formData && this.formData.icon) {
|
|
window.iconManager.loadIcon(this.formData.icon);
|
|
}
|
|
},
|
|
|
|
// Watch voor formData.icon veranderingen
|
|
watch: {
|
|
'formData.icon': function(newIcon) {
|
|
if (newIcon) {
|
|
window.iconManager.loadIcon(newIcon);
|
|
}
|
|
}
|
|
},
|
|
|
|
// Methode om toe te voegen aan componenten
|
|
methods: {
|
|
loadIcon(iconName, options) {
|
|
window.iconManager.loadIcon(iconName, options);
|
|
},
|
|
|
|
loadIcons(iconNames, options) {
|
|
window.iconManager.loadIcons(iconNames, options);
|
|
}
|
|
}
|
|
};
|
|
|
|
// We hoeven niet langer DynamicForm te manipuleren
|
|
// omdat Vue componenten nu de IconManagerMixin kunnen gebruiken
|
|
console.log('IconManager en IconManagerMixin zijn beschikbaar voor componenten');
|