buildHeader($componentId); $html .= '
'; // Columna izquierda $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildBehaviorGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '
'; // Columna derecha $html .= '
'; $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('tocEnabled', 'Activar tabla de contenido', 'bi-power', $enabled); // show_on_desktop $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('tocShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); // show_on_mobile $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', false); $html .= $this->buildSwitch('tocShowOnMobile', 'Mostrar en movil', 'bi-phone', $showOnMobile); // ============================================= // Checkboxes de visibilidad por tipo de página // Grupo especial: _page_visibility // ============================================= $html .= '
'; $html .= '

'; $html .= ' '; $html .= ' Mostrar en tipos de pagina'; $html .= '

'; $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 .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('tocVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('tocVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('tocVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('tocVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('tocVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch); $html .= '
'; $html .= '
'; // ============================================= // Reglas de exclusion avanzadas // Grupo especial: _exclusions (Plan 99.11) // ============================================= $exclusionPartial = new ExclusionFormPartial($this->renderer); $html .= $exclusionPartial->render($componentId, 'toc'); $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; // title $title = $this->renderer->getFieldValue($componentId, 'content', 'title', 'Tabla de Contenido'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // auto_generate $autoGenerate = $this->renderer->getFieldValue($componentId, 'content', 'auto_generate', true); $html .= $this->buildSwitch('tocAutoGenerate', 'Generar automaticamente', 'bi-magic', $autoGenerate); $html .= ' Genera TOC desde los encabezados del contenido'; // heading_levels $headingLevels = $this->renderer->getFieldValue($componentId, 'content', 'heading_levels', 'h2,h3'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= ' Separados por coma: h2,h3,h4'; $html .= '
'; // smooth_scroll $smoothScroll = $this->renderer->getFieldValue($componentId, 'content', 'smooth_scroll', true); $html .= $this->buildSwitch('tocSmoothScroll', 'Scroll suave', 'bi-arrow-down-circle', $smoothScroll); $html .= '
'; $html .= '
'; return $html; } private function buildBehaviorGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Comportamiento'; $html .= '
'; // is_sticky $isSticky = $this->renderer->getFieldValue($componentId, 'behavior', 'is_sticky', true); $html .= $this->buildSwitch('tocIsSticky', 'Sticky (fijo al scroll)', 'bi-pin', $isSticky); // scroll_offset $scrollOffset = $this->renderer->getFieldValue($componentId, 'behavior', 'scroll_offset', '100'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // max_height $maxHeight = $this->renderer->getFieldValue($componentId, 'behavior', 'max_height', 'calc(100vh - 71px - 10px - 250px - 15px - 15px)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildTypographyGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Tipografia'; $html .= '
'; $html .= '
'; // title_font_size $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // title_font_weight $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '600'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // link_font_size $linkFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'link_font_size', '0.9rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // link_line_height $linkLineHeight = $this->renderer->getFieldValue($componentId, 'typography', 'link_line_height', '1.3'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // level_three_font_size $level3FontSize = $this->renderer->getFieldValue($componentId, 'typography', 'level_three_font_size', '0.85rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // level_four_font_size $level4FontSize = $this->renderer->getFieldValue($componentId, 'typography', 'level_four_font_size', '0.8rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; // Colores principales $html .= '

Contenedor

'; $html .= '
'; $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#ffffff'); $html .= $this->buildColorPicker('tocBackgroundColor', 'Fondo', $bgColor); $borderColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_color', '#E6E9ED'); $html .= $this->buildColorPicker('tocBorderColor', 'Borde', $borderColor); $html .= '
'; // Colores del titulo $html .= '

Titulo

'; $html .= '
'; $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#0E2337'); $html .= $this->buildColorPicker('tocTitleColor', 'Color', $titleColor); $titleBorderColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_border_color', '#E6E9ED'); $html .= $this->buildColorPicker('tocTitleBorderColor', 'Borde', $titleBorderColor); $html .= '
'; // Colores de enlaces $html .= '

Enlaces

'; $html .= '
'; $linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#6B7280'); $html .= $this->buildColorPicker('tocLinkColor', 'Normal', $linkColor); $linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#0E2337'); $html .= $this->buildColorPicker('tocLinkHoverColor', 'Hover', $linkHoverColor); $html .= '
'; $html .= '
'; $linkHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_background', '#F9FAFB'); $html .= $this->buildColorPicker('tocLinkHoverBackground', 'Fondo hover', $linkHoverBg); $activeBorderColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_border_color', '#0E2337'); $html .= $this->buildColorPicker('tocActiveBorderColor', 'Borde activo', $activeBorderColor); $html .= '
'; // Colores de activo $html .= '

Estado Activo

'; $html .= '
'; $activeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_background_color', '#F9FAFB'); $html .= $this->buildColorPicker('tocActiveBackgroundColor', 'Fondo', $activeBgColor); $activeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'active_text_color', '#0E2337'); $html .= $this->buildColorPicker('tocActiveTextColor', 'Texto', $activeTextColor); $html .= '
'; // Colores de scrollbar $html .= '

Scrollbar

'; $html .= '
'; $scrollbarTrack = $this->renderer->getFieldValue($componentId, 'colors', 'scrollbar_track_color', '#F9FAFB'); $html .= $this->buildColorPicker('tocScrollbarTrackColor', 'Pista', $scrollbarTrack); $scrollbarThumb = $this->renderer->getFieldValue($componentId, 'colors', 'scrollbar_thumb_color', '#6B7280'); $html .= $this->buildColorPicker('tocScrollbarThumbColor', 'Thumb', $scrollbarThumb); $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; // container_padding $containerPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding', '12px 16px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // margin_bottom $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '13px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // title_padding_bottom $titlePaddingBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_padding_bottom', '8px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // title_margin_bottom $titleMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'title_margin_bottom', '0.75rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // item_margin_bottom $itemMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'item_margin_bottom', '0.15rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // link_padding $linkPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'link_padding', '0.3rem 0.85rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // level_three_padding_left $level3PaddingLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'level_three_padding_left', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // level_four_padding_left $level4PaddingLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'level_four_padding_left', '2rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildEffectsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '
'; $html .= '
'; // border_radius $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '8px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // border_width $borderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_width', '1px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // box_shadow $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 2px 8px rgba(0, 0, 0, 0.08)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // link_border_radius $linkBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'link_border_radius', '4px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // active_border_left_width $activeBorderLeftWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'active_border_left_width', '3px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // transition_duration $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // scrollbar_border_radius $scrollbarBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'scrollbar_border_radius', '3px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSwitch(string $id, string $label, string $icon, bool $checked): string { $html = '
'; $html .= '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; $html .= '
'; return $html; } private function buildColorPicker(string $id, string $label, string $value): string { $html = '
'; $html .= sprintf( ' ', esc_html($label) ); $html .= '
'; $html .= sprintf( ' ', esc_attr($id), esc_attr($value) ); $html .= sprintf( ' %s', esc_attr($id), esc_html(strtoupper($value)) ); $html .= '
'; $html .= '
'; return $html; } private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; return $html; } }