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:
@@ -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();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user