- WebSocket for new comments

- JS Console grouping
- Removed unused permissions from manifest
- Added donation info

chrome_point_plus/includes/comment.html

@@ -0,0 +1,37 @@
+<div class="info">
+    <a href="#"><img class="avatar" src="#author-avatar" alt=""/></a>
+    <div class="created">
+
+    </div>
+</div>
+<div class="post-content">
+    <div class="author">
+        <a href="#" class="user"><!-- %author% --></a>
+    </div>
+    <div class="text">
+        <!-- <p>Comment text</p> -->
+    </div>
+    <div class="clearfix">
+        <div class="post-id">
+            <a href="#"><!-- #%post-id%/%comment-id% --></a>
+        </div>
+        <div class="action-labels">
+            <label class="reply-label">ответить</label>
+            <label class="more-label">ещё &#9662;</label>
+        </div>
+    </div>
+    <input type="checkbox" class="action-cb" name="action-radio"/>
+    <div class="action-buttons">
+        <a class="bookmark" href="#">в закладки</a>
+    </div>
+    <!-- Reply form -->
+    <input type="radio" class="reply-radio" name="reply-radio"/>
+    <form class="reply-form" action="#" method="post">
+        <textarea name="text"></textarea>
+        <input type="hidden" name="comment_id" value="">
+        <input type="hidden" name="csrf_token" value="">
+        <div class="clearfix">
+            <input type="submit" value="Ответить"/>
+        </div>
+    </form>
+</div>

chrome_point_plus/js/options.js

@@ -17,6 +17,9 @@ function save_options() {
     var checkbox_visual_editor_post = document.getElementById('option-visual-editor-post');
     // Google search
     var checkbox_search_with_google = document.getElementById('option-search-with-google');
+    // WebSocket
+    // Comments
+    var checkbox_ws_comments = document.getElementById('option-ws-comments');
     
     // Saving parameters
     chrome.storage.sync.set({
@@ -27,7 +30,8 @@ function save_options() {
         'option_fluid_layout': checkbox_layout_fluid.checked,
         'option_images_load_original': checkbox_images_load_original.checked,
         'option_visual_editor_post': checkbox_visual_editor_post.checked,
-        'option_search_with_google': checkbox_search_with_google.checked
+        'option_search_with_google': checkbox_search_with_google.checked,
+        'option_ws_comments': checkbox_ws_comments.checked
     }, function() {
         // Update status to let user know options were saved.
         var status = document.getElementById('status');
@@ -42,7 +46,7 @@ function save_options() {
 function restore_options() {
     // Loading options
     chrome.storage.sync.get(['option_fancybox_images', 'option_fancybox_videos', 'option_fancybox_posts', 'option_ctrl_enter', 'option_images_load_original', 
-        'option_fluid_layout', 'option_visual_editor_post', 'option_search_with_google'], function(options) {
+        'option_fluid_layout', 'option_visual_editor_post', 'option_search_with_google', 'option_ws_comments'], function(options) {
         // CTRL+Enter
         if (options.option_ctrl_enter == true) {
             document.getElementById('option-ctrl-enter').checked = true;
@@ -76,6 +80,11 @@ function restore_options() {
         if (options.option_search_with_google == true) {
             document.getElementById('option-search-with-google').checked = true;
         }
+        // WebSocket
+        // Comments
+        if (options.option_ws_comments == true) {
+            document.getElementById('option-ws-comments').checked = true;
+        }
     });
 }
 document.addEventListener('DOMContentLoaded', restore_options);

chrome_point_plus/js/point-plus.js

@@ -1,7 +1,10 @@
 $(document).ready(function() {
+    // Grouping console log
+    console.group('point-plus');
+    
     // Loading options
     chrome.storage.sync.get(['option_fancybox_images', 'option_fancybox_videos', 'option_fancybox_posts', 'option_ctrl_enter', 'option_fluid_layout', 
-        'option_images_load_original', 'option_visual_editor_post', 'option_search_with_google'], function(options) {
+        'option_images_load_original', 'option_visual_editor_post', 'option_search_with_google', 'option_ws_comments'], function(options) {
         // Fancybox
         // Images
         if (options.option_fancybox_images == true) {
@@ -101,8 +104,123 @@ $(document).ready(function() {
                 }
             });
         }
+        // WebSocket
+        // Comments
+        if (options.option_ws_comments == true) {
+            // If we are in the post page
+            if ($('#top-post').length > 0) {
+                // WS test
+                console.log('Starting WebSocket connection');
+                ws = new WebSocket('wss://point.im/ws'); 
+                ws.onmessage = function(evt) {
+                    try {
+                        // ping :)
+                        if (evt.data == 'ping') {
+                            console.log('WS ping received');
+                        } else {
+                            var wsMessage = JSON.parse(evt.data);
+                            console.log(wsMessage);
+
+                            // Post id
+                            var postId = $('#top-post').attr('data-id');
+
+                            // If this is a comment for this post
+                            if ((wsMessage.a == 'comment') && (wsMessage.post_id == postId)) {
+                                var $anchor = $('<a>').attr('name', wsMessage.comment_id);
+
+                                // Initializing comment element
+                                var $commentTemplate = $('<div>').attr({
+                                    'class': 'post',
+                                    'data-id': postId,
+                                    'data-comment-id': wsMessage.comment_id
+                                });
+
+                                console.log(chrome.extension.getURL('includes/comment.html'));
+                                // Loading HTML template
+                                $commentTemplate.load(chrome.extension.getURL('includes/comment.html'), function() {
+                                    // Load complete
+                                    console.log('comment.html loaded');
+
+                                    // Date and time of comment
+                                    var date = new Date();
+
+                                    // Data for template
+                                    var userLink = location.protocol + '//' + wsMessage.author + '.point.im/';
+                                    var postAuthorLink = $('#top-post .info a').attr('href');
+                                    var postLink = postAuthorLink + wsMessage.post_id;
+                                    var userAvatar = location.protocol + '//point.im/avatar/' + wsMessage.author;
+                                    var commentLink = location.protocol + '//point.im/' + wsMessage.post_id + '#' + wsMessage.comment_id;
+                                    var csRfToken = $('.reply-form input[name="csrf_token"').val();
+
+                                    // Filling template
+                                    console.log('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
+
+                                    console.log('Inserting new comment into the DOM');
+                                    // Insert new comment in the list
+                                    $('.content-wrap #comments #post-reply').before($commentTemplate.hide().fadeIn(2000).css('background-color', '#FFFFBB'));
+                                    // Adding anchor
+                                    $commentTemplate.before($anchor);
+                                });
+                            }
+                        }
+                    } catch(e) {
+                        console.log('WebSocket exception:')
+                        console.log(e);
+                        console.log(evt.data);
+                    };
+                };
+            } else {
+
+            }
+        }
     });
 
     // Showing page action
     chrome.extension.sendMessage({type: 'showPageAction'});
-});
+});
+
+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'
+];

chrome_point_plus/manifest.json

@@ -1,10 +1,10 @@
 {
     "manifest_version": 2,
     "name": "Point+",
-    "version": "1.4",
+    "version": "1.5",
     "author": "Alexey Skobkin",
     "homepage_url": "https://bitbucket.org/skobkin/chrome_point_plus",
-    "description": "Some new features for point.im",
+    "description": "More features for point.im",
     "options_page": "options.html",
     "page_action": {
         "default_icon": {
@@ -49,7 +49,6 @@
     "permissions": [
         "http://*.point.im/*",
         "https://*.point.im/*",
-        "storage",
-        "tabs"
+        "storage"
     ]
 }

chrome_point_plus/options.html

@@ -48,12 +48,27 @@
                     <p>
                         <label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
                     </p>
+                    <p>
+                        <label><input type="checkbox" id="option-ws-comments">Retrieve comments automatically (WebSocket)</label>
+                    </p>
                 </div>
 
                 <div id="feedback">
                     <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>
+                        You can make a donation in the following ways:
+                    </p>
+                    <p>
+                        Yandex.Money: 41001539215836
+                    </p>
+                    <p>
+                        Novacoin: 4d1ctdZtKkv3kxGdAXjfNEjfFvtDVdbf65
+                    </p>
+                    <p>
+                        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WW33X5J5WFSP4" target="_blank">PayPal</a>
+                    </p>
                 </div>
             </div>