- Options page, style and scripts refactoring

- Prepating for tree comments with WebSockets

chrome_point_plus/css/point-plus.css

@@ -11,28 +11,28 @@ div#markItUpText-input {
 
 /* Point+ */
 /* Options page */
-body.options {
+.pp-options {
     width: 450px;
     height: 450px;
     background: #EEE;
 }
 
 /* Tabs style */
-.usual {
+.pp-options .usual {
     width:450px;
     margin: 5px;
 }
 
-.usual ul {
+.pp-options .usual ul {
     padding: 0 0 10px 0;
     margin: 0 0 18px 0;
 }
 
-.usual li { 
+.pp-options .usual li { 
     list-style: none; 
     float: left; 
 }
-.usual ul a {
+.pp-options .usual ul a {
     display: block;
     padding: 6px 10px;
     text-decoration: none!important;
@@ -43,30 +43,30 @@ body.options {
     background: #C8C8C8;
     border-radius: 15px 15px 0 0;
 }
-.usual ul a:hover {
+.pp-options .usual ul a:hover {
     color: #FFF;
     background: #BBB;
 }
-.usual ul a.selected {
+.pp-options .usual ul a.selected {
     margin-bottom: 0;
     color: #FFF;
     background: #A5A5A5;
     cursor: default;
 }
-.usual div#tabs-content {
+.pp-options .usual div#tabs-content {
     margin: 0 5px 0 0;
     padding: 5px;
     background-color: #A5A5A5;
     border-radius: 0 15px 0 0;
     
 }
-.usual #panel {
+.pp-options .usual #panel {
     background: #B5B5B5;
     margin: 0 5px 0 0;
     padding: 10px;
     border-radius: 0 0 15px 15px;
 }
-.usual #panel button.button {
+.pp-options .usual #panel button.button {
     background-color: #C8C8C8;
     border-radius:15px;
     border:1px solid #dcdcdc;
@@ -80,24 +80,52 @@ body.options {
     text-decoration:none;
     text-shadow:0px 1px 0px #ffffff;
 }
-.usual #panel button.button:hover{
+.pp-options .usual #panel button.button:hover{
     background-color:#BBB;
 }
-.usual #panel button.button:active {
+.pp-options .usual #panel button.button:active {
 	position:relative;
 	top:1px;
 }
-.usual div#tabs-content div {
+/*
+.pp-options .usual div#tabs-content div {
     padding: 3px 0 0 0;
     margin-top: -15px;
     clear: left;
     font: 10pt Georgia;
     color: #FFF;
 }
-.usual div#tabs-content div p {
+*/
-    padding: 5px 0 0 15px;
+
-}
+.pp-options .usual div a {
-.usual div a {
     color: #000;
     font-weight: bold;
 }
+
+.pp-options .tab-content {
+    padding: 5px 0 0 5px;
+}
+
+.pp-options .option {
+    display: block;
+    margin: 5px 0 5px 15px;
+}
+
+.pp-options .option label {
+    font: 10pt Georgia;
+    color: #FFF;
+}
+
+.pp-options .tab-content .text {
+    margin-left: 15px;
+}
+
+/* Disables subcheckboxes if parent disabled */
+.pp-options .option input[type="checkbox"]:not(:checked) ~.option {
+    display: none;
+}
+
+.pp-options .option input[type="checkbox"]:not(:checked) ~.option label {
+    color: #BBB;
+}
+

chrome_point_plus/js/options.js

@@ -1,37 +1,76 @@
-// Saves options to localStorage.
+var ppOptions = [
-function save_options() {
-    // CTRL+Enter
-    var checkbox_ctrl_enter = document.getElementById('option-ctrl-enter');
     // Fancybox
-    // Images
+    'option_fancybox', 'option_fancybox_images', 'option_fancybox_videos', 'option_fancybox_posts',
-    var checkbox_fancybox_images = document.getElementById('option-fancybox-images');
+    // CTRL+Enter
-    // Videos
+    'option_ctrl_enter',
-    var checkbox_fancybox_videos = document.getElementById('option-fancybox-videos');
-    // Posts
-    var checkbox_fancybox_posts = document.getElementById('option-fancybox-posts');
-    // Fluid layout
-    var checkbox_layout_fluid = document.getElementById('option-layout-fluid');
     // Load original images
-    var checkbox_images_load_original = document.getElementById('option-images-load-original');
+    'option_images_load_original', 
+    // Fluid layout
+    'option_fluid_layout', 
     // Visual editor for posts
-    var checkbox_visual_editor_post = document.getElementById('option-visual-editor-post');
+    'option_visual_editor_post', 
+    // Google search
+    'option_search_with_google', 
+    // WebSocket
+    'option_ws', 
+        // Comments
+        'option_ws_comments', 'option_ws_comments_color_fadeout',
+        // Feeds
+        'option_ws_feeds', 'option_ws_feeds_subscriptions', 'option_ws_feeds_blogs'
+];
+
+// Saves options to localStorage.
+function pp_save_options() {
+    // CTRL+Enter
+    var option_ctrl_enter = document.getElementById('option-ctrl-enter');
+    // Fancybox
+    // 
+    var option_fancybox = document.getElementById('option-fancybox');
+    // Images
+    var option_fancybox_images = document.getElementById('option-fancybox-images');
+    // Videos
+    var option_fancybox_videos = document.getElementById('option-fancybox-videos');
+    // Posts
+    var option_fancybox_posts = document.getElementById('option-fancybox-posts');
+    // Fluid layout
+    var option_fluid_layout = document.getElementById('option-layout-fluid');
+    // Load original images
+    var option_images_load_original = document.getElementById('option-images-load-original');
+    // Visual editor for posts
+    var option_visual_editor_post = document.getElementById('option-visual-editor-post');
     // Google search
     var checkbox_search_with_google = document.getElementById('option-search-with-google');
     // WebSocket
+    // 
+    var option_ws = document.getElementById('option-ws');
     // Comments
-    var checkbox_ws_comments = document.getElementById('option-ws-comments');
+    var option_ws_comments = document.getElementById('option-ws-comments');
+    // Fade out highlight comments
+    var option_ws_comments_color_fadeout = document.getElementById('option-ws-comments-color-fadeout');
+    // Feeds
+    var option_ws_feeds = document.getElementById('option-ws-feeds');
+    // Subscriptions
+    var option_ws_feeds_subscriptions = document.getElementById('option-ws-feeds-subscriptions');
+    // Blogs
+    var option_ws_feeds_blogs = document.getElementById('option-ws-feeds-blogs');
     
     // Saving parameters
     chrome.storage.sync.set({
-        'option_ctrl_enter': checkbox_ctrl_enter.checked,
+        'option_ctrl_enter': option_ctrl_enter.checked,
-        'option_fancybox_images': checkbox_fancybox_images.checked,
+        'option_fancybox': option_fancybox.checked,
-        'option_fancybox_videos': checkbox_fancybox_videos.checked,
+            'option_fancybox_images': option_fancybox_images.checked,
-        'option_fancybox_posts': checkbox_fancybox_posts.checked,
+            'option_fancybox_videos': option_fancybox_videos.checked,
-        'option_fluid_layout': checkbox_layout_fluid.checked,
+            'option_fancybox_posts': option_fancybox_posts.checked,
-        'option_images_load_original': checkbox_images_load_original.checked,
+        'option_fluid_layout': option_fluid_layout.checked,
-        'option_visual_editor_post': checkbox_visual_editor_post.checked,
+        'option_images_load_original': option_images_load_original.checked,
+        'option_visual_editor_post': option_visual_editor_post.checked,
         'option_search_with_google': checkbox_search_with_google.checked,
-        'option_ws_comments': checkbox_ws_comments.checked
+        'option_ws': option_ws.checked,
+            'option_ws_comments': option_ws_comments.checked,
+                'option_ws_comments_color_fadeout': option_ws_comments_color_fadeout.checked,
+            'option_ws_feeds': option_ws_feeds.checked,
+                'option_ws_feeds_subscriptions': option_ws_feeds_subscriptions.checked,
+                'option_ws_feeds_blogs': option_ws_feeds_blogs.checked
     }, function() {
         // Update status to let user know options were saved.
         var status = document.getElementById('status');
@@ -43,15 +82,18 @@ function save_options() {
 }
 
 // Restores select box state to saved value from localStorage.
-function restore_options() {
+function pp_restore_options() {
     // Loading options
-    chrome.storage.sync.get(['option_fancybox_images', 'option_fancybox_videos', 'option_fancybox_posts', 'option_ctrl_enter', 'option_images_load_original', 
+    chrome.storage.sync.get(ppOptions, 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;
         }
         // Fancybox
+        //
+        if (options.option_fancybox == true) {
+            document.getElementById('option-fancybox').checked = true;
+        }
         // Images
         if (options.option_fancybox_images == true) {
             document.getElementById('option-fancybox-images').checked = true;
@@ -81,11 +123,31 @@ function restore_options() {
             document.getElementById('option-search-with-google').checked = true;
         }
         // WebSocket
+        //
+        if (options.option_ws == true) {
+            document.getElementById('option-ws').checked = true;
+        }
         // Comments
         if (options.option_ws_comments == true) {
             document.getElementById('option-ws-comments').checked = true;
         }
+        // Fade out highlight comments
+        if (options.option_ws_comments_color_fadeout == true) {
+            document.getElementById('option-ws-comments-color-fadeout').checked = true;
+        }
+        // Feeds
+        if (options.option_ws_feeds == true) {
+            document.getElementById('option-ws-feeds').checked = true;
+        }
+        // Subscriptions
+        if (options.option_ws_feeds_subscriptions == true) {
+            document.getElementById('option-ws-feeds-subscriptions').checked = true;
+        }
+        // Blogs
+        if (options.option_ws_feeds_blogs == true) {
+            document.getElementById('option-ws-feeds-blogs').checked = true;
+        }
     });
 }
-document.addEventListener('DOMContentLoaded', restore_options);
+document.addEventListener('DOMContentLoaded', pp_restore_options);
-document.querySelector('#save').addEventListener('click', save_options);
+document.querySelector('#save').addEventListener('click', pp_save_options);

chrome_point_plus/js/point-plus.js

@@ -3,8 +3,7 @@ $(document).ready(function() {
     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', 
+    chrome.storage.sync.get(ppOptions, 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) {
@@ -109,9 +108,14 @@ $(document).ready(function() {
         if (options.option_ws_comments == true) {
             // If we are in the post page
             if ($('#top-post').length > 0) {
-                // WS test
+                
+                // Comments view mode
+                treeSwitch = $('#tree-switch a.active').attr('href');
+                                
+                // WS connection
                 console.log('Starting WebSocket connection');
                 ws = new WebSocket('wss://point.im/ws');
+                // Message handler
                 ws.onmessage = function(evt) {
                     try {
                         // ping :)

chrome_point_plus/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Point+",
-    "version": "1.5",
+    "version": "1.6",
     "author": "Alexey Skobkin",
     "homepage_url": "https://bitbucket.org/skobkin/chrome_point_plus",
     "description": "More features for point.im",
@@ -29,6 +29,7 @@
                     "js/jquery-1.10.1.min.js",
                     "js/jquery.fancybox.pack.js", "js/jquery.fancybox-media.js",
                     "js/markitup/jquery.markitup.js", "js/markitup/sets/markdown/set.js",
+                    "js/options.js",
                     "js/point-plus.js"
                     ],
             "css": [

chrome_point_plus/options.html

@@ -7,53 +7,88 @@
         <script src="js/jquery.idTabs.min.js"></script>
     </head>
 
-    <body class="options">
+    <body class="pp-options">
         <div class="tabs usual">
             <ul class="idTabs">
-                <li><a href="#popups">Pop-ups</a></li>
+                <li><a href="#media">Media</a></li>
-                <li><a href="#look-and-feel">Look &amp; Feel</a></li>
                 <li><a href="#other">Other</a></li>
+                <li><a href="#websocket">WebSockets</a></li>
                 <li><a href="#feedback">Feedback</a></li>
             </ul>
             
             <div id="tabs-content">
-                <div id="popups">
+                <div class="tab-content" id="popups">
-                    <p>
+ 
-                        <label><input type="checkbox" id="option-fancybox-images">Use for images</label>
-                    </p>
-                    <p>
-                        <label><input type="checkbox" id="option-fancybox-videos">Use for videos (YouTube, ...)</label>
-                    </p>
-                    <p>
-                        <label><input type="checkbox" id="option-fancybox-posts">Use for post links (including comments)</label>
-                    </p>
                 </div>
 
-                <div id="look-and-feel">
+                <div class="tab-content" id="media">
-                    <p>
+                    <div class="option">
-                        <label><input type="checkbox" id="option-layout-fluid">Fluid layout</label>
+                        <input type="checkbox" id="option-fancybox"><label for="option-fancybox">Enable Fancybox</label>
-                    </p>
+                        
-                    <p>
+                        <div class="option">
-                        <label><input type="checkbox" id="option-images-load-original">Load original images instead of thumbnails
+                                 <input type="checkbox" id="option-fancybox-images"><label for="option-fancybox-images">Use for images</label>
-                    </p>
-                    <p>
-                        <label><input type="checkbox" id="option-visual-editor-post">Show visual editor for posts
-                    </p>
-                    <p>
-                        <label><input type="checkbox" id="option-search-with-google">Use Google search in header
-                    </p>
                          </div>
 
-                <div id="other">
+                         <div class="option">
-                    <p>
+                                <input type="checkbox" id="option-fancybox-videos"><label for="option-fancybox-videos">Use for videos (YouTube, ...)</label>
-                        <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">
+                         <div class="option">
+                                <input type="checkbox" id="option-fancybox-posts"><label for="option-fancybox-posts">Use for post links (including comments)</label>
+                         </div>
+                    </div>
+                    
+                    <div class="option">
+                            <input type="checkbox" id="option-images-load-original"><label for="option-images-load-original">Load original images instead of thumbnails
+                    </div>
+                </div>
+
+                <div class="tab-content" id="other">
+                    <div class="option">
+                            <input type="checkbox" id="option-ctrl-enter"><label for="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
+                    </div>
+                    
+                    <div class="option">
+                            <input type="checkbox" id="option-layout-fluid"><label for="option-layout-fluid">Fluid layout</label>
+                    </div>
+                    
+                    <div class="option">
+                            <input type="checkbox" id="option-visual-editor-post"><label for="option-visual-editor-post">Show visual editor for posts
+                    </div>
+
+                    <div class="option">
+                            <input type="checkbox" id="option-search-with-google"><label for="option-search-with-google">Use Google search in header
+                    </div>
+                </div>
+                
+                <div class="tab-content" id="websocket">
+                    <div class="option">
+                        <input type="checkbox" id="option-ws"><label for="option-ws">Enable WebSockets</label>
+
+                        <div class="option">
+                            <input type="checkbox" id="option-ws-comments"><label for="option-ws-comments">Process comments</label>
+                            
+                            <div class="option">
+                                <input type="checkbox" id="option-ws-comments-color-fadeout"><label for="option-ws-comments-color-fadeout">Fade out highlight in 10 sec</label>
+                            </div>
+                        </div>
+                        
+                        <div class="option">
+                            <input type="checkbox" id="option-ws-feeds" disabled><label for="option-ws-feeds">Process feeds</label>
+                            
+                            <div class="option">
+                                <input type="checkbox" id="option-ws-feeds-subscriptions"><label for="option-ws-feeds-subscriptions">Subscriptions feed</label>
+                            </div>
+                            
+                            <div class="option">
+                                <input type="checkbox" id="option-ws-feeds-blogs"><label for="option-ws-feeds-blogs">User blog pages (only when subscribed)</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="tab-content" id="feedback">
+                    <div class="text">
                         <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>
@@ -71,6 +106,7 @@
                         </p>
                     </div>
                 </div>
+            </div>
             
             
             <div id="panel">