Add template preview functionality: Introduced TemplatePreviewController and TemplatePreviewService for rendering dynamic previews of header, footer, and section templates. Updated form schemas to include preview components and enhanced real-time content updates. Added configuration for template assets and integrated preview functionality into the admin panel.
This commit is contained in:
Ümit Tunç
@@ -0,0 +1,288 @@
|
||||
@php
|
||||
$previewUrl = route('template.preview');
|
||||
// Get type and fieldName from component attributes or defaults
|
||||
$type = $attributes->get('data-type') ?? 'section';
|
||||
$fieldName = $attributes->get('data-field-name') ?? 'html_content';
|
||||
@endphp
|
||||
|
||||
<div
|
||||
x-data="templatePreview(@js($previewUrl), @js($type), @js($fieldName))"
|
||||
class="template-preview-wrapper w-full"
|
||||
style="width: 100%;"
|
||||
wire:ignore>
|
||||
<div class="fi-fo-field-wrp-label">
|
||||
<label class="fi-fo-field-wrp-label-label text-sm font-medium text-gray-700 dark:text-gray-300">
|
||||
{{ __('Preview') }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800"
|
||||
style="min-height: 400px; position: relative; width: 100%;">
|
||||
<!-- Loading indicator -->
|
||||
<div
|
||||
x-show="isLoading || !iframeSrc"
|
||||
class="absolute inset-0 flex items-center justify-center bg-gray-50 dark:bg-gray-900"
|
||||
style="z-index: 10;"
|
||||
x-transition>
|
||||
<div class="text-center">
|
||||
<svg class="animate-spin h-8 w-8 text-gray-400 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<span x-show="isLoading">Yükleniyor...</span>
|
||||
<span x-show="!isLoading && !iframeSrc">Önizleme için içerik girin</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview iframe -->
|
||||
<iframe
|
||||
x-show="!isLoading && iframeSrc"
|
||||
:src="iframeSrc"
|
||||
class="w-full border-0"
|
||||
style="min-height: 400px; width: 100%; display: block;"
|
||||
frameborder="0"
|
||||
loading="lazy"
|
||||
x-transition>
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{{ __('Önizleme gerçek zamanlı olarak güncellenir') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function templatePreview(previewUrl, type, fieldName) {
|
||||
return {
|
||||
previewUrl: previewUrl,
|
||||
type: type,
|
||||
fieldName: fieldName,
|
||||
iframeSrc: '',
|
||||
isLoading: false,
|
||||
content: '',
|
||||
debounceTimer: null,
|
||||
|
||||
init() {
|
||||
// Watch Livewire events for Filament form updates
|
||||
if (window.Livewire) {
|
||||
// Listen for form state updates
|
||||
Livewire.on('filament-forms::update-state', ({ statePath, state }) => {
|
||||
if (statePath === this.fieldName || statePath?.endsWith(this.fieldName)) {
|
||||
this.content = state || '';
|
||||
this.debouncedUpdate();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for any Livewire updates
|
||||
document.addEventListener('livewire:update', () => {
|
||||
this.debouncedUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
// Watch CodeMirror editor directly
|
||||
this.watchCodeMirror();
|
||||
|
||||
// Watch for direct input changes (fallback for code editor)
|
||||
const observer = new MutationObserver(() => {
|
||||
this.debouncedUpdate();
|
||||
});
|
||||
|
||||
// Observe form changes
|
||||
const form = document.querySelector('form[wire\\:submit]');
|
||||
if (form) {
|
||||
observer.observe(form, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
characterData: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Initial update after a short delay
|
||||
setTimeout(() => {
|
||||
this.updatePreview();
|
||||
}, 1000);
|
||||
|
||||
// Periodic update fallback (every 3 seconds)
|
||||
this.intervalId = setInterval(() => {
|
||||
this.updatePreview();
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
watchCodeMirror() {
|
||||
// Try to find CodeMirror editor instance
|
||||
const findCodeMirror = () => {
|
||||
// Look for CodeMirror editor instances
|
||||
const editors = document.querySelectorAll('.cm-editor, [data-code-editor]');
|
||||
editors.forEach(editor => {
|
||||
// Check if this is our field
|
||||
const fieldWrapper = editor.closest('[data-field-name], .fi-fo-field-wrp');
|
||||
if (fieldWrapper) {
|
||||
const fieldLabel = fieldWrapper.querySelector('label');
|
||||
if (fieldLabel && fieldLabel.textContent.includes('HTML Content')) {
|
||||
// Found our editor, try to get CodeMirror instance
|
||||
const cmInstance = editor.__cm || editor.cm || editor;
|
||||
if (cmInstance && cmInstance.getValue) {
|
||||
// Watch for changes
|
||||
if (cmInstance.on) {
|
||||
cmInstance.on('change', () => {
|
||||
this.content = cmInstance.getValue();
|
||||
this.debouncedUpdate();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Try immediately and after a delay
|
||||
findCodeMirror();
|
||||
setTimeout(findCodeMirror, 1000);
|
||||
setTimeout(findCodeMirror, 2000);
|
||||
},
|
||||
|
||||
debouncedUpdate() {
|
||||
clearTimeout(this.debounceTimer);
|
||||
this.debounceTimer = setTimeout(() => {
|
||||
this.updatePreview();
|
||||
}, 500); // 500ms debounce
|
||||
},
|
||||
|
||||
async updatePreview() {
|
||||
// Get content from Livewire - try different methods
|
||||
let content = this.content || '';
|
||||
|
||||
try {
|
||||
// Method 1: Try CodeMirror editor directly (most reliable for CodeEditor)
|
||||
// Find editor by data-field-name attribute
|
||||
const fieldWrapper = document.querySelector(`[data-field-name="${this.fieldName}"]`);
|
||||
if (fieldWrapper) {
|
||||
const cmEditor = fieldWrapper.querySelector('.cm-editor');
|
||||
if (cmEditor) {
|
||||
const cmInstance = cmEditor.__cm || cmEditor.cm || window.CodeMirror?.fromTextArea?.(cmEditor.querySelector('textarea'));
|
||||
if (cmInstance && typeof cmInstance.getValue === 'function') {
|
||||
content = cmInstance.getValue() || '';
|
||||
} else if (cmEditor.querySelector('.cm-content')) {
|
||||
// Fallback: get text from content div
|
||||
content = cmEditor.querySelector('.cm-content').textContent || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Method 1b: Try all CodeMirror editors if specific one not found
|
||||
if (!content) {
|
||||
const cmEditors = document.querySelectorAll('.cm-editor');
|
||||
for (const cmEditor of cmEditors) {
|
||||
const fieldWrapper = cmEditor.closest('[data-field-name]');
|
||||
if (fieldWrapper && fieldWrapper.getAttribute('data-field-name') === this.fieldName) {
|
||||
const cmInstance = cmEditor.__cm || cmEditor.cm;
|
||||
if (cmInstance && typeof cmInstance.getValue === 'function') {
|
||||
content = cmInstance.getValue() || '';
|
||||
if (content) break;
|
||||
} else if (cmEditor.querySelector('.cm-content')) {
|
||||
content = cmEditor.querySelector('.cm-content').textContent || '';
|
||||
if (content) break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Method 2: Try to find CodeEditor textarea/input directly
|
||||
if (!content) {
|
||||
const codeEditor = document.querySelector(`textarea[name="${this.fieldName}"],
|
||||
textarea[wire\\:model*="${this.fieldName}"],
|
||||
.fi-fo-field-wrp textarea,
|
||||
.cm-content`);
|
||||
|
||||
if (codeEditor) {
|
||||
content = codeEditor.value || codeEditor.textContent || '';
|
||||
}
|
||||
}
|
||||
|
||||
// Method 3: Try Livewire $wire
|
||||
if (!content && window.Livewire) {
|
||||
// Find the Livewire component
|
||||
const livewireComponent = document.querySelector('[wire\\:id], form[wire\\:submit]');
|
||||
if (livewireComponent) {
|
||||
const wireId = livewireComponent.getAttribute('wire:id');
|
||||
if (wireId) {
|
||||
const livewire = window.Livewire.find(wireId);
|
||||
if (livewire && livewire.get) {
|
||||
content = livewire.get(this.fieldName) || '';
|
||||
}
|
||||
} else {
|
||||
// Try Alpine.js $wire
|
||||
const alpineData = Alpine.$data(livewireComponent);
|
||||
if (alpineData && alpineData.$wire && alpineData.$wire.get) {
|
||||
content = alpineData.$wire.get(this.fieldName) || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Could not get content:', e);
|
||||
}
|
||||
|
||||
// Use existing content if new fetch failed
|
||||
if (!content && this.content) {
|
||||
content = this.content;
|
||||
}
|
||||
|
||||
this.content = content;
|
||||
|
||||
if (!this.content || this.content.trim() === '') {
|
||||
if (this.iframeSrc) {
|
||||
URL.revokeObjectURL(this.iframeSrc);
|
||||
this.iframeSrc = '';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.isLoading = true;
|
||||
|
||||
try {
|
||||
// Create form data
|
||||
const formData = new FormData();
|
||||
formData.append('content', this.content);
|
||||
formData.append('type', this.type);
|
||||
formData.append('_token', document.querySelector('meta[name="csrf-token"]')?.content || '');
|
||||
|
||||
// Fetch preview HTML
|
||||
const response = await fetch(this.previewUrl, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'text/html',
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Preview request failed');
|
||||
}
|
||||
|
||||
const html = await response.text();
|
||||
|
||||
// Create blob URL for iframe
|
||||
const blob = new Blob([html], { type: 'text/html; charset=utf-8' });
|
||||
|
||||
// Revoke old URL if exists
|
||||
if (this.iframeSrc) {
|
||||
URL.revokeObjectURL(this.iframeSrc);
|
||||
}
|
||||
|
||||
this.iframeSrc = URL.createObjectURL(blob);
|
||||
this.isLoading = false;
|
||||
} catch (error) {
|
||||
console.error('Preview error:', error);
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
Reference in New Issue
Block a user