codigocomentado/templates/admin/edit_post.html.tera

76 lines
2.2 KiB
Plaintext
Raw Normal View History

{% extends "base" %}
{% block extracss %}
<style>
div.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
div.editable form {
height: 100%;
}
div.editable input#title {
width: 76%;
margin: 10px 10px 10px 0;
}
div.editable textarea {
width: 95%;
height: 85%;
box-sizing: border-box;
}
</style>
{% endblock extracss %}
{% block content %}
<div class="editable">
2019-12-21 09:55:39 +00:00
<form action="/admin/edit_post/{{ post.id }}" method="post">
<input id="title" name="title" type="text" value="{{ post.title }}"/>
<label for="">Visible</label>
2019-12-21 09:55:39 +00:00
<input name="published" type="checkbox" value="true"{% if post.published %}checked{% endif %}/>
<textarea id="content" name="content">{{ post.content }}</textarea>
2022-12-22 21:46:42 +00:00
<input name="views" type="number" value="0" style="display: none"/>
<button>Publicar</button>
</form>
</div>
<div id="preview" class="preview">
</div>
{% endblock content %}
{% block extrajs %}
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.0/dist/showdown.min.js"></script>
<script>
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
let converter = new showdown.Converter({
parseImgDimensions: true,
strikethrough: true,
tables: true,
tasklists: true,
emoji: true
});
text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
document.getElementById("preview").innerHTML = converter.makeHtml(text);
document.getElementById("content").addEventListener("keyup", delay(() => {
let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
document.getElementById("preview").innerHTML = converter.makeHtml(text);
}, 500));
document.getElementById("title").addEventListener("keyup", delay(() => {
let text = "# " + document.getElementById("title").value.trim() + "\n" + document.getElementById("content").value;
document.getElementById("preview").innerHTML = converter.makeHtml(text);
}, 500));
</script>
{% endblock extrajs %}