tractatus/public/js/media-inquiry.js
TheFlow b21cda335d feat(i18n): add multilingual support to case-submission and media-inquiry pages
Adds German and French translations for form submission pages with
dynamic message handling and language selector integration.

**Pages Updated:**
- case-submission.html: Added data-i18n attributes and language selector
- media-inquiry.html: Added data-i18n attributes and language selector

**Translation Files Created:**
- EN/DE/FR for case-submission (form labels, help text, dynamic messages)
- EN/DE/FR for media-inquiry (form labels, help text, dynamic messages)

**JavaScript Updates:**
- case-submission.js: Added i18n translation helper for dynamic content
- media-inquiry.js: Added i18n translation helper for dynamic content
- Submit buttons and error messages now translate based on selected language

**Features:**
- Language flags visible in navbar for easy switching
- Form labels and help text translate on language change
- Submit button text updates during submission ("Submitting..." → "Einreichen..." in DE)
- Success/error messages display in user's selected language
- All translations via DeepL API for professional quality

**Technical Details:**
- Uses cache-busting timestamps for translation fetches (prevents stale cache)
- Submit buttons use <span data-i18n> for translatable content
- Form JavaScript uses window.i18nTranslations for dynamic text

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-26 16:41:54 +13:00

84 lines
2.5 KiB
JavaScript

/**
* Media Inquiry Form Handler
*/
const form = document.getElementById('media-inquiry-form');
const submitButton = document.getElementById('submit-button');
const successMessage = document.getElementById('success-message');
const errorMessage = document.getElementById('error-message');
// Helper to get translated text
function t(key) {
if (window.i18nTranslations) {
const keys = key.split('.');
let value = window.i18nTranslations;
for (const k of keys) {
value = value?.[k];
}
return value || key;
}
return key;
}
form.addEventListener('submit', async (e) => {
e.preventDefault();
// Hide previous messages
successMessage.style.display = 'none';
errorMessage.style.display = 'none';
// Disable submit button
submitButton.disabled = true;
submitButton.querySelector('span').textContent = t('messages.submitting');
// Collect form data
const formData = {
contact: {
name: document.getElementById('contact-name').value,
email: document.getElementById('contact-email').value,
outlet: document.getElementById('contact-outlet').value,
phone: document.getElementById('contact-phone').value || null
},
inquiry: {
subject: document.getElementById('inquiry-subject').value,
message: document.getElementById('inquiry-message').value,
deadline: document.getElementById('inquiry-deadline').value || null,
topic_areas: []
}
};
try {
const response = await fetch('/api/media/inquiries', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
// Success
successMessage.textContent = data.message || t('messages.success');
successMessage.style.display = 'block';
form.reset();
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
// Error
errorMessage.textContent = data.message || t('messages.error');
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
}
} catch (error) {
console.error('Submit error:', error);
errorMessage.textContent = t('messages.network_error');
errorMessage.style.display = 'block';
window.scrollTo({ top: 0, behavior: 'smooth' });
} finally {
// Re-enable submit button
submitButton.disabled = false;
submitButton.querySelector('span').textContent = t('form.submit_button');
}
});