- Options page, style and scripts refactoring
- Prepating for tree comments with WebSockets
This commit is contained in:
Alexey Skobkin
parent
819f63dd0f
commit
13c6f9c614
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
document.addEventListener('DOMContentLoaded', pp_restore_options);
|
||||
document.querySelector('#save').addEventListener('click', pp_save_options);
|
||||
|
|
@ -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 :)
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
|
|
|
|||
|
|
@ -7,68 +7,104 @@
|
|||
<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="#look-and-feel">Look & Feel</a></li>
|
||||
<li><a href="#media">Media</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">
|
||||
<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 class="tab-content" id="popups">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="look-and-feel">
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-layout-fluid">Fluid layout</label>
|
||||
</p>
|
||||
<p>
|
||||
<label><input type="checkbox" id="option-images-load-original">Load original images instead of thumbnails
|
||||
</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 class="tab-content" id="media">
|
||||
<div class="option">
|
||||
<input type="checkbox" id="option-fancybox"><label for="option-fancybox">Enable Fancybox</label>
|
||||
|
||||
<div class="option">
|
||||
<input type="checkbox" id="option-fancybox-images"><label for="option-fancybox-images">Use for images</label>
|
||||
</div>
|
||||
|
||||
<div class="option">
|
||||
<input type="checkbox" id="option-fancybox-videos"><label for="option-fancybox-videos">Use for videos (YouTube, ...)</label>
|
||||
</div>
|
||||
|
||||
<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 id="other">
|
||||
<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 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 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 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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue