heckyel/mediagoblin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

post_comment.js, media.html: Add AJAX for posting comments

Browse Source 
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
This commit is contained in:
vijeth-aradhya 2017-01-22 23:57:16 +05:30 committed by Boris Bobrov
parent be44e00626
commit c427278e50
2 changed files with 66 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
mediagoblin/static/js/post_comment.js Normal file
View File

@ -0,0 +1,63 @@
/**
* GNU MediaGoblin -- federated, autonomous media hosting
* Copyright (C) 2011, 2012 MediaGoblin contributors. See AUTHORS.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* 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/>.
*/
$(document).ready(function(){
$(function() {
// Hide this button if script is enabled
$('.form_submit_buttons').find('input').hide();
// Include this link if script is enabled
$('.form_submit_buttons').append(
'<a class="button_action" id="post_comment" type="button">' +
'Add this comment </a>');
$('#post_comment').click(function() {
$.ajax({
url: $('#postCommentURL').val(),
data: $('#form_comment').serialize(),
type: 'POST',
success: function(response) {
var message = $(response).find('.mediagoblin_messages');
var commentsInResponse = $($(response).find('.media_comments')).find('li');
var commentsInPage = $('.media_comments').find('ul');
// Post the message
message.css({"position":"fixed", "top":"50px", "width":"100%"});
$('body').append(message);
message.delay(1500).fadeOut();
// Checking if there is new comment
if(commentsInResponse.length != $(commentsInPage).find('li').length) {
// Post comment and scroll down to it
var newComment = commentsInResponse[commentsInResponse.length - 1];
$('#form_comment').fadeOut('fast');
$('#button_addcomment').fadeIn('fast');
$('#comment_preview').replaceWith("<div id=comment_preview></div>");
$(commentsInPage).append(newComment);
$('html, body').animate({
scrollTop: $(newComment).offset().top
}, 1000);
}
},
error: function(error) {
console.log(error);
}
});
});
});
});

3
mediagoblin/templates/mediagoblin/user_pages/media.html
View File

@ -29,6 +29,8 @@
src="{{ request.staticdirect('/js/comment_show.js') }}"></script>
<script type="text/javascript"
src="{{ request.staticdirect('/js/keyboard_navigation.js') }}"></script>
<script type="text/javascript"
src="{{ request.staticdirect('/js/post_comment.js') }}"></script>
{% template_hook("location_head") %}
{% template_hook("media_head") %}
@ -117,6 +119,7 @@
<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_post_comment', user= media.get_actor.username, media_id=media.id) }}" id="postCommentURL" />
<input type="hidden" value="{{ request.urlgen('mediagoblin.user_pages.media_preview_comment') }}" id="previewURL" />
<input type="hidden" value="{% trans %}Comment Preview{% endtrans %}" id="previewText"/>
</form>