Add preview button in the Forum

api/views/api.py

@@ -6,14 +6,14 @@ from rest_framework.views import APIView
 from core.templatetags.renderer import markdown
 
 
-@api_view(['GET'])
+@api_view(['POST'])
 @renderer_classes((StaticHTMLRenderer,))
 def RenderMarkdown(request):
     """
         Render Markdown
     """
     try:
-        data = markdown(request.GET['text'])
+        data = markdown(request.POST['text'])
     except:
         data = 'Error'
     return Response(data)

core/templates/core/pagerev_edit.jinja

@@ -4,10 +4,12 @@
 {{ super() }}
 <script>
 function make_preview() {
+    text = $("#id_content").val();
+    console.log("Rendering text: " + text);
     $.ajax({
         url: "{{ url('api:api_markdown') }}",
-        method: "GET",
+        method: "POST",
-        data: { text: $("#id_content").val() }
+        data: { text:  text, csrfmiddlewaretoken: "{{ csrf_token }}"}
     }).done(function (msg) {
         $("#preview").html(msg);
     });

forum/templates/forum/reply.jinja

@@ -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 %}
+
 
 

forum/views.py

@@ -100,12 +100,12 @@ class TopicForm(forms.ModelForm):
     class Meta:
         model = ForumMessage
         fields = ['title', 'message']
-    title = forms.CharField(required=True)
+    title = forms.CharField(required=True, label=_("Title"))
 
 class ForumTopicCreateView(CanCreateMixin, CreateView):
     model = ForumMessage
     form_class = TopicForm
-    template_name = "core/create.jinja"
+    template_name = "forum/reply.jinja"
 
     def dispatch(self, request, *args, **kwargs):
         self.forum = get_object_or_404(Forum, id=self.kwargs['forum_id'], is_category=False)