libreria-astro-lefebvre 0.0.35 → 0.0.38

package/src/limbo/init.ts

@@ -0,0 +1,174 @@
+/**
+ * Limbo Integration Module for libreria-astro-lefebvre
+ *
+ * Este módulo gestiona la inicialización y configuración de limbo-component
+ * para ser usado en cualquier portal que consuma esta librería.
+ */
+
+export interface LimboConfig {
+  publicKey: string;
+  prod?: boolean;
+  selector?: string;
+  defaultReturnType?: 'url' | 'assetId' | 'object' | 'json' | 'base64';
+  sizeModal?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+  onSelect?: (data: any) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface LimboInitOptions extends LimboConfig {
+  autoInit?: boolean;
+}
+
+/**
+ * Genera el script de inicialización de Limbo como string
+ * para ser inyectado en el HTML
+ */
+export function generateLimboInitScript(config: LimboConfig): string {
+  const {
+    publicKey,
+    prod = false,
+    selector = '.js-limbo',
+    defaultReturnType = 'json',
+    sizeModal = 'xlarge'
+  } = config;
+
+  // URL del proxy para evitar CORS (usa endpoint local del portal)
+  // El proxy está en /api/limbo-token del portal que consume la librería
+  const tokenProxyUrl = '/api/limbo-token';
+
+  return `
+(function() {
+  // Estado del token
+  var cachedToken = null;
+  var tokenExpiry = null;
+
+  // Función para obtener token JWT (usa proxy local para evitar CORS)
+  async function getToken() {
+    // Si tenemos un token válido en caché, usarlo
+    if (cachedToken && tokenExpiry && Date.now() < tokenExpiry) {
+      return cachedToken;
+    }
+
+    try {
+      // Usamos el proxy local para evitar problemas de CORS
+      // Solo enviamos public_key - NO se requiere api_key
+      var response = await fetch('${tokenProxyUrl}', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          public_key: '${publicKey}'
+        })
+      });
+
+      if (!response.ok) {
+        var errorData = await response.json().catch(function() { return {}; });
+        throw new Error('Error obteniendo token: ' + response.status + ' - ' + (errorData.error || ''));
+      }
+
+      var data = await response.json();
+      cachedToken = data.token;
+      // Guardar expiración con 30 segundos de margen
+      tokenExpiry = Date.now() + ((data.expires_in || 3600) * 1000) - 30000;
+      console.log('[Limbo] Token JWT obtenido correctamente');
+      return cachedToken;
+    } catch (error) {
+      console.error('[Limbo] Error en tokenProvider:', error);
+      throw error;
+    }
+  }
+
+  // Esperamos a que Limbo esté disponible
+  function initLimbo() {
+    if (typeof Limbo === 'undefined') {
+      console.warn('[Limbo] Limbo no está cargado. Reintentando...');
+      setTimeout(initLimbo, 100);
+      return;
+    }
+
+    console.log('[Limbo] Inicializando integración con Page Builder...');
+
+    // Configurar Limbo globalmente con tokenProvider como función
+    // IMPORTANTE: tokenProvider va en el nivel superior, no dentro de auth
+    Limbo.configure({
+      prod: ${prod},
+      publicKey: '${publicKey}',
+      authMode: 'jwt',
+      tokenProvider: getToken,
+      modal: {
+        size: '${sizeModal}'
+      }
+    });
+
+    // Configurar auto-inputs para detectar elementos con el selector
+    Limbo.configureAutoInputs({
+      selector: '${selector}',
+      buttonText: 'Seleccionar imagen',
+      returnType: '${defaultReturnType}',
+
+      // Parsear configuración del input desde datasets
+      parseInputConfig: function(input) {
+        var config = {};
+
+        // Parsear mandatoryCrops si existe
+        if (input.dataset.mandatorycrops) {
+          try {
+            config.mandatoryCrops = JSON.parse(input.dataset.mandatorycrops);
+          } catch (e) {
+            console.warn('[Limbo] Error parseando mandatoryCrops:', e);
+          }
+        }
+
+        // Parsear returnType específico del input
+        if (input.dataset.returntype) {
+          config.returnType = input.dataset.returntype;
+        }
+
+        // Parsear modo UI
+        if (input.dataset.modeui) {
+          config.modeUI = input.dataset.modeui;
+        }
+
+        return config;
+      }
+    });
+
+    console.log('[Limbo] Integración configurada. Buscando inputs con selector: ${selector}');
+  }
+
+  // Iniciar cuando el DOM esté listo
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initLimbo);
+  } else {
+    initLimbo();
+  }
+})();
+`;
+}
+
+/**
+ * Genera las URLs de los assets de Limbo (CSS y JS)
+ */
+export function getLimboAssetUrls(options: { prod?: boolean; version?: string } = {}) {
+  const { prod = false, version = 'latest' } = options;
+
+  // En producción, usar CDN de npm o URL de producción
+  if (prod) {
+    return {
+      css: `https://unpkg.com/limbo-component@${version}/dist/limbo.css`,
+      js: `https://unpkg.com/limbo-component@${version}/dist/limbo.min.js`
+    };
+  }
+
+  // En desarrollo, usar el build local (npm link)
+  return {
+    css: '/node_modules/limbo-component/dist/limbo.css',
+    js: '/node_modules/limbo-component/dist/limbo.min.js'
+  };
+}
+
+export default {
+  generateLimboInitScript,
+  getLimboAssetUrls
+};