class SimpleOpacityController { constructor(controlSelector, targetSelector) { this.controlSelector = controlSelector; this.targetSelector = targetSelector; this.disabledClass = 'disabled-state'; this.init(); } init() { const controls = document.querySelectorAll(this.controlSelector); const targets = document.querySelectorAll(this.targetSelector); // Listener para detectar mudanças controls.forEach(control => { control.addEventListener('change', () => { this.updateOpacity(); }); }); // Estado inicial this.updateOpacity(); console.log('✅ Sistema simples de opacidade inicializado'); console.log('Controlando:', controls.length, 'controles e', targets.length, 'alvos'); } updateOpacity() { const hasSelection = this.hasSelection(); const targets = document.querySelectorAll(this.targetSelector); targets.forEach(target => { if (hasSelection) { // TEM seleção = div normal target.classList.remove(this.disabledClass); console.log('🟢 Div ativada - seleção detectada'); } else { // NÃO tem seleção = div opaca target.classList.add(this.disabledClass); console.log('🔴 Div desativada - nenhuma seleção'); } }); } hasSelection() { // Para SELECT: verificar se valor não está vazio const selects = document.querySelectorAll(this.controlSelector + '[type=""], ' + this.controlSelector + ':not([type])'); for (let select of selects) { if (select.value && select.value.trim() !== '') { return true; } } // Para RADIO BUTTONS: verificar se algum está selecionado E não é vazio const radios = document.querySelectorAll(this.controlSelector + '[type="radio"]'); for (let radio of radios) { if (radio.checked && radio.value && radio.value.trim() !== '') { return true; } } return false; } }