From 99760d2eb763725395805410c9ab2b22e9e20752 Mon Sep 17 00:00:00 2001
From: Alexey Skobkin <x@skobkin.ru>
Date: Mon, 9 May 2016 04:56:51 +0300
Subject: [PATCH] #97 done. Side panel with "Go to new comment" button.

---
 chrome_point_plus/_locales/en/messages.json  |  6 +++
 chrome_point_plus/_locales/ru/messages.json  |  6 +++
 chrome_point_plus/css/modules/side_panel.css | 28 ++++++++++
 chrome_point_plus/js/point-plus.js           | 56 ++++++++++++++++++++
 chrome_point_plus/options.html               | 10 ++++
 5 files changed, 106 insertions(+)
 create mode 100644 chrome_point_plus/css/modules/side_panel.css

diff --git a/chrome_point_plus/_locales/en/messages.json b/chrome_point_plus/_locales/en/messages.json
index cfbab7b..84e865d 100644
--- a/chrome_point_plus/_locales/en/messages.json
+++ b/chrome_point_plus/_locales/en/messages.json
@@ -116,6 +116,12 @@
     "option_ajax_comments": {
         "message": "Send comments via AJAX (CTRL+Enter)"
     },
+    "option_right_panel": {
+        "message": "Right side panel"
+    },
+    "option_right_panel_to_unread": {
+        "message": "\"Go to unread comment\" button"
+    },
     "option_fluid_layout": {
         "message": "Fluid layout"
     },
diff --git a/chrome_point_plus/_locales/ru/messages.json b/chrome_point_plus/_locales/ru/messages.json
index a69eb74..433ee36 100644
--- a/chrome_point_plus/_locales/ru/messages.json
+++ b/chrome_point_plus/_locales/ru/messages.json
@@ -116,6 +116,12 @@
     "option_ajax_comments": {
         "message": "Отправка комментариев через AJAX (CTRL+Enter)"
     },
+    "option_right_panel": {
+        "message": "Боковая панель справа"
+    },
+    "option_right_panel_to_unread": {
+        "message": "Кнопка \"Перейти к непрочитанному\""
+    },
     "option_fluid_layout": {
         "message": "&#34;Резиновая&#34; вёрстка (растянуть сайт по горизонтали)"
     },
diff --git a/chrome_point_plus/css/modules/side_panel.css b/chrome_point_plus/css/modules/side_panel.css
new file mode 100644
index 0000000..81a07b2
--- /dev/null
+++ b/chrome_point_plus/css/modules/side_panel.css
@@ -0,0 +1,28 @@
+#pp-right-panel {
+    width: 32px;
+    position: fixed;
+    top: 50%;
+    right: 3px;
+    opacity: .3;
+    transition: opacity 500ms;
+}
+
+#pp-right-panel:hover {
+    opacity: 1;
+    transition: opacity 500ms;
+}
+
+#pp-right-panel #pp-go-to-unread {
+    background-image: url("/img/menu-my.png");
+    height: 32px;
+    width: 32px;
+    cursor: pointer;
+}
+
+#pp-right-panel span#pp-unread-count {
+    position: relative;
+    top: 7px;
+    left: 11px;
+    -webkit-user-select: none;
+    user-select: none;
+}
\ No newline at end of file
diff --git a/chrome_point_plus/js/point-plus.js b/chrome_point_plus/js/point-plus.js
index da4f5a3..cd8994d 100644
--- a/chrome_point_plus/js/point-plus.js
+++ b/chrome_point_plus/js/point-plus.js
@@ -52,6 +52,45 @@ function PointPlus(ppVersion) {
             $('div.secret a').insertAfter('a#menu-recent').css('background-image','url("img/icon-private-inactive.png")');
         }
 
+        // Side panel
+        if (options.is('option_right_panel')) {
+            // Loading side panel CSS
+            messenger.css('css/modules/side_panel.css');
+
+            // Creating side panel
+            var $side_panel = $('<div>').attr({
+                id: 'pp-right-panel'
+            });
+
+            $('body').append($side_panel);
+
+            if (options.is('option_right_panel_to_unread')) {
+                $go_to_unread_block = $('<div>').attr({
+                    id: 'pp-go-to-unread',
+                }).click(function() {
+                    var $unread_comment = $('.unread').first();
+
+                    if ($unread_comment.length > 0) {
+                        $('html body').animate({ scrollTop: $unread_comment.offset().top }, 500);
+                        $unread_comment.removeClass('unread');
+                        // Updating count
+                        update_right_panel_unread_count();
+                    }
+                });
+
+                $side_panel.append($go_to_unread_block);
+
+                $go_to_unread_link = $('<span>').attr({
+                    id: 'pp-unread-count',
+                });
+
+                $go_to_unread_block.append($go_to_unread_link);
+
+                // Updating count
+                update_right_panel_unread_count();
+            }
+        }
+
         // Embedding
         if (options.is('option_embedding')) {
             // Load pictures from Booru, Tumblr and some other sites
@@ -681,6 +720,23 @@ function create_comment_elements(commentData, onCommentCreated) {
     });
 }
 
+/**
+ * Update undread comments count in right panel
+ *
+ * @param {?object} $span jQuery object of unread count <span>
+ */
+function update_right_panel_unread_count($span) {
+    var unread_count = $('.post.unread').length;
+
+    if (typeof $span === 'undefined') {
+        $span = $('#pp-unread-count');
+    }
+
+    if ($span.length > 0) {
+        $span.text(unread_count);
+    }
+}
+
 // Помечаем непрочитанные посты более видимо чем каким-то баджем
 // Эта часть написана @RainbowSpike
 function mark_unread_post() {
diff --git a/chrome_point_plus/options.html b/chrome_point_plus/options.html
index ff31043..5f2bd30 100644
--- a/chrome_point_plus/options.html
+++ b/chrome_point_plus/options.html
@@ -155,6 +155,16 @@
                         </label>
                     </div>
 
+                    <div class="option-node">
+                        <input type="checkbox" name="option-right-panel" id="option-right-panel">
+                        <label for="option-right-panel" data-i18n="option_right_panel"></label>
+
+                        <label class="option-node">
+                            <input type="checkbox" name="option-right-panel-to-unread">
+                            <span data-i18n="option_right_panel_to_unread"></span>
+                        </label>
+                    </div>
+
                     <label class="option-node">
                         <input type="checkbox" name="option-fluid-layout">
                         <span data-i18n="option_fluid_layout"></span>