skobkin/chrome_point_plus
1
0
Fork 0
mirror of https://bitbucket.org/skobkin/chrome_point_plus.git synced 2024-11-23 18:56:04 +00:00
Code Issues Projects Releases Wiki Activity

- Options page, style and scripts refactoring

Browse source 
- Prepating for tree comments with WebSockets
This commit is contained in:
Alexey Skobkin 2014-04-04 01:38:34 +04:00
parent 819f63dd0f
commit 13c6f9c614
5 changed files with 231 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
chrome_point_plus/css/point-plus.css
View file

@ -11,28 +11,28 @@ div#markItUpText-input {
/* Point+ */ /* Point+ */
/* Options page */ /* Options page */
body.options { .pp-options {
width: 450px; width: 450px;
height: 450px; height: 450px;
background: #EEE; background: #EEE;
} }
/* Tabs style */ /* Tabs style */
.usual { .pp-options .usual {
width:450px; width:450px;
margin: 5px; margin: 5px;
} }
.usual ul { .pp-options .usual ul {
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: 0 0 18px 0; margin: 0 0 18px 0;
} }
.usual li { .pp-options .usual li {
list-style: none; list-style: none;
float: left; float: left;
} }
.usual ul a { .pp-options .usual ul a {
display: block; display: block;
padding: 6px 10px; padding: 6px 10px;
text-decoration: none!important; text-decoration: none!important;
@ -43,30 +43,30 @@ body.options {
background: #C8C8C8; background: #C8C8C8;
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
} }
.usual ul a:hover { .pp-options .usual ul a:hover {
color: #FFF; color: #FFF;
background: #BBB; background: #BBB;
} }
.usual ul a.selected { .pp-options .usual ul a.selected {
margin-bottom: 0; margin-bottom: 0;
color: #FFF; color: #FFF;
background: #A5A5A5; background: #A5A5A5;
cursor: default; cursor: default;
} }
.usual div#tabs-content { .pp-options .usual div#tabs-content {
margin: 0 5px 0 0; margin: 0 5px 0 0;
padding: 5px; padding: 5px;
background-color: #A5A5A5; background-color: #A5A5A5;
border-radius: 0 15px 0 0; border-radius: 0 15px 0 0;
} }
.usual #panel { .pp-options .usual #panel {
background: #B5B5B5; background: #B5B5B5;
margin: 0 5px 0 0; margin: 0 5px 0 0;
padding: 10px; padding: 10px;
border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;
} }
.usual #panel button.button { .pp-options .usual #panel button.button {
background-color: #C8C8C8; background-color: #C8C8C8;
border-radius:15px; border-radius:15px;
border:1px solid #dcdcdc; border:1px solid #dcdcdc;
@ -80,24 +80,52 @@ body.options {
text-decoration:none; text-decoration:none;
text-shadow:0px 1px 0px #ffffff; text-shadow:0px 1px 0px #ffffff;
} }
.usual #panel button.button:hover{ .pp-options .usual #panel button.button:hover{
background-color:#BBB; background-color:#BBB;
} }
.usual #panel button.button:active { .pp-options .usual #panel button.button:active {
position:relative; position:relative;
top:1px; top:1px;
} }
.usual div#tabs-content div { /*
.pp-options .usual div#tabs-content div {
padding: 3px 0 0 0; padding: 3px 0 0 0;
margin-top: -15px; margin-top: -15px;
clear: left; clear: left;
font: 10pt Georgia; font: 10pt Georgia;
color: #FFF; color: #FFF;
} }
.usual div#tabs-content div p { */
padding: 5px 0 0 15px;
} .pp-options .usual div a {
.usual div a {
color: #000; color: #000;
font-weight: bold; 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;
}

118
chrome_point_plus/js/options.js
View file

@ -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 // 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 // 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 // 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 // Google search
var checkbox_search_with_google = document.getElementById('option-search-with-google'); var checkbox_search_with_google = document.getElementById('option-search-with-google');
// WebSocket // WebSocket
//
var option_ws = document.getElementById('option-ws');
// Comments // 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 // Saving parameters
chrome.storage.sync.set({ 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_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() { }, function() {
// Update status to let user know options were saved. // Update status to let user know options were saved.
var status = document.getElementById('status'); var status = document.getElementById('status');
@ -43,15 +82,18 @@ function save_options() {
} }
// Restores select box state to saved value from localStorage. // Restores select box state to saved value from localStorage.
function restore_options() { function pp_restore_options() {
// Loading 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 // CTRL+Enter
if (options.option_ctrl_enter == true) { if (options.option_ctrl_enter == true) {
document.getElementById('option-ctrl-enter').checked = true; document.getElementById('option-ctrl-enter').checked = true;
} }
// Fancybox // Fancybox
//
if (options.option_fancybox == true) {
document.getElementById('option-fancybox').checked = true;
}
// Images // Images
if (options.option_fancybox_images == true) { if (options.option_fancybox_images == true) {
document.getElementById('option-fancybox-images').checked = true; document.getElementById('option-fancybox-images').checked = true;
@ -81,11 +123,31 @@ function restore_options() {
document.getElementById('option-search-with-google').checked = true; document.getElementById('option-search-with-google').checked = true;
} }
// WebSocket // WebSocket
//
if (options.option_ws == true) {
document.getElementById('option-ws').checked = true;
}
// Comments // Comments
if (options.option_ws_comments == true) { if (options.option_ws_comments == true) {
document.getElementById('option-ws-comments').checked = 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);

12
chrome_point_plus/js/point-plus.js
View file

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

3
chrome_point_plus/manifest.json
View file

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

134
chrome_point_plus/options.html
View file

@ -7,68 +7,104 @@
<script src="js/jquery.idTabs.min.js"></script> <script src="js/jquery.idTabs.min.js"></script>
</head> </head>
<body class="options"> <body class="pp-options">
<div class="tabs usual"> <div class="tabs usual">
<ul class="idTabs"> <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="#other">Other</a></li>
<li><a href="#websocket">WebSockets</a></li>
<li><a href="#feedback">Feedback</a></li> <li><a href="#feedback">Feedback</a></li>
</ul> </ul>
<div id="tabs-content"> <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>
<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> </div>
<p>
<label><input type="checkbox" id="option-visual-editor-post">Show visual editor for posts <div class="option">
</p> <input type="checkbox" id="option-fancybox-videos"><label for="option-fancybox-videos">Use for videos (YouTube, ...)</label>
<p> </div>
<label><input type="checkbox" id="option-search-with-google">Use Google search in header
</p> <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>
<div id="other"> <div class="tab-content" id="other">
<p> <div class="option">
<label><input type="checkbox" id="option-ctrl-enter">Send post and comments by CTRL+Enter</label> <input type="checkbox" id="option-ctrl-enter"><label for="option-ctrl-enter">Send post and comments by CTRL+Enter</label>
</p> </div>
<p>
<label><input type="checkbox" id="option-ws-comments">Retrieve comments automatically (WebSocket)</label> <div class="option">
</p> <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>
<div id="feedback"> <div class="tab-content" id="feedback">
<p> <div class="text">
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> 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> You can make a donation in the following ways:
<p> </p>
Yandex.Money: 41001539215836 <p>
</p> Yandex.Money: 41001539215836
<p> </p>
Novacoin: 4d1ctdZtKkv3kxGdAXjfNEjfFvtDVdbf65 <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>
</p> <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WW33X5J5WFSP4" target="_blank">PayPal</a>
</p>
</div>
</div> </div>
</div> </div>