{ "version": 3, "sources": ["/cdn/shop/t/49/assets/realfut-nano-customizer.js?rfv=29"], "sourcesContent": ["(() => {\n const VERSION = '29';\n const WIDTH = 330;\n const HEIGHT = 460;\n const EXPORT_WIDTH = 2000;\n const EXPORT_HEIGHT = 1413;\n const GREEN = '#10b981';\n const DESIGN_PROPERTY = 'Dise\\u00F1o personalizado';\n const SIZE_PROPERTY = 'Talla';\n\n const MODEL_CONFIG = {\n NANO: {\n crop: { left: 33, top: 60, width: 264, height: 340 },\n logo: { left: 165, top: 365, width: 82 },\n export: {\n left: { x: 130, y: 150, width: 830, height: 1070 },\n right: { x: 1030, y: 150, width: 830, height: 1070 },\n },\n },\n ARMOUR: {\n // Includes the complete original Armour contour plus a small transparent\n // margin, so neither side is trimmed in the HD file.\n crop: { left: 18, top: 12, width: 294, height: 436 },\n // leftBySide centra el logo en cada silueta (son asim\\u00E9tricas): la\n // izquierda cae un poco a la izquierda y la derecha un poco a la derecha.\n logo: { left: 165, top: 390, width: 92, leftBySide: { left: 156, right: 174 } },\n export: {\n left: { x: 100, y: 80, width: 840, height: 1250 },\n right: { x: 1060, y: 80, width: 840, height: 1250 },\n },\n },\n CARBON: {\n // Conserva la forma exacta de la plantilla Carbon en talla \\u00FAnica y\n // utiliza el mismo lienzo HD del personalizador.\n crop: { left: 18, top: 12, width: 294, height: 436 },\n logo: { left: 165, top: 390, width: 92, leftBySide: { left: 171, right: 165 } },\n export: {\n left: { x: 100, y: 80, width: 840, height: 1250 },\n right: { x: 1060, y: 80, width: 840, height: 1250 },\n },\n },\n };\n\n function renderResetIcon(ctx, left, top, _styleOverride, fabricObject) {\n const size = 24;\n ctx.save();\n ctx.translate(left, top);\n ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n ctx.beginPath();\n ctx.arc(0, 0, size / 2, 0, Math.PI * 2);\n ctx.fillStyle = GREEN;\n ctx.fill();\n ctx.strokeStyle = '#ffffff';\n ctx.lineWidth = 2;\n ctx.lineCap = 'round';\n ctx.beginPath();\n ctx.arc(1, 0, 6, -Math.PI * 0.75, Math.PI * 0.65);\n ctx.stroke();\n ctx.beginPath();\n ctx.moveTo(-6, -5);\n ctx.lineTo(-7, 1);\n ctx.lineTo(-1, 0);\n ctx.stroke();\n ctx.restore();\n }\n\n function resetObject(_eventData, transform) {\n const target = transform.target;\n if (target._rfCustomizer) target._rfCustomizer.resetObject(target);\n return true;\n }\n\n function waitForImage(src) {\n return new Promise((resolve, reject) => {\n const image = new Image();\n image.crossOrigin = 'anonymous';\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = src;\n });\n }\n\n function canvasToBlob(canvas) {\n return new Promise((resolve, reject) => {\n canvas.toBlob((blob) => blob ? resolve(blob) : reject(new Error('No se ha podido generar el archivo.')), 'image/png');\n });\n }\n\n class RealfutNanoCustomizer extends HTMLElement {\n query(selector) {\n const local = HTMLElement.prototype.querySelector.call(this, selector);\n if (local) return local;\n return this.modal ? this.modal.querySelector(selector) : null;\n }\n\n queryAll(selector) {\n const local = Array.from(HTMLElement.prototype.querySelectorAll.call(this, selector));\n if (!this.modal || this.contains(this.modal)) return local;\n return local.concat(Array.from(this.modal.querySelectorAll(selector)));\n }\n\n async connectedCallback() {\n if (this.initialized || this.initializing) return;\n this.dataset.runtimeVersion = VERSION;\n\n if (!window.fabric) {\n this.fabricAttempts = (this.fabricAttempts || 0) + 1;\n if (this.fabricAttempts <= 100) {\n window.setTimeout(() => this.connectedCallback(), 50);\n return;\n }\n const launcher = this.query('[data-action=\"open-modal\"]');\n if (launcher) launcher.disabled = true;\n this.setStatus('No se ha podido cargar el editor. Recarga la p\\u00E1gina.', true);\n return;\n }\n\n this.initializing = true;\n\n try {\n const [maskLeft, maskRight, outlineLeft, outlineRight] = await Promise.all([\n waitForImage(this.dataset.maskLeftUrl),\n waitForImage(this.dataset.maskRightUrl),\n waitForImage(this.dataset.outlineLeftUrl),\n waitForImage(this.dataset.outlineRightUrl),\n ]);\n this.shapeAssets = {\n left: { mask: maskLeft, outline: outlineLeft },\n right: { mask: maskRight, outline: outlineRight },\n };\n } catch (error) {\n console.error(error);\n const launcher = this.query('[data-action=\"open-modal\"]');\n if (launcher) launcher.disabled = true;\n this.setStatus(`No se ha podido cargar la plantilla ${this.dataset.modelName || 'de espinilleras'}. Recarga la p\\u00E1gina.`, true);\n this.initializing = false;\n return;\n }\n\n this.initialized = true;\n this.initializing = false;\n\n this.formId = this.dataset.productFormId;\n this.model = ['ARMOUR', 'CARBON'].includes(this.dataset.model) ? this.dataset.model : 'NANO';\n this.modelName = this.dataset.modelName || this.model;\n this.modelConfig = MODEL_CONFIG[this.model];\n this.selectedSize = this.model === 'ARMOUR'\n ? ''\n : this.model === 'CARBON'\n ? '\\u00DAnica \\u00B7 16,3 \\u00D7 8,9 cm'\n : '\\u00DAnica';\n this.currentAvailable = this.dataset.available === 'true';\n this.activeSide = 'left';\n this.currentStep = this.model === 'ARMOUR' ? 1 : 2;\n this.logoColor = 'black';\n this.orderBlob = null;\n this.orderFilename = '';\n this.baseScale = new WeakMap();\n this.canvases = {};\n this.layers = {};\n this.logoLoads = {};\n this.logoReady = { left: false, right: false };\n this.layerSequence = 0;\n this.liveTextObjects = { left: null, right: null };\n this.variants = this.readVariants();\n\n this.configureFabricControls();\n this.canvases.left = this.createCanvas(this.query('canvas[id*=\"left\"]'), 'left');\n this.canvases.right = this.createCanvas(this.query('canvas[id*=\"right\"]'), 'right');\n this.loadLogo('left');\n this.loadLogo('right');\n this.modal = this.query('[data-modal]');\n this.launcher = this.query('[data-action=\"open-modal\"]');\n this.bindUI();\n this.mountModalAtDocumentRoot();\n this.syncCanvasDisplaySize();\n this.updateSelectionPanel(null);\n this.updateStepUI();\n this.updateProgress();\n this.renderLayers();\n document.body.classList.add('rf-nano-customizer-ready');\n }\n\n mountModalAtDocumentRoot() {\n if (!this.modal || this.modal.parentElement === document.body) return;\n document.body.appendChild(this.modal);\n }\n\n configureFabricControls() {\n fabric.Object.prototype.transparentCorners = false;\n fabric.Object.prototype.cornerColor = GREEN;\n fabric.Object.prototype.cornerStrokeColor = '#ffffff';\n fabric.Object.prototype.cornerStyle = 'circle';\n fabric.Object.prototype.cornerSize = 22;\n fabric.Object.prototype.touchCornerSize = 48;\n fabric.Object.prototype.borderColor = GREEN;\n fabric.Object.prototype.borderScaleFactor = 2;\n fabric.Object.prototype.padding = 9;\n fabric.Object.prototype.centeredScaling = true;\n fabric.Object.prototype.controls.mtr.offsetY = -34;\n fabric.Object.prototype.controls.mtr.withConnection = true;\n fabric.Object.prototype.controls.resetControl = new fabric.Control({\n x: -0.5,\n y: -0.5,\n offsetX: -18,\n offsetY: -18,\n cursorStyle: 'pointer',\n mouseUpHandler: resetObject,\n render: renderResetIcon,\n cornerSize: 34,\n });\n\n // Fabric normally draws and hit-tests a control at the real corner of\n // the object. When a photo is enlarged beyond the canvas, those points\n // end up outside the interactive area and the user cannot reduce it\n // again. Keep the REAL Fabric controls inside the canvas so they remain\n // visible and draggable at every zoom level (desktop and mobile).\n Object.values(fabric.Object.prototype.controls).forEach((control) => {\n if (!control || control.rfViewportClamped) return;\n const originalPositionHandler = control.positionHandler;\n if (typeof originalPositionHandler !== 'function') return;\n\n control.positionHandler = function rfVisibleControlPosition(dim, finalMatrix, object, currentControl) {\n const point = originalPositionHandler.call(this, dim, finalMatrix, object, currentControl);\n const canvas = object?.canvas;\n if (!point || !canvas || object.rfRole !== 'user') return point;\n\n const margin = Math.max(13, (Number(this.cornerSize) || 22) / 2 + 2);\n const maxX = Math.max(margin, canvas.getWidth() - margin);\n const maxY = Math.max(margin, canvas.getHeight() - margin);\n return new fabric.Point(\n Math.max(margin, Math.min(maxX, point.x)),\n Math.max(margin, Math.min(maxY, point.y)),\n );\n };\n control.rfViewportClamped = true;\n });\n }\n\n logoLeftFor(side) {\n const s = this.modelConfig.logo;\n if (s.leftBySide && s.leftBySide[side] != null) return s.leftBySide[side];\n return s.left;\n }\n\n createShapeImage(side, type, options = {}) {\n const source = this.shapeAssets[side][type];\n const sourceWidth = source.naturalWidth || source.width || WIDTH;\n const sourceHeight = source.naturalHeight || source.height || HEIGHT;\n return new fabric.Image(source, {\n left: 0,\n top: 0,\n scaleX: WIDTH / sourceWidth,\n scaleY: HEIGHT / sourceHeight,\n selectable: false,\n evented: false,\n objectCaching: false,\n ...options,\n });\n }\n\n createClipPath(side) {\n return this.createShapeImage(side, 'mask', {\n absolutePositioned: true,\n });\n }\n\n createCanvas(element, side) {\n const canvas = new fabric.Canvas(element, {\n width: WIDTH,\n height: HEIGHT,\n preserveObjectStacking: true,\n selection: false,\n allowTouchScrolling: false,\n stopContextMenu: true,\n });\n\n // La zona segura es una gu\u00EDa de interfaz colocada sobre el canvas. Al\n // no ser un objeto Fabric, nunca se incluye en el PNG de producci\u00F3n.\n const safeGuideUrl = side === 'right' ? this.dataset.safeRightUrl : this.dataset.safeLeftUrl;\n if (safeGuideUrl && canvas.wrapperEl) {\n const safeGuide = document.createElement('img');\n safeGuide.className = 'rf-nano__safe-guide';\n safeGuide.src = safeGuideUrl;\n safeGuide.alt = '';\n safeGuide.setAttribute('aria-hidden', 'true');\n safeGuide.draggable = false;\n canvas.wrapperEl.appendChild(safeGuide);\n }\n\n const background = new fabric.Rect({\n left: 0,\n top: 0,\n width: WIDTH,\n height: HEIGHT,\n fill: '#ffffff',\n selectable: false,\n evented: false,\n objectCaching: false,\n clipPath: this.createClipPath(side),\n });\n background.rfRole = 'background';\n\n const outline = this.createShapeImage(side, 'outline');\n outline.rfRole = 'outline';\n\n const logoSettings = this.modelConfig.logo;\n const logoLeft = this.logoLeftFor(side);\n const logo = new fabric.Rect({\n left: logoLeft,\n top: logoSettings.top,\n originX: 'center',\n originY: 'center',\n width: logoSettings.width,\n height: 27,\n fill: 'transparent',\n selectable: false,\n evented: false,\n objectCaching: false,\n });\n logo.rfRole = 'logo';\n\n canvas.add(background, outline, logo);\n this.layers[side] = { background, outline, logo };\n this.keepFixedLayers(canvas, side);\n\n canvas.on('mouse:down', () => this.setActiveSide(side));\n canvas.on('selection:created', (event) => this.updateSelectionPanel(event.selected && event.selected[0]));\n canvas.on('selection:updated', (event) => this.updateSelectionPanel(event.selected && event.selected[0]));\n canvas.on('selection:cleared', () => this.updateSelectionPanel(null));\n canvas.on('object:modified', (event) => {\n this.keepUserObjectReachable(event.target);\n this.updateMobileSelectionOutline(event.target);\n this.markDesignChanged();\n this.keepFixedLayers(canvas, side);\n });\n canvas.on('object:moving', (event) => {\n this.keepUserObjectReachable(event.target);\n this.updateMobileSelectionOutline(event.target);\n });\n canvas.on('object:scaling', (event) => {\n this.keepUserObjectReachable(event.target);\n this.updateMobileSelectionOutline(event.target);\n });\n canvas.on('object:rotating', (event) => {\n this.keepUserObjectReachable(event.target);\n this.updateMobileSelectionOutline(event.target);\n });\n canvas.on('text:changed', (event) => {\n const object = event.target;\n if (!object || !['name', 'text', 'number'].includes(object.rfKind)) return;\n this.applyTextShape(object);\n this.renderLayers();\n this.markDesignChanged();\n });\n\n canvas.requestRenderAll();\n return canvas;\n }\n\n syncCanvasDisplaySize() {\n if (!this.canvases) return;\n\n const mobile = window.matchMedia('(max-width: 989px)').matches;\n const viewportHeight = window.visualViewport?.height || window.innerHeight || 700;\n const viewportWidth = window.visualViewport?.width || window.innerWidth || 390;\n const previewMode = this.currentStep === 5;\n const displayHeight = Math.max(210, Math.min(285, Math.round(viewportHeight * 0.33)));\n const singleWidth = Math.max(148, Math.min(204, Math.round(displayHeight * WIDTH / HEIGHT), Math.round(viewportWidth * 0.54)));\n const previewWidth = Math.max(112, Math.min(175, Math.floor((viewportWidth - 30) / 2)));\n const displayWidth = mobile && previewMode ? previewWidth : singleWidth;\n const exactHeight = Math.round(displayWidth * HEIGHT / WIDTH);\n\n Object.values(this.canvases).forEach((canvas) => {\n if (!canvas?.wrapperEl) return;\n const wrapper = canvas.wrapperEl;\n const surfaces = [canvas.lowerCanvasEl, canvas.upperCanvasEl].filter(Boolean);\n\n if (!mobile) {\n ['width', 'height', 'max-width', 'max-height'].forEach((property) => wrapper.style.removeProperty(property));\n surfaces.forEach((surface) => {\n surface.style.removeProperty('width');\n surface.style.removeProperty('height');\n surface.style.removeProperty('max-width');\n surface.style.removeProperty('max-height');\n });\n return;\n }\n\n wrapper.style.setProperty('width', `${displayWidth}px`, 'important');\n wrapper.style.setProperty('height', `${exactHeight}px`, 'important');\n wrapper.style.setProperty('max-width', `${displayWidth}px`, 'important');\n wrapper.style.setProperty('max-height', `${exactHeight}px`, 'important');\n surfaces.forEach((surface) => {\n surface.style.setProperty('width', `${displayWidth}px`, 'important');\n surface.style.setProperty('height', `${exactHeight}px`, 'important');\n surface.style.setProperty('max-width', `${displayWidth}px`, 'important');\n surface.style.setProperty('max-height', `${exactHeight}px`, 'important');\n });\n });\n\n this.queryAll('[data-stage]').forEach((stage) => {\n if (mobile) {\n const stageExtra = previewMode ? 8 : 26;\n stage.style.setProperty('width', `${displayWidth + stageExtra}px`, 'important');\n stage.style.setProperty('max-width', `${displayWidth + stageExtra}px`, 'important');\n } else {\n stage.style.removeProperty('width');\n stage.style.removeProperty('max-width');\n }\n });\n\n this.updateMobileSelectionOutline(this.getSelectedObject());\n }\n\n updateMobileSelectionOutline(object) {\n const outlines = this.queryAll('[data-selection-outline]');\n outlines.forEach((outline) => { outline.hidden = true; });\n\n if (this.currentStep === 5) return;\n if (!object || object.rfRole !== 'user' || !object.canvas) return;\n\n const side = object.canvas === this.canvases.right ? 'right' : 'left';\n const outline = this.query(`[data-selection-outline=\"${side}\"]`);\n const stage = outline?.closest('[data-stage]');\n const wrapper = object.canvas.wrapperEl;\n if (!outline || !stage || !wrapper || !stage.classList.contains('is-active')) return;\n\n object.setCoords();\n const bounds = object.getBoundingRect(true, true);\n const stageBox = stage.getBoundingClientRect();\n const canvasBox = wrapper.getBoundingClientRect();\n const scaleX = canvasBox.width / WIDTH;\n const scaleY = canvasBox.height / HEIGHT;\n const visibleLeft = Math.max(0, Math.min(WIDTH, bounds.left));\n const visibleTop = Math.max(0, Math.min(HEIGHT, bounds.top));\n const visibleRight = Math.max(0, Math.min(WIDTH, bounds.left + bounds.width));\n const visibleBottom = Math.max(0, Math.min(HEIGHT, bounds.top + bounds.height));\n\n if (visibleRight <= visibleLeft || visibleBottom <= visibleTop) return;\n\n const clipped = visibleLeft !== bounds.left\n || visibleTop !== bounds.top\n || visibleRight !== bounds.left + bounds.width\n || visibleBottom !== bounds.top + bounds.height;\n\n outline.style.left = `${canvasBox.left - stageBox.left + visibleLeft * scaleX}px`;\n outline.style.top = `${canvasBox.top - stageBox.top + visibleTop * scaleY}px`;\n outline.style.width = `${Math.max(1, (visibleRight - visibleLeft) * scaleX)}px`;\n outline.style.height = `${Math.max(1, (visibleBottom - visibleTop) * scaleY)}px`;\n outline.classList.toggle('is-clipped', clipped);\n outline.classList.toggle('is-locked', Boolean(object.rfLocked));\n outline.hidden = false;\n }\n\n loadLogo(side) {\n const canvas = this.canvases[side];\n const layer = this.layers[side];\n if (!canvas || !layer) return Promise.resolve(false);\n this.logoReady[side] = false;\n const requestedColor = this.logoColor;\n const source = requestedColor === 'white'\n ? this.dataset.logoWhiteUrl\n : this.dataset.logoBlackUrl;\n if (!source) return Promise.resolve(false);\n\n const pending = new Promise((resolve) => {\n fabric.Image.fromURL(source, (image) => {\n if (!image || requestedColor !== this.logoColor) {\n resolve(false);\n return;\n }\n\n const previous = layer.logo;\n const logoSettings = this.modelConfig.logo;\n image.set({\n left: this.logoLeftFor(side),\n top: logoSettings.top,\n originX: 'center',\n originY: 'center',\n scaleX: logoSettings.width / image.width,\n scaleY: logoSettings.width / image.width,\n selectable: false,\n evented: false,\n objectCaching: false,\n });\n image.rfRole = 'logo';\n canvas.remove(previous);\n canvas.add(image);\n layer.logo = image;\n this.logoReady[side] = true;\n this.keepFixedLayers(canvas, side);\n this.orderBlob = null;\n this.updateProgress();\n resolve(true);\n }, { crossOrigin: 'anonymous' });\n });\n this.logoLoads[side] = pending;\n return pending;\n }\n\n keepFixedLayers(canvas, side) {\n const layer = this.layers[side];\n if (!layer) return;\n canvas.sendToBack(layer.background);\n canvas.bringToFront(layer.outline);\n canvas.bringToFront(layer.logo);\n canvas.requestRenderAll();\n }\n\n softConstrain(object) {\n if (!object || object.rfRole !== 'user') return;\n const margin = 120;\n const rect = object.getBoundingRect(true, true);\n if (rect.left > WIDTH - 30) object.left -= rect.left - (WIDTH - 30);\n if (rect.top > HEIGHT - 30) object.top -= rect.top - (HEIGHT - 30);\n if (rect.left + rect.width < 30) object.left += 30 - (rect.left + rect.width);\n if (rect.top + rect.height < 30) object.top += 30 - (rect.top + rect.height);\n object.left = Math.max(-margin, Math.min(WIDTH + margin, object.left));\n object.top = Math.max(-margin, Math.min(HEIGHT + margin, object.top));\n }\n\n keepUserObjectReachable(object) {\n if (!object || object.rfRole !== 'user') return;\n this.softConstrain(object);\n }\n\n readVariants() {\n const source = this.query('[data-variants-json]');\n if (!source) return [];\n try {\n const variants = JSON.parse(source.textContent || '[]');\n return Array.isArray(variants) ? variants : [];\n } catch (error) {\n console.warn('[Realfut] No se han podido leer las variantes de talla.', error);\n return [];\n }\n }\n\n variantForSize(size) {\n const expected = String(size || '').trim().toUpperCase();\n if (!expected) return null;\n return this.variants.find((variant) => {\n const candidates = [\n variant.title,\n variant.option1,\n variant.option2,\n variant.option3,\n ...(Array.isArray(variant.options) ? variant.options : []),\n ];\n return candidates.some((candidate) => {\n const value = String(candidate || '').trim().toUpperCase();\n return value === expected || value.startsWith(`${expected}:`) || value.startsWith(`${expected} `);\n });\n }) || null;\n }\n\n selectSize(button) {\n if (!button) return;\n const size = button.dataset.size || '';\n const dimensions = button.dataset.dimensions || '';\n const explicitVariantId = button.dataset.variantId || '';\n const variant = this.variants.find((item) => String(item.id) === explicitVariantId) || this.variantForSize(size);\n this.selectedSize = size;\n const sizeRow = this.query('[data-size-row]');\n if (sizeRow) sizeRow.classList.remove('has-error');\n\n this.queryAll('[data-size]').forEach((item) => {\n const active = item === button;\n item.classList.toggle('is-active', active);\n item.setAttribute('aria-pressed', active ? 'true' : 'false');\n });\n\n const summary = this.query('[data-summary-size]');\n if (summary) summary.textContent = dimensions ? `${size} \\u00B7 ${dimensions}` : size;\n const note = this.query('[data-size-note]');\n if (note) note.textContent = dimensions\n ? `Talla ${size} seleccionada \\u00B7 ${dimensions}. La plantilla de dise\\u00F1o no cambia.`\n : `Talla ${size} seleccionada.`;\n\n if (variant || explicitVariantId) {\n const variantId = explicitVariantId || variant.id;\n const variantAvailable = variant\n ? variant.available !== false\n : button.dataset.variantAvailable !== 'false';\n const form = document.getElementById(this.formId);\n const variantInput = form && form.querySelector('[name=\"id\"]');\n if (variantInput) {\n variantInput.value = String(variantId);\n variantInput.disabled = !variantAvailable;\n variantInput.dispatchEvent(new Event('change', { bubbles: true }));\n }\n this.currentAvailable = variantAvailable;\n } else {\n // La talla sigue siendo obligatoria aunque el tema no exponga sus variantes en el editor.\n this.currentAvailable = this.dataset.available === 'true';\n }\n\n const addButton = this.query('[data-action=\"add-to-cart\"]');\n if (addButton) {\n addButton.disabled = !this.currentAvailable;\n addButton.textContent = this.currentAvailable ? 'A\\u00F1adir al carrito' : 'Agotado';\n }\n this.markDesignChanged();\n this.updateStepUI();\n this.setStatus(this.currentAvailable ? `Talla ${size} seleccionada.` : `La talla ${size} est\\u00E1 agotada.`, !this.currentAvailable);\n }\n\n markDesignChanged() {\n this.orderBlob = null;\n if (this.modal) this.updateStepUI();\n }\n\n bindUI() {\n this.launcher.addEventListener('click', () => this.openModal());\n this.queryAll('[data-action=\"close-modal\"]').forEach((button) => {\n button.addEventListener('click', () => this.closeModal());\n });\n\n this.queryAll('[data-side]').forEach((button) => {\n button.addEventListener('click', () => this.setActiveSide(button.dataset.side));\n });\n\n this.queryAll('[data-mobile-side]').forEach((button) => {\n button.addEventListener('click', () => this.setActiveSide(button.dataset.mobileSide));\n });\n\n this.queryAll('[data-size]').forEach((button) => {\n button.addEventListener('click', () => this.selectSize(button));\n });\n\n this.queryAll('[data-step-target]').forEach((button) => {\n button.addEventListener('click', () => this.setStep(Number(button.dataset.stepTarget), false));\n });\n\n this.queryAll('[data-tool]').forEach((button) => {\n button.addEventListener('click', () => this.openTool(button.dataset.tool));\n });\n\n this.query('[data-photo-input]').addEventListener('change', (event) => this.addPhoto(event));\n const liveTextInput = this.query('[data-text-input]');\n const liveTextFont = this.query('[data-text-font]');\n const addAnotherText = this.query('[data-action=\"add-another-text\"]');\n liveTextInput.addEventListener('input', () => {\n this.updateLiveText(liveTextInput.value, liveTextFont.value);\n addAnotherText.disabled = !liveTextInput.value.trim();\n });\n liveTextFont.addEventListener('change', () => {\n this.updateLiveText(liveTextInput.value, liveTextFont.value);\n });\n addAnotherText.addEventListener('click', () => this.startAnotherText());\n\n this.queryAll('[data-flag]').forEach((button) => {\n button.addEventListener('click', () => this.addFlag(button.dataset.flagUrl, button.dataset.flag));\n });\n this.queryAll('[data-bg]').forEach((button) => {\n button.addEventListener('click', () => this.setBackground(button.dataset.bg, button));\n });\n this.queryAll('[data-logo-color]').forEach((button) => {\n button.addEventListener('click', () => this.setLogoColor(button.dataset.logoColor, button));\n });\n this.query('[data-action=\"delete-selected\"]').addEventListener('click', () => this.deleteSelected());\n this.query('[data-action=\"delete-canvas-selected\"]').addEventListener('click', () => this.deleteSelected());\n this.query('[data-action=\"toggle-lock\"]').addEventListener('click', () => this.toggleSelectedLock());\n this.query('[data-action=\"reset-selected\"]').addEventListener('click', () => this.resetSelected());\n this.query('[data-selected-color]').addEventListener('input', (event) => this.changeSelectedColor(event.target.value));\n this.query('[data-selected-font]').addEventListener('change', (event) => this.changeSelectedFont(event.target.value));\n this.query('[data-selected-zoom]').addEventListener('input', (event) => this.changeSelectedZoom(Number(event.target.value)));\n this.query('[data-action=\"zoom-out\"]').addEventListener('click', () => this.nudgeSelectedZoom(-10));\n this.query('[data-action=\"zoom-in\"]').addEventListener('click', () => this.nudgeSelectedZoom(10));\n this.query('[data-action=\"download\"]').addEventListener('click', () => this.downloadDesign());\n this.query('[data-action=\"add-to-cart\"]').addEventListener('click', () => this.submitProduct());\n this.query('[data-action=\"step-next\"]').addEventListener('click', () => this.nextStep());\n this.query('[data-action=\"step-back\"]').addEventListener('click', () => this.previousStep());\n this.query('[data-layers-list]').addEventListener('click', (event) => {\n const button = event.target.closest('[data-layer-action]');\n if (button) this.handleLayerAction(button.dataset.layerAction, button.dataset.layerId);\n });\n\n this.handleDocumentKeydown = (event) => {\n if (this.modal.hidden) return;\n if (event.key === 'Escape') {\n this.closeModal();\n return;\n }\n const target = event.target;\n const isTyping = target && (\n /INPUT|TEXTAREA|SELECT/.test(target.tagName) ||\n target.isContentEditable ||\n target.closest?.('[contenteditable=\"true\"]')\n );\n if ((event.key === 'Delete' || event.key === 'Backspace') && !isTyping) {\n const selected = this.getSelectedObject();\n if (selected && selected.rfRole === 'user') {\n event.preventDefault();\n this.deleteSelected();\n }\n }\n };\n document.addEventListener('keydown', this.handleDocumentKeydown);\n this.handleViewportResize = () => {\n if (this.modal && !this.modal.hidden) {\n if (window.matchMedia('(max-width: 989px)').matches) this.lockMobileViewport();\n else this.unlockMobileViewport();\n }\n this.syncCanvasDisplaySize();\n Object.values(this.canvases || {}).forEach((canvas) => {\n canvas.calcOffset();\n canvas.requestRenderAll();\n });\n };\n window.addEventListener('resize', this.handleViewportResize, { passive: true });\n if (window.visualViewport) window.visualViewport.addEventListener('resize', this.handleViewportResize, { passive: true });\n }\n\n disconnectedCallback() {\n if (this.handleDocumentKeydown) document.removeEventListener('keydown', this.handleDocumentKeydown);\n if (this.handleViewportResize) window.removeEventListener('resize', this.handleViewportResize);\n if (this.handleViewportResize && window.visualViewport) window.visualViewport.removeEventListener('resize', this.handleViewportResize);\n document.body.classList.remove('rf-nano-modal-open');\n document.documentElement.classList.remove('rf-nano-modal-open');\n this.unlockMobileViewport();\n if (this.modal && this.modal.parentElement === document.body) this.modal.remove();\n }\n\n lockMobileViewport() {\n if (!window.matchMedia('(max-width: 989px)').matches || this.mobileViewportLocked) return;\n let viewport = document.querySelector('meta[name=\"viewport\"]');\n this.createdViewportMeta = !viewport;\n if (!viewport) {\n viewport = document.createElement('meta');\n viewport.name = 'viewport';\n document.head.appendChild(viewport);\n }\n this.viewportMeta = viewport;\n this.viewportMetaOriginalContent = viewport.getAttribute('content');\n viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover');\n\n this.preventPageZoom = (event) => {\n if ((event.touches && event.touches.length > 1) || event.type === 'gesturestart' || event.type === 'gesturechange') {\n event.preventDefault();\n }\n };\n document.addEventListener('touchmove', this.preventPageZoom, { passive: false });\n document.addEventListener('gesturestart', this.preventPageZoom, { passive: false });\n document.addEventListener('gesturechange', this.preventPageZoom, { passive: false });\n this.mobileViewportLocked = true;\n }\n\n unlockMobileViewport() {\n if (!this.mobileViewportLocked) return;\n document.removeEventListener('touchmove', this.preventPageZoom);\n document.removeEventListener('gesturestart', this.preventPageZoom);\n document.removeEventListener('gesturechange', this.preventPageZoom);\n if (this.viewportMeta) {\n if (this.createdViewportMeta) this.viewportMeta.remove();\n else if (this.viewportMetaOriginalContent == null) this.viewportMeta.removeAttribute('content');\n else this.viewportMeta.setAttribute('content', this.viewportMetaOriginalContent);\n }\n this.mobileViewportLocked = false;\n this.preventPageZoom = null;\n this.viewportMeta = null;\n }\n\n openModal() {\n this.mountModalAtDocumentRoot();\n this.modal.hidden = false;\n document.body.classList.add('rf-nano-modal-open');\n document.documentElement.classList.add('rf-nano-modal-open');\n this.lockMobileViewport();\n this.setStep(this.model === 'ARMOUR' ? 1 : 2);\n this.syncCanvasDisplaySize();\n requestAnimationFrame(() => {\n this.syncCanvasDisplaySize();\n Object.values(this.canvases).forEach((canvas) => {\n canvas.calcOffset();\n canvas.requestRenderAll();\n });\n const closeButton = this.query('.rf-nano__modal-bar [data-action=\"close-modal\"]');\n if (closeButton) closeButton.focus();\n });\n }\n\n closeModal() {\n this.modal.hidden = true;\n document.body.classList.remove('rf-nano-modal-open');\n document.documentElement.classList.remove('rf-nano-modal-open');\n this.unlockMobileViewport();\n if (this.launcher) this.launcher.focus();\n }\n\n sizeIsReady() {\n return this.model !== 'ARMOUR' || Boolean(this.selectedSize);\n }\n\n setStep(step) {\n const firstStep = this.model === 'ARMOUR' ? 1 : 2;\n const target = Math.max(firstStep, Math.min(5, Number(step) || firstStep));\n this.currentStep = target;\n this.updateStepUI();\n this.setStatus('');\n if (window.matchMedia('(max-width: 989px)').matches) {\n const editor = this.query('.rf-nano__editor');\n if (editor) editor.scrollTop = 0;\n }\n requestAnimationFrame(() => {\n this.syncCanvasDisplaySize();\n Object.values(this.canvases).forEach((canvas) => {\n canvas.calcOffset();\n canvas.requestRenderAll();\n });\n const editor = this.query('.rf-nano__editor');\n if (editor && window.innerWidth < 990) editor.scrollTo({ top: 0, behavior: 'smooth' });\n });\n return true;\n }\n\n nextStep() {\n if (this.currentStep < 5) this.setStep(this.currentStep + 1);\n }\n\n previousStep() {\n const firstStep = this.model === 'ARMOUR' ? 1 : 2;\n if (this.currentStep > firstStep) this.setStep(this.currentStep - 1);\n }\n\n updateStepUI() {\n if (!this.modal) return;\n const step = this.currentStep || 1;\n this.modal.dataset.currentStep = String(step);\n this.modal.dataset.model = this.model;\n\n this.queryAll('[data-step-target]').forEach((button) => {\n const number = Number(button.dataset.stepTarget);\n if (this.model !== 'ARMOUR' && number === 1) {\n button.hidden = true;\n return;\n }\n const isCurrent = number === step;\n button.classList.toggle('is-current', isCurrent);\n button.classList.remove('is-complete');\n button.setAttribute('aria-current', isCurrent ? 'step' : 'false');\n button.disabled = false;\n const marker = button.querySelector('.rf-nano__step-number');\n if (marker) marker.textContent = button.dataset.stepDisplay || String(number);\n });\n\n const headings = {\n 1: 'Selecciona la talla',\n 2: 'A\\u00F1ade una foto',\n 3: 'Texto o dorsal',\n 4: 'Bandera, color y logo',\n 5: 'Previsualiza y compra',\n };\n const helps = {\n 1: this.model === 'ARMOUR' ? 'Elige S, M o L. Las espinilleras permanecen visibles mientras personalizas.' : 'Este modelo utiliza talla \\u00FAnica.',\n 2: 'Sube una imagen y col\\u00F3cala en la espinillera activa.',\n 3: 'Escribe un nombre, una frase o un dorsal. Aparecer\\u00E1 directamente en la espinillera.',\n 4: 'A\\u00F1ade una bandera, elige el color de fondo y selecciona el color del logo REALF\\u00DAT.',\n 5: 'Revisa ambas espinilleras y, cuando est\\u00E9n listas, desc\\u00E1rgalas o a\\u00F1\\u00E1delas al carrito.',\n };\n const heading = this.query('[data-step-heading]');\n const help = this.query('[data-step-help]');\n if (heading) heading.textContent = headings[step];\n if (help) help.textContent = helps[step];\n\n this.queryAll('[data-step-section]').forEach((section) => {\n const visible = section.dataset.stepSection === 'size' ? step === 1 : step >= 2;\n section.hidden = !visible;\n });\n\n const tools = { 2: 'photo', 3: 'text', 4: 'flag' };\n this.openTool(tools[step] || null);\n if (step === 4) {\n const backgroundPanel = this.query('[data-panel=\"background\"]');\n if (backgroundPanel) {\n backgroundPanel.hidden = false;\n backgroundPanel.classList.add('is-active');\n }\n }\n const logoStep = this.query('[data-logo-step]');\n if (logoStep) logoStep.hidden = step !== 4;\n\n const canvasInstruction = this.query('[data-canvas-instruction]');\n if (canvasInstruction) canvasInstruction.textContent = step === 5 ? 'Previsualizaci\\u00F3n final' : `Editando espinillera ${this.activeSide === 'right' ? 'derecha' : 'izquierda'}`;\n\n const navigation = this.query('[data-step-navigation]');\n const finalActions = this.query('[data-final-actions]');\n if (navigation) navigation.hidden = step === 5;\n if (finalActions) finalActions.hidden = step !== 5;\n const back = this.query('[data-action=\"step-back\"]');\n const next = this.query('[data-action=\"step-next\"]');\n if (back) back.hidden = step === (this.model === 'ARMOUR' ? 1 : 2);\n if (next) {\n const labels = {\n 1: 'Continuar con la foto',\n 2: 'Continuar con texto o dorsal',\n 3: 'Continuar con bandera, color y logo',\n 4: 'Previsualizar y comprar',\n };\n next.textContent = labels[step] || 'Continuar';\n }\n\n if (step === 5) {\n Object.values(this.canvases).forEach((canvas) => canvas.discardActiveObject().requestRenderAll());\n this.updateSelectionPanel(null);\n }\n\n this.queryAll('[data-stage]').forEach((stage) => {\n const active = stage.dataset.stage === this.activeSide;\n stage.classList.toggle('is-preview', step === 5);\n stage.classList.toggle('is-step-active', step !== 5 && active);\n stage.classList.toggle('is-step-muted', step !== 5 && !active);\n });\n this.updateProgress();\n }\n\n setActiveSide(side) {\n this.activeSide = side;\n this.queryAll('[data-side]').forEach((button) => {\n const active = button.dataset.side === side;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-selected', active ? 'true' : 'false');\n });\n this.queryAll('[data-mobile-side]').forEach((button) => {\n const active = button.dataset.mobileSide === side;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-selected', active ? 'true' : 'false');\n });\n this.queryAll('[data-stage]').forEach((stage) => stage.classList.toggle('is-active', stage.dataset.stage === side));\n Object.entries(this.canvases).forEach(([key, canvas]) => {\n if (key !== side) canvas.discardActiveObject().requestRenderAll();\n });\n this.updateSelectionPanel(this.canvases[side].getActiveObject());\n this.renderLayers();\n this.syncLiveTextInput();\n this.updateStepUI();\n this.syncCanvasDisplaySize();\n }\n\n openTool(tool) {\n this.queryAll('[data-tool]').forEach((button) => button.classList.toggle('is-active', button.dataset.tool === tool));\n this.queryAll('[data-panel]').forEach((panel) => {\n const active = panel.dataset.panel === tool;\n panel.hidden = !active;\n panel.classList.toggle('is-active', active);\n });\n }\n\n layerLabel(object) {\n if (object.rfLayerLabel) return object.rfLayerLabel;\n if (object.rfKind === 'photo') return 'Foto';\n if (object.rfKind === 'flag') return 'Bandera';\n if (object.rfKind === 'number') return `Dorsal \u00B7 ${object.text || ''}`;\n if (object.rfKind === 'name' || object.rfKind === 'text') return `Texto \u00B7 ${object.text || ''}`;\n return 'Elemento';\n }\n\n userLayers(side = this.activeSide) {\n const canvas = this.canvases[side];\n return canvas ? canvas.getObjects().filter((object) => object.rfRole === 'user') : [];\n }\n\n renderLayers() {\n const list = this.query('[data-layers-list]');\n const count = this.query('[data-layers-count]');\n const title = this.query('[data-layers-title]');\n if (!list || !count || !title || !this.canvases[this.activeSide]) return;\n\n const canvas = this.canvases[this.activeSide];\n const layers = this.userLayers().slice().reverse();\n const selected = canvas.getActiveObject();\n title.textContent = `Capas \u00B7 ${this.activeSide === 'right' ? 'Derecha' : 'Izquierda'}`;\n count.textContent = String(layers.length);\n list.replaceChildren();\n\n if (!layers.length) {\n const empty = document.createElement('p');\n empty.className = 'rf-nano__layers-empty';\n empty.textContent = 'A\u00F1ade una foto, un nombre, un dorsal o una bandera.';\n list.appendChild(empty);\n return;\n }\n\n layers.forEach((object) => {\n const row = document.createElement('div');\n row.className = 'rf-nano__layer-row';\n row.classList.toggle('is-active', selected === object);\n row.classList.toggle('is-locked', Boolean(object.rfLocked));\n row.classList.toggle('is-hidden', object.visible === false);\n\n const select = document.createElement('button');\n select.type = 'button';\n select.className = 'rf-nano__layer-select';\n select.dataset.layerAction = 'select';\n select.dataset.layerId = object.rfLayerId;\n select.textContent = this.layerLabel(object);\n\n const actions = [\n ['up', '\u2191', 'Subir capa'],\n ['down', '\u2193', 'Bajar capa'],\n ['visibility', object.visible === false ? '\u25CB' : '\u25C9', object.visible === false ? 'Mostrar capa' : 'Ocultar capa'],\n ['lock', object.rfLocked ? '\uD83D\uDD12' : '\uD83D\uDD13', object.rfLocked ? 'Desbloquear capa' : 'Bloquear capa'],\n ];\n\n row.appendChild(select);\n actions.forEach(([action, icon, label]) => {\n const button = document.createElement('button');\n button.type = 'button';\n button.className = `rf-nano__layer-action rf-nano__layer-action--${action}`;\n button.dataset.layerAction = action;\n button.dataset.layerId = object.rfLayerId;\n button.textContent = icon;\n button.setAttribute('aria-label', label);\n button.title = label;\n row.appendChild(button);\n });\n list.appendChild(row);\n });\n }\n\n findLayerObject(layerId) {\n return this.userLayers().find((object) => object.rfLayerId === layerId) || null;\n }\n\n handleLayerAction(action, layerId) {\n const object = this.findLayerObject(layerId);\n if (!object) return;\n const canvas = object.canvas;\n\n if (action === 'select') {\n if (object.visible === false) {\n object.set('visible', true);\n this.markDesignChanged();\n }\n canvas.setActiveObject(object);\n this.updateSelectionPanel(object);\n } else if (action === 'lock') {\n this.setObjectLocked(object, !object.rfLocked);\n } else if (action === 'visibility') {\n object.set('visible', object.visible === false);\n if (object.visible === false && canvas.getActiveObject() === object) {\n canvas.discardActiveObject();\n this.updateSelectionPanel(null);\n }\n this.markDesignChanged();\n } else if (action === 'up' || action === 'down') {\n this.moveLayer(object, action === 'up' ? 1 : -1);\n }\n\n canvas.requestRenderAll();\n this.renderLayers();\n }\n\n moveLayer(object, direction) {\n const canvas = object.canvas;\n const layers = this.userLayers();\n const index = layers.indexOf(object);\n const target = Math.max(0, Math.min(layers.length - 1, index + direction));\n if (index === -1 || target === index) return;\n [layers[index], layers[target]] = [layers[target], layers[index]];\n layers.forEach((layer, layerIndex) => canvas.moveTo(layer, layerIndex + 1));\n this.keepFixedLayers(canvas, this.activeSide);\n this.markDesignChanged();\n }\n\n setObjectLocked(object, locked) {\n if (!object || object.rfRole !== 'user') return;\n object.rfLocked = Boolean(locked);\n if (object.isEditing && object.exitEditing) object.exitEditing();\n object.set({\n lockMovementX: object.rfLocked,\n lockMovementY: object.rfLocked,\n lockScalingX: object.rfLocked,\n lockScalingY: object.rfLocked,\n lockRotation: object.rfLocked,\n lockSkewingX: object.rfLocked,\n lockSkewingY: object.rfLocked,\n hasControls: !object.rfLocked,\n editable: !object.rfLocked,\n hoverCursor: object.rfLocked ? 'not-allowed' : 'move',\n });\n object.setCoords();\n object.canvas.setActiveObject(object);\n object.canvas.requestRenderAll();\n this.updateSelectionPanel(object);\n this.renderLayers();\n this.setStatus(object.rfLocked ? 'Elemento bloqueado.' : 'Elemento desbloqueado.');\n }\n\n toggleSelectedLock() {\n const object = this.getSelectedObject();\n if (!object || object.rfRole !== 'user') return;\n this.setObjectLocked(object, !object.rfLocked);\n }\n\n addUserObject(object, kind) {\n const canvas = this.canvases[this.activeSide];\n object.rfRole = 'user';\n object.rfKind = kind;\n object.rfLayerId = `rf-layer-${++this.layerSequence}`;\n object.rfLocked = false;\n object.set({\n originX: 'center',\n originY: 'center',\n left: WIDTH / 2,\n top: HEIGHT / 2,\n lockUniScaling: true,\n objectCaching: false,\n clipPath: this.createClipPath(this.activeSide),\n });\n Object.defineProperty(object, '_rfCustomizer', { value: this, configurable: true });\n Object.defineProperty(object, '_rfInitialState', {\n value: {\n left: object.left,\n top: object.top,\n scaleX: object.scaleX || 1,\n scaleY: object.scaleY || 1,\n angle: object.angle || 0,\n skewX: object.skewX || 0,\n skewY: object.skewY || 0,\n flipX: Boolean(object.flipX),\n flipY: Boolean(object.flipY),\n fill: object.fill,\n fontFamily: object.fontFamily,\n textShape: object.rfTextShape || 'straight',\n },\n writable: true,\n configurable: true,\n });\n canvas.add(object);\n this.baseScale.set(object, { x: object.scaleX || 1, y: object.scaleY || 1 });\n canvas.setActiveObject(object);\n this.keepFixedLayers(canvas, this.activeSide);\n this.updateSelectionPanel(object);\n this.renderLayers();\n this.markDesignChanged();\n }\n\n addPhoto(event) {\n const file = event.target.files && event.target.files[0];\n if (!file) return;\n if (file.size > 12 * 1024 * 1024) {\n this.setStatus('La imagen supera los 12 MB. Elige una m\\u00E1s ligera.', true);\n event.target.value = '';\n return;\n }\n const reader = new FileReader();\n reader.onload = () => {\n fabric.Image.fromURL(reader.result, (image) => {\n const scale = Math.min(260 / image.width, 360 / image.height);\n image.set({ scaleX: scale, scaleY: scale });\n this.addUserObject(image, 'photo');\n this.setStatus('Foto a\\u00F1adida. Arr\\u00E1strala y usa los puntos de las esquinas para ajustarla.');\n });\n };\n reader.onerror = () => this.setStatus('No se ha podido leer esta imagen.', true);\n reader.readAsDataURL(file);\n event.target.value = '';\n }\n\n addText(value, fontFamily, kind, fontSize) {\n const object = new fabric.IText(value.trim(), {\n fontFamily,\n fontSize,\n fontWeight: kind === 'number' ? 900 : 800,\n fill: '#111111',\n textAlign: 'center',\n editable: true,\n strokeWidth: 0,\n shadow: null,\n });\n this.applyTextShape(object);\n this.addUserObject(object, kind);\n }\n\n updateLiveText(value, fontFamily) {\n const canvas = this.canvases[this.activeSide];\n if (!canvas) return;\n const cleanValue = String(value || '').slice(0, 30);\n const trimmedValue = cleanValue.trim();\n let object = this.liveTextObjects[this.activeSide];\n\n if (object && !canvas.getObjects().includes(object)) {\n object = null;\n this.liveTextObjects[this.activeSide] = null;\n }\n\n if (!trimmedValue) {\n if (object) {\n canvas.remove(object);\n this.liveTextObjects[this.activeSide] = null;\n this.updateSelectionPanel(null);\n this.renderLayers();\n this.markDesignChanged();\n canvas.requestRenderAll();\n }\n return;\n }\n\n const isDorsal = /^\\d{1,2}$/.test(trimmedValue);\n const kind = isDorsal ? 'number' : 'text';\n const fontSize = isDorsal ? 48 : 26;\n\n if (!object) {\n object = new fabric.IText(trimmedValue, {\n fontFamily,\n fontSize,\n fontWeight: isDorsal ? 900 : 800,\n fill: '#111111',\n textAlign: 'center',\n editable: true,\n strokeWidth: 0,\n shadow: null,\n });\n object.rfLayerLabel = `${isDorsal ? 'Dorsal' : 'Texto'} \u00B7 ${trimmedValue}`;\n this.applyTextShape(object);\n this.addUserObject(object, kind);\n this.liveTextObjects[this.activeSide] = object;\n this.setStatus('Texto a\\u00F1adido. Ya puedes moverlo y cambiar su tama\\u00F1o.');\n return;\n }\n\n object.rfKind = kind;\n object.rfLayerLabel = `${isDorsal ? 'Dorsal' : 'Texto'} \u00B7 ${trimmedValue}`;\n object.set({\n text: trimmedValue,\n fontFamily,\n fontSize,\n fontWeight: isDorsal ? 900 : 800,\n });\n this.applyTextShape(object);\n object.setCoords();\n canvas.setActiveObject(object);\n canvas.requestRenderAll();\n this.updateSelectionPanel(object);\n this.renderLayers();\n this.markDesignChanged();\n }\n\n syncLiveTextInput() {\n const input = this.query('[data-text-input]');\n const font = this.query('[data-text-font]');\n const addAnother = this.query('[data-action=\"add-another-text\"]');\n if (!input || !font) return;\n const canvas = this.canvases[this.activeSide];\n let object = this.liveTextObjects[this.activeSide];\n if (object && canvas && !canvas.getObjects().includes(object)) {\n object = null;\n this.liveTextObjects[this.activeSide] = null;\n }\n input.value = object ? object.text || '' : '';\n if (object && object.fontFamily) font.value = object.fontFamily;\n if (addAnother) addAnother.disabled = !input.value.trim();\n }\n\n startAnotherText() {\n const input = this.query('[data-text-input]');\n const button = this.query('[data-action=\"add-another-text\"]');\n const object = this.liveTextObjects[this.activeSide];\n if (!input || !input.value.trim() || !object) {\n this.setStatus('Escribe primero un texto o dorsal.', true);\n if (input) input.focus();\n return;\n }\n\n this.liveTextObjects[this.activeSide] = null;\n input.value = '';\n if (button) button.disabled = true;\n const canvas = this.canvases[this.activeSide];\n canvas.discardActiveObject().requestRenderAll();\n this.updateSelectionPanel(null);\n this.renderLayers();\n this.setStatus('Escribe el siguiente texto: se a\\u00F1adir\\u00E1 autom\\u00E1ticamente.');\n input.focus();\n }\n\n applyTextShape(object) {\n if (!object || !['name', 'text', 'number'].includes(object.rfKind || 'text')) return;\n object.rfTextShape = 'straight';\n object.set({ path: null, pathStartOffset: 0 });\n object.setCoords();\n }\n\n addFlag(url, name) {\n if (!url) return;\n fabric.Image.fromURL(url, (image) => {\n if (!image) {\n this.setStatus(`No se ha podido cargar la bandera de ${name}.`, true);\n return;\n }\n image.scaleToWidth(125);\n image.rfLayerLabel = `Bandera \u00B7 ${name}`;\n this.addUserObject(image, 'flag');\n this.setStatus(`Bandera de ${name} a\\u00F1adida.`);\n }, { crossOrigin: 'anonymous' });\n }\n\n setBackground(color, button) {\n const layer = this.layers[this.activeSide];\n layer.background.set('fill', color === 'none' ? '#ffffff' : color);\n this.queryAll('[data-bg]').forEach((item) => item.classList.toggle('is-active', item === button));\n this.canvases[this.activeSide].requestRenderAll();\n this.markDesignChanged();\n }\n\n setLogoColor(color, selectedButton) {\n const normalized = String(color || '').trim().toLowerCase();\n this.logoColor = ['white', '#fff', '#ffffff'].includes(normalized) ? 'white' : 'black';\n const logoLoads = Object.keys(this.canvases).map((side) => this.loadLogo(side));\n this.queryAll('[data-logo-color]').forEach((button) => {\n const active = button === selectedButton;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-pressed', active ? 'true' : 'false');\n });\n const feedback = this.query('[data-logo-feedback]');\n if (feedback) {\n feedback.textContent = this.logoColor === 'white'\n ? 'Blanco seleccionado \\u00B7 visible sobre fondos oscuros'\n : 'Negro seleccionado';\n }\n Promise.all(logoLoads).then(() => {\n this.setStatus(this.logoColor === 'white'\n ? 'Logo blanco aplicado a las dos espinilleras.'\n : 'Logo negro aplicado a las dos espinilleras.');\n });\n this.markDesignChanged();\n }\n\n getSelectedObject() {\n return this.canvases[this.activeSide] && this.canvases[this.activeSide].getActiveObject();\n }\n\n updateSelectionPanel(object) {\n const panel = this.query('[data-selected-panel]');\n const isUser = object && object.rfRole === 'user';\n panel.hidden = !isUser;\n const canvasDeleteButton = this.query('[data-action=\"delete-canvas-selected\"]');\n if (canvasDeleteButton) {\n canvasDeleteButton.hidden = !isUser;\n canvasDeleteButton.disabled = !isUser || Boolean(object.rfLocked);\n }\n this.updateMobileSelectionOutline(isUser ? object : null);\n if (!isUser) {\n this.renderLayers();\n return;\n }\n\n const lockButton = this.query('[data-action=\"toggle-lock\"]');\n lockButton.classList.toggle('is-active', Boolean(object.rfLocked));\n lockButton.setAttribute('aria-pressed', object.rfLocked ? 'true' : 'false');\n lockButton.textContent = object.rfLocked ? '\uD83D\uDD12 Desbloquear' : '\uD83D\uDD13 Bloquear';\n\n const isText = ['name', 'text', 'number'].includes(object.rfKind);\n const colorWrap = this.query('[data-selected-color-wrap]');\n const fontWrap = this.query('[data-selected-font-wrap]');\n const zoomWrap = this.query('[data-selected-zoom-wrap]');\n colorWrap.hidden = !isText;\n fontWrap.hidden = !isText;\n zoomWrap.hidden = false;\n this.query('[data-selected-color]').disabled = Boolean(object.rfLocked);\n this.query('[data-selected-font]').disabled = Boolean(object.rfLocked);\n this.query('[data-selected-zoom]').disabled = Boolean(object.rfLocked);\n this.query('[data-action=\"zoom-out\"]').disabled = Boolean(object.rfLocked);\n this.query('[data-action=\"zoom-in\"]').disabled = Boolean(object.rfLocked);\n this.query('[data-action=\"reset-selected\"]').disabled = Boolean(object.rfLocked);\n this.query('[data-action=\"delete-selected\"]').disabled = Boolean(object.rfLocked);\n\n if (isText) {\n this.query('[data-selected-color]').value = this.normalizeColor(object.fill || '#111111');\n this.query('[data-selected-font]').value = object.fontFamily || 'Arial Black';\n }\n const base = this.baseScale.get(object) || { x: object.scaleX || 1 };\n const percent = Math.round(((object.scaleX || 1) / (base.x || 1)) * 100);\n this.query('[data-selected-zoom]').value = Math.max(15, Math.min(300, percent));\n this.renderLayers();\n }\n\n normalizeColor(color) {\n if (/^#[0-9a-f]{6}$/i.test(color)) return color;\n const probe = document.createElement('canvas').getContext('2d');\n probe.fillStyle = color;\n const normalized = probe.fillStyle;\n if (normalized.startsWith('#')) return normalized.length === 4\n ? `#${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}`\n : normalized;\n return '#111111';\n }\n\n changeSelectedColor(color) {\n const object = this.getSelectedObject();\n if (!object || object.rfLocked || !['name', 'text', 'number'].includes(object.rfKind)) return;\n object.set({ fill: color, strokeWidth: 0, shadow: null });\n object.canvas.requestRenderAll();\n this.markDesignChanged();\n }\n\n changeSelectedFont(fontFamily) {\n const object = this.getSelectedObject();\n if (!object || object.rfLocked || !['name', 'text', 'number'].includes(object.rfKind)) return;\n object.set('fontFamily', fontFamily);\n this.applyTextShape(object);\n object.setCoords();\n this.keepUserObjectReachable(object);\n this.updateMobileSelectionOutline(object);\n object.canvas.requestRenderAll();\n this.markDesignChanged();\n }\n\n changeSelectedZoom(percent) {\n const object = this.getSelectedObject();\n if (!object || object.rfRole !== 'user' || object.rfLocked) return;\n const base = this.baseScale.get(object) || { x: object.scaleX || 1, y: object.scaleY || 1 };\n object.set({ scaleX: base.x * percent / 100, scaleY: base.y * percent / 100 });\n object.setCoords();\n this.keepUserObjectReachable(object);\n this.updateMobileSelectionOutline(object);\n object.canvas.requestRenderAll();\n this.markDesignChanged();\n }\n\n nudgeSelectedZoom(delta) {\n const input = this.query('[data-selected-zoom]');\n if (!input || input.disabled) return;\n const next = Math.max(Number(input.min) || 15, Math.min(Number(input.max) || 300, Number(input.value || 100) + delta));\n input.value = String(next);\n this.changeSelectedZoom(next);\n }\n\n removeObject(object) {\n if (!object || object.rfRole !== 'user') return;\n if (object.rfLocked) {\n this.setStatus('Desbloquea el elemento antes de eliminarlo.', true);\n return;\n }\n const canvas = object.canvas;\n const removedSide = Object.keys(this.canvases).find((side) => this.canvases[side] === canvas);\n if (removedSide && this.liveTextObjects[removedSide] === object) {\n this.liveTextObjects[removedSide] = null;\n }\n canvas.remove(object);\n canvas.discardActiveObject().requestRenderAll();\n this.syncLiveTextInput();\n this.updateSelectionPanel(null);\n this.renderLayers();\n this.markDesignChanged();\n this.setStatus('Elemento eliminado.');\n }\n\n deleteSelected() {\n this.removeObject(this.getSelectedObject());\n }\n\n resetObject(object) {\n if (!object || object.rfRole !== 'user' || object.rfLocked || !object._rfInitialState) return;\n const initial = object._rfInitialState;\n object.set({\n left: initial.left,\n top: initial.top,\n scaleX: initial.scaleX,\n scaleY: initial.scaleY,\n angle: initial.angle,\n skewX: initial.skewX,\n skewY: initial.skewY,\n flipX: initial.flipX,\n flipY: initial.flipY,\n });\n if (['name', 'text', 'number'].includes(object.rfKind)) {\n object.set({ fill: initial.fill, fontFamily: initial.fontFamily });\n this.applyTextShape(object);\n }\n object.setCoords();\n object.canvas.setActiveObject(object);\n object.canvas.requestRenderAll();\n this.updateSelectionPanel(object);\n this.markDesignChanged();\n this.setStatus('Elemento restablecido a su estado original.');\n }\n\n resetSelected() {\n this.resetObject(this.getSelectedObject());\n }\n\n sideHasDesign(side) {\n const canvas = this.canvases[side];\n if (!canvas) return false;\n const hasUserElement = canvas.getObjects().some((object) => object.rfRole === 'user');\n const background = this.layers[side] && this.layers[side].background;\n return hasUserElement || (background && background.fill !== '#ffffff');\n }\n\n updateProgress() {\n if (!this.modal) return;\n const state = {\n size: this.sizeIsReady(),\n left: this.sideHasDesign('left'),\n right: this.sideHasDesign('right'),\n };\n Object.entries(state).forEach(([key, complete]) => {\n const item = this.query(`[data-progress-item=\"${key}\"]`);\n if (!item) return;\n item.classList.toggle('is-complete', complete);\n const icon = item.querySelector('.rf-nano__progress-icon');\n if (icon) icon.textContent = complete ? '\\u2713' : key === 'size' ? '1' : key === 'left' ? '2' : '3';\n const detail = item.querySelector('small');\n if (detail) {\n if (key === 'size') detail.textContent = complete ? this.selectedSize : 'Pendiente';\n else detail.textContent = complete ? 'Completada' : 'Pendiente';\n }\n });\n\n const sizeValue = this.query('[data-requirement-size]');\n if (sizeValue) sizeValue.textContent = state.size ? this.selectedSize : 'Pendiente';\n const sizeRequirement = this.query('[data-requirement=\"size\"]');\n if (sizeRequirement) sizeRequirement.classList.toggle('is-complete', state.size);\n const logoValue = this.query('[data-requirement-logo]');\n if (logoValue) logoValue.textContent = this.logoColor === 'white' ? 'Blanco' : 'Negro';\n const logoRequirement = this.query('[data-requirement=\"logo\"]');\n if (logoRequirement) logoRequirement.classList.toggle('is-complete', this.logoReady.left && this.logoReady.right);\n }\n\n ensureBothSidesDesigned() {\n const missing = ['left', 'right'].filter((side) => !this.sideHasDesign(side));\n if (!missing.length) return true;\n const side = missing[0];\n this.setActiveSide(side);\n const label = side === 'left' ? 'izquierda' : 'derecha';\n this.setStatus(`Falta personalizar la espinillera ${label}. A\\u00F1ade una foto, nombre, texto, bandera o color.`, true);\n return false;\n }\n\n ensureRequirements() {\n if (this.model === 'ARMOUR' && !this.selectedSize) {\n const sizeRow = this.query('[data-size-row]');\n if (sizeRow) sizeRow.classList.add('has-error');\n this.lastRequirementError = `Selecciona una talla ${this.modelName}: S, M o L.`;\n this.setStatus(this.lastRequirementError, true);\n this.setStep(1, false);\n return false;\n }\n\n if (!this.ensureBothSidesDesigned()) return false;\n\n if (!this.logoReady.left || !this.logoReady.right) {\n this.lastRequirementError = 'El logo Realf\\u00FAt es obligatorio en ambas espinilleras. Espera a que termine de cargar.';\n this.setStatus(this.lastRequirementError, true);\n return false;\n }\n\n const sizeRow = this.query('[data-size-row]');\n if (sizeRow) sizeRow.classList.remove('has-error');\n this.lastRequirementError = '';\n return true;\n }\n\n async renderSide(side) {\n const canvas = this.canvases[side];\n canvas.discardActiveObject();\n canvas.requestRenderAll();\n const dataUrl = canvas.toDataURL({\n format: 'png',\n left: this.modelConfig.crop.left,\n top: this.modelConfig.crop.top,\n width: this.modelConfig.crop.width,\n height: this.modelConfig.crop.height,\n multiplier: 4,\n enableRetinaScaling: false,\n });\n canvas.requestRenderAll();\n return waitForImage(dataUrl);\n }\n\n async generateProductionBlob() {\n await Promise.all(Object.values(this.logoLoads));\n const [left, right] = await Promise.all([this.renderSide('left'), this.renderSide('right')]);\n const output = document.createElement('canvas');\n output.width = EXPORT_WIDTH;\n output.height = EXPORT_HEIGHT;\n const ctx = output.getContext('2d');\n ctx.fillStyle = '#ffffff';\n ctx.fillRect(0, 0, EXPORT_WIDTH, EXPORT_HEIGHT);\n ctx.imageSmoothingEnabled = true;\n ctx.imageSmoothingQuality = 'high';\n\n const leftPlacement = this.modelConfig.export.left;\n const rightPlacement = this.modelConfig.export.right;\n ctx.drawImage(left, leftPlacement.x, leftPlacement.y, leftPlacement.width, leftPlacement.height);\n ctx.drawImage(right, rightPlacement.x, rightPlacement.y, rightPlacement.width, rightPlacement.height);\n return canvasToBlob(output);\n }\n\n createDesignId() {\n const stamp = Date.now().toString(36).toUpperCase();\n const random = Math.random().toString(36).slice(2, 6).toUpperCase();\n return `RF-${this.model}-${stamp}-${random}`;\n }\n\n async prepareOrderFile() {\n if (!this.ensureRequirements()) throw new Error(this.lastRequirementError || 'Falta completar un requisito obligatorio del dise\\u00F1o.');\n this.setStatus('Preparando el archivo final para el pedido\\u2026');\n const designId = this.createDesignId();\n this.orderBlob = await this.generateProductionBlob();\n this.orderFilename = `${designId}.png`;\n return this.orderBlob;\n }\n\n appendOrderFile(formData) {\n if (!this.orderBlob) throw new Error('Falta el archivo del dise\\u00F1o.');\n const filename = this.orderFilename || `diseno-${this.model.toLowerCase()}.png`;\n const orderFile = new File([this.orderBlob], filename, {\n type: 'image/png',\n lastModified: Date.now(),\n });\n formData.delete('properties[_Modelo]');\n formData.delete('properties[_ID del dise\\u00F1o]');\n formData.delete(`properties[${DESIGN_PROPERTY}]`);\n formData.delete('properties[_Archivo de producci\\u00F3n NANO]');\n formData.delete('properties[_Archivo de producci\\u00F3n ARMOUR]');\n formData.delete('properties[_Archivo de producci\\u00F3n CARBON]');\n formData.delete(`properties[${SIZE_PROPERTY}]`);\n\n // Shopify uploads File values from multipart line-item properties and\n // replaces them with a durable /uploads/ URL in the cart and order.\n // A single visible property is enough for EGO and the Shopify order.\n formData.set(`properties[${DESIGN_PROPERTY}]`, orderFile);\n\n // Armour guarda la talla elegida y Carbon informa su talla \\u00FAnica\n // como propiedad visible del art\\u00EDculo.\n // en el carrito y en el pedido. NANO es talla \\u00FAnica y no la a\\u00F1ade.\n if (this.model !== 'NANO' && this.selectedSize) {\n formData.set(`properties[${SIZE_PROPERTY}]`, this.selectedSize);\n }\n }\n\n async downloadDesign() {\n if (!this.ensureRequirements()) return;\n const button = this.query('[data-action=\"download\"]');\n button.disabled = true;\n this.setStatus('Generando tu dise\\u00F1o\\u2026');\n try {\n const blob = await this.generateProductionBlob();\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.download = `${this.createDesignId()}.png`;\n document.body.appendChild(link);\n link.click();\n link.remove();\n setTimeout(() => URL.revokeObjectURL(url), 2000);\n this.setStatus('Dise\\u00F1o descargado correctamente.');\n } catch (error) {\n console.error(error);\n this.setStatus('No se ha podido descargar el dise\\u00F1o. Int\\u00E9ntalo de nuevo.', true);\n } finally {\n button.disabled = false;\n }\n }\n\n cartRoot() {\n const root = window.Shopify?.routes?.root || '/';\n return root.endsWith('/') ? root : `${root}/`;\n }\n\n cartAddUrl() {\n return window.routes?.cart_add_url || `${this.cartRoot()}cart/add.js`;\n }\n\n responseLineItem(response) {\n if (Array.isArray(response?.items)) return response.items[0] || null;\n return response && (response.variant_id || response.key) ? response : null;\n }\n\n responseDesignUrl(response) {\n const item = this.responseLineItem(response);\n const value = item?.properties?.[DESIGN_PROPERTY];\n if (typeof value !== 'string') return '';\n const trimmed = value.trim();\n if (trimmed.startsWith('//')) return `${window.location.protocol}${trimmed}`;\n if (trimmed.startsWith('/')) return `${window.location.origin}${trimmed}`;\n return /^https?:\\/\\//i.test(trimmed) ? trimmed : '';\n }\n\n async undoBrokenCartAdd(response) {\n const item = this.responseLineItem(response);\n if (!item?.key) return;\n const currentQuantity = Number(item.quantity) || 1;\n try {\n await fetch(`${this.cartRoot()}cart/change.js`, {\n method: 'POST',\n credentials: 'same-origin',\n headers: {\n Accept: 'application/json',\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ id: item.key, quantity: Math.max(0, currentQuantity - 1) }),\n });\n } catch (error) {\n console.warn('[Realfut] No se ha podido revertir el art\\u00EDculo sin dise\\u00F1o.', error);\n }\n }\n\n notifyCart(response, variantId, designUrl) {\n const detail = {\n productVariantId: String(variantId),\n cartData: response,\n designUrl,\n };\n document.dispatchEvent(new CustomEvent('realfut:nano-added', { detail }));\n document.dispatchEvent(new CustomEvent('cart:refresh', { bubbles: true, detail }));\n window.dispatchEvent(new CustomEvent('cart:refresh', { detail }));\n\n if (typeof publish === 'function' && typeof PUB_SUB_EVENTS !== 'undefined' && PUB_SUB_EVENTS.cartUpdate) {\n publish(PUB_SUB_EVENTS.cartUpdate, {\n source: 'realfut-nano-customizer',\n productVariantId: String(variantId),\n cartData: response,\n });\n }\n }\n\n async submitProduct() {\n const form = document.getElementById(this.formId);\n const addButton = this.query('[data-action=\"add-to-cart\"]');\n if (!form || !addButton) {\n this.setStatus('No se ha encontrado el formulario de compra.', true);\n return;\n }\n\n if (addButton.disabled || addButton.getAttribute('aria-busy') === 'true') return;\n const originalLabel = addButton.textContent;\n addButton.disabled = true;\n addButton.setAttribute('aria-busy', 'true');\n addButton.textContent = 'Guardando dise\\u00F1o\\u2026';\n\n try {\n await this.prepareOrderFile();\n const formData = new FormData(form);\n this.appendOrderFile(formData);\n\n const variantId = formData.get('id');\n if (!variantId) throw new Error('No se ha encontrado la variante del producto.');\n\n const cart = document.querySelector('cart-notification') || document.querySelector('cart-drawer');\n if (cart?.getSectionsToRender) {\n const sectionIds = cart.getSectionsToRender().map((section) => section.id).filter(Boolean);\n if (sectionIds.length) {\n formData.set('sections', sectionIds.join(','));\n formData.set('sections_url', window.location.pathname);\n }\n if (cart.setActiveElement) cart.setActiveElement(document.activeElement);\n }\n\n const request = await fetch(this.cartAddUrl(), {\n method: 'POST',\n credentials: 'same-origin',\n headers: {\n Accept: 'application/json',\n 'X-Requested-With': 'XMLHttpRequest',\n },\n body: formData,\n });\n const response = await request.json();\n\n if (!request.ok || response.status) {\n throw new Error(response.description || response.message || 'Shopify no ha podido a\\u00F1adir el producto.');\n }\n\n const designUrl = this.responseDesignUrl(response);\n if (!designUrl) {\n await this.undoBrokenCartAdd(response);\n throw new Error('Shopify no ha guardado el archivo del dise\\u00F1o. El producto no se ha a\\u00F1adido para evitar un pedido incompleto.');\n }\n\n this.lastDesignUrl = designUrl;\n if (cart?.renderContents && response.sections) cart.renderContents(response);\n this.notifyCart(response, variantId, designUrl);\n this.setStatus('Dise\\u00F1o guardado y a\\u00F1adido al carrito. Ya puedes abrir su enlace de previsualizaci\\u00F3n.');\n } catch (error) {\n console.error(error);\n this.setStatus(error.message || 'No se ha podido a\\u00F1adir el dise\\u00F1o. Int\\u00E9ntalo de nuevo.', true);\n } finally {\n addButton.disabled = !this.currentAvailable;\n addButton.removeAttribute('aria-busy');\n addButton.textContent = originalLabel;\n }\n }\n\n setStatus(message, isError = false) {\n const status = this.query('[data-status]');\n if (!status) return;\n status.textContent = message;\n status.classList.toggle('is-error', isError);\n }\n }\n\n if (!customElements.get('realfut-customizer-v29')) {\n customElements.define('realfut-customizer-v29', RealfutNanoCustomizer);\n }\n})();\n(function(){if(window.__rfxNano)return;window.__rfxNano=1;var hid=[],raf=0;function price(){var e=document.querySelector('.product__info-container .price-item--sale')||document.querySelector('.product__info-container .price-item--regular');if(!e)return'';var m=(e.textContent||'').match(/\\d[\\d.,]*/);return m?m[0]+' \u20AC':''}function floats(on){if(on){if(hid.length)return;var roots=[document.body];var o=document.getElementById('opus-shadow-container');if(o&&o.shadowRoot)roots.push(o.shadowRoot);roots.forEach(function(r){r.querySelectorAll('div,button,a,aside').forEach(function(e){if(e.closest('.rf-nano__modal'))return;var b=e.getBoundingClientRect();if(!b.width||b.width>160||b.height>160||b.bottom160||b.height>160||b.bottom