From 13c6f9c614f954b4af6e3b6c5708821368bd539c Mon Sep 17 00:00:00 2001 From: Alexey Skobkin Date: Fri, 4 Apr 2014 01:38:34 +0400 Subject: [PATCH] - Options page, style and scripts refactoring - Prepating for tree comments with WebSockets --- chrome_point_plus/css/point-plus.css | 64 +++++++++---- chrome_point_plus/js/options.js | 118 +++++++++++++++++------ chrome_point_plus/js/point-plus.js | 12 ++- chrome_point_plus/manifest.json | 3 +- chrome_point_plus/options.html | 134 +++++++++++++++++---------- 5 files changed, 231 insertions(+), 100 deletions(-) diff --git a/chrome_point_plus/css/point-plus.css b/chrome_point_plus/css/point-plus.css index e37c249..beca171 100644 --- a/chrome_point_plus/css/point-plus.css +++ b/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; -} -.usual div a { +*/ + +.pp-options .usual div a { color: #000; font-weight: bold; -} \ No newline at end of file +} + +.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; +} + diff --git a/chrome_point_plus/js/options.js b/chrome_point_plus/js/options.js index 5c06f23..353de77 100644 --- a/chrome_point_plus/js/options.js +++ b/chrome_point_plus/js/options.js @@ -1,37 +1,76 @@ -// Saves options to localStorage. -function save_options() { - // CTRL+Enter - var checkbox_ctrl_enter = document.getElementById('option-ctrl-enter'); +var ppOptions = [ // Fancybox - // Images - var checkbox_fancybox_images = document.getElementById('option-fancybox-images'); - // Videos - 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'); + 'option_fancybox', 'option_fancybox_images', 'option_fancybox_videos', 'option_fancybox_posts', + // CTRL+Enter + 'option_ctrl_enter', // 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_fancybox_images': checkbox_fancybox_images.checked, - 'option_fancybox_videos': checkbox_fancybox_videos.checked, - 'option_fancybox_posts': checkbox_fancybox_posts.checked, - '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_ctrl_enter': option_ctrl_enter.checked, + 'option_fancybox': option_fancybox.checked, + 'option_fancybox_images': option_fancybox_images.checked, + 'option_fancybox_videos': option_fancybox_videos.checked, + 'option_fancybox_posts': option_fancybox_posts.checked, + 'option_fluid_layout': option_fluid_layout.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', - 'option_fluid_layout', 'option_visual_editor_post', 'option_search_with_google', 'option_ws_comments'], function(options) { + chrome.storage.sync.get(ppOptions, 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.querySelector('#save').addEventListener('click', save_options); \ No newline at end of file +document.addEventListener('DOMContentLoaded', pp_restore_options); +document.querySelector('#save').addEventListener('click', pp_save_options); \ 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 7d8547f..d487059 100644 --- a/chrome_point_plus/js/point-plus.js +++ b/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', - 'option_images_load_original', 'option_visual_editor_post', 'option_search_with_google', 'option_ws_comments'], function(options) { + chrome.storage.sync.get(ppOptions, 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'); + ws = new WebSocket('wss://point.im/ws'); + // Message handler ws.onmessage = function(evt) { try { // ping :) diff --git a/chrome_point_plus/manifest.json b/chrome_point_plus/manifest.json index f22f95e..24374e6 100644 --- a/chrome_point_plus/manifest.json +++ b/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": [ diff --git a/chrome_point_plus/options.html b/chrome_point_plus/options.html index b2b20e7..198b098 100644 --- a/chrome_point_plus/options.html +++ b/chrome_point_plus/options.html @@ -7,68 +7,104 @@ - +
-
-

- -

-

- -

-

- -

+
+
-
-

- -

-

-

-

-

-

-

+
+
+ + +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
-
-

- -

-

- -

+
+
+ +
+ +
+ +
+ +
+
+ +
+
+
+ +
+
+ + +
+ + +
+ +
+
+ +
+ + +
+ +
+ +
+ +
+
+
-
-

- If you find an error do not hesitate to send me a bug report. -

-

- You can make a donation in the following ways: -

-

- Yandex.Money: 41001539215836 -

-

- Novacoin: 4d1ctdZtKkv3kxGdAXjfNEjfFvtDVdbf65 -

-

- PayPal -

+
+
+

+ If you find an error do not hesitate to send me a bug report. +

+

+ You can make a donation in the following ways: +

+

+ Yandex.Money: 41001539215836 +

+

+ Novacoin: 4d1ctdZtKkv3kxGdAXjfNEjfFvtDVdbf65 +

+

+ PayPal +

+