Spaces:
Paused
Paused
File size: 2,900 Bytes
fab8051 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
// reset.js
export function initClearButton() {
const clearBtn = document.getElementById('clear-input');
const inputArea = document.getElementById('input-text');
const outputBox = document.getElementById('output-text');
const rawBox = document.getElementById('raw-output');
const outputContainer = document.getElementById('output-text-container');
const instructionsEl = document.getElementById('instructions');
const promptOutput = document.getElementById('prompt-output');
if (!clearBtn || !inputArea) return;
// Add accessibility attributes
clearBtn.setAttribute('aria-label', 'Clear input text');
// Update button state based on input content
function updateClearButtonState() {
if (inputArea.value.trim()) {
clearBtn.disabled = false;
} else {
clearBtn.disabled = true;
}
}
// Initialize button state
updateClearButtonState();
// Monitor input changes
inputArea.addEventListener('input', updateClearButtonState);
clearBtn.addEventListener('click', async () => {
// 1. Clear user input
inputArea.value = '';
// 2. Hide or empty outputs
if (outputBox) {
outputBox.textContent = '';
outputBox.dataset.copy = ''; // Clear the copy data
}
if (rawBox) {
rawBox.style.display = 'none';
rawBox.textContent = '';
rawBox._jsonData = null;
}
// 3. Clear any error messages (look for error message simple)
const errorBox = outputContainer?.querySelector('.error-message-simple');
if (errorBox) {
errorBox.remove();
}
// 4. Reset ancillary UI
const copyBtn = document.getElementById('copy-output');
if (copyBtn) {
copyBtn.disabled = true;
}
// 5. Hide prompt output if visible
if (promptOutput) {
promptOutput.style.display = 'none';
promptOutput.textContent = '';
}
// 6. Show instructions again
if (instructionsEl) {
instructionsEl.style.display = 'block';
}
// 7. Flash success animation
await flashSuccess(clearBtn);
// 8. Update button state
updateClearButtonState();
// 9. Return focus to input for quick re-entry
inputArea.focus();
});
// Export the update function so it can be called externally
return { updateClearButtonState };
}
// Export a standalone update function that can be called from other modules
export function updateClearButtonState() {
const clearBtn = document.getElementById('clear-input');
const inputArea = document.getElementById('input-text');
if (!clearBtn || !inputArea) return;
if (inputArea.value.trim()) {
clearBtn.disabled = false;
} else {
clearBtn.disabled = true;
}
}
// Flash success animation (similar to copy button)
async function flashSuccess(button) {
button.classList.add('cleared');
await new Promise((resolve) => setTimeout(resolve, 1500));
button.classList.remove('cleared');
}
|