66 lines
2.2 KiB
JavaScript
66 lines
2.2 KiB
JavaScript
// static/js/components/MaterialIconManager.js
|
|
|
|
/**
|
|
* Een hulpklasse om Material Symbols Outlined iconen te beheren
|
|
* en dynamisch toe te voegen aan de pagina indien nodig.
|
|
*/
|
|
export const MaterialIconManager = {
|
|
name: 'MaterialIconManager',
|
|
data() {
|
|
return {
|
|
loadedIconSets: [],
|
|
defaultOptions: {
|
|
opsz: 24, // Optimale grootte: 24px
|
|
wght: 400, // Gewicht: normaal
|
|
FILL: 0, // Vulling: niet gevuld
|
|
GRAD: 0 // Kleurverloop: geen
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
/**
|
|
* Zorgt ervoor dat de Material Symbols Outlined stijlbladen zijn geladen
|
|
* @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
|
|
* @param {Array} iconNames - Optionele lijst met specifieke iconen om te laden
|
|
*/
|
|
ensureIconsLoaded(options = {}, iconNames = []) {
|
|
const opts = { ...this.defaultOptions, ...options };
|
|
const styleUrl = this.buildStyleUrl(opts, iconNames);
|
|
|
|
// Controleer of deze specifieke set al is geladen
|
|
if (!this.loadedIconSets.includes(styleUrl)) {
|
|
this.loadStylesheet(styleUrl);
|
|
this.loadedIconSets.push(styleUrl);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Bouwt de URL voor het stijlblad
|
|
*/
|
|
buildStyleUrl(options, iconNames = []) {
|
|
let url = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${options.opsz},${options.wght},${options.FILL},${options.GRAD}`;
|
|
|
|
// Voeg specifieke iconNames toe als deze zijn opgegeven
|
|
if (iconNames.length > 0) {
|
|
url += `&icon_names=${iconNames.join(',')}`;
|
|
}
|
|
|
|
return url;
|
|
},
|
|
|
|
/**
|
|
* Laadt een stijlblad dynamisch
|
|
*/
|
|
loadStylesheet(url) {
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = url;
|
|
document.head.appendChild(link);
|
|
console.log(`Material Symbols Outlined geladen: ${url}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Singleton instantie om te gebruiken in de hele applicatie
|
|
export const iconManager = new Vue(MaterialIconManager);
|