4f25297f14
Implementación completa del sistema de Critical CSS dinámico según plan 13.01: Domain Layer: - Crear CriticalCSSCollectorInterface para DIP compliance Infrastructure Layer: - Implementar CriticalCSSCollector (singleton via DIContainer) - Crear CriticalCSSHooksRegistrar para inyección en wp_head - Actualizar DIContainer con getCriticalCSSCollector() Schemas: - Agregar campo is_critical a navbar, top-notification-bar, hero - Sincronizar con BD (18+39+31 campos) Renderers (navbar, top-notification-bar, hero): - Inyectar CriticalCSSCollectorInterface via constructor - Lógica condicional: si is_critical=true → CSS a <head> Admin (FormBuilders + FieldMappers): - Toggle "CSS Crítico" en sección visibility - Mapeo AJAX para persistencia Beneficios: - LCP optimizado: CSS crítico inline en <head> - Above-the-fold rendering sin FOUC - Componentes configurables desde admin panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
80 lines
4.2 KiB
PHP
80 lines
4.2 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Admin\Navbar\Infrastructure\FieldMapping;
|
|
|
|
use ROITheme\Admin\Shared\Domain\Contracts\FieldMapperInterface;
|
|
|
|
/**
|
|
* Field Mapper para Navbar
|
|
*
|
|
* RESPONSABILIDAD:
|
|
* - Mapear field IDs del formulario a atributos de BD
|
|
* - Solo conoce sus propios campos (modularidad)
|
|
*/
|
|
final class NavbarFieldMapper implements FieldMapperInterface
|
|
{
|
|
public function getComponentName(): string
|
|
{
|
|
return 'navbar';
|
|
}
|
|
|
|
public function getFieldMapping(): array
|
|
{
|
|
return [
|
|
// Visibility
|
|
'navbarEnabled' => ['group' => 'visibility', 'attribute' => 'is_enabled'],
|
|
'navbarShowMobile' => ['group' => 'visibility', 'attribute' => 'show_on_mobile'],
|
|
'navbarShowDesktop' => ['group' => 'visibility', 'attribute' => 'show_on_desktop'],
|
|
'navbarShowOnPages' => ['group' => 'visibility', 'attribute' => 'show_on_pages'],
|
|
'navbarSticky' => ['group' => 'visibility', 'attribute' => 'sticky_enabled'],
|
|
'navbarIsCritical' => ['group' => 'visibility', 'attribute' => 'is_critical'],
|
|
|
|
// Layout
|
|
'navbarContainerType' => ['group' => 'layout', 'attribute' => 'container_type'],
|
|
'navbarPaddingVertical' => ['group' => 'layout', 'attribute' => 'padding_vertical'],
|
|
'navbarZIndex' => ['group' => 'layout', 'attribute' => 'z_index'],
|
|
|
|
// Behavior
|
|
'navbarMenuLocation' => ['group' => 'behavior', 'attribute' => 'menu_location'],
|
|
'navbarCustomMenuId' => ['group' => 'behavior', 'attribute' => 'custom_menu_id'],
|
|
'navbarEnableDropdowns' => ['group' => 'behavior', 'attribute' => 'enable_dropdowns'],
|
|
'navbarMobileBreakpoint' => ['group' => 'behavior', 'attribute' => 'mobile_breakpoint'],
|
|
|
|
// Media (Logo/Marca)
|
|
'navbarShowBrand' => ['group' => 'media', 'attribute' => 'show_brand'],
|
|
'navbarUseLogo' => ['group' => 'media', 'attribute' => 'use_logo'],
|
|
'navbarLogoUrl' => ['group' => 'media', 'attribute' => 'logo_url'],
|
|
'navbarLogoHeight' => ['group' => 'media', 'attribute' => 'logo_height'],
|
|
'navbarBrandText' => ['group' => 'media', 'attribute' => 'brand_text'],
|
|
'navbarBrandFontSize' => ['group' => 'media', 'attribute' => 'brand_font_size'],
|
|
'navbarBrandColor' => ['group' => 'media', 'attribute' => 'brand_color'],
|
|
'navbarBrandHoverColor' => ['group' => 'media', 'attribute' => 'brand_hover_color'],
|
|
|
|
// Links
|
|
'linksTextColor' => ['group' => 'links', 'attribute' => 'text_color'],
|
|
'linksHoverColor' => ['group' => 'links', 'attribute' => 'hover_color'],
|
|
'linksActiveColor' => ['group' => 'links', 'attribute' => 'active_color'],
|
|
'linksFontSize' => ['group' => 'links', 'attribute' => 'font_size'],
|
|
'linksFontWeight' => ['group' => 'links', 'attribute' => 'font_weight'],
|
|
'linksPadding' => ['group' => 'links', 'attribute' => 'padding'],
|
|
'linksBorderRadius' => ['group' => 'links', 'attribute' => 'border_radius'],
|
|
'linksShowUnderline' => ['group' => 'links', 'attribute' => 'show_underline_effect'],
|
|
'linksUnderlineColor' => ['group' => 'links', 'attribute' => 'underline_color'],
|
|
|
|
// Visual Effects (Dropdown)
|
|
'dropdownBgColor' => ['group' => 'visual_effects', 'attribute' => 'background_color'],
|
|
'dropdownBorderRadius' => ['group' => 'visual_effects', 'attribute' => 'border_radius'],
|
|
'dropdownShadow' => ['group' => 'visual_effects', 'attribute' => 'shadow'],
|
|
'dropdownItemColor' => ['group' => 'visual_effects', 'attribute' => 'item_color'],
|
|
'dropdownItemHoverBg' => ['group' => 'visual_effects', 'attribute' => 'item_hover_background'],
|
|
'dropdownItemPadding' => ['group' => 'visual_effects', 'attribute' => 'item_padding'],
|
|
'dropdownMaxHeight' => ['group' => 'visual_effects', 'attribute' => 'dropdown_max_height'],
|
|
|
|
// Colors (Navbar styles)
|
|
'navbarBgColor' => ['group' => 'colors', 'attribute' => 'background_color'],
|
|
'navbarBoxShadow' => ['group' => 'colors', 'attribute' => 'box_shadow'],
|
|
];
|
|
}
|
|
}
|