87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
// frontend/public/bootstrap.js
|
|
(function() {
|
|
// El dominio donde se alojan los widgets
|
|
const WIDGETS_HOST = 'https://widgets.eldia.com';
|
|
|
|
// Función para cargar dinámicamente un script
|
|
function loadScript(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.type = 'module';
|
|
script.src = src;
|
|
script.onload = resolve;
|
|
script.onerror = reject;
|
|
document.head.appendChild(script);
|
|
});
|
|
}
|
|
|
|
// Función para cargar dinámicamente una hoja de estilos
|
|
function loadCSS(href) {
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = href;
|
|
document.head.appendChild(link);
|
|
}
|
|
|
|
// Función principal
|
|
async function initWidgets() {
|
|
try {
|
|
// 1. Obtener el manifest.json
|
|
const response = await fetch(`${WIDGETS_HOST}/manifest.json`);
|
|
if (!response.ok) {
|
|
throw new Error('No se pudo cargar el manifest de los widgets de mercados.');
|
|
}
|
|
const manifest = await response.json();
|
|
|
|
// 2. Encontrar el punto de entrada principal
|
|
const entryKey = Object.keys(manifest).find(key => manifest[key].isEntry);
|
|
if (!entryKey) {
|
|
throw new Error('No se encontró el punto de entrada en el manifest de mercados.');
|
|
}
|
|
|
|
const entry = manifest[entryKey];
|
|
const jsUrl = `${WIDGETS_HOST}/${entry.file}`;
|
|
|
|
// 3. Cargar el CSS si existe
|
|
if (entry.css && entry.css.length > 0) {
|
|
entry.css.forEach(cssFile => {
|
|
const cssUrl = `${WIDGETS_HOST}/${cssFile}`;
|
|
loadCSS(cssUrl);
|
|
});
|
|
}
|
|
|
|
// 4. Cargar el JS principal
|
|
await loadScript(jsUrl);
|
|
|
|
// 5. Una vez cargado, llamar a la función de renderizado para CADA WIDGET
|
|
if (window.MercadosWidgets && typeof window.MercadosWidgets.render === 'function') {
|
|
console.log('Bootstrap Mercados: La función render existe. Renderizando widgets...');
|
|
|
|
// Buscamos los contenedores específicos para los widgets de mercados
|
|
const widgetContainers = document.querySelectorAll('[data-mercado-widget]');
|
|
|
|
if (widgetContainers.length === 0) {
|
|
console.warn('Bootstrap Mercados: No se encontraron contenedores de widget en la página.');
|
|
}
|
|
|
|
widgetContainers.forEach(container => {
|
|
// Pasamos el contenedor y su dataset (props) a la función de renderizado
|
|
window.MercadosWidgets.render(container, container.dataset);
|
|
});
|
|
} else {
|
|
console.error('Bootstrap Mercados: La función window.MercadosWidgets.render no fue encontrada.');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error al inicializar los widgets de mercados:', error);
|
|
}
|
|
}
|
|
|
|
// Esperamos a que el DOM esté listo para ejecutar
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initWidgets);
|
|
} else {
|
|
initWidgets();
|
|
}
|
|
|
|
})(); |