Added comment preview functionality to user pages. It works by passing the comment...

It does this in real time with a 500ms lag by using a timer. Initially I tried the onChange handler but you need to lose focus for that to process. The javascript timer is only invoked if the add comment button is pressed. A request is only sent if the comment box is not empty and the current value is not the same as the last value.

diff --git a/mediagoblin/static/js/comment_show.js b/mediagoblin/static/js/comment_show.js
index c5ccee663693b697500a9f2bdbd775ab65ab6d8f..cb69fccd2032c8cc43c3ff3488e7cf1d6f96c911 100644 (file)
--- a/mediagoblin/static/js/comment_show.js
+++ b/mediagoblin/static/js/comment_show.js
@@ -15,12 +15,24 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+var content="";
 
+function previewComment(){
+       if ($('#comment_content').val() && (content != $('#comment_content').val())) {
+               content = $('#comment_content').val();
+               $.getJSON($('#previewURL').val(),JSON.stringify($('#comment_content').val()),
+               function(data){
+                       $('#comment_preview').replaceWith("<div id=comment_preview><h3>Comment Preview</h3><br />" + decodeURIComponent(data) + 
+                       "<hr style='border: 1px solid #333;' /></div>");
+               });
+       }
+}
 $(document).ready(function(){
   $('#form_comment').hide();
   $('#button_addcomment').click(function(){
     $(this).fadeOut('fast');
     $('#form_comment').slideDown(function(){
+       setInterval("previewComment()",500);
         $('#comment_content').focus();
     });
   });

diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index c16e4c787c080f11122a78c0f5ec13858248449a..39a5eec50ea87ccbd1400f859282ae6e6b01b305 100644 (file)
--- a/mediagoblin/templates/mediagoblin/user_pages/media.html
+++ b/mediagoblin/templates/mediagoblin/user_pages/media.html
@@ -107,7 +107,9 @@
             <input type="submit" value="{% trans %}Add this comment{% endtrans %}" class="button_action" />
               {{ csrf_token }}
           </div>
+          <input type="hidden" value="{{ request.urlgen('mediagoblin.user_pages.media_preview_comment') }}" id="previewURL" />
         </form>
+       <div id="comment_preview"></div>
       {% endif %}
       <ul style="list-style:none">
       {% for comment in comments %}

diff --git a/mediagoblin/user_pages/forms.py b/mediagoblin/user_pages/forms.py
index 9a1936805500f6cfda70204575e68651160f0046..cb8acb3610612ab9c4149c48815a7610c3efa802 100644 (file)
--- a/mediagoblin/user_pages/forms.py
+++ b/mediagoblin/user_pages/forms.py
@@ -23,7 +23,7 @@ class MediaCommentForm(wtforms.Form):
         _('Comment'),
         [wtforms.validators.Required()],
         description=_(u'You can use '
-                      u'<a href="http://daringfireball.net/projects/markdown/basics">'
+                      u'<a href="http://daringfireball.net/projects/markdown/basics" target=new>'
                       u'Markdown</a> for formatting.'))
 
 class ConfirmDeleteForm(wtforms.Form):

diff --git a/mediagoblin/user_pages/routing.py b/mediagoblin/user_pages/routing.py
index 9cb665b51519a2c29efafdb808c601f9dc0ef8b7..b1dde397da53c8f1b2117b8a39d45dcedb2bd877 100644 (file)
--- a/mediagoblin/user_pages/routing.py
+++ b/mediagoblin/user_pages/routing.py
@@ -32,6 +32,10 @@ add_route('mediagoblin.user_pages.media_post_comment',
           '/u/<string:user>/m/<int:media_id>/comment/add/',
           'mediagoblin.user_pages.views:media_post_comment')
 
+add_route('mediagoblin.user_pages.media_preview_comment',
+          '/ajax/comment/preview/',
+          'mediagoblin.user_pages.views:media_preview_comment')
+
 add_route('mediagoblin.user_pages.user_gallery',
           '/u/<string:user>/gallery/',
           'mediagoblin.user_pages.views:user_gallery')

diff --git a/mediagoblin/user_pages/views.py b/mediagoblin/user_pages/views.py
index 596d4c20b6111c1496f49ec3b576edffe7e889d0..2bc56fd59e9072477b46c0e5fd8aaf1d38750f72 100644 (file)
--- a/mediagoblin/user_pages/views.py
+++ b/mediagoblin/user_pages/views.py
@@ -16,19 +16,21 @@
 
 import logging
 import datetime
+import json
+import urllib
 
 from mediagoblin import messages, mg_globals
 from mediagoblin.db.models import (MediaEntry, MediaTag, Collection,
                                    CollectionItem, User)
 from mediagoblin.tools.response import render_to_response, render_404, \
     redirect, redirect_obj
+from mediagoblin.tools.text import cleaned_markdown_conversion
 from mediagoblin.tools.translate import pass_to_ugettext as _
 from mediagoblin.tools.pagination import Pagination
 from mediagoblin.user_pages import forms as user_forms
 from mediagoblin.user_pages.lib import add_media_to_collection
 from mediagoblin.notifications import trigger_notification, \
     add_comment_subscription, mark_comment_notification_seen
-
 from mediagoblin.decorators import (uses_pagination, get_user_media_entry,
     get_media_entry_by_id,
     require_active_login, user_may_delete_media, user_may_alter_collection,
@@ -36,6 +38,7 @@ from mediagoblin.decorators import (uses_pagination, get_user_media_entry,
 
 from werkzeug.contrib.atom import AtomFeed
 from werkzeug.exceptions import MethodNotAllowed
+from werkzeug.wrappers import Response
 
 
 _log = logging.getLogger(__name__)
@@ -166,6 +169,7 @@ def media_post_comment(request, media):
     comment = request.db.MediaComment()
     comment.media_entry = media.id
     comment.author = request.user.id
+    print request.form['comment_content']
     comment.content = unicode(request.form['comment_content'])
 
     # Show error message if commenting is disabled.
@@ -193,6 +197,18 @@ def media_post_comment(request, media):
     return redirect_obj(request, media)
 
 
+
+def media_preview_comment(request):
+
+    comment = unicode(urllib.unquote(request.query_string).decode('string_escape'))
+    if comment.startswith('"') and comment.endswith('"'):
+        comment = comment[1:-1]
+    print comment
+    #decoderRing = json.JSONDecoder()
+   #comment = decoderRing.decode(request.query_string)
+
+    return Response(json.dumps(cleaned_markdown_conversion(comment)))
+
 @get_media_entry_by_id
 @require_active_login
 def media_collect(request, media):