libreria-astro-lefebvre 0.0.49 → 0.0.51

package/src/limbo/init.ts

@@ -1,16 +1,38 @@
 /**
  * Limbo Integration Module for libreria-astro-lefebvre
  *
+ * v2.0 - Actualizado para limbo-component v2.0
+ *
  * Este módulo gestiona la inicialización y configuración de limbo-component
  * para ser usado en cualquier portal que consuma esta librería.
+ *
+ * Soporta configuración via data attributes en inputs HTML:
+ * - data-mandatorycrops: JSON array de crops obligatorios
+ * - data-modeui: full | gallery-only | upload-only | crop-only
+ * - data-returntype: url | assetId | object | json | base64
+ * - data-allowadditionalcrops: true | false
+ * - data-maxcrops: number
+ * - data-buttontext: texto personalizado del botón
  */
 
+export interface MandatoryCrop {
+  label: string;
+  width?: number;
+  height?: number;
+  required?: boolean;
+  preset_aspect?: string;
+}
+
 export interface LimboConfig {
   publicKey: string;
   prod?: boolean;
   selector?: string;
-  defaultReturnType?: 'url' | 'assetId' | 'object' | 'json' | 'base64';
-  sizeModal?: 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+  defaultReturnType?: "url" | "assetId" | "object" | "json" | "base64";
+  defaultModeUI?: "full" | "gallery-only" | "upload-only" | "crop-only";
+  sizeModal?: "small" | "medium" | "large" | "xlarge" | "fullscreen";
+  defaultButtonText?: string;
+  allowAdditionalCrops?: boolean;
+  maxCrops?: number;
   onSelect?: (data: any) => void;
   onError?: (error: Error) => void;
 }
@@ -27,14 +49,18 @@ export function generateLimboInitScript(config: LimboConfig): string {
   const {
     publicKey,
     prod = false,
-    selector = '.js-limbo',
-    defaultReturnType = 'json',
-    sizeModal = 'xlarge'
+    selector = ".js-limbo",
+    defaultReturnType = "json",
+    defaultModeUI = "full",
+    sizeModal = "xlarge",
+    defaultButtonText = "Seleccionar imagen",
+    allowAdditionalCrops = true,
+    maxCrops = 10,
   } = 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';
+  const tokenProxyUrl = "/api/limbo-token";
 
   return `
 (function() {
@@ -79,11 +105,41 @@ export function generateLimboInitScript(config: LimboConfig): string {
     }
   }
 
+  // Estado de inicialización
+  var initRetrys = 0;
+  var maxRetrys = 20;
+
+  // Función global para re-escanear inputs (útil después de hydration de Vue/React)
+  window.LimboRescan = function(selector) {
+    var targetSelector = selector || '${selector}';
+    var inputs = document.querySelectorAll(targetSelector);
+    var processed = 0;
+    console.log('[Limbo] Rescan manual: buscando inputs con selector', targetSelector);
+    inputs.forEach(function(input) {
+      if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
+        try {
+          Limbo.autoInputs._processInput(input);
+          input.dataset.limboProcessed = 'true';
+          processed++;
+        } catch (e) {
+          console.error('[Limbo] Error procesando input:', e);
+        }
+      }
+    });
+    console.log('[Limbo] Rescan completado:', processed, 'inputs procesados de', inputs.length, 'encontrados');
+    return processed;
+  };
+
   // Esperamos a que Limbo esté disponible
   function initLimbo() {
     if (typeof Limbo === 'undefined') {
-      console.warn('[Limbo] Limbo no está cargado. Reintentando...');
-      setTimeout(initLimbo, 100);
+      initRetrys++;
+      if (initRetrys <= maxRetrys) {
+        console.warn('[Limbo] Limbo no está cargado. Reintentando... (' + initRetrys + '/' + maxRetrys + ')');
+        setTimeout(initLimbo, 100);
+      } else {
+        console.error('[Limbo] No se pudo cargar Limbo después de ' + maxRetrys + ' intentos.');
+      }
       return;
     }
 
@@ -104,10 +160,17 @@ export function generateLimboInitScript(config: LimboConfig): string {
     // Configurar auto-inputs para detectar elementos con el selector
     Limbo.configureAutoInputs({
       selector: '${selector}',
-      buttonText: 'Seleccionar imagen',
+      buttonText: '${defaultButtonText}',
       returnType: '${defaultReturnType}',
+      modeUI: '${defaultModeUI}',
+      allowAdditionalCrops: ${allowAdditionalCrops},
+      maxCrops: ${maxCrops},
+      // 🔧 Los recortes se guardan en Limbo para garantizar persistencia
+      // Los recortes del page-builder se pueden identificar por su nombre (contienen dimensiones)
+      localCropsOnly: false,
 
       // Parsear configuración del input desde datasets
+      // Los valores del dataset tienen prioridad sobre los defaults
       parseInputConfig: function(input) {
         var config = {};
 
@@ -130,11 +193,68 @@ export function generateLimboInitScript(config: LimboConfig): string {
           config.modeUI = input.dataset.modeui;
         }
 
+        // Parsear allowAdditionalCrops
+        if (input.dataset.allowadditionalcrops !== undefined) {
+          config.allowAdditionalCrops = input.dataset.allowadditionalcrops === 'true';
+        }
+
+        // Parsear maxCrops
+        if (input.dataset.maxcrops) {
+          config.maxCrops = parseInt(input.dataset.maxcrops, 10);
+        }
+
+        // Parsear buttonText personalizado
+        if (input.dataset.buttontext) {
+          config.buttonText = input.dataset.buttontext;
+        }
+
         return config;
       }
     });
 
     console.log('[Limbo] Integración configurada. Buscando inputs con selector: ${selector}');
+
+    // Debug: Verificar que el observer esté activo
+    console.log('[Limbo] AutoInputs stats:', Limbo.autoInputs?.getStats?.() || 'N/A');
+
+    // Debug: Escanear manualmente después de un delay para Vue/React hydration
+    setTimeout(function() {
+      console.log('[Limbo] Re-escaneando inputs después de hydration...');
+      var inputs = document.querySelectorAll('${selector}');
+      console.log('[Limbo] Encontrados ' + inputs.length + ' inputs con selector ${selector}');
+      inputs.forEach(function(input, idx) {
+        console.log('[Limbo] Input ' + idx + ':', input.tagName, input.className, input.id || input.name);
+        // Forzar procesamiento si es un input válido
+        if (input.tagName === 'INPUT' && !input.dataset.limboProcessed) {
+          try {
+            Limbo.autoInputs._processInput(input);
+            input.dataset.limboProcessed = 'true';
+            console.log('[Limbo] Input procesado manualmente:', input.id || input.name);
+          } catch (e) {
+            console.error('[Limbo] Error procesando input:', e);
+          }
+        }
+      });
+    }, 1000); // Esperar 1 segundo para Vue hydration
+
+    // Segunda pasada después de 2.5 segundos para componentes Vue más lentos
+    setTimeout(function() {
+      var inputs = document.querySelectorAll('${selector}');
+      var pendingInputs = Array.from(inputs).filter(function(input) {
+        return input.tagName === 'INPUT' && !input.dataset.limboProcessed;
+      });
+      if (pendingInputs.length > 0) {
+        console.log('[Limbo] Segunda pasada: procesando ' + pendingInputs.length + ' inputs pendientes');
+        pendingInputs.forEach(function(input) {
+          try {
+            Limbo.autoInputs._processInput(input);
+            input.dataset.limboProcessed = 'true';
+          } catch (e) {
+            console.error('[Limbo] Error procesando input:', e);
+          }
+        });
+      }
+    }, 2500);
   }
 
   // Iniciar cuando el DOM esté listo
@@ -150,25 +270,26 @@ export function generateLimboInitScript(config: LimboConfig): string {
 /**
  * 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;
-
+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`
+      js: `https://unpkg.com/limbo-component@${version}/dist/limbo.min.js`,
     };
   }
 
-  // En desarrollo, usar el build local (npm link)
+  // En desarrollo, usar el build local desde public/limbo
   return {
-    css: '/node_modules/limbo-component/dist/limbo.css',
-    js: '/node_modules/limbo-component/dist/limbo.min.js'
+    css: "/limbo/limbo.css",
+    js: "/limbo/limbo.min.js",
   };
 }
 
 export default {
   generateLimboInitScript,
-  getLimboAssetUrls
+  getLimboAssetUrls,
 };