engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace iframe with popup window for HTML translation preview

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-01 16:48:40 -04:00
parent fad29c828b
commit 4fa252f73d
1 changed files with 20 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/ui.js
View file

@ -1717,15 +1717,28 @@ export function openTranslateModal() {
translatedText.includes('<div') || translatedText.includes('<section'));
if (isHTML) {
// Create HTML preview with toggle
// Create popup preview function
const openPreview = () => {
const previewWindow = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes,location=no,menubar=no,toolbar=no,status=no');
if (previewWindow) {
previewWindow.document.write(translatedText);
previewWindow.document.close();
previewWindow.document.title = `Translation Preview (${targetLanguageName})`;
} else {
alert('Please allow popups for preview window');
}
};
// Create preview controls
resultArea.innerHTML = `
<div style="margin-bottom: 15px;">
<button onclick="this.nextElementSibling.style.display = this.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent.includes('Raw') ? 'Show Raw HTML' : 'Hide Raw HTML'" style="padding: 6px 12px; background: #666; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Raw HTML</button>
<div style="display: none; margin: 10px 0; padding: 15px; background: #f0f0f0; border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 0.85em; max-height: 200px; overflow-y: auto; border: 1px solid #ddd;">${translatedText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
<div style="margin-bottom: 15px; display: flex; gap: 10px; flex-wrap: wrap;">
<button onclick="(${openPreview.toString()})()" style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold;">🔗 Open Preview in New Window</button>
<button onclick="this.parentElement.nextElementSibling.style.display = this.parentElement.nextElementSibling.style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent.includes('Raw') ? 'Show Raw HTML' : 'Hide Raw HTML'" style="padding: 8px 16px; background: #666; color: white; border: none; border-radius: 4px; cursor: pointer;">Show Raw HTML</button>
</div>
<div style="border: 2px solid #4CAF50; border-radius: 8px; background: white; overflow: hidden;">
<div style="background: #4CAF50; color: white; padding: 10px; font-weight: bold; margin: 0;">📄 Rendered Preview</div>
<iframe srcdoc="${translatedText.replace(/"/g, '&quot;').replace(/'/g, '&#39;')}" style="width: 100%; height: 500px; border: none; display: block;" sandbox="allow-same-origin"></iframe>
<div style="display: none; margin: 10px 0; padding: 15px; background: #f0f0f0; border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 0.85em; max-height: 300px; overflow-y: auto; border: 1px solid #ddd;">${translatedText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</div>
<div style="border: 2px solid #2196F3; border-radius: 8px; background: #f8f9ff; padding: 15px; text-align: center;">
<div style="color: #2196F3; font-weight: bold; margin-bottom: 10px;">📄 HTML Translation Complete</div>
<p style="margin: 0; color: #666;">Click "Open Preview in New Window" above to view the rendered result in full size</p>
</div>
`;
resultArea.style.whiteSpace = 'normal';