126 lines
4.5 KiB
HTML
126 lines
4.5 KiB
HTML
{% set items = (field.template_ctx.instance.updates or []) %}
|
|
|
|
<ul class="list-group mt-3">
|
|
{% for n in items %}
|
|
<li class="list-group-item">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="me-3 w-100 markdown-body" id="editContainer{{ n.id }}"></div>
|
|
<script type="application/json" id="md-{{ n.id }}">{{ n.content | tojson }}</script>
|
|
|
|
<div class="d-flex flex-column align-items-end">
|
|
<div id="editView{{ n.id }}">
|
|
<small class="text-muted text-nowrap">
|
|
{{ n.timestamp.strftime("%Y-%m-%d %H:%M") if n.timestamp else "" }}
|
|
</small>
|
|
</div>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="editSwitch{{ n.id }}" onchange="changeMode({{ n.id }})" role="switch" aria-label="Edit mode for update {{ n.id }}">
|
|
<label for="editSwitch{{ n.id }}" class="form-check-label">Edit</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
{% else %}
|
|
<li class="list-group-item text-muted">No updates yet.</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css">
|
|
<style>
|
|
textarea.auto-md {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
max-height: 60vh;
|
|
overflow: hidden;
|
|
resize: vertical;
|
|
}
|
|
|
|
@supports (field-sizing: content) {
|
|
textarea.auto-md {
|
|
field-sizing: content;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
|
<script>
|
|
// Initial render
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const ids = [ {% for n in items %} {{ n.id }}{% if not loop.last %}, {% endif %}{% endfor %} ];
|
|
for (const id of ids) renderView(id, getMarkdown(id));
|
|
});
|
|
|
|
function getMarkdown(id) {
|
|
const el = document.getElementById(`md-${id}`);
|
|
return el ? JSON.parse(el.textContent) : "";
|
|
}
|
|
function setMarkdown(id, md) {
|
|
const el = document.getElementById(`md-${id}`);
|
|
if (el) el.textContent = JSON.stringify(md ?? "");
|
|
}
|
|
|
|
function renderView(id, md) {
|
|
const container = document.getElementById(`editContainer${id}`);
|
|
if (!container) return;
|
|
const html = marked.parse(md || "");
|
|
container.innerHTML = DOMPurify.sanitize(html, { ADD_ATTR: ['target','rel'] });
|
|
for (const a of container.querySelectorAll('a[href]')) {
|
|
a.setAttribute('target', '_blank');
|
|
a.setAttribute('rel', 'noopener noreferrer nofollow');
|
|
}
|
|
}
|
|
|
|
function changeMode(id) {
|
|
const container = document.getElementById(`editContainer${id}`);
|
|
const toggle = document.getElementById(`editSwitch${id}`);
|
|
if (!toggle.checked) return renderView(id, getMarkdown(id));
|
|
|
|
const current = getMarkdown(id);
|
|
container.innerHTML = `
|
|
<textarea class="form-control w-100 auto-md" id="editor${id}">${escapeForTextarea(current)}</textarea>
|
|
<div class="mt-2 d-flex gap-2">
|
|
<button type="button" class="btn btn-primary btn-sm" onclick="saveEdit(${id})">Save</button>
|
|
<button type="button" class="btn btn-secondary btn-sm" onclick="cancelEdit(${id})">Cancel</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="togglePreview(${id})">Preview</button>
|
|
</div>
|
|
<div class="mt-2 border rounded p-2 d-none" id="preview${id}" aria-live="polite"></div>
|
|
`;
|
|
const ta = document.getElementById(`editor${id}`);
|
|
autoGrow(ta);
|
|
ta.addEventListener('input', () => autoGrow(ta));
|
|
}
|
|
|
|
function saveEdit(id) {
|
|
const ta = document.getElementById(`editor${id}`);
|
|
const value = ta ? ta.value : "";
|
|
setMarkdown(id, value); // persist into the JSON tag
|
|
renderView(id, value); // show it
|
|
document.getElementById(`editSwitch${id}`).checked = false;
|
|
}
|
|
|
|
function cancelEdit(id) {
|
|
document.getElementById(`editSwitch${id}`).checked = false;
|
|
renderView(id, getMarkdown(id));
|
|
}
|
|
|
|
function togglePreview(id) {
|
|
const ta = document.getElementById(`editor${id}`);
|
|
const preview = document.getElementById(`preview${id}`);
|
|
preview.classList.toggle('d-none');
|
|
if (!preview.classList.contains('d-none')) {
|
|
const html = marked.parse(ta ? ta.value : "");
|
|
preview.innerHTML = DOMPurify.sanitize(html);
|
|
}
|
|
}
|
|
|
|
function autoGrow(ta) {
|
|
if (!ta) return;
|
|
ta.style.height = 'auto';
|
|
ta.style.height = ta.scrollHeight + 'px';
|
|
}
|
|
|
|
function escapeForTextarea(s) {
|
|
return (s ?? "").replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
|
}
|
|
</script>
|