Ticket #868: issue_868.patch

File issue_868.patch, 10.7 KB (added by Vijeth, 7 years ago)

AJAX for posting comments

  • new file mediagoblin/static/js/post_comment.js 

    From 4931e35c25fed6efc2215781494bbcdfd53eb8b2 Mon Sep 17 00:00:00 2001
From: vijeth-aradhya <vijthaaa@gmail.com>
Date: Sat, 21 Jan 2017 10:17:44 +0530
Subject: [PATCH] /user_pages, post_comment* : Add AJAX for posting comments

Stop reloading the page when a comment is posted which helps
in not stopping the media being played (for example, a song)

Fixes https://issues.mediagoblin.org/ticket/868
---
 mediagoblin/static/js/post_comment.js              | 59 ++++++++++++++++++++
 .../templates/mediagoblin/user_pages/media.html    | 12 +++-
 .../mediagoblin/user_pages/post_comment.html       | 64 ++++++++++++++++++++++
 mediagoblin/user_pages/views.py                    | 27 +++++----
 4 files changed, 145 insertions(+), 17 deletions(-)
 create mode 100644 mediagoblin/static/js/post_comment.js
 create mode 100644 mediagoblin/templates/mediagoblin/user_pages/post_comment.html

diff --git a/mediagoblin/static/js/post_comment.js b/mediagoblin/static/js/post_comment.js
new file mode 100644
index 0000000..bb0abf0
    - +  
     1/**
     2 * GNU MediaGoblin -- federated, autonomous media hosting
     3 * Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
     4 *
     5 * This program is free software: you can redistribute it and/or modify
     6 * it under the terms of the GNU Affero General Public License as published by
     7 * the Free Software Foundation, either version 3 of the License, or
     8 * (at your option) any later version.
     9 *
     10 * This program is distributed in the hope that it will be useful,
     11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
     12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     13 * GNU Affero General Public License for more details.
     14 *
     15 * You should have received a copy of the GNU Affero General Public License
     16 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
     17 */
     18
     19$(document).ready(function(){
     20    $(function() {
     21        $('#post_comment').click(function() {
     22            $.ajax({
     23                url: $('#postCommentURL').val(),
     24                data: $('#form_comment').serialize(),
     25                type: 'POST',
     26                success: function(response) {
     27                    // Error message display via messages
     28                    if($(response).filter('#message_error').length !== 0) {
     29                        $('body').append(
     30                            '<ul class="mediagoblin_messages temporary_comment_response"' +
     31                            ' style="position: fixed;' + ' top: 50px; width:100%">' + '<li class="message_error">'+
     32                            $(response).filter('#message_error').html() + ' </li></ul>'
     33                        );
     34                    }
     35                    if($(response).filter('li').length !== 0) {
     36                        // Post comment and scroll down to it
     37                        $('#form_comment').fadeOut('fast');
     38                        $('#button_addcomment').fadeIn('fast');
     39                        $('#comment_preview').replaceWith("<div id=comment_preview></div>");
     40                        $('#all_comments').append($(response).filter('li'));
     41                        $('html, body').animate({
     42                            scrollTop: $('#all_comments li').last().offset().top
     43                        }, 1000);
     44                        // Success message display via messages
     45                        $('body').append(
     46                            '<ul class="mediagoblin_messages temporary_comment_response"' +
     47                            ' style="position: fixed;' + ' top: 50px; width:100%">' + '<li class="message_success">'+
     48                            $(response).filter('#message_success').html() + ' </li></ul>'
     49                        );
     50                    }
     51                    $(".temporary_comment_response").delay(1000).fadeOut();
     52                },
     53                error: function(error) {
     54                    console.log(error);
     55                }
     56            });
     57        });
     58    });
     59});
     60 No newline at end of file

  • mediagoblin/templates/mediagoblin/user_pages/media.html 

    diff --git a/mediagoblin/templates/mediagoblin/user_pages/media.html b/mediagoblin/templates/mediagoblin/user_pages/media.html
index ed3d184..80aabe2 100644
    a b  
    2929          src="{{ request.staticdirect('/js/comment_show.js') }}"></script>
    3030  <script type="text/javascript"
    3131          src="{{ request.staticdirect('/js/keyboard_navigation.js') }}"></script>
     32  <script type="text/javascript"
     33          src="{{ request.staticdirect('/js/post_comment.js') }}"></script>
    3234
    3335  {% template_hook("location_head") %}
    3436  {% template_hook("media_head") %}
    … …  
    110112      {% if request.user %}
    111113        <form action="{{ request.urlgen('mediagoblin.user_pages.media_post_comment',
    112114                                         user= media.get_actor.username,
    113                                          media_id=media.id) }}" method="POST" id="form_comment">
     115                                         media_id=media.id) }}" method="POST" id="form_comment"
     116                                         role="form">
    114117          {{ wtforms_util.render_divs(comment_form) }}
    115118          <div class="form_submit_buttons">
    116             <input type="submit" value="{% trans %}Add this comment{% endtrans %}" class="button_action" />
     119            <a class="button_action" id="post_comment" type="button">
     120            {% trans %}Add this comment{% endtrans %}
     121            </a>
    117122              {{ csrf_token }}
    118123          </div>
     124          <input type="hidden" value="{{ request.urlgen('mediagoblin.user_pages.media_post_comment', user= media.get_actor.username, media_id=media.id) }}" id="postCommentURL" />
    119125          <input type="hidden" value="{{ request.urlgen('mediagoblin.user_pages.media_preview_comment') }}" id="previewURL" />
    120126          <input type="hidden" value="{% trans %}Comment Preview{% endtrans %}" id="previewText"/>
    121127        </form>
    122128        <div id="comment_preview"></div>
    123129      {% endif %}
    124       <ul style="list-style:none">
     130      <ul style="list-style:none" id="all_comments">
    125131      {% for comment in comments %}
    126132        {% set comment_object = comment.comment() %}
    127133        {% set comment_author = comment_object.get_actor %}

  • new file mediagoblin/templates/mediagoblin/user_pages/post_comment.html 

    diff --git a/mediagoblin/templates/mediagoblin/user_pages/post_comment.html b/mediagoblin/templates/mediagoblin/user_pages/post_comment.html
new file mode 100644
index 0000000..66c0250
    - +  
     1{#
     2# GNU MediaGoblin -- federated, autonomous media hosting
     3# Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
     4#
     5# This program is free software: you can redistribute it and/or modify
     6# it under the terms of the GNU Affero General Public License as published by
     7# the Free Software Foundation, either version 3 of the License, or
     8# (at your option) any later version.
     9#
     10# This program is distributed in the hope that it will be useful,
     11# but WITHOUT ANY WARRANTY; without even the implied warranty of
     12# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     13# GNU Affero General Public License for more details.
     14#
     15# You should have received a copy of the GNU Affero General Public License
     16# along with this program.  If not, see <http://www.gnu.org/licenses/>.
     17#}
     18
     19{% set comment_object = comment %}
     20{% set comment_author = comment_object.get_actor %}
     21 
     22{%- if isPosted == True %}
     23  <li id="comment-{{ comment.id }}" class="comment_wrapper">
     24    <div class="comment_author">
     25      <img src="{{ request.staticdirect('/images/icon_comment.png') }}" />
     26      <a href="{{ request.urlgen('mediagoblin.user_pages.user_home',
     27                      user=comment_author.username) }}"
     28         class="comment_authorlink">
     29        {{- comment_author.username -}}
     30      </a>
     31      <a href="{{ request.urlgen('mediagoblin.user_pages.media_home.view_comment',
     32                      comment=comment.id,
     33                      user=media.get_actor.username,
     34                      media=media.slug_or_id) }}#comment"
     35         class="comment_whenlink">
     36        <span title='{{- comment_object.created.strftime("%I:%M%p %Y-%m-%d") -}}'>
     37          {%- trans formatted_time=timesince(comment_object.created) -%}
     38            {{ formatted_time }} ago
     39          {%- endtrans -%}
     40        </span></a>:
     41    </div>
     42    <div class="comment_content">
     43      {% autoescape False -%}
     44        {{ comment_object.content_html }}
     45      {%- endautoescape %}
     46    </div>
     47    <div>
     48      {% if app_config.allow_reporting %}
     49          <a href="{{ request.urlgen('mediagoblin.user_pages.media_home.report_comment',
     50                      user=media.get_actor.username,
     51                       media=media.slug_or_id,
     52                       comment=comment.id) }}">
     53              {% trans %}Report{% endtrans %}</a>
     54      {% endif %}
     55    </div>
     56  </li>
     57  <div id="message_success">
     58    {{ message }}
     59  </div>
     60{%- else %}
     61<div id="message_error">
     62    {{ message }}
     63</div>
     64{%- endif %}
     65 No newline at end of file

  • mediagoblin/user_pages/views.py 

    diff --git a/mediagoblin/user_pages/views.py b/mediagoblin/user_pages/views.py
index eaae1bd..583d362 100644
    a b def media_post_comment(request, media):  
    184184    comment.actor = request.user.id
    185185    comment.content = six.text_type(request.form['comment_content'])
    186186
     187    isPosted = False
     188
    187189    # Show error message if commenting is disabled.
    188190    if not mg_globals.app_config['allow_comments']:
    189         messages.add_message(
    190             request,
    191             messages.ERROR,
    192             _("Sorry, comments are disabled."))
     191        message = "Sorry, comments are disabled."
    193192    elif not comment.content.strip():
    194         messages.add_message(
    195             request,
    196             messages.ERROR,
    197             _("Oops, your comment was empty."))
     193        message = "Oops, your comment was empty."
    198194    else:
     195        message = "Your comment has been posted!"
     196        isPosted = True
    199197        create_activity("post", comment, comment.actor, target=media)
    200198        add_comment_subscription(request.user, media)
    201199        comment.save()
    … … def media_post_comment(request, media):  
    205203        link.comment = comment
    206204        link.save()
    207205
    208         messages.add_message(
    209             request,
    210             messages.SUCCESS,
    211             _('Your comment has been posted!'))
    212206        trigger_notification(link, media, request)
    213207
    214     return redirect_obj(request, media)
    215 
     208    return render_to_response(
     209        request,
     210        'mediagoblin/user_pages/post_comment.html',
     211        {'media': media,
     212         'comment': comment,
     213         'message': message,
     214         'isPosted': isPosted})
    216215
    217216
    218217def media_preview_comment(request):