Add preview button in the Forum

This commit is contained in:
Skia
2017-04-12 19:19:25 +02:00
parent 830e94d73c
commit 3aa5070a38
4 changed files with 52 additions and 6 deletions

View File

@ -2,10 +2,15 @@
{% from 'forum/macros.jinja' import display_message %}
{% block title %}
{% if topic %}
{% trans %}Reply{% endtrans %}
{% else %}
{% trans %}New topic{% endtrans %}
{% endif %}
{% endblock %}
{% block content %}
{% if topic %}
<p>
<a href="{{ url('forum:main') }}">{% trans %}Forum{% endtrans %}</a>
{% for f in topic.forum.get_parent_list() %}
@ -16,20 +21,59 @@
</p>
<h3>{{ topic.title }}</h3>
<h4>{% trans %}Reply{% endtrans %}</h4>
{% else %}
<h4>{% trans %}New topic{% endtrans %}</h4>
{% endif %}
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p() }}
<p><input type="button" value="{% trans %}Preview{% endtrans %}" onclick="javascript:make_preview();" /></p>
<p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
</form>
<div id="preview_message" class="message" style="display: none;">
<div class="msg_author">
{% if user.avatar_pict %}
<img src="{{ user.avatar_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% else %}
<img src="{{ static('core/img/unknown.jpg') }}" alt="{% trans %}Profile{% endtrans %}" id="picture" />
{% endif %}
<br/>
<strong><a href="{{ user.get_absolute_url() }}">{{ user.get_short_name() }}</a></strong>
</div>
<div class="msg_content">
<p id="preview" class="ib w_big"></p>
</div>
</div>
<hr>
{% if topic %}
{% for m in topic.messages.select_related('author__avatar_pict').order_by('-id')[:10] %}
{{ display_message(m, user) }}
{% endfor %}
{% endif %}
{% endblock %}
{% block script %}
{{ super() }}
<script>
function make_preview() {
$("#preview_message").hide(300);
text = $("#id_message").val();
console.log("Rendering text: " + text);
$.ajax({
url: "{{ url('api:api_markdown') }}",
method: "POST",
data: { text: text, csrfmiddlewaretoken: "{{ csrf_token }}"}
}).done(function (msg) {
$("#preview").html(msg);
$("#preview_message").show(300);
});
}
</script>
{% endblock %}