0846a3bf03
- Reorganización de estructura: Admin/, Public/, Shared/, Schemas/ - 12 componentes migrados: TopNotificationBar, Navbar, CtaLetsTalk, Hero, FeaturedImage, TableOfContents, CtaBoxSidebar, SocialShare, CtaPost, RelatedPost, ContactForm, Footer - Panel de administración con tabs Bootstrap 5 funcionales - Schemas JSON para configuración de componentes - Renderers dinámicos con CSSGeneratorService (cero CSS hardcodeado) - FormBuilders para UI admin con Design System consistente - Fix: Bootstrap JS cargado en header para tabs funcionales - Fix: buildTextInput maneja valores mixed (bool/string) - Eliminación de estructura legacy (src/, admin/, assets/css/componente-*) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
309 lines
16 KiB
PHP
309 lines
16 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Admin\TopNotificationBar\Infrastructure\Ui;
|
|
|
|
use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
|
|
|
|
final class TopNotificationBarFormBuilder
|
|
{
|
|
public function __construct(
|
|
private AdminDashboardRenderer $renderer
|
|
) {}
|
|
|
|
public function buildForm(string $componentId): string
|
|
{
|
|
$html = '';
|
|
|
|
// Header
|
|
$html .= $this->buildHeader($componentId);
|
|
|
|
// Layout 2 columnas
|
|
$html .= '<div class="row g-3">';
|
|
$html .= ' <div class="col-lg-6">';
|
|
$html .= $this->buildVisibilityGroup($componentId);
|
|
$html .= $this->buildContentGroup($componentId);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-lg-6">';
|
|
$html .= $this->buildColorsGroup($componentId);
|
|
$html .= $this->buildTypographyAndSpacingGroup($componentId);
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildHeader(string $componentId): string
|
|
{
|
|
$html = '<div class="rounded p-4 mb-4 shadow text-white" ';
|
|
$html .= 'style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">';
|
|
$html .= ' <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">';
|
|
$html .= ' <div>';
|
|
$html .= ' <h3 class="h4 mb-1 fw-bold">';
|
|
$html .= ' <i class="bi bi-megaphone-fill me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Configuración de TopBar';
|
|
$html .= ' </h3>';
|
|
$html .= ' <p class="mb-0 small" style="opacity: 0.85;">';
|
|
$html .= ' Personaliza la barra de notificación superior del sitio';
|
|
$html .= ' </p>';
|
|
$html .= ' </div>';
|
|
$html .= ' <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="top-notification-bar">';
|
|
$html .= ' <i class="bi bi-arrow-counterclockwise me-1"></i>';
|
|
$html .= ' Restaurar valores por defecto';
|
|
$html .= ' </button>';
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildVisibilityGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Activación y Visibilidad';
|
|
$html .= ' </h5>';
|
|
|
|
// Switch: Enabled
|
|
$enabled = $this->renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="topBarEnabled" ';
|
|
$html .= checked($enabled, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="topBarEnabled" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-power me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Activar TopBar</strong>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// Switch: Show on Mobile
|
|
$showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true);
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="topBarShowOnMobile" ';
|
|
$html .= checked($showOnMobile, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="topBarShowOnMobile" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-phone me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar en Mobile</strong> <span class="text-muted">(<768px)</span>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// Switch: Show on Desktop
|
|
$showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="topBarShowOnDesktop" ';
|
|
$html .= checked($showOnDesktop, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="topBarShowOnDesktop" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-display me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar en Desktop</strong> <span class="text-muted">(≥768px)</span>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// Select: Show on Pages
|
|
$showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'all');
|
|
$html .= ' <div class="mb-0 mt-3">';
|
|
$html .= ' <label for="topBarShowOnPages" class="form-label small mb-1 fw-semibold" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-file-earmark-text me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Mostrar en';
|
|
$html .= ' </label>';
|
|
$html .= ' <select id="topBarShowOnPages" class="form-select form-select-sm">';
|
|
$html .= ' <option value="all" ' . selected($showOnPages, 'all', false) . '>Todas las páginas</option>';
|
|
$html .= ' <option value="home" ' . selected($showOnPages, 'home', false) . '>Solo página de inicio</option>';
|
|
$html .= ' <option value="posts" ' . selected($showOnPages, 'posts', false) . '>Solo posts individuales</option>';
|
|
$html .= ' <option value="pages" ' . selected($showOnPages, 'pages', false) . '>Solo páginas</option>';
|
|
$html .= ' </select>';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildContentGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-chat-text me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Contenido';
|
|
$html .= ' </h5>';
|
|
|
|
// icon_class + label_text (row)
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarIconClass" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-star-fill me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Clase del ícono';
|
|
$html .= ' </label>';
|
|
$iconClass = $this->renderer->getFieldValue($componentId, 'content', 'icon_class', 'bi-megaphone-fill');
|
|
$html .= ' <input type="text" id="topBarIconClass" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($iconClass) . '" placeholder="bi-...">';
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarLabelText" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-tag me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Etiqueta';
|
|
$html .= ' </label>';
|
|
$labelText = $this->renderer->getFieldValue($componentId, 'content', 'label_text', 'Nuevo:');
|
|
$html .= ' <input type="text" id="topBarLabelText" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($labelText) . '" maxlength="30">';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// message_text (textarea)
|
|
$messageText = $this->renderer->getFieldValue($componentId, 'content', 'message_text',
|
|
'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="topBarMessageText" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-chat-dots me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Mensaje';
|
|
$html .= ' </label>';
|
|
$html .= ' <textarea id="topBarMessageText" class="form-control form-control-sm" rows="3" maxlength="200">';
|
|
$html .= esc_textarea($messageText);
|
|
$html .= ' </textarea>';
|
|
$html .= ' <small class="text-muted">Máximo 200 caracteres</small>';
|
|
$html .= ' </div>';
|
|
|
|
// link_text + link_url (row)
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarLinkText" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-link-45deg me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Texto del enlace';
|
|
$html .= ' </label>';
|
|
$linkText = $this->renderer->getFieldValue($componentId, 'content', 'link_text', 'Ver Catálogo');
|
|
$html .= ' <input type="text" id="topBarLinkText" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($linkText) . '" maxlength="50">';
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarLinkUrl" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-box-arrow-up-right me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' URL';
|
|
$html .= ' </label>';
|
|
$linkUrl = $this->renderer->getFieldValue($componentId, 'content', 'link_url', '#');
|
|
$html .= ' <input type="url" id="topBarLinkUrl" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_url($linkUrl) . '" placeholder="https://...">';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildColorsGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-palette me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Colores';
|
|
$html .= ' </h5>';
|
|
|
|
// Grid 2x3 de color pickers
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
|
|
// Background Color
|
|
$bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#0E2337');
|
|
$html .= $this->buildColorPicker('topBarBackgroundColor', 'Color de fondo', 'paint-bucket', $bgColor);
|
|
|
|
// Text Color
|
|
$textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF');
|
|
$html .= $this->buildColorPicker('topBarTextColor', 'Color de texto', 'fonts', $textColor);
|
|
|
|
// Label Color
|
|
$labelColor = $this->renderer->getFieldValue($componentId, 'colors', 'label_color', '#FF8600');
|
|
$html .= $this->buildColorPicker('topBarLabelColor', 'Color etiqueta', 'tag-fill', $labelColor);
|
|
|
|
// Icon Color
|
|
$iconColor = $this->renderer->getFieldValue($componentId, 'colors', 'icon_color', '#FF8600');
|
|
$html .= $this->buildColorPicker('topBarIconColor', 'Color ícono', 'star', $iconColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
// Row 2 de color pickers
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
// Link Color
|
|
$linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#FFFFFF');
|
|
$html .= $this->buildColorPicker('topBarLinkColor', 'Color enlace', 'link', $linkColor);
|
|
|
|
// Link Hover Color
|
|
$linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#FF8600');
|
|
$html .= $this->buildColorPicker('topBarLinkHoverColor', 'Color enlace (hover)', 'hand-index', $linkHoverColor);
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildTypographyAndSpacingGroup(string $componentId): string
|
|
{
|
|
$html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
|
|
$html .= ' <div class="card-body">';
|
|
$html .= ' <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
|
|
$html .= ' <i class="bi bi-arrows-fullscreen me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Tipografía y Espaciado';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
// Font Size
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarFontSize" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-type me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Tamaño de fuente';
|
|
$html .= ' </label>';
|
|
$fontSize = $this->renderer->getFieldValue($componentId, 'spacing', 'font_size', '0.9rem');
|
|
$html .= ' <input type="text" id="topBarFontSize" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($fontSize) . '">';
|
|
$html .= ' <small class="text-muted">Ej: 0.9rem, 14px</small>';
|
|
$html .= ' </div>';
|
|
|
|
// Padding
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="topBarPadding" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-bounding-box me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Padding vertical';
|
|
$html .= ' </label>';
|
|
$padding = $this->renderer->getFieldValue($componentId, 'spacing', 'padding', '0.5rem 0');
|
|
$html .= ' <input type="text" id="topBarPadding" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($padding) . '">';
|
|
$html .= ' <small class="text-muted">Ej: 0.5rem 0</small>';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildColorPicker(string $id, string $label, string $icon, string $value): string
|
|
{
|
|
$html = ' <div class="col-6">';
|
|
$html .= ' <label for="' . $id . '" class="form-label small mb-1 fw-semibold" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-' . $icon . ' me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' ' . $label;
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="color" id="' . $id . '" class="form-control form-control-color w-100" ';
|
|
$html .= ' value="' . esc_attr($value) . '" title="' . esc_attr($label) . '">';
|
|
$html .= ' <small class="text-muted d-block mt-1" id="' . $id . 'Value">' . esc_html(strtoupper($value)) . '</small>';
|
|
$html .= ' </div>';
|
|
|
|
return $html;
|
|
}
|
|
}
|