${h.date}
${h.targetLangs.length} lang${h.targetLangs.length > 1 ? 's' : ''}
${escapeHtml(h.sourceText)}
${h.targetLangs.join(', ')}
`).join('');
}
// --- Load from History ---
function loadFromHistory(id) {
const entry = translationHistory.find(h => h.id === id);
if (!entry) return;
document.getElementById('sourceLang').value = entry.sourceLang;
// We can't fully restore source text (it was truncated), but show translations
renderResults(entry.translations);
toggleHistory();
showToast('Loaded from history');
}
// --- Toggle Modals ---
function toggleHelp() {
const modal = document.getElementById('helpModal');
modal.classList.toggle('hidden');
if (!modal.classList.contains('hidden')) {
modal.querySelector('div').classList.add('modal-enter');
}
}
function toggleHistory() {
const modal = document.getElementById('historyModal');
modal.classList.toggle('hidden');
if (!modal.classList.contains('hidden')) {
renderHistoryList();
modal.querySelector('div').classList.add('modal-enter');
}
}
function toggleSettings() {
const modal = document.getElementById('settingsModal');
modal.classList.toggle('hidden');
if (!modal.classList.contains('hidden')) {
modal.querySelector('div').classList.add('modal-enter');
}
}
// --- Change Font Size ---
function changeFontSize(size) {
document.getElementById('fontSizeLabel').textContent = `${size}px`;
document.getElementById('sourceText').style.fontSize = `${size}px`;
document.querySelectorAll('.result-body').forEach(el => {
el.style.fontSize = `${size}px`;
});
}
// --- Online/Offline Status ---
function checkOnlineStatus() {
const banner = document.getElementById('offlineBanner');
if (!navigator.onLine) {
banner.classList.remove('hidden');
} else {
banner.classList.add('hidden');
}
}
// --- Toast Notification ---
function showToast(message) {
const toast = document.getElementById('toast');
const msg = document.getElementById('toastMsg');
msg.textContent = message;
toast.classList.remove('hidden');
// Force re-animation
toast.style.animation = 'none';
toast.offsetHeight; // trigger reflow
toast.style.animation = '';
clearTimeout(toast._timeout);
toast._timeout = setTimeout(() => {
toast.classList.add('hidden');
}, 3000);
}
// --- Escape HTML ---
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// --- Keyboard Shortcut ---
document.addEventListener('keydown', (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
translateText();
}
if (e.key === 'Escape') {
document.getElementById('helpModal').classList.add('hidden');
document.getElementById('historyModal').classList.add('hidden');
document.getElementById('settingsModal').classList.add('hidden');
}
});