juanatsap
44116eba5a
- Use event filtering [key is 'Enter' or key is ' '] on PDF modal cards - Remove handlePdfCardKey helper function (now inline) - Use event destructuring on keydown(key, target, ctrlKey, metaKey, altKey) - Cleaner, more idiomatic hyperscript patterns
276 lines
12 KiB
HTML
276 lines
12 KiB
HTML
{{define "pdf-modal"}}
|
|
<!-- PDF Download Modal - Interactive Thumbnails -->
|
|
<dialog id="pdf-modal" class="info-modal pdf-download-modal no-print"
|
|
_="on click call closeOnBackdrop(me, event)">
|
|
<div class="info-modal-content" id="pdf-modal-content">
|
|
<!-- Loading Overlay -->
|
|
<div class="pdf-loading-overlay" id="pdf-loading-overlay">
|
|
<div class="pdf-loading-content">
|
|
<div class="pdf-loading-spinner"></div>
|
|
<h3 class="pdf-loading-title" id="pdf-loading-title">
|
|
{{.UI.PdfModal.PreparingPdf}}
|
|
</h3>
|
|
<p class="pdf-loading-message" id="pdf-loading-message">
|
|
{{.UI.PdfModal.PleaseWait}}
|
|
</p>
|
|
<p class="pdf-loading-estimate" id="pdf-loading-estimate"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Close Button -->
|
|
<button class="info-modal-close"
|
|
commandfor="pdf-modal"
|
|
command="close"
|
|
aria-label="{{.UI.PdfModal.Close}}">
|
|
<iconify-icon icon="mdi:close" width="24" height="24"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- Header -->
|
|
<div class="info-modal-header">
|
|
<iconify-icon icon="catppuccin:pdf" width="40" height="40" style="margin-bottom: 0.5rem;"></iconify-icon>
|
|
<h2>{{.UI.PdfModal.Title}}</h2>
|
|
<p class="pdf-modal-subtitle">
|
|
{{.UI.PdfModal.Subtitle}}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Body: Three Thumbnail Cards -->
|
|
<div class="pdf-options-grid">
|
|
|
|
<!-- Short CV Card -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="short"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{.UI.PdfModal.ShortCv.AriaLabel}}"
|
|
tabindex="0"
|
|
_="on click call selectPdfCard(me)
|
|
on keydown[key is 'Enter' or key is ' '] halt the event then call selectPdfCard(me)">
|
|
|
|
<div class="pdf-thumbnail thumbnail-short">
|
|
<!-- Header representation -->
|
|
<div class="skeleton-block" style="height: 48px;"></div>
|
|
|
|
<!-- Content sections (compact) -->
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
<div class="skeleton-block" style="height: 60px;"></div>
|
|
|
|
<!-- Page count badge -->
|
|
<div class="thumbnail-badge">
|
|
{{.UI.PdfModal.ShortCv.Pages}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{.UI.PdfModal.ShortCv.Title}}</h3>
|
|
<p>{{.UI.PdfModal.ShortCv.Description}}</p>
|
|
</div>
|
|
|
|
<div class="pdf-option-badge">
|
|
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Default CV Card (Recommended) -->
|
|
<div class="pdf-option-card pdf-option-recommended selected"
|
|
data-cv-format="default"
|
|
role="radio"
|
|
aria-checked="true"
|
|
aria-label="{{.UI.PdfModal.DefaultCv.AriaLabel}}"
|
|
tabindex="0"
|
|
_="on click call selectPdfCard(me)
|
|
on keydown[key is 'Enter' or key is ' '] halt the event then call selectPdfCard(me)">
|
|
|
|
<div class="pdf-thumbnail thumbnail-default">
|
|
<!-- Two-column layout with sidebar -->
|
|
<div class="skeleton-block" style="height: 36px; margin-bottom: 6px;"></div>
|
|
<div style="display: flex; gap: 4px;">
|
|
<div style="width: 25%; display: flex; flex-direction: column; gap: 3px;">
|
|
<div class="skeleton-block" style="height: 20px;"></div>
|
|
<div class="skeleton-block" style="height: 16px;"></div>
|
|
</div>
|
|
<div style="width: 75%; display: flex; flex-direction: column; gap: 3px;">
|
|
<div class="skeleton-block" style="height: 32px;"></div>
|
|
<div class="skeleton-block" style="height: 32px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page count badge with star -->
|
|
<div class="thumbnail-badge" style="font-weight: 600;">
|
|
⭐ {{.UI.PdfModal.DefaultCv.Pages}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>
|
|
{{.UI.PdfModal.DefaultCv.Title}}
|
|
<span style="color: #667eea; font-size: 0.9em;">⭐</span>
|
|
</h3>
|
|
<p style="font-weight: 500;">{{.UI.PdfModal.DefaultCv.Description}}</p>
|
|
</div>
|
|
|
|
<div class="pdf-option-badge">
|
|
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Extended CV Card -->
|
|
<div class="pdf-option-card"
|
|
data-cv-format="long"
|
|
role="radio"
|
|
aria-checked="false"
|
|
aria-label="{{.UI.PdfModal.ExtendedCv.AriaLabel}}"
|
|
tabindex="0"
|
|
_="on click call selectPdfCard(me)
|
|
on keydown[key is 'Enter' or key is ' '] halt the event then call selectPdfCard(me)">
|
|
|
|
<div class="pdf-thumbnail thumbnail-long">
|
|
<!-- Header representation -->
|
|
<div class="skeleton-block" style="height: 48px;"></div>
|
|
|
|
<!-- More content sections (detailed) -->
|
|
<div class="skeleton-block" style="height: 40px;"></div>
|
|
<div class="skeleton-block" style="height: 40px;"></div>
|
|
<div class="skeleton-block" style="height: 40px;"></div>
|
|
<div class="skeleton-block" style="height: 40px;"></div>
|
|
<div class="skeleton-block" style="height: 40px;"></div>
|
|
|
|
<!-- Page count badge -->
|
|
<div class="thumbnail-badge">
|
|
{{.UI.PdfModal.ExtendedCv.Pages}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pdf-option-info">
|
|
<h3>{{.UI.PdfModal.ExtendedCv.Title}}</h3>
|
|
<p>{{.UI.PdfModal.ExtendedCv.Description}}</p>
|
|
</div>
|
|
|
|
<div class="pdf-option-badge">
|
|
<iconify-icon icon="mdi:check-circle" width="32" height="32"></iconify-icon>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer: Download Button -->
|
|
<div class="pdf-modal-footer">
|
|
<button class="pdf-download-btn"
|
|
id="pdf-download-btn"
|
|
onclick="downloadPDF()">
|
|
<iconify-icon icon="mdi:download" width="20" height="20"></iconify-icon>
|
|
{{.UI.PdfModal.DownloadButton}}
|
|
</button>
|
|
</div>
|
|
|
|
<script>
|
|
// Reset loading state when modal opens to prevent stuck blur effect
|
|
(function() {
|
|
const modal = document.getElementById('pdf-modal');
|
|
const modalContent = document.getElementById('pdf-modal-content');
|
|
const overlay = document.getElementById('pdf-loading-overlay');
|
|
|
|
// Clean up loading state when modal closes
|
|
modal.addEventListener('close', function() {
|
|
overlay.classList.remove('active');
|
|
modalContent.classList.remove('loading-active');
|
|
});
|
|
|
|
// Also clean up when modal opens (in case of stuck state)
|
|
// Use MutationObserver to detect when modal becomes visible
|
|
const observer = new MutationObserver(function(mutations) {
|
|
mutations.forEach(function(mutation) {
|
|
if (mutation.attributeName === 'open') {
|
|
if (modal.hasAttribute('open')) {
|
|
// Modal just opened - ensure clean state
|
|
overlay.classList.remove('active');
|
|
modalContent.classList.remove('loading-active');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(modal, { attributes: true });
|
|
})();
|
|
|
|
function downloadPDF() {
|
|
const selectedCard = document.querySelector('#pdf-modal .pdf-option-card.selected');
|
|
if (!selectedCard) {
|
|
console.error('No card selected');
|
|
return;
|
|
}
|
|
|
|
const selectedFormat = selectedCard.getAttribute('data-cv-format');
|
|
const lang = '{{.Lang}}';
|
|
const isSpanish = lang === 'es';
|
|
let url;
|
|
let estimatedTime = 4; // Default: 4 seconds
|
|
let formatName = '';
|
|
|
|
console.log('Download requested for format:', selectedFormat);
|
|
|
|
// Build URL and set estimated time based on format
|
|
if (selectedFormat === 'short') {
|
|
// Short CV: clean version (no skills), short length
|
|
url = `/export/pdf?lang=${lang}&length=short&icons=show&version=clean`;
|
|
estimatedTime = 3;
|
|
formatName = isSpanish ? 'CV Corto (4 páginas)' : 'Short CV (4 pages)';
|
|
} else if (selectedFormat === 'default') {
|
|
// Default CV: use shortcut URL (short with skills, 5 pages)
|
|
const currentYear = new Date().getFullYear();
|
|
url = `/cv-jamr-${currentYear}-${lang}.pdf`;
|
|
estimatedTime = 4;
|
|
formatName = isSpanish ? 'CV Por Defecto (5 páginas)' : 'Default CV (5 pages)';
|
|
} else if (selectedFormat === 'long') {
|
|
// Long CV: with skills sidebar, long length
|
|
url = `/export/pdf?lang=${lang}&length=long&icons=show&version=with_skills`;
|
|
estimatedTime = 8;
|
|
formatName = isSpanish ? 'CV Extendido (9 páginas)' : 'Extended CV (9 pages)';
|
|
} else if (selectedFormat === 'current') {
|
|
// Current view: use localStorage settings
|
|
let currentLength = localStorage.getItem('cv-length') || 'short';
|
|
const currentIcons = localStorage.getItem('cv-icons') || 'show';
|
|
const currentTheme = localStorage.getItem('cv-theme') || 'default';
|
|
const version = currentTheme === 'clean' ? 'clean' : 'with_skills';
|
|
url = `/export/pdf?lang=${lang}&length=${currentLength}&icons=${currentIcons}&version=${version}`;
|
|
estimatedTime = currentLength === 'long' ? 8 : 4;
|
|
formatName = isSpanish ? 'CV Actual' : 'Current CV';
|
|
}
|
|
|
|
// Show loading overlay in modal
|
|
const overlay = document.getElementById('pdf-loading-overlay');
|
|
const modalContent = document.getElementById('pdf-modal-content');
|
|
const estimateEl = document.getElementById('pdf-loading-estimate');
|
|
const modal = document.getElementById('pdf-modal');
|
|
|
|
overlay.classList.add('active');
|
|
modalContent.classList.add('loading-active');
|
|
|
|
// Update estimate message
|
|
const estimateMsg = isSpanish
|
|
? `Generando ${formatName}... Esto puede tardar ~${estimatedTime} segundos`
|
|
: `Generating ${formatName}... This may take ~${estimatedTime} seconds`;
|
|
estimateEl.textContent = estimateMsg;
|
|
|
|
console.log('Navigating to:', url);
|
|
|
|
// Trigger download
|
|
window.location.href = url;
|
|
|
|
// After estimated time: remove loading state and close modal
|
|
setTimeout(() => {
|
|
overlay.classList.remove('active');
|
|
modalContent.classList.remove('loading-active');
|
|
|
|
// Close modal if still open
|
|
modal.close();
|
|
}, estimatedTime * 1000);
|
|
}
|
|
</script>
|
|
|
|
<!-- Screen Reader Announcement Area -->
|
|
<div id="pdf-selection-announcement" class="sr-only" aria-live="polite" aria-atomic="true"></div>
|
|
</div>
|
|
</dialog>
|
|
{{end}}
|