completed the interface to write the posts

pull/1/head
kirbylife 2019-12-18 02:51:11 -06:00
parent 68aa90d2e1
commit efc22e7eb4
1 changed files with 64 additions and 12 deletions

View File

@ -1,17 +1,69 @@
{% 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 %}
<form action="" method="post">
<p>
<label for="">Título</label>
<input name="title" type="text"/>
<label for="">Publicar</label>
<div class="editable">
<form action="" method="post">
<input id="title" name="title" type="text"/>
<label for="">Visible</label>
<input name="published" type="checkbox" value="true"/>
</p>
<p>
<label for="">Contenido</label>
<textarea cols="30" name="content" rows="10"></textarea>
</p>
<button>Publicar</button>
</form>
<textarea id="content"name="content"></textarea>
<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
});
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 %}