From 6f12dda0d905dc76d92cd3a48df82e59eeb73d47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= Date: Fri, 31 Oct 2025 17:06:25 -0300 Subject: [PATCH] Enhance template preview functionality: Added a loading button for manual preview updates, improved loading indicators, and removed automatic content updates to streamline user interaction. Updated the template preview Blade view for better user feedback during content processing. --- .../components/template-preview.blade.php | 100 +++++++----------- 1 file changed, 38 insertions(+), 62 deletions(-) diff --git a/resources/views/components/template-preview.blade.php b/resources/views/components/template-preview.blade.php index 55da1e8..e028835 100644 --- a/resources/views/components/template-preview.blade.php +++ b/resources/views/components/template-preview.blade.php @@ -15,7 +15,24 @@ -
+ +
+ +
-
+
-
-

- Yükleniyor... - Önizleme hazırlanıyor -

-

- İçerik işleniyor - Önizleme için HTML içeriği girin -

-
+
@@ -60,9 +68,7 @@
-

- {{ __('Önizleme gerçek zamanlı olarak güncellenir') }} -

+
@push('scripts') @@ -75,8 +81,6 @@ function templatePreview(previewUrl, type, fieldName) { iframeSrc: '', isLoading: false, content: '', - debounceTimer: null, - intervalId: null, codeMirrorView: null, init() { @@ -86,8 +90,6 @@ function templatePreview(previewUrl, type, fieldName) { this.$nextTick(() => { setTimeout(() => { this.findCodeMirror(); - this.setupWatchers(); - this.updatePreview(); }, 1500); }); }, @@ -215,13 +217,18 @@ function templatePreview(previewUrl, type, fieldName) { if (cmContent) { console.log('[Preview] Found .cm-content element'); - // Watch for changes + // Get initial content (no watcher, only on demand) + this.content = cmContent.textContent || ''; + console.log('[Preview] Initial content from .cm-content, length:', this.content.length); + + // Watch for content changes to update internal content variable + // but don't trigger preview update automatically const observer = new MutationObserver(() => { const newContent = cmContent.textContent || ''; if (newContent !== this.content) { this.content = newContent; console.log('[Preview] Content changed, length:', this.content.length); - this.debouncedUpdate(); + // Don't auto-update, wait for Run button } }); observer.observe(cmContent, { @@ -230,10 +237,6 @@ function templatePreview(previewUrl, type, fieldName) { characterData: true, }); - // Get initial content - this.content = cmContent.textContent || ''; - console.log('[Preview] Initial content from .cm-content, length:', this.content.length); - if (this.content) { return; // Success! } @@ -247,12 +250,13 @@ function templatePreview(previewUrl, type, fieldName) { console.log('[Preview] Found CodeMirror 6 View, content length:', this.content.length); if (view.dispatch) { - // Watch for changes + // Watch for changes to update internal content variable + // but don't trigger preview update automatically const originalDispatch = view.dispatch; view.dispatch = (tr) => { originalDispatch.call(view, tr); this.content = view.state.doc.toString(); - this.debouncedUpdate(); + // Don't auto-update, wait for Run button }; } @@ -270,7 +274,7 @@ function templatePreview(previewUrl, type, fieldName) { this.content = cmInstance.getValue(); cmInstance.on('change', () => { this.content = cmInstance.getValue(); - this.debouncedUpdate(); + // Don't auto-update, wait for Run button }); console.log('[Preview] CodeMirror 5 content length:', this.content.length); if (this.content) { @@ -286,7 +290,7 @@ function templatePreview(previewUrl, type, fieldName) { this.content = textarea.value || ''; textarea.addEventListener('input', () => { this.content = textarea.value; - this.debouncedUpdate(); + // Don't auto-update, wait for Run button }); console.log('[Preview] Textarea content length:', this.content.length); } else { @@ -295,34 +299,12 @@ function templatePreview(previewUrl, type, fieldName) { } }, - setupWatchers() { - // Watch for Livewire updates - if (window.Livewire) { - document.addEventListener('livewire:update', () => { - this.findCodeMirror(); - this.debouncedUpdate(); - }); - } - - // Periodic update - this.intervalId = setInterval(() => { - this.findCodeMirror(); - this.updatePreview(); - }, 3000); - }, - - debouncedUpdate() { - clearTimeout(this.debounceTimer); - this.debounceTimer = setTimeout(() => { - this.updatePreview(); - }, 800); - }, - async updatePreview() { - // Try to refresh content - if (!this.content) { - this.findCodeMirror(); - } + // Refresh content from editor before updating + this.findCodeMirror(); + + // Give a moment for content to be refreshed + await new Promise(resolve => setTimeout(resolve, 100)); if (!this.content || !this.content.trim()) { console.log('[Preview] No content, skipping update'); @@ -372,12 +354,6 @@ function templatePreview(previewUrl, type, fieldName) { }, destroy() { - if (this.intervalId) { - clearInterval(this.intervalId); - } - if (this.debounceTimer) { - clearTimeout(this.debounceTimer); - } if (this.iframeSrc) { URL.revokeObjectURL(this.iframeSrc); }