f4b45b7e17
Plan 99.11 - Correcciones críticas: - FooterRenderer: Añadir PageVisibilityHelper::shouldShow() - HeroSectionRenderer: Añadir PageVisibilityHelper::shouldShow() - AdsensePlacementRenderer: Añadir PageVisibilityHelper::shouldShow() Mejoras adicionales: - UrlPatternExclusion: Soporte wildcards (*sct* → regex) - ExclusionFormPartial: UI mejorada con placeholders - ComponentConfiguration: Grupo _exclusions validado - 12 FormBuilders: Integración UI de exclusiones - 12 FieldMappers: Mapeo campos de exclusión Verificado: Footer oculto en post con categoría excluida SCT 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
481 lines
26 KiB
PHP
481 lines
26 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Admin\Hero\Infrastructure\Ui;
|
|
|
|
use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
|
|
use ROITheme\Admin\Shared\Infrastructure\Ui\ExclusionFormPartial;
|
|
|
|
final class HeroFormBuilder
|
|
{
|
|
public function __construct(
|
|
private AdminDashboardRenderer $renderer
|
|
) {}
|
|
|
|
public function buildForm(string $componentId): string
|
|
{
|
|
$html = '';
|
|
|
|
$html .= $this->buildHeader($componentId);
|
|
|
|
$html .= '<div class="row g-3">';
|
|
$html .= ' <div class="col-lg-6">';
|
|
$html .= $this->buildVisibilityGroup($componentId);
|
|
$html .= $this->buildContentGroup($componentId);
|
|
$html .= $this->buildEffectsGroup($componentId);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-lg-6">';
|
|
$html .= $this->buildColorsGroup($componentId);
|
|
$html .= $this->buildTypographyGroup($componentId);
|
|
$html .= $this->buildSpacingGroup($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-image me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Configuración de Hero Section';
|
|
$html .= ' </h3>';
|
|
$html .= ' <p class="mb-0 small" style="opacity: 0.85;">';
|
|
$html .= ' Personaliza la sección hero con título y badges de categorías';
|
|
$html .= ' </p>';
|
|
$html .= ' </div>';
|
|
$html .= ' <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="hero">';
|
|
$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 .= ' Visibilidad';
|
|
$html .= ' </h5>';
|
|
|
|
$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="heroEnabled" ';
|
|
$html .= checked($enabled, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroEnabled">';
|
|
$html .= ' <i class="bi bi-power me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Activar Hero Section</strong>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
$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="heroShowOnDesktop" ';
|
|
$html .= checked($showOnDesktop, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroShowOnDesktop">';
|
|
$html .= ' <i class="bi bi-display me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar en Desktop</strong>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
$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="heroShowOnMobile" ';
|
|
$html .= checked($showOnMobile, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroShowOnMobile">';
|
|
$html .= ' <i class="bi bi-phone me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar en Mobile</strong>';
|
|
$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', false);
|
|
$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('heroVisibilityHome', 'Home', 'bi-house', $showOnHome);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('heroVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="col-md-4">';
|
|
$html .= $this->buildPageVisibilityCheckbox('heroVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
// =============================================
|
|
// Reglas de exclusion avanzadas
|
|
// Grupo especial: _exclusions (Plan 99.11)
|
|
// =============================================
|
|
$exclusionPartial = new ExclusionFormPartial($this->renderer);
|
|
$html .= $exclusionPartial->render($componentId, 'hero');
|
|
|
|
// 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="heroIsCritical" ';
|
|
$html .= checked($isCritical, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroIsCritical">';
|
|
$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-card-text me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Contenido';
|
|
$html .= ' </h5>';
|
|
|
|
$showCategories = $this->renderer->getFieldValue($componentId, 'content', 'show_categories', true);
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="heroShowCategories" ';
|
|
$html .= checked($showCategories, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroShowCategories">';
|
|
$html .= ' <i class="bi bi-tags me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar badges de categorías</strong>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
$showBadgeIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_badge_icon', true);
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <div class="form-check form-switch">';
|
|
$html .= ' <input class="form-check-input" type="checkbox" id="heroShowBadgeIcon" ';
|
|
$html .= checked($showBadgeIcon, true, false) . '>';
|
|
$html .= ' <label class="form-check-label small" for="heroShowBadgeIcon">';
|
|
$html .= ' <i class="bi bi-star me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' <strong>Mostrar ícono en badges</strong>';
|
|
$html .= ' </label>';
|
|
$html .= ' </div>';
|
|
$html .= ' </div>';
|
|
|
|
$badgeIconClass = $this->renderer->getFieldValue($componentId, 'content', 'badge_icon_class', 'bi-folder-fill');
|
|
$html .= ' <div class="mb-3">';
|
|
$html .= ' <label for="heroBadgeIconClass" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-bootstrap me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Clase del ícono de badge';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBadgeIconClass" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($badgeIconClass) . '" placeholder="bi-folder-fill">';
|
|
$html .= ' <small class="text-muted">Usa clases de Bootstrap Icons</small>';
|
|
$html .= ' </div>';
|
|
|
|
$titleTag = $this->renderer->getFieldValue($componentId, 'content', 'title_tag', 'h1');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="heroTitleTag" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' <i class="bi bi-code me-1" style="color: #FF8600;"></i>';
|
|
$html .= ' Etiqueta HTML del título';
|
|
$html .= ' </label>';
|
|
$html .= ' <select id="heroTitleTag" class="form-select form-select-sm">';
|
|
$html .= ' <option value="h1" ' . selected($titleTag, 'h1', false) . '>H1 (recomendado para SEO)</option>';
|
|
$html .= ' <option value="h2" ' . selected($titleTag, 'h2', false) . '>H2</option>';
|
|
$html .= ' <option value="div" ' . selected($titleTag, 'div', false) . '>DIV (sin semántica)</option>';
|
|
$html .= ' </select>';
|
|
$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>';
|
|
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
|
|
$gradientStart = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_start', '#1e3a5f');
|
|
$html .= $this->buildColorPicker('heroGradientStart', 'Degradado (inicio)', 'circle-half', $gradientStart);
|
|
|
|
$gradientEnd = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_end', '#2c5282');
|
|
$html .= $this->buildColorPicker('heroGradientEnd', 'Degradado (fin)', 'circle-fill', $gradientEnd);
|
|
|
|
$titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#FFFFFF');
|
|
$html .= $this->buildColorPicker('heroTitleColor', 'Color título', 'fonts', $titleColor);
|
|
|
|
$badgeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_bg_color', '#FFFFFF');
|
|
$html .= $this->buildColorPicker('heroBadgeBgColor', 'Fondo badges', 'badge', $badgeBgColor);
|
|
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
$badgeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_text_color', '#FFFFFF');
|
|
$html .= $this->buildColorPicker('heroBadgeTextColor', 'Texto badges', 'card-text', $badgeTextColor);
|
|
|
|
$badgeIconColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_icon_color', '#FFB800');
|
|
$html .= $this->buildColorPicker('heroBadgeIconColor', 'Ícono badges', 'star-fill', $badgeIconColor);
|
|
|
|
$badgeHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'badge_hover_bg', '#FF8600');
|
|
$html .= $this->buildColorPicker('heroBadgeHoverBg', 'Badges (hover)', 'hand-index', $badgeHoverBg);
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildTypographyGroup(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-type me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Tipografía';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
|
|
$titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '2.5rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroTitleFontSize" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Tamaño desktop';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroTitleFontSize" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($titleFontSize) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$titleFontSizeMobile = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size_mobile', '1.75rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroTitleFontSizeMobile" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Tamaño mobile';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroTitleFontSizeMobile" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($titleFontSizeMobile) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
|
|
$titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '700');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroTitleFontWeight" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Peso del título';
|
|
$html .= ' </label>';
|
|
$html .= ' <select id="heroTitleFontWeight" class="form-select form-select-sm">';
|
|
$html .= ' <option value="400" ' . selected($titleFontWeight, '400', false) . '>Normal (400)</option>';
|
|
$html .= ' <option value="500" ' . selected($titleFontWeight, '500', false) . '>Medium (500)</option>';
|
|
$html .= ' <option value="600" ' . selected($titleFontWeight, '600', false) . '>Semibold (600)</option>';
|
|
$html .= ' <option value="700" ' . selected($titleFontWeight, '700', false) . '>Bold (700)</option>';
|
|
$html .= ' </select>';
|
|
$html .= ' </div>';
|
|
|
|
$titleLineHeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_line_height', '1.4');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroTitleLineHeight" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Altura de línea';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroTitleLineHeight" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($titleLineHeight) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$badgeFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'badge_font_size', '0.813rem');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="heroBadgeFontSize" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Tamaño fuente badges';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBadgeFontSize" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($badgeFontSize) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildSpacingGroup(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-move me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Espaciado';
|
|
$html .= ' </h5>';
|
|
|
|
$html .= ' <div class="row g-2 mb-2">';
|
|
|
|
$paddingVertical = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_vertical', '3rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroPaddingVertical" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Padding vertical';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroPaddingVertical" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($paddingVertical) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '1.5rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroMarginBottom" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Margen inferior';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroMarginBottom" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($marginBottom) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= ' <div class="row g-2 mb-0">';
|
|
|
|
$badgePadding = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_padding', '0.375rem 0.875rem');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroBadgePadding" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Padding badges';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBadgePadding" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($badgePadding) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$badgeBorderRadius = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_border_radius', '20px');
|
|
$html .= ' <div class="col-6">';
|
|
$html .= ' <label for="heroBadgeBorderRadius" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Border radius badges';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBadgeBorderRadius" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($badgeBorderRadius) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
|
|
$html .= ' </div>';
|
|
$html .= '</div>';
|
|
|
|
return $html;
|
|
}
|
|
|
|
private function buildEffectsGroup(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-magic me-2" style="color: #FF8600;"></i>';
|
|
$html .= ' Efectos';
|
|
$html .= ' </h5>';
|
|
|
|
$boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 4px 16px rgba(30, 58, 95, 0.25)');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="heroBoxShadow" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Sombra del hero';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBoxShadow" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($boxShadow) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$titleTextShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'title_text_shadow', '1px 1px 2px rgba(0, 0, 0, 0.2)');
|
|
$html .= ' <div class="mb-2">';
|
|
$html .= ' <label for="heroTitleTextShadow" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Sombra del título';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroTitleTextShadow" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($titleTextShadow) . '">';
|
|
$html .= ' </div>';
|
|
|
|
$badgeBackdropBlur = $this->renderer->getFieldValue($componentId, 'visual_effects', 'badge_backdrop_blur', '10px');
|
|
$html .= ' <div class="mb-0">';
|
|
$html .= ' <label for="heroBadgeBackdropBlur" class="form-label small mb-1 fw-semibold">';
|
|
$html .= ' Blur de fondo badges';
|
|
$html .= ' </label>';
|
|
$html .= ' <input type="text" id="heroBadgeBackdropBlur" class="form-control form-control-sm" ';
|
|
$html .= ' value="' . esc_attr($badgeBackdropBlur) . '">';
|
|
$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;
|
|
}
|
|
}
|