8735962f52
- Añadir PageVisibility use case y repositorio - Implementar PageTypeDetector para detectar home/single/page/archive - Actualizar FieldMappers con soporte show_on_[page_type] - Extender FormBuilders con UI de visibilidad por página - Refactorizar Renderers para evaluar visibilidad dinámica - Limpiar schemas removiendo campos de visibilidad legacy - Añadir MigrationCommand para migrar configuraciones existentes - Implementar adsense-loader.js para carga lazy de ads - Actualizar front-page.php con nueva estructura - Extender DIContainer con nuevos servicios 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
364 lines
19 KiB
PHP
364 lines
19 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>';
|
|
|
|
// =============================================
|
|
// Checkboxes de visibilidad por tipo de página
|
|
// Grupo especial: _page_visibility
|
|
// =============================================
|
|
$html .= ' <hr class="my-3">';
|
|
$html .= ' <p class="small fw-semibold mb-2">';
|
|
$html .= ' <i class="bi bi-eye me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Mostrar en tipos de pagina';
|
|
$html .= ' </p>';
|
|
|
|
$showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true);
|
|
$showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true);
|
|
$showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true);
|
|
$showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false);
|
|
$showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false);
|
|
|
|
$html .= ' <div class="row g-2">';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityHome', 'Home', 'bi-house', $showOnHome);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('topBarVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// Switch: CSS Crítico
|
|
$isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
|
|
$html .= ' <div class="mb-0 mt-3">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="topBarIsCritical" ';
|
|
$html .= checked($isCritical, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="topBarIsCritical" style="color: #495057;">';
|
|
$html .= ' <i class="bi bi-lightning-charge me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>CSS Crítico</strong>';
|
|
$html .= ' <small class="text-muted d-block">Inyectar CSS en <head> para optimizar LCP</small>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$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;
|
|
}
|
|
|
|
private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string
|
|
{
|
|
$checked = $checked === true || $checked === '1' || $checked === 1;
|
|
|
|
$html = ' <div class="form-check form-check-checkbox mb-2">';
|
|
$html .= sprintf(
|
|
' <input class="form-check-input" type="checkbox" id="%s" %s>',
|
|
esc_attr($id),
|
|
$checked ? 'checked' : ''
|
|
);
|
|
$html .= sprintf(
|
|
' <label class="form-check-label small" for="%s">',
|
|
esc_attr($id)
|
|
);
|
|
$html .= sprintf(' <i class="bi %s me-1" style="color: #FF8600;"></i>', esc_attr($icon));
|
|
$html .= sprintf(' %s', esc_html($label));
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
|
|
return $html;
|
|
}
|
|
}
|