144628914d
JavaScript module that manages navbar component data collection and rendering. Exposes window.NavbarComponent object with three main methods. Methods: - init(): Initializes component (event listeners, etc.) - collect(): Collects all 38 form fields into structured object - render(config): Populates form fields from configuration object Data Structure: - Flat fields: enabled, position, responsive_breakpoint, etc. - Nested objects: lets_talk_button, dropdown, custom_styles Field Coverage: - Boolean switches: 9 fields - Color pickers: 7 fields - Select dropdowns: 7 fields - Number inputs: 9 fields - Text inputs: 2 fields Total: 38 configurable fields Integration: - Called by admin-app.js for save/load operations - Works with Settings Manager for backend persistence - Supports real-time form validation File: admin-panel/admin/assets/js/component-navbar.js (160 lines) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
161 lines
8.7 KiB
JavaScript
161 lines
8.7 KiB
JavaScript
/**
|
|
* Navbar Component - JavaScript Controller
|
|
*
|
|
* @package Apus_Theme
|
|
* @since 2.0.0
|
|
*/
|
|
|
|
window.NavbarComponent = {
|
|
/**
|
|
* Inicialización del componente
|
|
*/
|
|
init: function() {
|
|
console.log('Navbar component initialized');
|
|
// Aquí van event listeners específicos si se necesitan
|
|
// Por ejemplo: actualizar preview en tiempo real
|
|
},
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
}
|
|
};
|