git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FASE 1 COMPLETADA: Limpieza de defaults hardcodeados

Browse Source 
Eliminados todos los componentes incorrectos y defaults duplicados
preparando el sistema para la implementación correcta con tabla de BD.

ARCHIVOS ELIMINADOS (11 archivos):
- admin/assets/js/component-navbar.js
- admin/assets/css/component-navbar.css
- admin/components/component-top-bar.php
- admin/components/component-navbar.php
- admin/components/component-hero-section.php
- admin/components/component-lets-talk-button.php
- admin/includes/sanitizers/class-topbar-sanitizer.php
- admin/includes/sanitizers/class-navbar-sanitizer.php
- admin/includes/sanitizers/class-herosection-sanitizer.php
- admin/includes/sanitizers/class-letstalkbutton-sanitizer.php
- template-parts/navbar-configurable.php

ARCHIVOS MODIFICADOS (6 archivos):
- admin/includes/class-admin-menu.php: Eliminados enqueues de componentes
- admin/includes/class-settings-manager.php: Limpiados get_defaults() y sanitize_settings()
- admin/includes/class-validator.php: Eliminado validate_top_bar()
- admin/pages/main.php: Reducido de 521 a 37 líneas (93%)
- admin/assets/js/admin-app.js: Reducido de 431 a 219 líneas (49%)
- header.php: Eliminado código de Top Bar (92 líneas)

BASE DE DATOS:
- Eliminada opción 'apus_theme_settings' de wp_options

RESUMEN:
- 11 archivos eliminados
- 6 archivos limpiados
- 1 opción de BD eliminada
- Todos los defaults hardcodeados eliminados
- Sistema preparado para FASE 2 (crear tabla de defaults)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-13 22:13:23 -06:00
parent 0038ad502c
commit 4818d90386
18 changed files with 25 additions and 4050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
admin/assets/js/admin-app.js
View File

@@ -30,14 +30,18 @@ const AdminPanel = {
*/
bindEvents() {
// Botón guardar
document.getElementById('saveSettings').addEventListener('click', () => {
this.saveSettings();
});
const saveBtn = document.getElementById('saveSettings');
if (saveBtn) {
saveBtn.addEventListener('click', () => {
this.saveSettings();
});
}
// Detectar cambios en formularios
const enableSaveButton = () => {
this.STATE.hasChanges = true;
document.getElementById('saveSettings').disabled = false;
const btn = document.getElementById('saveSettings');
if (btn) btn.disabled = false;
};
document.querySelectorAll('input, select, textarea').forEach(input => {
@@ -55,145 +59,6 @@ const AdminPanel = {
this.switchTab(tab);
});
});
// Contador de caracteres
this.setupCharacterCounter();
// Vista previa en tiempo real
this.setupLivePreview();
},
/**
* Configurar contador de caracteres para textarea
*/
setupCharacterCounter() {
const messageTextarea = document.getElementById('topBarMessageText');
if (!messageTextarea) return;
messageTextarea.addEventListener('input', () => {
const count = messageTextarea.value.length;
const maxLength = 250;
const percentage = (count / maxLength) * 100;
const counter = document.getElementById('topBarMessageTextCount');
const progress = document.getElementById('topBarMessageTextProgress');
if (counter) {
counter.textContent = count;
// Cambiar color según proximidad al límite
counter.classList.remove('text-danger', 'text-warning', 'text-muted');
if (count > 230) {
counter.classList.add('text-danger');
} else if (count > 200) {
counter.classList.add('text-warning');
} else {
counter.classList.add('text-muted');
}
}
// Actualizar progress bar
if (progress) {
progress.style.width = percentage + '%';
progress.setAttribute('aria-valuenow', count);
// Cambiar color del progress bar
progress.classList.remove('bg-orange-primary', 'bg-warning', 'bg-danger');
if (count > 230) {
progress.classList.add('bg-danger');
} else if (count > 200) {
progress.classList.add('bg-warning');
} else {
progress.classList.add('bg-orange-primary');
}
}
});
// Trigger inicial para mostrar count actual
messageTextarea.dispatchEvent(new Event('input'));
},
/**
* Configurar vista previa en tiempo real
*/
setupLivePreview() {
const preview = document.getElementById('topBarPreview');
if (!preview) return;
// Campos que afectan la vista previa
const fields = {
iconClass: document.getElementById('topBarIconClass'),
showIcon: document.getElementById('topBarShowIcon'),
highlightText: document.getElementById('topBarHighlightText'),
messageText: document.getElementById('topBarMessageText'),
linkText: document.getElementById('topBarLinkText'),
showLink: document.getElementById('topBarShowLink'),
bgColor: document.getElementById('topBarBgColor'),
textColor: document.getElementById('topBarTextColor'),
highlightColor: document.getElementById('topBarHighlightColor'),
fontSize: document.getElementById('topBarFontSize')
};
// Función para actualizar la vista previa
const updatePreview = () => {
// Obtener valores
const iconClass = fields.iconClass.value || 'bi bi-megaphone-fill';
const showIcon = fields.showIcon.checked;
const highlightText = fields.highlightText.value;
const messageText = fields.messageText.value || 'Tu mensaje aquí...';
const linkText = fields.linkText.value || 'Ver más';
const showLink = fields.showLink.checked;
const bgColor = fields.bgColor.value || '#0E2337';
const textColor = fields.textColor.value || '#ffffff';
const highlightColor = fields.highlightColor.value || '#FF8600';
// Mapeo de tamaños de fuente
const fontSizeMap = {
'small': '0.8rem',
'normal': '0.9rem',
'large': '1rem'
};
const fontSize = fontSizeMap[fields.fontSize.value] || '0.9rem';
// Construir HTML de la vista previa
let html = '';
// Icono
if (showIcon && iconClass) {
html += `<i class="${iconClass}" style="font-size: 1.2rem; color: ${highlightColor};"></i>`;
}
// Texto destacado
if (highlightText) {
html += `<span style="font-weight: 700; color: ${highlightColor};">${highlightText}</span>`;
}
// Mensaje principal
html += `<span style="flex: 1; min-width: 300px; text-align: center;">${messageText}</span>`;
// Enlace
if (showLink && linkText) {
html += `<a href="#" style="color: ${textColor}; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">${linkText}</a>`;
}
// Actualizar la vista previa
preview.innerHTML = html;
preview.style.backgroundColor = bgColor;
preview.style.color = textColor;
preview.style.fontSize = fontSize;
};
// Agregar listeners a todos los campos
Object.values(fields).forEach(field => {
if (field) {
field.addEventListener('input', updatePreview);
field.addEventListener('change', updatePreview);
}
});
// Actualización inicial
updatePreview();
},
/**
@@ -282,7 +147,8 @@ const AdminPanel = {
if (response.data.success) {
this.STATE.hasChanges = false;
document.getElementById('saveSettings').disabled = true;
const btn = document.getElementById('saveSettings');
if (btn) btn.disabled = true;
this.showNotice('Configuración guardada correctamente', 'success');
} else {
this.showNotice(response.data.data.message || 'Error al guardar', 'error');
@@ -297,34 +163,12 @@ const AdminPanel = {
/**
* Recolectar datos del formulario
* Cada componente agregará su sección aquí
* Cada componente agregará su sección aquí cuando se implemente
*/
collectFormData() {
return {
components: {
top_bar: {
enabled: document.getElementById('topBarEnabled').checked,
show_on_mobile: document.getElementById('topBarShowOnMobile').checked,
show_on_desktop: document.getElementById('topBarShowOnDesktop').checked,
icon_class: document.getElementById('topBarIconClass').value.trim(),
show_icon: document.getElementById('topBarShowIcon').checked,
highlight_text: document.getElementById('topBarHighlightText').value.trim(),
message_text: document.getElementById('topBarMessageText').value.trim(),
link_text: document.getElementById('topBarLinkText').value.trim(),
link_url: document.getElementById('topBarLinkUrl').value.trim(),
link_target: document.getElementById('topBarLinkTarget').value,
show_link: document.getElementById('topBarShowLink').checked,
custom_styles: {
background_color: this.getColorValue('topBarBgColor', ''),
text_color: this.getColorValue('topBarTextColor', ''),
highlight_color: this.getColorValue('topBarHighlightColor', ''),
link_hover_color: this.getColorValue('topBarLinkHoverColor', ''),
font_size: document.getElementById('topBarFontSize').value
}
}
// Navbar - Pendiente
// Hero - Pendiente
// Footer - Pendiente
// Los componentes se agregarán aquí cuando se ejecute el algoritmo
}
};
},
@@ -335,62 +179,7 @@ const AdminPanel = {
renderAllComponents() {
const components = this.STATE.settings.components || {};
// Top Bar
if (components.top_bar) {
this.renderTopBar(components.top_bar);
}
// Navbar - Pendiente
// Hero - Pendiente
// Footer - Pendiente
},
/**
* Renderizar Top Bar
*/
renderTopBar(topBar) {
document.getElementById('topBarEnabled').checked = topBar.enabled !== undefined ? topBar.enabled : true;
document.getElementById('topBarShowOnMobile').checked = topBar.show_on_mobile !== undefined ? topBar.show_on_mobile : true;
document.getElementById('topBarShowOnDesktop').checked = topBar.show_on_desktop !== undefined ? topBar.show_on_desktop : true;
document.getElementById('topBarIconClass').value = topBar.icon_class || 'bi bi-megaphone-fill';
document.getElementById('topBarShowIcon').checked = topBar.show_icon !== undefined ? topBar.show_icon : true;
document.getElementById('topBarHighlightText').value = topBar.highlight_text || 'Nuevo:';
document.getElementById('topBarMessageText').value = topBar.message_text || 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.';
document.getElementById('topBarLinkText').value = topBar.link_text || 'Ver Catálogo';
document.getElementById('topBarLinkUrl').value = topBar.link_url || '/catalogo';
document.getElementById('topBarLinkTarget').value = topBar.link_target || '_self';
document.getElementById('topBarShowLink').checked = topBar.show_link !== undefined ? topBar.show_link : true;
// Estilos personalizados
if (topBar.custom_styles) {
if (topBar.custom_styles.background_color) {
document.getElementById('topBarBgColor').value = topBar.custom_styles.background_color;
}
if (topBar.custom_styles.text_color) {
document.getElementById('topBarTextColor').value = topBar.custom_styles.text_color;
}
if (topBar.custom_styles.highlight_color) {
document.getElementById('topBarHighlightColor').value = topBar.custom_styles.highlight_color;
}
if (topBar.custom_styles.link_hover_color) {
document.getElementById('topBarLinkHoverColor').value = topBar.custom_styles.link_hover_color;
}
document.getElementById('topBarFontSize').value = topBar.custom_styles.font_size || 'normal';
}
// Trigger contador de caracteres
const messageTextarea = document.getElementById('topBarMessageText');
if (messageTextarea) {
messageTextarea.dispatchEvent(new Event('input'));
}
},
/**
* Utilidad: Obtener valor de color con fallback
*/
getColorValue(inputId, defaultValue) {
const input = document.getElementById(inputId);
const value = input ? input.value.trim() : '';
return value || defaultValue;
// Los métodos render de componentes se llamarán aquí cuando se implementen
},
/**

191
admin/assets/js/component-navbar.js
View File

@@ -1,191 +0,0 @@
/**
* Navbar Component - JavaScript Controller
*
* @package Apus_Theme
* @since 2.0.0
*/
window.NavbarComponent = {
/**
* Inicialización del componente
*/
init: function() {
console.log('Navbar component initialized');
// Actualizar valores hexadecimales de color pickers en tiempo real
this.initColorPickers();
},
/**
* Inicializar event listeners para color pickers
*/
initColorPickers: function() {
const colorPickers = [
{ input: 'navbarBgColor', display: 'navbarBgColorValue' },
{ input: 'navbarTextColor', display: 'navbarTextColorValue' },
{ input: 'navbarLinkHoverColor', display: 'navbarLinkHoverColorValue' },
{ input: 'navbarLinkHoverBgColor', display: 'navbarLinkHoverBgColorValue' },
{ input: 'navbarDropdownBgColor', display: 'navbarDropdownBgColorValue' },
{ input: 'navbarDropdownItemColor', display: 'navbarDropdownItemColorValue' },
{ input: 'navbarDropdownItemHoverColor', display: 'navbarDropdownItemHoverColorValue' }
];
colorPickers.forEach(function(picker) {
const inputEl = document.getElementById(picker.input);
const displayEl = document.getElementById(picker.display);
if (inputEl && displayEl) {
// Actualizar cuando cambia el color
inputEl.addEventListener('input', function() {
displayEl.textContent = inputEl.value.toUpperCase();
});
// Inicializar valor al cargar
displayEl.textContent = inputEl.value.toUpperCase();
}
});
},
/**
* Recolectar datos del formulario
* @returns {Object} Configuración del navbar
*/
collect: function() {
return {
// Grupo 1: Activación y Visibilidad
enabled: document.getElementById('navbarEnabled').checked,
show_on_mobile: document.getElementById('navbarShowOnMobile').checked,
show_on_desktop: document.getElementById('navbarShowOnDesktop').checked,
position: document.getElementById('navbarPosition').value,
responsive_breakpoint: document.getElementById('navbarBreakpoint').value,
// Grupo 4: Efectos (booleans)
enable_box_shadow: document.getElementById('navbarEnableBoxShadow').checked,
enable_underline_effect: document.getElementById('navbarEnableUnderlineEffect').checked,
enable_hover_background: document.getElementById('navbarEnableHoverBackground').checked,
// Grupo 6: Let's Talk Button
lets_talk_button: {
enabled: document.getElementById('navbarLetsTalkEnabled').checked,
text: document.getElementById('navbarLetsTalkText').value.trim(),
icon_class: document.getElementById('navbarLetsTalkIconClass').value.trim(),
show_icon: document.getElementById('navbarLetsTalkShowIcon').checked,
position: document.getElementById('navbarLetsTalkPosition').value
},
// Grupo 7: Dropdown
dropdown: {
enable_hover_desktop: document.getElementById('navbarDropdownEnableHoverDesktop').checked,
max_height: parseInt(document.getElementById('navbarDropdownMaxHeight').value) || 70,
border_radius: parseInt(document.getElementById('navbarDropdownBorderRadius').value) || 8,
item_padding_vertical: parseFloat(document.getElementById('navbarDropdownItemPaddingVertical').value) || 0.5,
item_padding_horizontal: parseFloat(document.getElementById('navbarDropdownItemPaddingHorizontal').value) || 1.25
},
// Grupos 2, 3, 5: Custom Styles
custom_styles: {
// Grupo 2: Colores
background_color: document.getElementById('navbarBgColor').value || '#1e3a5f',
text_color: document.getElementById('navbarTextColor').value || '#ffffff',
link_hover_color: document.getElementById('navbarLinkHoverColor').value || '#FF8600',
link_hover_bg_color: document.getElementById('navbarLinkHoverBgColor').value || '#FF8600',
dropdown_bg_color: document.getElementById('navbarDropdownBgColor').value || '#ffffff',
dropdown_item_color: document.getElementById('navbarDropdownItemColor').value || '#4A5568',
dropdown_item_hover_color: document.getElementById('navbarDropdownItemHoverColor').value || '#FF8600',
// Grupo 3: Tipografía
font_size: document.getElementById('navbarFontSize').value,
font_weight: document.getElementById('navbarFontWeight').value,
// Grupo 4: Efectos
box_shadow_intensity: document.getElementById('navbarBoxShadowIntensity').value,
border_radius: parseInt(document.getElementById('navbarBorderRadius').value) || 4,
// Grupo 5: Spacing
padding_vertical: parseFloat(document.getElementById('navbarPaddingVertical').value) || 0.75,
link_padding_vertical: parseFloat(document.getElementById('navbarLinkPaddingVertical').value) || 0.5,
link_padding_horizontal: parseFloat(document.getElementById('navbarLinkPaddingHorizontal').value) || 0.65,
// Grupo 8: Avanzado
z_index: parseInt(document.getElementById('navbarZIndex').value) || 1030,
transition_speed: document.getElementById('navbarTransitionSpeed').value || 'normal'
}
};
},
/**
* Renderizar configuración en el formulario
* @param {Object} config - Configuración del navbar
*/
render: function(config) {
if (!config) {
console.warn('No navbar config provided');
return;
}
// Grupo 1: Activación y Visibilidad
document.getElementById('navbarEnabled').checked = config.enabled !== undefined ? config.enabled : true;
document.getElementById('navbarShowOnMobile').checked = config.show_on_mobile !== undefined ? config.show_on_mobile : true;
document.getElementById('navbarShowOnDesktop').checked = config.show_on_desktop !== undefined ? config.show_on_desktop : true;
document.getElementById('navbarPosition').value = config.position || 'sticky';
document.getElementById('navbarBreakpoint').value = config.responsive_breakpoint || 'lg';
// Grupo 2: Colores Personalizados
if (config.custom_styles) {
document.getElementById('navbarBgColor').value = config.custom_styles.background_color || '#1e3a5f';
document.getElementById('navbarTextColor').value = config.custom_styles.text_color || '#ffffff';
document.getElementById('navbarLinkHoverColor').value = config.custom_styles.link_hover_color || '#FF8600';
document.getElementById('navbarLinkHoverBgColor').value = config.custom_styles.link_hover_bg_color || '#FF8600';
document.getElementById('navbarDropdownBgColor').value = config.custom_styles.dropdown_bg_color || '#ffffff';
document.getElementById('navbarDropdownItemColor').value = config.custom_styles.dropdown_item_color || '#4A5568';
document.getElementById('navbarDropdownItemHoverColor').value = config.custom_styles.dropdown_item_hover_color || '#FF8600';
}
// Grupo 3: Tipografía
if (config.custom_styles) {
document.getElementById('navbarFontSize').value = config.custom_styles.font_size || 'normal';
document.getElementById('navbarFontWeight').value = config.custom_styles.font_weight || '500';
}
// Grupo 4: Efectos Visuales
document.getElementById('navbarEnableBoxShadow').checked = config.enable_box_shadow !== undefined ? config.enable_box_shadow : true;
document.getElementById('navbarEnableUnderlineEffect').checked = config.enable_underline_effect !== undefined ? config.enable_underline_effect : true;
document.getElementById('navbarEnableHoverBackground').checked = config.enable_hover_background !== undefined ? config.enable_hover_background : true;
if (config.custom_styles) {
document.getElementById('navbarBoxShadowIntensity').value = config.custom_styles.box_shadow_intensity || 'normal';
document.getElementById('navbarBorderRadius').value = config.custom_styles.border_radius !== undefined ? config.custom_styles.border_radius : 4;
}
// Grupo 5: Spacing
if (config.custom_styles) {
document.getElementById('navbarPaddingVertical').value = config.custom_styles.padding_vertical !== undefined ? config.custom_styles.padding_vertical : 0.75;
document.getElementById('navbarLinkPaddingVertical').value = config.custom_styles.link_padding_vertical !== undefined ? config.custom_styles.link_padding_vertical : 0.5;
document.getElementById('navbarLinkPaddingHorizontal').value = config.custom_styles.link_padding_horizontal !== undefined ? config.custom_styles.link_padding_horizontal : 0.65;
}
// Grupo 8: Avanzado
if (config.custom_styles) {
document.getElementById('navbarZIndex').value = config.custom_styles.z_index !== undefined ? config.custom_styles.z_index : 1030;
document.getElementById('navbarTransitionSpeed').value = config.custom_styles.transition_speed || 'normal';
}
// Grupo 6: Let's Talk Button
if (config.lets_talk_button) {
document.getElementById('navbarLetsTalkEnabled').checked = config.lets_talk_button.enabled !== undefined ? config.lets_talk_button.enabled : true;
document.getElementById('navbarLetsTalkText').value = config.lets_talk_button.text || "Let's Talk";
document.getElementById('navbarLetsTalkIconClass').value = config.lets_talk_button.icon_class || 'bi bi-lightning-charge-fill';
document.getElementById('navbarLetsTalkShowIcon').checked = config.lets_talk_button.show_icon !== undefined ? config.lets_talk_button.show_icon : true;
document.getElementById('navbarLetsTalkPosition').value = config.lets_talk_button.position || 'right';
}
// Grupo 7: Dropdown
if (config.dropdown) {
document.getElementById('navbarDropdownEnableHoverDesktop').checked = config.dropdown.enable_hover_desktop !== undefined ? config.dropdown.enable_hover_desktop : true;
document.getElementById('navbarDropdownMaxHeight').value = config.dropdown.max_height !== undefined ? config.dropdown.max_height : 70;
document.getElementById('navbarDropdownBorderRadius').value = config.dropdown.border_radius !== undefined ? config.dropdown.border_radius : 8;
document.getElementById('navbarDropdownItemPaddingVertical').value = config.dropdown.item_padding_vertical !== undefined ? config.dropdown.item_padding_vertical : 0.5;
document.getElementById('navbarDropdownItemPaddingHorizontal').value = config.dropdown.item_padding_horizontal !== undefined ? config.dropdown.item_padding_horizontal : 1.25;
}
}
};