Add live preview of new topics

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