Merged in feature_ajax_comments (pull request #32) Отправка комментариев через AJAX

chrome_point_plus/_locales/en/messages.json

@@ -113,8 +113,11 @@
     "option_nsfw_blur_comments_entire": {
         "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": {
         "message": "Fluid layout"
@@ -137,14 +140,14 @@
     "option_ws_comments_notifications": {
         "message": "Show desktop notifications"
     },
-    "option_ws_feeds": {
+    "option_ws_posts": {
-        "message": "Process feeds ▼"
+        "message": "Process posts ▼"
     },
-    "option_ws_feeds_subscriptions": {
+    "option_ws_posts_add": {
-        "message": "Subscriptions feed"
+        "message": "Add posts to the feed"
     },
-    "option_ws_feeds_blogs": {
+    "option_ws_posts_notifications": {
-        "message": "User blog pages (only when subscribed)"
+        "message": "Show desktop notifications"
     },
     "option_enlarge_font": {
         "message": "Enlarge font size ▼"
@@ -177,5 +180,10 @@
 
     "options_feedback_text": {
         "message": "<p>If you find an error do not hesitate to <a href=\"https:\/\/bitbucket.org\/skobkin\/chrome_point_plus\/issues?status=new&status=open\" target=\"_blank\">send me a bug report<\/a>.<\/p><p>Also you can make a donation in the following ways:<\/p><p><iframe frameborder=\"0\" allowtransparency=\"true\" scrolling=\"no\" src=\"https:\/\/money.yandex.ru\/embed\/small.xml?account=41001539215836&quickpay=small&yamoney-payment-type=on&button-text=04&button-size=s&button-color=black&targets=Point%2B&default-sum=150&successURL=https%3A%2F%2Fbitbucket.org%2Fskobkin%2Fchrome_point_plus\" width=\"158\" height=\"31\"><\/p><p><\/iframe><\/p><p><iframe frameborder=\"0\" allowtransparency=\"true\" scrolling=\"no\" src=\"https:\/\/money.yandex.ru\/embed\/small.xml?account=41001539215836&quickpay=small&any-card-payment-type=on&button-text=04&button-size=s&button-color=black&targets=Point%2B&default-sum=150&successURL=https%3A%2F%2Fbitbucket.org%2Fskobkin%2Fchrome_point_plus\" width=\"158\" height=\"31\"><\/iframe><\/p><p><form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\" target=\"_top\"><input type=\"hidden\" name=\"cmd\" value=\"_s-xclick\"><input type=\"hidden\" name=\"hosted_button_id\" value=\"RCW5V6UFXYTRE\"><input type=\"image\" src=\"https:\/\/www.paypalobjects.com\/ru_RU\/RU\/i\/btn\/btn_donateCC_LG.gif\" border=\"0\" name=\"submit\" alt=\"PayPal — более безопасный и легкий способ оплаты через Интернет!\"><img alt=\"\" border=\"0\" src=\"https:\/\/www.paypalobjects.com\/en_US\/i\/scr\/pixel.gif\" width=\"1\" height=\"1\"><\/form><\/p>"
+    },
+    
+    
+    "msg_comment_send_failed":{
+        "message": "Comment send error:"
     }
 }

chrome_point_plus/_locales/ru/messages.json

@@ -113,8 +113,11 @@
     "option_nsfw_blur_comments_entire": {
         "message": "Размытие комментариев целиком"
     },
-    "option_ctrl_enter": {
+    "option_ajax": {
-        "message": "Отправлять текст по CTRL+Enter (устарело)"
+        "message": "AJAX"
+    },
+    "option_ajax_comments": {
+        "message": "Отправка комментариев через AJAX (CTRL+Enter)"
     },
     "option_fluid_layout": {
         "message": ""Резиновая" вёрстка (растянуть сайт по горизонтали)"
@@ -135,16 +138,16 @@
         "message": "Затухание подсветки через 20 секунд"
     },
     "option_ws_comments_notifications": {
-        "message": "Включить уведомления на рабочем столе"
+        "message": "Показывать всплывающие уведомления"
     },
-    "option_ws_feeds": {
+    "option_ws_posts": {
-        "message": "Обрабатывать ленты ▼"
+        "message": "Обрабатывать посты ▼"
     },
-    "option_ws_feeds_subscriptions": {
+    "option_ws_posts_add": {
-        "message": "Подписки"
+        "message": "Автоматически добавлять в ленту"
     },
-    "option_ws_feeds_blogs": {
+    "option_ws_posts_notifications": {
-        "message": "Блоги пользователей (только при подписке)"
+        "message": "Показывать всплывающие уведомления"
     },
     "option_enlarge_font": {
         "message": "Увеличить шрифт ▼"
@@ -178,5 +181,10 @@
 
     "options_feedback_text": {
         "message": "<p>Нашли ошибку? Не стесняйтесь <a href=\"https:\/\/bitbucket.org\/skobkin\/chrome_point_plus\/issues?status=new&status=open\" target=\"_blank\">сообщить о ней<\/a>.<\/p><p>Также вы можете сделать пожертвование автору:<\/p><p><iframe frameborder=\"0\" allowtransparency=\"true\" scrolling=\"no\" src=\"https:\/\/money.yandex.ru\/embed\/small.xml?account=41001539215836&quickpay=small&yamoney-payment-type=on&button-text=04&button-size=s&button-color=black&targets=Point%2B&default-sum=150&successURL=https%3A%2F%2Fbitbucket.org%2Fskobkin%2Fchrome_point_plus\" width=\"158\" height=\"31\"><\/iframe><\/p><p><iframe frameborder=\"0\" allowtransparency=\"true\" scrolling=\"no\" src=\"https:\/\/money.yandex.ru\/embed\/small.xml?account=41001539215836&quickpay=small&any-card-payment-type=on&button-text=04&button-size=s&button-color=black&targets=Point%2B&default-sum=150&successURL=https%3A%2F%2Fbitbucket.org%2Fskobkin%2Fchrome_point_plus\" width=\"158\" height=\"31\"><\/iframe><\/p><p><form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" method=\"post\" target=\"_top\"><input type=\"hidden\" name=\"cmd\" value=\"_s-xclick\"><input type=\"hidden\" name=\"hosted_button_id\" value=\"WW33X5J5WFSP4\"><input type=\"image\" src=\"https:\/\/www.paypalobjects.com\/ru_RU\/RU\/i\/btn\/btn_donateCC_LG.gif\" border=\"0\" name=\"submit\" alt=\"PayPal — более безопасный и легкий способ оплаты через Интернет!\"><img alt=\"\" border=\"0\" src=\"https:\/\/www.paypalobjects.com\/en_US\/i\/scr\/pixel.gif\" width=\"1\" height=\"1\"><\/form><\/p>"
+    },
+    
+    
+    "msg_comment_send_failed":{
+        "message": "Ошибка отправки комментария:"
     }
 }

chrome_point_plus/js/background.js

@@ -8,6 +8,23 @@ chrome.storage.sync.get('options_version', function(data) {
     }
 });
 
+// Adding notification click event listener
+chrome.notifications.onClicked.addListener(function(notificationId) {
+    // Detecting notification type
+    if (notificationId.indexOf('comment_') === 0) {
+        tab_url = 'https://point.im/' + notificationId.replace(/comment_/g, '');
+    } else if (notificationId.indexOf('post_') === 0) {
+        tab_url = 'https://point.im/' + notificationId.replace(/post_/g, '');
+    }
+    console.log('Notification %s clicked! Opening new tab: %s', notificationId, tab_url);
+
+    if (tab_url !== undefined) {
+        chrome.tabs.create({
+            url: tab_url
+        });
+    }
+});
+
 // Crutches and bikes
 /**
  * Inject several JS files
@@ -79,30 +96,6 @@ chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
                 return true;
                 break;
                 
-            case 'listenNotificationClicks':
-                // Adding notification click event listener
-                chrome.notifications.onClicked.addListener(function(notificationId) {
-                    // Detecting notification type
-                    if (notificationId.indexOf('comment_') === 0) {
-                        tab_url = message.protocol + '//' + 'point.im/' + notificationId.replace(/comment_/g, '');
-                    } else if (notificationId.indexOf('post_') === 0) {
-                        tab_url = message.protocol + '//' + 'point.im/' + notificationId.replace(/post_/g, '');
-                    }
-                    console.log('Notification %s clicked! Opening new tab: %s', notificationId, tab_url);
-                    
-                    if (tab_url !== undefined) {
-                        chrome.tabs.create({
-                            url: tab_url
-                        });
-                    }
-                });
-                
-                sendResponse(true);
-                
-                // Fuck You, Chrome API documentation!
-                return true;
-                break;
-
             /**
              * @deprecated since 1.19.1
              */

chrome_point_plus/js/point-plus.js

@@ -381,13 +381,6 @@ $(document).ready(function() {
             ws = new WebSocket(((location.protocol == 'https:') ? 'wss' : 'ws') + '://point.im/ws');
             console.log('WebSocket created: %O', ws);
 
-            // @todo: унести в опцию
-            // Adding event listener for notification click
-            chrome.runtime.sendMessage({
-                type: 'listenNotificationClicks',
-                protocol: getProtocol()
-            });
-
             // Detecting post id if presented
             var postId = $('#top-post').attr('data-id');
             console.debug('Current post id detected as #%s', postId);
@@ -432,139 +425,86 @@ $(document).ready(function() {
 
                                     // Check we are in specified post
                                     if (wsMessage.post_id != postId) {
-                                        console.log('The comment is for #%s but current page is for #%s', wsMessage.post_id, postId);
+                                        console.log('The comment is not for this post');
                                         console.groupEnd();
                                         break;
                                     }
                                     
-                                    var $anchor = $('<a>').attr('name', wsMessage.comment_id);
+                                    // Generating comment from websocket message
-
+                                    create_comment_elements({
-                                    // Initializing comment element
+                                        id: wsMessage.comment_id,
-                                    var $commentTemplate = $('<div>').attr({
+                                        toId: wsMessage.to_comment_id,
-                                        'class': 'post',
+                                        postId: wsMessage.post_id,
-                                        'data-id': postId,
+                                        author: wsMessage.author,
-                                        'data-comment-id': wsMessage.comment_id,
+                                        text: wsMessage.text,
-                                        'data-to-comment-id': (wsMessage.to_comment_id != null) ? wsMessage.to_comment_id : ''
+                                        fadeOut: options.is('option_ws_comments_color_fadeout')
-                                    });
+                                    }, function($comment) {
-
-                                    // @todo: Вынести в отдельную функцию
-                                    // Loading HTML template
-                                    $commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
-                                        // Load complete
-                                        console.info('comment.html loaded');
-
-                                        // Date and time of comment
-                                        var date = new Date();
-
-                                        // @todo: унести наверх
-                                        // Data for template
-                                        var userLink = '//' + wsMessage.author + '.point.im/';
-                                        var postAuthorLink = $('#top-post .info a').attr('href');
-                                        var postLink = postAuthorLink + wsMessage.post_id;
-                                        var userAvatar = '//point.im/avatar/' + wsMessage.author;
-                                        var commentLink = '//point.im/' + wsMessage.post_id + '#' + wsMessage.comment_id;
-                                        var csRfToken = $('.reply-form input[name="csrf_token"').val();
-
-                                        // Filling template
-                                        console.info('Changing data in the comment element');
-                                        // Date and time
-                                        $commentTemplate.find('.info .created')
-                                            .append($('<span>').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + '&nbsp;' + months[date.getMonth()]))
-                                            // Crutchy fix
-                                            .append($('<br>'))
-                                            ///Crutchy fix
-                                            .append($('<span>').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString()))));
-                                        // Comment text
-                                        $commentTemplate.find('.text').append($('<p>').html(escapeHtml(wsMessage.text)));
-                                        // Author
-                                        $commentTemplate.find('.author a.user').attr('href', userLink).html(wsMessage.author);
-                                        // Avatar and link
-                                        $commentTemplate.find('.info a').attr('href', userLink).children('img.avatar').attr('src', userAvatar + '/24');
-                                        // Post and comment ID's link
-                                        $commentTemplate.find('.clearfix .post-id a').attr('href', commentLink).html('#' + wsMessage.post_id + '/' + wsMessage.comment_id)
-                                            // Adding answer label
-                                            .after((wsMessage.to_comment_id !== null) ? (' в ответ на <a href="#' + wsMessage.to_comment_id + '">/' + wsMessage.to_comment_id + '</a>') : (''));
-                                        // Setting action labels and other attributes
-                                        $commentTemplate.find('.action-labels .reply-label').attr('for', 'reply-' + wsMessage.post_id + '_' + wsMessage.comment_id);
-                                        $commentTemplate.find('.action-labels .more-label').attr('for', 'action-' + wsMessage.post_id + '_' + wsMessage.comment_id);
-                                        $commentTemplate.find('.post-content input[name="action-radio"]').attr('id', 'action-' + wsMessage.post_id + '_' + wsMessage.comment_id);
-                                        // Bookmark link
-                                        $commentTemplate.find('.action-buttons a.bookmark').attr('href', postLink + '/b?comment_id=' + wsMessage.comment_id + '&csrf_token=' + csRfToken);
-                                        // Reply form
-                                        $commentTemplate.find('.post-content input.reply-radio').attr('id', 'reply-' + wsMessage.post_id + '_' + wsMessage.comment_id);
-                                        $commentTemplate.find('.post-content form.reply-form').attr('action', '/' + wsMessage.post_id);
-                                        $commentTemplate.find('.post-content form.reply-form textarea[name="text"]').html('@' + wsMessage.author + ', ');
-                                        $commentTemplate.find('.post-content form.reply-form input[name="comment_id"]').val(wsMessage.comment_id);
-                                        $commentTemplate.find('.post-content form.reply-form input[name="csrf_token"]').val(csRfToken);
-                                        ///Filling template
-
                                         // It's time to DOM
                                         console.info('Inserting comment');
+                                        
+                                        // Search for parent comment
+                                        $parentComment = (wsMessage.to_comment_id) ? ($('.post[data-comment-id="' + wsMessage.to_comment_id + '"]')) : [];
+                                        console.log('Parent comment: %O', $parentComment || null);
+                                        
                                         // If list mode or not addressed to other comment
-                                        if ((treeSwitch == '?tree=0') || (wsMessage.to_comment_id == null)) {
+                                        if ($('#comments #tree-switch a').eq(0).hasClass('active') || (wsMessage.to_comment_id === null) || (!$parentComment.length)) {
-                                            // List mode
+                                            // Adding to the end of the list
-                                            $('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000));
+                                            $('.content-wrap #comments #post-reply').before($comment);
                                         } else {
-                                            // Tree mode
+                                            // Check for children
-                                            // Search parent comment
+                                            $parentCommentChildren = $parentComment.next('.comments');
-                                            $parentComment = $('.post[data-comment-id="' + wsMessage.to_comment_id + '"]');
+                                            // If child comment already exist
-                                            if ($parentComment.length > 0) {
+                                            if ($parentCommentChildren.length > 0) {
-                                                console.log('Parent comment: %O', $parentComment);
+                                                console.log('Child comments found. Appending...');
-                                                // Check for children
+                                                $parentCommentChildren.append($comment);
-                                                $parentCommentChildren = $parentComment.next('.comments');
-                                                // If child comment already exist
-                                                if ($parentCommentChildren.length > 0) {
-                                                    console.log('Child comments found. Appending...');
-                                                    $parentCommentChildren.append($commentTemplate.hide().fadeIn(2000));
-                                                } else {
-                                                    console.log('No child comments found. Creating...');
-                                                    $parentComment.after($('<div>').addClass('comments').append($commentTemplate.hide().fadeIn(2000)));
-                                                }
                                             } else {
-                                                console.log('Parent comment not found');
+                                                console.log('No child comments found. Creating...');
-                                                // FIXME: Double code
+                                                $parentComment.after($('<div>').addClass('comments').append($comment));
-                                                $('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000));
                                             }
                                         }
 
-                                        // Adding anchor
-                                        $commentTemplate.before($anchor);
-
-                                        // Fading out highlight if needed
-                                        if (options.is('option_ws_comments_color_fadeout')) {
-                                            console.log('Fading out the highlight');
-                                            $commentTemplate.children('.pp-highlight').fadeOut(20000);
-                                        }
-
                                         // Desktop notifications
                                         if (options.is('option_ws_comments_notifications')) {
                                             console.log('Showing desktop notification');
                                             chrome.runtime.sendMessage({
                                                 type: 'showNotification',
                                                 notificationId: 'comment_' + wsMessage.post_id + '#' + wsMessage.comment_id,
-                                                avatarUrl: getProtocol() + userAvatar + '/80',
+                                                avatarUrl: getProtocol() + '//point.im/avatar/' + wsMessage.author + '/80',
-                                                title: '@' + wsMessage.author + ' #' + wsMessage.post_id + '(/' + wsMessage.comment_id + ')',
+                                                title: '@' + wsMessage.author + ' #' + wsMessage.post_id + '/' + wsMessage.comment_id,
                                                 text: wsMessage.text
-                                            });
+                                            }, function(response) {});
                                         }
 
                                         console.groupEnd();
                                     });
 
+
                                     break;
 
                                 // Posts
                                 case 'post':
-                                    console.group('ws-post #%s', wsMessage.post_id);
+                                    console.groupCollapsed('ws-post #%s', wsMessage.post_id);
 
                                     console.debug(wsMessage);
+                                    if (options.is('option_ws_posts')) {
+                                        if (options.is('option_ws_posts_notifications')) {
+                                            console.log('Showing desktop notification');
+                                            chrome.runtime.sendMessage({
+                                                type: 'showNotification',
+                                                notificationId: 'post_' + wsMessage.post_id,
+                                                avatarUrl: getProtocol() + '//point.im/avatar/' + wsMessage.author + '/80',
+                                                title: 'Post by @' + wsMessage.author + ' #' + wsMessage.post_id,
+                                                text: wsMessage.text
+                                            }, function(response) {});
+                                        }
+                                    }
 
                                     console.groupEnd();
                                     break;
 
                                 // Recommendation
                                 case 'ok':
-                                    console.group('ws-recommendation #%s/%s', wsMessage.post_id, wsMessage.comment_id);
+                                    console.groupCollapsed('ws-recommendation #%s/%s', wsMessage.post_id, wsMessage.comment_id);
 
                                     console.debug(wsMessage);
 
@@ -572,7 +512,7 @@ $(document).ready(function() {
                                     break;
 
                                 default:
-                                    console.group('ws-other');
+                                    console.groupCollapsed('ws-other');
 
                                     console.log(wsMessage);
 
@@ -585,7 +525,7 @@ $(document).ready(function() {
 
                     }
                 } catch (e) {
-                    console.log('WebSocket exception:')
+                    console.log('WebSocket exception:');
                     console.log(e);
                     console.log(evt.data);
                 }
@@ -605,6 +545,92 @@ $(document).ready(function() {
             });
         }
         
+        if (options.is('option_ajax')) {
+            // Comments
+            if (options.is('option_ajax_comments')) {
+                // Removing old bindings
+                // Dirty hack for page context
+                $('#comments').replaceWith($('#comments').clone());
+
+                // Binding new
+                $('#comments').on('keypress.pp', '.reply-form textarea', function (evt) {
+                    if ((evt.keyCode === 10 || evt.keyCode === 13) && (evt.ctrlKey || evt.metaKey)) {
+                        evt.stopPropagation();
+                        evt.preventDefault();
+
+                        var $post = $(this).parents('.post').first();
+                        var csRf = $(this).siblings('input[name="csrf_token"]').val();
+
+                        $.ajax({
+                            type: 'POST',
+                            url: '/api/post/' + $post.data('id'),
+                            data: {
+                                text: $(this).val(),
+                                comment_id: $post.data('comment-id')
+                            },
+                            error: function(req, status, error) {
+                                console.error('AJAX request error while sending the comment: %s', error);
+                                console.log('Status: %s', status);
+
+                                alert(chrome.i18n.getMessage('msg_comment_send_failed') + '\n' + error);
+                            }, 
+                            /**
+                             * @param {object} data Response data
+                             * @param {number} data.comment_id ID of the created comment
+                             * @param {string} data.id ID of the post
+                             * @param {string} textStatus Text of request status
+                             */
+                            success: function(data, textStatus) {
+                                console.log('data %O', data);
+                                console.log('status %O', textStatus);
+
+                                if (textStatus === 'success') {
+                                    // Hiding form
+                                    $('#reply-' + $post.data('id') + '_' + $post.data('comment-id')).prop('checked', false);
+
+                                    // Creating the comment HTML
+                                    create_comment_elements({
+                                        id: data.comment_id,
+                                        toId: $post.data('comment-id') || null,
+                                        postId: $post.data('id'),
+                                        author: $('#name h1').text(),
+                                        text: $(this).val(),
+                                        fadeOut: false
+                                    }, function($comment) {
+                                        // If list mode or not addressed to other comment
+                                        if ($('#comments #tree-switch a').eq(0).hasClass('active') || ($post.data('comment-id') === undefined)) {
+                                            // Adding to the end of the list
+                                            $('.content-wrap #comments #post-reply').before($comment);
+                                        } else {
+                                            // Check for children
+                                            $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));
+                                            }
+                                        }
+                                    });
+
+                                    // Cleaning textarea
+                                    $(this).val('');
+
+                                }
+                            }.bind(this),
+                            beforeSend: function (xhr) {
+                                xhr.setRequestHeader('X-CSRF', csRf);
+                            }
+                        });
+                    }
+                });
+            }
+        }
+
         // Hightlight post with new comments
         if (options.is('option_other_hightlight_post_comments')) {
             mark_unread_post();
@@ -646,22 +672,96 @@ function getProtocol() {
     return ((location.protocol == 'http:') ? 'http:' : 'https:');
 }
 
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        //.replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;")
-        .replace(/\n/g, "<br>");
-}
-
 // Monts for Date.getMonth()
 var months = [
     'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
 ];
 
+/**
+ * Creating new comment elements for dynamic injection into the DOM
+ * 
+ * @param {object} commentData Comment data
+ * @param {string|number} commentData.id ID of the created comment
+ * @param {string|number} commentData.toId ID of the comment replying to
+ * @param {string} commentData.postId ID of the post
+ * @param {string} commentData.author Author of the comment
+ * @param {string} commentData.text Text of the comment
+ * @param {boolean} commentData.fadeOut Is fadeout enabled or not
+ * @param {function} onCommentCreated Callback which is called when comment is ready
+ * 
+ */
+function create_comment_elements(commentData, onCommentCreated) {
+    var $anchor = $('<a>').attr('name', commentData.id);
+
+    // Initializing comment element
+    var $commentTemplate = $('<div>').attr({
+        'class': 'post',
+        'data-id': commentData.postId,
+        'data-comment-id': commentData.id,
+        'data-to-comment-id': commentData.id || ''
+    });
+
+    // Loading HTML template
+    $commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
+        // Load complete
+        console.info('comment.html loaded');
+
+        // Date and time of comment
+        var date = new Date();
+
+        // Data for template
+        var userLink = '//' + commentData.author + '.point.im/';
+        var csRfToken = $('.reply-form input[name="csrf_token"]').first().val();
+
+        // Filling template
+        // Date and time
+        $commentTemplate.find('.info .created')
+            .append($('<span>').html(((date.getDate().toString.length < 2) ? ('0' + date.getDate().toString()) : (date.getDate().toString())) + '&nbsp;' + months[date.getMonth()]))
+            // Crutchy fix
+            .append($('<br>'))
+            ///Crutchy fix
+            .append($('<span>').html(date.getHours() + ':' + ((date.getMinutes().toString().length < 2) ? ('0' + date.getMinutes().toString()) : (date.getMinutes().toString()))));
+        // Comment text
+        $commentTemplate.find('.text').append($('<p>').text(commentData.text));
+        // Author
+        $commentTemplate.find('.author a.user').attr('href', userLink).text(commentData.author);
+        // Avatar and link
+        $commentTemplate.find('.info a').attr('href', userLink).children('img.avatar').attr('src', '//point.im/avatar/' + commentData.author + '/24');
+        // Post and comment ID's link
+        $commentTemplate.find('.clearfix .post-id a').attr('href', '//point.im/' + commentData.postId + '#' + commentData.id).text('#' + commentData.postId + '/' + commentData.id)
+            // Adding answer label
+            .after((commentData.toId !== null) ? (' в ответ на <a href="#' + commentData.toId + '">/' + commentData.toId + '</a>') : (''));
+        // Setting action labels and other attributes
+        $commentTemplate.find('.action-labels .reply-label').attr('for', 'reply-' + commentData.postId + '_' + commentData.id);
+        $commentTemplate.find('.action-labels .more-label').attr('for', 'action-' + commentData.postId + '_' + commentData.id);
+        $commentTemplate.find('.post-content input[name="action-radio"]').attr('id', 'action-' + commentData.postId + '_' + commentData.id);
+        // Bookmark link
+        $commentTemplate.find('.action-buttons a.bookmark').attr('href', $('#top-post .info a').attr('href') + commentData.postId + '/b?comment_id=' + commentData.id + '&csrf_token=' + csRfToken);
+        // Reply form
+        $commentTemplate.find('.post-content input.reply-radio').attr('id', 'reply-' + commentData.postId + '_' + commentData.id);
+        $commentTemplate.find('.post-content form.reply-form').attr('action', '/' + commentData.postId);
+        $commentTemplate.find('.post-content form.reply-form textarea[name="text"]').html('@' + commentData.author + ', ');
+        $commentTemplate.find('.post-content form.reply-form input[name="comment_id"]').val(commentData.id);
+        $commentTemplate.find('.post-content form.reply-form input[name="csrf_token"]').val(csRfToken);
+        ///Filling template
+        
+        // Fading out highlight if needed
+        if (commentData.fadeOut) {
+            console.log('Fading out the highlight');
+            $commentTemplate.children('.pp-highlight').delay(250).fadeOut(20000);
+        }
+        
+        // @todo add indentation indicator support
+        
+        // Hiding
+        $commentTemplate.hide().delay(250).fadeIn(2000);
+        
+        // Triggering callback
+        onCommentCreated($anchor.add($commentTemplate));
+    });
+}
+
 // Картинки с бурятников
 var booru_picture_count = 0;
 function load_all_booru_images() {

chrome_point_plus/options.html

@@ -165,10 +165,15 @@
                 </section>
 
                 <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">
                         <input type="checkbox" name="option-fluid-layout">
@@ -264,17 +269,17 @@
                         </div>
 
                         <div class="option-node">
-                            <input type="checkbox" name="option-ws-feeds" id="option-ws-feeds" disabled>
+                            <input type="checkbox" name="option-ws-posts" id="option-ws-posts">
-                            <label for="option-ws-feeds" data-i18n="option_ws_feeds"></label>
+                            <label for="option-ws-posts" data-i18n="option_ws_posts"></label>
 
                             <label class="option-node">
-                                <input type="checkbox" name="option-ws-feeds-subscriptions">
+                                <input type="checkbox" name="option-ws-posts-add" disabled>
-                                <span data-i18n="option_ws_feeds_subscriptions"></span>
+                                <span data-i18n="option_ws_posts_add"></span>
                             </label>
 
                             <label class="option-node">
-                                <input type="checkbox" name="option-ws-feeds-blogs">
+                                <input type="checkbox" name="option-ws-posts-notifications">
-                                <span data-i18n="option_ws_feeds_blogs"></span>
+                                <span data-i18n="option_ws_posts_notifications"></span>
                             </label>
                         </div>
                     </div>