buildHeader($componentId); $html .= '
'; // Columna izquierda $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= '
'; // Columna derecha $html .= '
'; $html .= $this->buildNetworksGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= $this->buildSwitch('socialShareEnabled', 'Activar componente', 'bi-power', $enabled); // show_on_desktop $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= $this->buildSwitch('socialShareShowOnDesktop', 'Mostrar en escritorio', 'bi-display', $showOnDesktop); // show_on_mobile $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= $this->buildSwitch('socialShareShowOnMobile', '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', 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 .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('socialShareVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('socialShareVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('socialShareVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('socialShareVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('socialShareVisibilitySearch', '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, 'socialShare'); $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; // show_label $showLabel = $this->renderer->getFieldValue($componentId, 'content', 'show_label', true); $html .= $this->buildSwitch('socialShareShowLabel', 'Mostrar etiqueta', 'bi-tag', $showLabel); // label_text $labelText = $this->renderer->getFieldValue($componentId, 'content', 'label_text', 'Compartir:'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildNetworksGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Redes Sociales'; $html .= '
'; $html .= '

Configura las redes sociales y sus URLs

'; // Facebook $showFacebook = $this->renderer->getFieldValue($componentId, 'networks', 'show_facebook', true); $facebookUrl = $this->renderer->getFieldValue($componentId, 'networks', 'facebook_url', ''); $html .= $this->buildNetworkField('socialShareFacebook', 'socialShareFacebookUrl', 'Facebook', 'bi-facebook', $showFacebook, $facebookUrl, 'https://facebook.com/tu-pagina'); // Instagram $showInstagram = $this->renderer->getFieldValue($componentId, 'networks', 'show_instagram', true); $instagramUrl = $this->renderer->getFieldValue($componentId, 'networks', 'instagram_url', ''); $html .= $this->buildNetworkField('socialShareInstagram', 'socialShareInstagramUrl', 'Instagram', 'bi-instagram', $showInstagram, $instagramUrl, 'https://instagram.com/tu-perfil'); // LinkedIn $showLinkedin = $this->renderer->getFieldValue($componentId, 'networks', 'show_linkedin', true); $linkedinUrl = $this->renderer->getFieldValue($componentId, 'networks', 'linkedin_url', ''); $html .= $this->buildNetworkField('socialShareLinkedin', 'socialShareLinkedinUrl', 'LinkedIn', 'bi-linkedin', $showLinkedin, $linkedinUrl, 'https://linkedin.com/in/tu-perfil'); // WhatsApp $showWhatsapp = $this->renderer->getFieldValue($componentId, 'networks', 'show_whatsapp', true); $whatsappNumber = $this->renderer->getFieldValue($componentId, 'networks', 'whatsapp_number', ''); $html .= $this->buildNetworkField('socialShareWhatsapp', 'socialShareWhatsappNumber', 'WhatsApp', 'bi-whatsapp', $showWhatsapp, $whatsappNumber, '521234567890'); // X (Twitter) $showTwitter = $this->renderer->getFieldValue($componentId, 'networks', 'show_twitter', true); $twitterUrl = $this->renderer->getFieldValue($componentId, 'networks', 'twitter_url', ''); $html .= $this->buildNetworkField('socialShareTwitter', 'socialShareTwitterUrl', 'X (Twitter)', 'bi-twitter-x', $showTwitter, $twitterUrl, 'https://x.com/tu-perfil'); // Email $showEmail = $this->renderer->getFieldValue($componentId, 'networks', 'show_email', true); $emailAddress = $this->renderer->getFieldValue($componentId, 'networks', 'email_address', ''); $html .= $this->buildNetworkField('socialShareEmail', 'socialShareEmailAddress', 'Email', 'bi-envelope', $showEmail, $emailAddress, 'contacto@tudominio.com'); $html .= '
'; $html .= '
'; return $html; } private function buildNetworkField(string $switchId, string $urlId, string $label, string $icon, mixed $checked, string $urlValue, string $placeholder): string { // Normalizar valor booleano desde BD $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; // Switch $html .= '
'; $html .= sprintf( ' ', esc_attr($switchId), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; // URL Input $html .= sprintf( ' ', esc_attr($urlId), esc_attr($urlValue), esc_attr($placeholder) ); $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; // Colores generales $html .= '

General

'; $html .= '
'; $labelColor = $this->renderer->getFieldValue($componentId, 'colors', 'label_color', '#6c757d'); $html .= $this->buildColorPicker('socialShareLabelColor', 'Etiqueta', $labelColor); $borderTopColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_top_color', '#dee2e6'); $html .= $this->buildColorPicker('socialShareBorderTopColor', 'Borde superior', $borderTopColor); $html .= '
'; $html .= '
'; $buttonBackground = $this->renderer->getFieldValue($componentId, 'colors', 'button_background', '#ffffff'); $html .= $this->buildColorPicker('socialShareButtonBg', 'Fondo botones', $buttonBackground); $html .= '
'; // Colores por red social $html .= '

Redes Sociales

'; $html .= '
'; $facebookColor = $this->renderer->getFieldValue($componentId, 'colors', 'facebook_color', '#0d6efd'); $html .= $this->buildColorPicker('socialShareFacebookColor', 'Facebook', $facebookColor); $instagramColor = $this->renderer->getFieldValue($componentId, 'colors', 'instagram_color', '#dc3545'); $html .= $this->buildColorPicker('socialShareInstagramColor', 'Instagram', $instagramColor); $html .= '
'; $html .= '
'; $linkedinColor = $this->renderer->getFieldValue($componentId, 'colors', 'linkedin_color', '#0dcaf0'); $html .= $this->buildColorPicker('socialShareLinkedinColor', 'LinkedIn', $linkedinColor); $whatsappColor = $this->renderer->getFieldValue($componentId, 'colors', 'whatsapp_color', '#198754'); $html .= $this->buildColorPicker('socialShareWhatsappColor', 'WhatsApp', $whatsappColor); $html .= '
'; $html .= '
'; $twitterColor = $this->renderer->getFieldValue($componentId, 'colors', 'twitter_color', '#212529'); $html .= $this->buildColorPicker('socialShareTwitterColor', 'X (Twitter)', $twitterColor); $emailColor = $this->renderer->getFieldValue($componentId, 'colors', 'email_color', '#6c757d'); $html .= $this->buildColorPicker('socialShareEmailColor', 'Email', $emailColor); $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildTypographyGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Tipografia'; $html .= '
'; $html .= '
'; // label_font_size $labelFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'label_font_size', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // icon_font_size $iconFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'icon_font_size', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; // container_margin_top $containerMarginTop = $this->renderer->getFieldValue($componentId, 'spacing', 'container_margin_top', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // container_margin_bottom $containerMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'container_margin_bottom', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // container_padding_top $containerPaddingTop = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding_top', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // container_padding_bottom $containerPaddingBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'container_padding_bottom', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // label_margin_bottom $labelMarginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'label_margin_bottom', '1rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // buttons_gap $buttonsGap = $this->renderer->getFieldValue($componentId, 'spacing', 'buttons_gap', '0.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // button_padding $buttonPadding = $this->renderer->getFieldValue($componentId, 'spacing', 'button_padding', '0.25rem 0.5rem'); $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_top_width $borderTopWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_top_width', '1px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // button_border_width $buttonBorderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_width', '2px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // button_border_radius $buttonBorderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'button_border_radius', '0.375rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // transition_duration $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; // hover_box_shadow $hoverBoxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'hover_box_shadow', '0 4px 12px rgba(0, 0, 0, 0.15)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSwitch(string $id, string $label, string $icon, mixed $checked): string { // Normalizar valor booleano desde BD $checked = $checked === true || $checked === '1' || $checked === 1; $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; } }