Option for AJAX comments. A bit of JSDoc.

This commit is contained in:
Alexey Skobkin 2015-01-15 13:45:07 +04:00
parent 56bd3117ec
commit 6d6a9fa3d6
4 changed files with 100 additions and 86 deletions

View file

@ -113,8 +113,11 @@
"option_nsfw_blur_comments_entire": { "option_nsfw_blur_comments_entire": {
"message": "Blur entire comments in nsfw posts" "message": "Blur entire comments in nsfw posts"
}, },
"option_ctrl_enter": { "option_ajax": {
"message": "Send post and comments by CTRL+Enter (deprecated)" "message": "AJAX"
},
"option_ajax_comments": {
"message": "Send comments via AJAX (CTRL+Enter)"
}, },
"option_fluid_layout": { "option_fluid_layout": {
"message": "Fluid layout" "message": "Fluid layout"

View file

@ -113,8 +113,11 @@
"option_nsfw_blur_comments_entire": { "option_nsfw_blur_comments_entire": {
"message": "Размытие комментариев целиком" "message": "Размытие комментариев целиком"
}, },
"option_ctrl_enter": { "option_ajax": {
"message": "Отправлять текст по CTRL+Enter (устарело)" "message": "AJAX"
},
"option_ajax_comments": {
"message": "Отправка комментариев через AJAX (CTRL+Enter)"
}, },
"option_fluid_layout": { "option_fluid_layout": {
"message": ""Резиновая" вёрстка (растянуть сайт по горизонтали)" "message": ""Резиновая" вёрстка (растянуть сайт по горизонтали)"

View file

@ -544,88 +544,91 @@ $(document).ready(function() {
}); });
} }
// @todo implement option if (options.is('option_ajax')) {
if (true || options.is('option_ajax_comments')) { // Comments
// Removing old bindings if (options.is('option_ajax_comments')) {
// Dirty hack for page context // Removing old bindings
$('#comments').replaceWith($('#comments').clone()); // Dirty hack for page context
$('#comments').replaceWith($('#comments').clone());
// Binding new // Binding new
$('#comments').on('keypress.pp', '.reply-form textarea', function (evt) { $('#comments').on('keypress.pp', '.reply-form textarea', function (evt) {
if ((evt.keyCode === 10 || evt.keyCode === 13) && (evt.ctrlKey || evt.metaKey)) { if ((evt.keyCode === 10 || evt.keyCode === 13) && (evt.ctrlKey || evt.metaKey)) {
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
var $post = $(this).parents('.post:first'); var $post = $(this).parents('.post:first');
var csRf = $(this).siblings('input[name="csrf_token"]').val(); var csRf = $(this).siblings('input[name="csrf_token"]').val();
console.log(csRf); console.log(csRf);
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: '/api/post/' + $post.data('id'), url: '/api/post/' + $post.data('id'),
data: { data: {
text: $(this).val(), text: $(this).val(),
comment_id: $post.data('comment-id') comment_id: $post.data('comment-id')
}, },
error: function(req, status, error) { error: function(req, status, error) {
console.error('AJAX request error while sending the comment: %s', error); console.error('AJAX request error while sending the comment: %s', error);
console.log('Status: %s', status); console.log('Status: %s', status);
alert(chrome.i18n.getMessage('msg_comment_send_failed') + '\n' + error); alert(chrome.i18n.getMessage('msg_comment_send_failed') + '\n' + error);
}, },
success: function(data, textStatus) { /**
console.log('data %O', data); * @param {object} data Response data
console.log('status %O', textStatus); * @param {number} data.comment_id ID of the created comment
/*{ * @param {string} data.id ID of the post
comment_id: 34, * @param {string} textStatus Text of request status
id: 'ovrwcv' */
};*/ success: function(data, textStatus) {
console.log('data %O', data);
if (textStatus === 'success') { console.log('status %O', textStatus);
// Hiding form
$('#reply-' + $post.data('id') + '_' + $post.data('comment-id')).prop('checked', false); if (textStatus === 'success') {
// Hiding form
// Creating the comment HTML $('#reply-' + $post.data('id') + '_' + $post.data('comment-id')).prop('checked', false);
create_comment_elements({
id: data.comment_id, // Creating the comment HTML
toId: $post.data('comment-id') || null, create_comment_elements({
postId: $post.data('id'), id: data.comment_id,
author: $('#name h1').text(), toId: $post.data('comment-id') || null,
text: $(this).val(), postId: $post.data('id'),
fadeOut: false author: $('#name h1').text(),
}, function($comment) { text: $(this).val(),
// If list mode or not addressed to other comment fadeOut: false
if ($('#comments #tree-switch a').eq(0).hasClass('active') || ($post.data('comment-id') === undefined)) { }, function($comment) {
// Adding to the end of the list // If list mode or not addressed to other comment
$('.content-wrap #comments #post-reply').before($comment); if ($('#comments #tree-switch a').eq(0).hasClass('active') || ($post.data('comment-id') === undefined)) {
} else { // Adding to the end of the list
// Check for children $('.content-wrap #comments #post-reply').before($comment);
$parentCommentChildren = $post.next('.comments');
// @fixme Find a bug with lost indentation of new comment
// If child comment already exist
if ($parentCommentChildren.length) {
console.log('Child comments found. Appending...');
$parentCommentChildren.append($comment);
} else { } else {
console.log('No child comments found. Creating...'); // Check for children
$post.after($('<div>').addClass('comments').append($comment).css('margin-left', '0px')); $parentCommentChildren = $post.next('.comments');
// @fixme Find a bug with lost indentation of new comment
// If child comment already exist
if ($parentCommentChildren.length) {
console.log('Child comments found. Appending...');
$parentCommentChildren.append($comment);
} else {
console.log('No child comments found. Creating...');
$post.after($('<div>').addClass('comments').append($comment).css('margin-left', '0px'));
}
} }
} });
});
// Cleaning textarea
// Cleaning textarea $(this).val('');
$(this).val('');
}
}.bind(this),
beforeSend: function (xhr) {
xhr.setRequestHeader('X-CSRF', csRf);
} }
}.bind(this), });
beforeSend: function (xhr) { }
xhr.setRequestHeader('X-CSRF', csRf); });
} }
});
}
});
} }
// Hightlight post with new comments // Hightlight post with new comments

View file

@ -165,10 +165,15 @@
</section> </section>
<section class="tabs-content-item" id="other"> <section class="tabs-content-item" id="other">
<label class="option-node"> <div class="option-node">
<input type="checkbox" name="option-ctrl-enter" disabled="disabled"> <input type="checkbox" name="option-ajax" id="option-ajax">
<span data-i18n="option_ctrl_enter"></span> <label for="option-ajax" data-i18n="option_ajax"></label>
</label>
<label class="option-node">
<input type="checkbox" name="option-ajax-comments">
<span data-i18n="option_ajax_comments"></span>
</label>
</div>
<label class="option-node"> <label class="option-node">
<input type="checkbox" name="option-fluid-layout"> <input type="checkbox" name="option-fluid-layout">