Add live preview of new topics

forums/urls.py

@@ -11,4 +11,5 @@ urlpatterns = patterns('forums',
     url(r'^reply/(?P<topicID>.*)', 'views.reply'),
     url(r'^reply$', 'views.reply'),
     url(r'^post/(?P<id>.*)$', 'views.post'),
+    url(r'^preview$', 'views.preview'),
 )

forums/views.py

@@ -1,5 +1,6 @@
 import models
 import forms
+from django.views.decorators.csrf import csrf_exempt
 from django.contrib.auth.decorators import login_required, permission_required
 from django.contrib import messages
 from django.shortcuts import render_to_response
@@ -99,3 +100,8 @@ def stickyTopic(request, topicID):
     else:
         messages.info(request, "Topic is no longer sticky")
     return HttpResponseRedirect(reverse('forums.views.topic', kwargs={'topicID': topic.id}))
+
+@csrf_exempt
+def preview(request):
+    reply = models.Post(body=request.POST['body'], user=request.user)
+    return render_to_response('forums/_reply.html', {'post': reply}, context_instance = RequestContext(request))

static/css/main.css

@@ -475,3 +475,7 @@ fieldset {
 #register-button {
   font-size: xx-large;
 }
+
+#forum-preview {
+  display: none;
+}

templates/forum_base.html

@@ -4,11 +4,9 @@
 {% block main %}
 <div id="content">
     <div class="grid_12">
-        <div class="item">
-            {% block content %}
-            {% endblock content %}
-            <br style="clear:both"/>
-        </div>
+        {% block content %}
+        {% endblock content %}
+        <br style="clear:both"/>
     </div>
 </div>
 {% endblock %}

templates/forums/forum.html

@@ -10,7 +10,7 @@ Home
 {% endblock %}
 
 {% block content %}
-
+<div class="item">
 <h2>{{ forum.name }}</h2>
 <h3>Subforums</h3>
 {%include "forums/_forum_table.html" with forums=forum.children.all %}
@@ -37,4 +37,5 @@ Home
     </td>
 </tr>
 </table>
+</div>
 {% endblock %}

templates/forums/newTopic.html

@@ -1,4 +1,22 @@
 {% extends "forum_base.html" %}
+{% block extrahead %}
+<script type="text/javascript">
+$(function() {
+  var oldText = "";
+  function preview() {
+    if ($('#forum-preview').is(':hidden')) {
+      $('#forum-preview').show("blind");
+    }
+    var newText = $('#id_reply-body').val();
+    if (newText != oldText)
+      $('#forum-preview').load("{% url forums.views.preview %}", {'body': $('#id_reply-body').val()});
+    oldText = $('#id_reply-body').val();
+    setTimeout(preview, 500);
+  }
+  preview();
+});
+</script>
+{% endblock %}
 
 {% block breadcrumb %}
 Home
@@ -10,10 +28,14 @@ Home
 {% endblock %}
 
 {% block content %}
+<div class="item">
 <form method="POST" action="{%url forums.views.newTopic forumID=forum.id %}">
 {% csrf_token %}
 {{topicForm.as_p}}
 {{replyForm.as_p}}
 <input type="submit" value="Submit"/>
 </form>
+</div>
+<div class="item" id="forum-preview">
+</div>
 {% endblock %}

templates/forums/topic.html

@@ -34,11 +34,13 @@ Home
 {%endblock%}
 
 {%block content %}
-<div class="topic">
+<div class="topic item">
 <div class="avatar">{% avatar topic.rootPost.user 32 %}</div>
 <h2>{{topic.title}}</h2>
 <div class="byline">Started by <span itemprop="author">{{topic.rootPost.user}}</span> {{ topic.created|timesince }} ago.<br />Last updated {{topic.updated|timesince}} ago.</div>
 </div>
 <br style="clear:both;"/>
+<div class="item">
 {% include "forums/_post.html" with post=topic.rootPost %}
+</div>
 {%endblock%}