162 lines
8.7 KiB
HTML
162 lines
8.7 KiB
HTML
<div class="container">
|
||
<div class="row">
|
||
<div class="col-md-8">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<h4>{{ if .IsEdit }}Yazıyı Düzenle{{ else }}Yeni Yazı{{ end }}</h4>
|
||
<form action="{{ if .IsEdit }}/admin/posts/{{ .Post.ID }}/update{{ else }}/admin/posts/create{{ end }}" method="POST" enctype="multipart/form-data">
|
||
<div class="mb-3">
|
||
<label class="form-label">Başlık</label>
|
||
<input type="text" name="title" class="form-control" value="{{ if .IsEdit }}{{ .Post.Title }}{{ end }}">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Slug</label>
|
||
<input type="text" name="slug" class="form-control" value="{{ if .IsEdit }}{{ .Post.Slug }}{{ end }}">
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">İçerik</label>
|
||
<textarea id="contentInput" name="content" rows="8" class="form-control d-none">{{ if .IsEdit }}{{ .Post.Content }}{{ end }}</textarea>
|
||
<div id="quillEditor" style="min-height:300px;border:1px solid #ddd;border-radius:4px;">
|
||
<!-- initial content will be loaded from the hidden textarea by JS -->
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Kategoriler (Ctrl/Tık birden çok seçim)</label>
|
||
<select name="category_ids" class="form-select" multiple>
|
||
{{ range .Categories }}
|
||
<option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Post.Categories }}{{ if eq .ID $.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Title }}</option>
|
||
{{ end }}
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Taglar (Ctrl/Tık birden çok seçim)</label>
|
||
<select name="tag_ids" class="form-select" multiple>
|
||
{{ range .Tags }}
|
||
<option value="{{ .ID }}" {{ if $.IsEdit }}{{ range $.Post.Tags }}{{ if eq .ID $.ID }}selected{{ end }}{{ end }}{{ end }}>{{ .Name }}</option>
|
||
{{ end }}
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">Görsel (Tek dosya)</label>
|
||
<input type="file" name="image" class="form-control" accept="image/*">
|
||
<div class="mt-2">
|
||
<img id="imagePreview" src="" alt="preview" class="rounded" style="display:none;width:150px;height:150px;object-fit:cover;border:1px solid #ddd;">
|
||
</div>
|
||
<div class="row g-2">
|
||
<div class="col-3">
|
||
<label class="form-label">Genişlik</label>
|
||
<input type="number" name="width" class="form-control" value="{{ if .IsEdit }}{{ .Post.Width }}{{ else }}1920{{ end }}">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Yükseklik</label>
|
||
<input type="number" name="height" class="form-control" value="{{ if .IsEdit }}{{ .Post.Height }}{{ else }}1080{{ end }}">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Kalite</label>
|
||
<input type="number" name="quality" class="form-control" value="{{ if .IsEdit }}{{ .Post.Quality }}{{ else }}80{{ end }}">
|
||
</div>
|
||
<div class="col-3">
|
||
<label class="form-label">Format</label>
|
||
<select name="format" class="form-select">
|
||
<option value="avif" {{ if .IsEdit }}{{ if eq .Post.Format "avif" }}selected{{ end }}{{ end }}>AVIF</option>
|
||
<option value="webp" {{ if .IsEdit }}{{ if eq .Post.Format "webp" }}selected{{ end }}{{ end }}>WebP</option>
|
||
<option value="jpg" {{ if .IsEdit }}{{ if eq .Post.Format "jpg" }}selected{{ end }}{{ end }}>JPG</option>
|
||
<option value="png" {{ if .IsEdit }}{{ if eq .Post.Format "png" }}selected{{ end }}{{ end }}>PNG</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex gap-2">
|
||
<button class="btn btn-primary">{{ if .IsEdit }}Güncelle{{ else }}Oluştur{{ end }}</button>
|
||
<a href="/admin/content/posts" class="btn btn-outline-secondary" hx-get="/admin/content/posts" hx-target="#main-content" hx-push-url="true">İptal</a>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="card shadow-sm">
|
||
<div class="card-body">
|
||
<h6>Mevcut Görsel</h6>
|
||
{{ if .IsEdit }}
|
||
{{ if .Post.Images }}
|
||
<div class="small text-muted">Görsel yolları: {{ .Post.Images }}</div>
|
||
{{ else }}
|
||
<div class="text-muted small">Henüz görsel yüklenmedi.</div>
|
||
{{ end }}
|
||
{{ else }}
|
||
<div class="text-muted small">Henüz görsel yüklenmedi.</div>
|
||
{{ end }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function(){
|
||
const fileInput = document.querySelector('input[name="image"]');
|
||
const preview = document.getElementById('imagePreview');
|
||
// show existing image if provided by controller
|
||
const firstImage = '{{ .FirstImage }}';
|
||
if (firstImage && firstImage !== '') {
|
||
preview.src = firstImage;
|
||
preview.style.display = 'block';
|
||
}
|
||
if (fileInput) {
|
||
fileInput.addEventListener('change', function(e){
|
||
const f = this.files && this.files[0];
|
||
if (!f) return;
|
||
const reader = new FileReader();
|
||
reader.onload = function(ev){
|
||
preview.src = ev.target.result;
|
||
preview.style.display = 'block';
|
||
}
|
||
reader.readAsDataURL(f);
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Quill: load local CSS and JS; initialize editor and sync to textarea on submit -->
|
||
<link href="/assets/quill/dist/quill.snow.css" rel="stylesheet">
|
||
<script src="/assets/quill/dist/quill.js"></script>
|
||
<script>
|
||
(function initQuill(){
|
||
try {
|
||
var textarea = document.getElementById('contentInput');
|
||
var editorContainer = document.getElementById('quillEditor');
|
||
if (!editorContainer) return;
|
||
// Avoid double-init
|
||
if (editorContainer.__quillInitialized) return;
|
||
// Initialize Quill
|
||
var quill = new Quill(editorContainer, {
|
||
theme: 'snow',
|
||
modules: {
|
||
toolbar: {
|
||
container: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'image'], ['code-block'], ['clean']],
|
||
handlers: {
|
||
image: function() {
|
||
try { window.showImageModal(quill); } catch(e) { console.error('open image modal failed', e); }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
editorContainer.__quillInitialized = true;
|
||
// Load initial content from textarea (if any)
|
||
if (textarea && textarea.value && textarea.value.trim() !== '') {
|
||
quill.clipboard.dangerouslyPasteHTML(textarea.value);
|
||
}
|
||
// On form submit, copy html to hidden textarea
|
||
var form = textarea && textarea.form;
|
||
if (form) {
|
||
form.addEventListener('submit', function(e){
|
||
textarea.value = quill.root.innerHTML;
|
||
});
|
||
}
|
||
} catch (err) {
|
||
console.error('Quill init error:', err);
|
||
}
|
||
})();
|
||
</script>
|