0) { this.focusableElements[0].focus(); } }); }, closeModal() { this.isOpen = false; this.isPlaying = false; document.body.style.overflow = ''; if (this.previousFocus) { this.previousFocus.focus(); } }, handleKeydown(event) { if (event.key === 'Escape') { this.closeModal(); } else if (event.key === 'Tab') { this.trapFocus(event); } }, trapFocus(event) { if (this.focusableElements.length === 0) return; const firstElement = this.focusableElements[0]; const lastElement = this.focusableElements[this.focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } }, togglePlay() { this.isPlaying = !this.isPlaying; }, formatTime(seconds) { const mins = Math.floor(seconds / 60); const secs = Math.floor(seconds % 60); return `${mins}:${secs.toString().padStart(2, '0')}`; }, toggleFullscreen() { this.isFullscreen = !this.isFullscreen; } }" @open-preview-modal.window="openModal()" @keydown.window="isOpen && handleKeydown($event)">

0) { this.focusableElements[0].focus(); } }); }, closeModal() { this.isOpen = false; document.body.style.overflow = ''; if (this.previousFocus) { this.previousFocus.focus(); } }, handleKeydown(event) { if (event.key === 'Escape') { this.closeModal(); } else if (event.key === 'Tab') { this.trapFocus(event); } }, trapFocus(event) { if (this.focusableElements.length === 0) return; const firstElement = this.focusableElements[0]; const lastElement = this.focusableElements[this.focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } }, nextStep() { if (this.currentStep < this.totalSteps) { this.currentStep++; } }, prevStep() { if (this.currentStep > 1) { this.currentStep--; } }, startExport() { this.isExporting = true; this.exportProgress = 0; // Simulate export progress const interval = setInterval(() => { this.exportProgress += Math.random() * 15; if (this.exportProgress >= 100) { this.exportProgress = 100; this.isExporting = false; clearInterval(interval); } }, 500); } }" @open-export-modal.window="openModal()" @keydown.window="isOpen && handleKeydown($event)">