fix(admin-panel): Add dynamic hex value updates to component-navbar.js

- Added initColorPickers() method to handle color picker interactions
- Dynamically updates hex value displays when user changes colors
- Covers all 7 color pickers in navbar configuration
- Event listeners on 'input' event for real-time updates
- Initializes hex displays on component load with uppercase format

Enhances UX by showing live color values to user.

Resolves #179 (Phase 2: JavaScript enhancements)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-12 16:02:15 -06:00
parent 57b8d01dcb
commit 6ba66ab15e

View File

@@ -11,8 +11,39 @@ window.NavbarComponent = {
*/
init: function() {
console.log('Navbar component initialized');
// Aquí van event listeners específicos si se necesitan
// Por ejemplo: actualizar preview en tiempo real
// 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();
}
});
},
/**