quill for a blog page
This commit is contained in:
Priec
@@ -1,75 +1,63 @@
|
||||
{% extends "admin/base.html" %}
|
||||
|
||||
{% block title %}{{ t(key="edit-article", lang=lang | default(value='sk')) }}{% endblock title %}
|
||||
{% block head %}
|
||||
<link href="/static/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css">
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ t(key="edit-article", lang=lang | default(value='sk')) }}</h1>
|
||||
|
||||
<form method="post" action="/admin/blog/articles/{{ article.id }}">
|
||||
<label>
|
||||
{{ t(key="title", lang=lang | default(value='sk')) }}
|
||||
<input type="text" name="title" value="{{ article.title }}" required>
|
||||
</label>
|
||||
<label>
|
||||
{{ t(key="excerpt", lang=lang | default(value='sk')) }}
|
||||
<textarea name="excerpt" rows="4">{% if article.excerpt %}{{ article.excerpt }}{% endif %}</textarea>
|
||||
</label>
|
||||
<label>
|
||||
{{ t(key="content", lang=lang | default(value='sk')) }}
|
||||
<textarea name="content" rows="18" required>{{ article.content }}</textarea>
|
||||
</label>
|
||||
<label>
|
||||
{{ t(key="featured-image-id", lang=lang | default(value='sk')) }}
|
||||
<input type="text" name="featured_image_id" data-blog-image-id value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
|
||||
</label>
|
||||
<div>
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp,image/gif" data-blog-image-file class="file-input file-input-bordered">
|
||||
<button type="button" class="btn btn-outline btn-sm" data-blog-image-upload data-uploading="{{ t(key="image-uploading", lang=lang | default(value='sk')) }}" data-ready="{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}">{{ t(key="upload-featured-image", lang=lang | default(value='sk')) }}</button>
|
||||
<p class="text-sm opacity-70" data-blog-image-status>{{ t(key="image-upload-help", lang=lang | default(value='sk')) }}</p>
|
||||
<img data-blog-image-preview alt="" class="mt-2 max-h-48 rounded border border-base-300 object-cover" {% if article.featured_image_id %}src="/images/{{ article.featured_image_id }}"{% endif %} style="{% if not article.featured_image_id %}display: none;{% endif %}">
|
||||
<div class="space-y-2">
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">{{ t(key="edit-article", lang=lang | default(value='sk')) }}</h1>
|
||||
</div>
|
||||
<a href="/admin/blog/articles" class="btn btn-ghost btn-sm">{{ t(key="back-to-articles", lang=lang | default(value='sk')) }}</a>
|
||||
</div>
|
||||
<label>
|
||||
<input type="checkbox" name="published" {% if article.published %}checked{% endif %}>
|
||||
{{ t(key="published", lang=lang | default(value='sk')) }}
|
||||
</label>
|
||||
<button type="submit">{{ t(key="save", lang=lang | default(value='sk')) }}</button>
|
||||
</form>
|
||||
<script>
|
||||
(function () {
|
||||
const fileInput = document.querySelector('[data-blog-image-file]');
|
||||
const idInput = document.querySelector('[data-blog-image-id]');
|
||||
const uploadButton = document.querySelector('[data-blog-image-upload]');
|
||||
const status = document.querySelector('[data-blog-image-status]');
|
||||
const preview = document.querySelector('[data-blog-image-preview]');
|
||||
if (!fileInput || !idInput || !uploadButton || !status || !preview) return;
|
||||
|
||||
function setPreview(filename) {
|
||||
if (!filename) return;
|
||||
preview.src = '/images/' + filename;
|
||||
preview.style.display = '';
|
||||
}
|
||||
<div class="card border border-base-300 bg-base-100 shadow-sm">
|
||||
<div class="card-body">
|
||||
<form method="post" action="/admin/blog/articles/{{ article.id }}" class="space-y-2">
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">{{ t(key="title", lang=lang | default(value='sk')) }}</span></label>
|
||||
<input type="text" name="title" value="{{ article.title }}" required class="input input-bordered w-full">
|
||||
</div>
|
||||
|
||||
uploadButton.addEventListener('click', async function () {
|
||||
const file = fileInput.files && fileInput.files[0];
|
||||
if (!file) return;
|
||||
uploadButton.disabled = true;
|
||||
uploadButton.textContent = uploadButton.dataset.uploading;
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
try {
|
||||
const response = await fetch('/images/upload', { method: 'POST', body: formData });
|
||||
if (!response.ok) throw new Error('upload failed');
|
||||
const result = await response.json();
|
||||
idInput.value = result.filename;
|
||||
setPreview(result.filename);
|
||||
status.textContent = '{{ t(key="image-uploaded", lang=lang | default(value='sk')) }}';
|
||||
} catch (_error) {
|
||||
status.textContent = '{{ t(key="image-upload-error", lang=lang | default(value='sk')) }}';
|
||||
} finally {
|
||||
uploadButton.disabled = false;
|
||||
uploadButton.textContent = uploadButton.dataset.ready;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">{{ t(key="excerpt", lang=lang | default(value='sk')) }}</span></label>
|
||||
<textarea name="excerpt" rows="4" class="textarea textarea-bordered w-full">{% if article.excerpt %}{{ article.excerpt }}{% endif %}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-control">
|
||||
<label class="label"><span class="label-text">{{ t(key="content", lang=lang | default(value='sk')) }}</span></label>
|
||||
<textarea name="content" data-rich-content class="hidden">{{ article.content }}</textarea>
|
||||
<input type="hidden" name="featured_image_id" data-featured-image-id value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
|
||||
<div data-rich-editor class="blog-editor"></div>
|
||||
<div data-image-size-controls class="blog-image-size-controls hidden">
|
||||
<span>{{ t(key="image-size", lang=lang | default(value='sk')) }}</span>
|
||||
<button type="button" data-image-size="small">{{ t(key="image-size-small", lang=lang | default(value='sk')) }}</button>
|
||||
<button type="button" data-image-size="medium">{{ t(key="image-size-medium", lang=lang | default(value='sk')) }}</button>
|
||||
<button type="button" data-image-size="full">{{ t(key="image-size-full", lang=lang | default(value='sk')) }}</button>
|
||||
<label>
|
||||
<span>{{ t(key="image-width-px", lang=lang | default(value='sk')) }}</span>
|
||||
<input type="number" min="40" max="1200" step="10" data-image-width class="input input-bordered input-sm">
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-sm opacity-70" data-rich-status data-uploading='{{ t(key="image-uploading", lang=lang | default(value='sk')) }}' data-uploaded='{{ t(key="image-uploaded", lang=lang | default(value='sk')) }}' data-error='{{ t(key="image-upload-error", lang=lang | default(value='sk')) }}'></p>
|
||||
</div>
|
||||
|
||||
<label class="label cursor-pointer justify-start gap-2">
|
||||
<input type="checkbox" name="published" class="checkbox checkbox-sm" {% if article.published %}checked{% endif %}>
|
||||
<span class="label-text">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap gap-2 pt-2">
|
||||
<button type="submit" class="btn btn-neutral btn-sm">{{ t(key="save", lang=lang | default(value='sk')) }}</button>
|
||||
<a href="/admin/blog/articles" class="btn btn-ghost btn-sm">{{ t(key="cancel", lang=lang | default(value='sk')) }}</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/static/vendor/quill/quill.js"></script>
|
||||
<script src="/static/js/blog-editor.js"></script>
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user