skobkin
/
chrome_point_plus
mirror of https://bitbucket.org/skobkin/chrome_point_plus.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Enhance options

This commit is contained in:
isqua 2015-01-05 22:40:26 +03:00
parent a8f430deb4
commit 769d1bb71a
4 changed files with 458 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
chrome_point_plus/css/options.css
View File

@ -1,132 +1,162 @@
/* Options page */
.pp-options {
body
{
font-family: Arial;
font-size: 14px;
line-height: 20px;
width: 450px;
height: 450px;
background: #EEE;
}
/* Tabs style */
.pp-options .usual {
width:450px;
margin: 5px;
}
.pp-options .usual ul {
padding: 0 0 10px 0;
margin: 0 0 18px 0;
}
.pp-options .usual li {
list-style: none;
float: left;
}
.pp-options .usual ul a {
display: block;
padding: 6px 10px;
text-decoration: none!important;
margin: 1px;
margin-left: 0;
font: 12px Georgia;
color: #FFF;
background: #C8C8C8;
border-radius: 15px 15px 0 0;
}
.pp-options .usual ul a:hover {
color: #FFF;
background: #BBB;
}
.pp-options .usual ul a.selected {
margin-bottom: 0;
color: #FFF;
background: #A5A5A5;
cursor: default;
}
.pp-options .usual div#tabs-content {
margin: 0 5px 0 0;
margin: 0;
padding: 5px;
background-color: #A5A5A5;
border-radius: 0 15px 0 0;
}
.pp-options .usual #panel {
background: #B5B5B5;
margin: 0 5px 0 0;
padding: 10px;
border-radius: 0 0 15px 15px;
display: flex;
}
.pp-options .usual #panel button.button {
background-color: #C8C8C8;
border-radius:15px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:#000;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding: 5px 25px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
.pp-options .usual #panel button.button:hover{
background-color:#BBB;
}
.pp-options .usual #panel button.button:active {
position:relative;
top:1px;
}
.pp-options .usual div a {
color: #000;
font-weight: bold;
background: #eee;
}
.pp-options .tab-content {
padding: 5px 0 0 5px;
a
{
color: #1abef1;
}
.pp-options .option-node {
p
{
margin: 0;
padding: 0;
}
.tabs-list
{
position: relative;
z-index: 1;
display: block;
margin: 5px 0 5px 15px;
margin: 0 0 -1px;
padding: 0;
}
.pp-options .option-node label {
font: 10pt Georgia;
color: #FFF;
.tabs-item
{
display: inline-block;
padding: 7px 15px 3px;
list-style-type: none;
text-decoration: none;
border: 1px solid transparent;
}
.pp-options .tab-content .text {
margin-left: 15px;
.tabs-item.selected
{
cursor: default;
border-color: #dedede;
border-bottom-color: #fff;
background: #fff;
}
/* Disables subcheckboxes if parent disabled */
.pp-options .option-node input[type="checkbox"]:not(:checked) ~.option-node {
.tabs-content
{
position: relative;
height: 345px;
margin: 0;
padding: 0;
border: 1px solid #dedede;
border-radius: 0 0 3px 3px;
background: #fff;
}
.tabs-content::before
{
position: absolute;
top: 0;
right: 0;
left: 0;
height: 20px;
content: '';
background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 30%, rgba(255,255,255,0) 100%);
background-size: 20px 20px;
}
.tabs-content-item
{
display: none;
overflow: auto;
box-sizing: border-box;
max-height: 100%;
margin: 0;
padding: 10px 15px 5px;
border: none;
background: transparent;
}
.tabs-content-item.selected
{
display: block;
}
input[type='checkbox']
{
margin-right: 5px;
margin-left: 0;
vertical-align: 1px;
}
.option-node
{
display: block;
padding: 0 0 5px 21px;
text-indent: -21px;
}
.option-node input[type='checkbox']:not(:checked) ~ .option-node
{
display: none;
}
.pp-options .option-node input[type="checkbox"]:not(:checked) ~.option-node label {
color: #BBB;
.option-node input[type='checkbox']:not(:checked) ~ .option-node label
{
color: #999;
}
/* Panel */
.pp-options .left, .pp-options .right {
width: 50%;
.footer
{
margin: 0;
padding: 10px 15px;
}
.pp-options .left {
float: left;
.saved
{
position: relative;
z-index: 1;
margin: -2px 1px 0;
padding: 10px 15px;
transition: all .2s;
transform-origin: 50% 0;
color: #fff;
border-top: 1px solid #dedede;
border-radius: 0 0 2px 2px;
background: #4caf50;
}
.pp-options .right {
float: right;
}
.saved.hidden
{
transform: scaleY(.5);
.pp-options #status {
display: block;
}
.pp-options #pp-version {
margin-top: 6px;
text-align: right;
opacity: 0;
}

8
chrome_point_plus/js/i18n.js
View File

@ -1,6 +1,6 @@
$(document).ready(function() {
document.addEventListener('DOMContentLoaded', function() {
// Processing all emenents contains data-i18n attribute
$('[data-i18n]').each(function() {
$(this).html(chrome.i18n.getMessage($(this).data('i18n')));
Array.prototype.forEach.call(document.querySelectorAll('[data-i18n]'), function(elem) {
elem.innerHTML = chrome.i18n.getMessage(elem.dataset.i18n);
});
});
}, false);

132
chrome_point_plus/js/options.js
View File

@ -22,26 +22,27 @@ function getVersion() {
*/
function Options() {
this.version = getVersion();
this.form = document.querySelector('form');
this.showVersion();
this.restore();
$('#tabs-content').on('click', 'input', this._onChange.bind(this));
this.form.addEventListener('change', this._onChange.bind(this));
this.listenTabs();
}
/**
* Получает версию настроек. Если она не равна версии приложения, записывает в сторедж плагина настройки из инпутов
* и версию приложения.
*/
Options.prototype.init = function() {
Options.prototype.updateOptionsFromFrom = function() {
chrome.storage.sync.get('options_version', function(data) {
this.logVersion(data.options_version);
if (data.options_version !== this.version) {
console.log('Initializing options...');
$('#tabs-content input').each(function(index, input) {
this.updateOptionFromInput($(input));
}.bind(this));
Array.prototype.forEach.call(this.form.elements, this.updateOptionFromInput.bind(this));
chrome.storage.sync.set({
options: this.getValues(),
@ -49,7 +50,9 @@ Options.prototype.init = function() {
}, function() {
console.log('Default options initialized. Version upgraded to %s.', this.version);
alert(chrome.i18n.getMessage('options_text_new_version'));
if ( ! confirm(chrome.i18n.getMessage('options_text_new_version'))) {
window.close();
}
});
}
}.bind(this));
@ -63,11 +66,7 @@ Options.prototype.save = function() {
console.log('Saving options: %O', ppOptions);
// Saving parameters
chrome.storage.sync.set({ options: ppOptions }, function() {
// Update status to let user know options were saved.
$('#status').html(chrome.i18n.getMessage('options_text_saved'));
});
chrome.storage.sync.set({ options: ppOptions }, this.updateStatus.bind(this));
};
/**
@ -80,26 +79,28 @@ Options.prototype.restore = function() {
this._options = data.options || {};
// Setting options in DOM
$.each(this._options, function(key, data) {
switch (data.type) {
case 'boolean':
if (data.value) {
$('#' + this.getOptionName(key)).prop('checked', true);
}
break;
Object.keys(this._options).forEach(function(key) {
var data = this._options[key],
input = this.form.elements[this.getOptionName(key)];
case 'enum':
$('.option-node .option-enum[name="' + this.getOptionName(key) + '"][value="' + data.value + '"]').prop('checked', true);
break;
if (input) {
switch (data.type) {
case 'boolean':
input.checked = data.value;
break;
default:
console.warn('Invalid option "%s" type: %O', key, data);
break;
case 'enum':
input.value = data.value;
break;
default:
console.warn('Invalid option "%s" type: %O', key, data);
break;
}
}
}.bind(this));
this.showCopyright();
this.init();
this.updateOptionsFromFrom();
}.bind(this));
};
@ -110,43 +111,45 @@ Options.prototype.getValues = function() {
return this._options;
};
/**
* @param {Event} event Событие изменения
*/
Options.prototype._onChange = function(event) {
var $input = $(event.target);
this.updateOptionFromInput($input);
this.updateOptionFromInput(event.target);
this.save();
};
Options.prototype.updateOptionFromInput = function($input) {
if (this.isBoolean($input)) {
this._options[this.getOptionKey($input.prop('id'))] = {
Options.prototype.updateOptionFromInput = function(input) {
var key = this.getOptionKey(input.name);
if (this.isBoolean(input)) {
this._options[key] = {
type: 'boolean',
value: $input.prop('checked')
value: input.checked
};
} else if (this.isEnum($input)) {
this._options[this.getOptionKey($input.prop('name'))] = {
} else if (this.isEnum(input)) {
this._options[key] = {
type: 'enum',
value: $input.val()
value: input.value
};
}
};
/**
* @param {jQuery} $option Элемент опции
* @param {HTMLElement} option Элемент опции
* @returns {Boolean} Является ли настройка булевой
*/
Options.prototype.isBoolean = function($option) {
return $option.hasClass('option-boolean');
Options.prototype.isBoolean = function(option) {
return option.getAttribute('type') === 'checkbox';
};
/**
*
* @param {jQuery} $option Элемент опции
* @param {HTMLElement} option Элемент опции
* @returns {Boolean} Является ли настройка енумом
*/
Options.prototype.isEnum = function($option) {
return $option.hasClass('option-enum');
Options.prototype.isEnum = function(option) {
return option.getAttribute('type') === 'radio';
};
/**
@ -174,13 +177,10 @@ Options.prototype.logVersion = function(optionsVersion) {
};
/**
* Добавляет копирайт в подвал
* Добавляет номер версии в подвал
*/
Options.prototype.showCopyright = function() {
$('#pp-version').html('Point+ ' + this.version
+ ' by <a href="https://skobkin-ru.point.im/" target="_blank">@skobkin-ru</a><br>\n'
+ '& <a href="https://nokitakaze.point.im/" target="_blank">@NokitaKaze</a>'
);
Options.prototype.showVersion = function() {
document.querySelector('#version').innerHTML = this.version;
};
/**
@ -205,4 +205,38 @@ Options.prototype.checkOldStyle = function() {
});
};
/**
* Показывает плашку про то, что настройки сохранились и надо обновить страницу
*/
Options.prototype.updateStatus = function() {
this.status = this.status || document.querySelector('.saved');
this.status.classList.remove('hidden');
};
/**
* Слушает события на табах
*/
Options.prototype.listenTabs = function() {
var options = this;
options._selectedItem = document.querySelector('.tabs-item.selected');
options._selectedContent = document.querySelector('.tabs-content-item.selected');
Array.prototype.forEach.call(document.querySelectorAll('.tabs-item'), function(tabItem) {
var tabContent = document.querySelector(tabItem.getAttribute('href'));
tabItem.addEventListener('click', function() {
options._selectedItem.classList.remove('selected');
options._selectedContent.classList.remove('selected');
this.classList.add('selected');
tabContent.classList.add('selected');
options._selectedItem = this;
options._selectedContent = tabContent;
}, false);
});
};
new Options();

416
chrome_point_plus/options.html
View File

@ -1,241 +1,299 @@
<html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>Point Plus options</title>
<link rel="stylesheet" href="css/options.css" type="text/css"/>
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/jquery.idTabs.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="css/options.css" type="text/css">
</head>
<body class="pp-options">
<div class="tabs usual">
<ul class="idTabs">
<li><a href="#media" data-i18n="options_tabs_media"></a></li>
<li><a href="#other" data-i18n="options_tabs_other"></a></li>
<li><a href="#websocket" data-i18n="options_tabs_websocket"></a></li>
<li><a href="#feedback" data-i18n="options_tabs_feedback"></a></li>
</ul>
<main class="tabs">
<nav class="tabs-list">
<a class="tabs-item selected" href="#media" data-i18n="options_tabs_media"></a>
<a class="tabs-item" href="#other" data-i18n="options_tabs_other"></a>
<a class="tabs-item" href="#websocket" data-i18n="options_tabs_websocket"></a>
<a class="tabs-item" href="#feedback" data-i18n="options_tabs_feedback"></a>
</nav>
<div id="tabs-content">
<div class="tab-content" id="media">
<form class="tabs-content">
<section class="tabs-content-item selected" id="media">
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox"><label for="option-fancybox" data-i18n="option_fancybox"></label>
<input type="checkbox" name="option-fancybox" id="option-fancybox">
<label for="option-fancybox" data-i18n="option_fancybox"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox-images"><label for="option-fancybox-images" data-i18n="option_fancybox_images"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-fancybox-images">
<span data-i18n="option_fancybox_images"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox-videos"><label for="option-fancybox-videos" data-i18n="option_fancybox_videos"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-fancybox-videos">
<span data-i18n="option_fancybox_videos"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox-posts"><label for="option-fancybox-posts" data-i18n="option_fancybox_posts"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-fancybox-posts">
<span data-i18n="option_fancybox_posts"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox-bind-images-to-one-flow"><label for="option-fancybox-bind-images-to-one-flow" data-i18n="option_fancybox_bind_images_to_one_flow"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-fancybox-bind-images-to-one-flow">
<span data-i18n="option_fancybox_bind_images_to_one_flow"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fancybox-smart-hints"><label for="option-fancybox-smart-hints" data-i18n="option_fancybox_smart_hints"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-fancybox-smart-hints">
<span data-i18n="option_fancybox_smart_hints"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-images-load-original"><label for="option-images-load-original" data-i18n="option_images_load_original"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-images-load-original">
<span data-i18n="option_images_load_original"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding"><label for="option-embedding" data-i18n="option_embedding"></label>
<input type="checkbox" name="option-embedding" id="option-embedding">
<label for="option-embedding" data-i18n="option_embedding"></label>
<label class="option-node">
<input type="checkbox" name="option-images-load-booru">
<span data-i18n="option_images_load_booru"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-images-load-booru"><label for="option-images-load-booru" data-i18n="option_images_load_booru"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-videos-parse-links"><label for="option-videos-parse-links" data-i18n="option_videos_parse_links"></label>
<input type="checkbox" name="option-videos-parse-links" id="option-videos-parse-links">
<label for="option-videos-parse-links" data-i18n="option_videos_parse_links"></label>
<div class="option-node">
<input type="radio" class="option-enum" name="option-videos-parse-links-type" id="option-videos-parse-webm" value="webm" ><label for="option-videos-parse-webm" data-i18n="option_videos_parse_webm"></label>
<input type="radio" class="option-enum" name="option-videos-parse-links-type" id="option-videos-parse-all-links" value="all" checked="checked"><label for="option-videos-parse-all-links" data-i18n="option_videos_parse_all_links"></label>
<label>
<input type="radio" name="option-videos-parse-links-type" value="webm">
<span data-i18n="option_videos_parse_webm"></span>
</label>
<label>
<input type="radio" name="option-videos-parse-links-type" value="all" checked="checked">
<span data-i18n="option_videos_parse_all_links"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-videos-parse-leave-links"><label for="option-videos-parse-leave-links" data-i18n="option_videos_parse_leave_links"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-videos-parse-leave-links">
<span data-i18n="option_videos_parse_leave_links"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-audios-parse-links"><label for="option-audios-parse-links" data-i18n="option_audios_parse_links"></label>
<input type="checkbox" name="option-audios-parse-links" id="option-audios-parse-links">
<label for="option-audios-parse-links" data-i18n="option_audios_parse_links"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-audios-parse-leave-links"><label for="option-audios-parse-leave-links" data-i18n="option_embedding_soundcloud_orig_link"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-audios-parse-leave-links">
<span data-i18n="option_embedding_soundcloud_orig_link"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-soundcloud"><label for="option-embedding-soundcloud" data-i18n="option_embedding_soundcloud"></label>
<input type="checkbox" name="option-embedding-soundcloud" id="option-embedding-soundcloud">
<label for="option-embedding-soundcloud" data-i18n="option_embedding_soundcloud"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-soundcloud-orig-link"><label for="option-embedding-soundcloud-orig-link" data-i18n="option_embedding_soundcloud_orig_link"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-embedding-soundcloud-orig-link">
<span data-i18n="option_embedding_soundcloud_orig_link"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-pleercom"><label for="option-embedding-pleercom" data-i18n="option_embedding_pleercom"></label>
<input type="checkbox" name="option-embedding-pleercom" id="option-embedding-pleercom">
<label for="option-embedding-pleercom" data-i18n="option_embedding_pleercom"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-pleercom-nokita-server"><label for="option-embedding-pleercom-nokita-server" data-i18n="option_embedding_pleercom_nokita_server"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-embedding-pleercom-nokita-server">
<span data-i18n="option_embedding_pleercom_nokita_server"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-pleercom-orig-link"><label for="option-embedding-pleercom-orig-link" data-i18n="option_embedding_soundcloud_orig_link"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-embedding-pleercom-orig-link">
<span data-i18n="option_embedding_soundcloud_orig_link"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-coubcom"><label for="option-embedding-coubcom" data-i18n="option_embedding_coubcom"></label>
<input type="checkbox" name="option-embedding-coubcom" id="option-embedding-coubcom">
<label for="option-embedding-coubcom" data-i18n="option_embedding_coubcom"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-coubcom-orig-link"><label for="option-embedding-coubcom-orig-link" data-i18n="option_embedding_soundcloud_orig_link"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-embedding-coubcom-orig-link">
<span data-i18n="option_embedding_soundcloud_orig_link"></span>
</label>
</div>
<label class="option-node">
<input type="checkbox" name="option-embedding-twitter-tweets">
<span data-i18n="option_embedding_twitter_tweets"></label>
</label>
</div>
<div class="option-node">
<input type="checkbox" name="option-nsfw" id="option-nsfw">
<label for="option-nsfw" data-i18n="option_nsfw"></label>
<label class="option-node">
<input type="checkbox" name="option-nsfw-hide-posts">
<span data-i18n="option_nsfw_hide_posts"></label>
</label>
<div class="option-node">
<input type="checkbox" name="option-nsfw-blur-posts-images" id="option-nsfw-blur-posts-images">
<label for="option-nsfw-blur-posts-images" data-i18n="option_nsfw_blur_posts_images"></label>
<label class="option-node">
<input type="checkbox" name="option-nsfw-blur-posts-entire">
<span data-i18n="option_nsfw_blur_posts_entire"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-embedding-twitter-tweets"><label for="option-embedding-twitter-tweets" data-i18n="option_embedding_twitter_tweets"></label>
<input type="checkbox" name="option-nsfw-blur-comments-images" id="option-nsfw-blur-comments-images">
<label for="option-nsfw-blur-comments-images" data-i18n="option_nsfw_blur_comments_images"></label>
<label class="option-node">
<input type="checkbox" name="option-nsfw-blur-comments-entire">
<span data-i18n="option_nsfw_blur_comments_entire"></span>
</label>
</div>
</div>
</section>
<section class="tabs-content-item" id="other">
<label class="option-node">
<input type="checkbox" name="option-ctrl-enter" disabled="disabled">
<span data-i18n="option_ctrl_enter"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-fluid-layout">
<span data-i18n="option_fluid_layout"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-visual-editor-post">
<span data-i18n="option_visual_editor_post"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-search-with-google">
<span data-i18n="option_search_with_google"></span>
</label>
<div class="option-node">
<input type="checkbox" name="option-enlarge-font" id="option-enlarge-font">
<label for="option-enlarge-font" data-i18n="option_enlarge_font"></label>
<div class="option-node">
<label>
<input type="radio" name="option-enlarge-font-size" value="85" checked="checked"> 0.85 em
</label>
<label>
<input type="radio" name="option-enlarge-font-size" value="100"> 1 em
</label>
<label>
<input type="radio" name="option-enlarge-font-size" value="110"> 1.1 em
</label>
</div>
</div>
<label class="option-node">
<input type="checkbox" name="option-at-before-username">
<span data-i18n="option_at_before_username"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-other-hightlight-post-comments">
<span data-i18n="option_other_hightlight_post_comments"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-other-show-recommendation-count">
<span data-i18n="option_other_show_recommendation_count"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-other-scroll-space-key">
<span data-i18n="option_other_scroll_space_key"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-other-comments-nesting-level">
<span data-i18n="option_other_comments_nesting_level"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw"><label for="option-nsfw" data-i18n="option_nsfw"></label>
<input type="checkbox" name="option-other-comments-count-refresh" id="option-other-comments-count-refresh">
<label for="option-other-comments-count-refresh" data-i18n="option_other_comments_count_refresh"></label>
<label class="option-node">
<input type="checkbox" name="option-other-comments-count-refresh-title">
<span data-i18n="option_other_comments_count_refresh_title"></span>
</label>
</div>
<label class="option-node">
<input type="checkbox" name="option-other-comments-user-system">
<span data-i18n="option_other_comments_user_system"></span>
</label>
</section>
<section class="tabs-content-item" id="websocket">
<div class="option-node">
<input type="checkbox" name="option-ws" id="option-ws">
<label for="option-ws" data-i18n="option_ws"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw-hide-posts"><label for="option-nsfw-hide-posts" data-i18n="option_nsfw_hide_posts"></label>
<input type="checkbox" name="option-ws-comments" id="option-ws-comments">
<label for="option-ws-comments" data-i18n="option_ws_comments"></label>
<label class="option-node">
<input type="checkbox" name="option-ws-comments-color-fadeout">
<span data-i18n="option_ws_comments_color_fadeout"></span>
</label>
<label class="option-node">
<input type="checkbox" name="option-ws-comments-notifications">
<span data-i18n="option_ws_comments_notifications"></span>
</label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw-blur-posts-images"><label for="option-nsfw-blur-posts-images" data-i18n="option_nsfw_blur_posts_images"></label>
<input type="checkbox" name="option-ws-feeds" id="option-ws-feeds" disabled>
<label for="option-ws-feeds" data-i18n="option_ws_feeds"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw-blur-posts-entire"><label for="option-nsfw-blur-posts-entire" data-i18n="option_nsfw_blur_posts_entire"></label>
</div>
</div>
<label class="option-node">
<input type="checkbox" name="option-ws-feeds-subscriptions">
<span data-i18n="option_ws_feeds_subscriptions"></span>
</label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw-blur-comments-images"><label for="option-nsfw-blur-comments-images" data-i18n="option_nsfw_blur_comments_images"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-nsfw-blur-comments-entire"><label for="option-nsfw-blur-comments-entire" data-i18n="option_nsfw_blur_comments_entire"></label>
</div>
<label class="option-node">
<input type="checkbox" name="option-ws-feeds-blogs">
<span data-i18n="option_ws_feeds_blogs"></span>
</label>
</div>
</div>
</div>
</section>
<div class="tab-content" id="other">
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ctrl-enter" disabled="disabled"><label for="option-ctrl-enter" data-i18n="option_ctrl_enter"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-fluid-layout"><label for="option-fluid-layout" data-i18n="option_fluid_layout"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-visual-editor-post"><label for="option-visual-editor-post" data-i18n="option_visual_editor_post"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-search-with-google"><label for="option-search-with-google" data-i18n="option_search_with_google"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-enlarge-font"><label for="option-enlarge-font" data-i18n="option_enlarge_font"></label>
<div class="option-node">
<input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-85" value="85" checked="checked"><label for="option-enlarge-font-size-85">0.85em</label>
<input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-100" value="100"><label for="option-enlarge-font-size-100">1em</label>
<input type="radio" class="option-enum" name="option-enlarge-font-size" id="option-enlarge-font-size-110" value="110"><label for="option-enlarge-font-size-110">1.1em</label>
</div>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-at-before-username"><label for="option-at-before-username" data-i18n="option_at_before_username"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-hightlight-post-comments"><label for="option-other-hightlight-post-comments" data-i18n="option_other_hightlight_post_comments"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-show-recommendation-count"><label for="option-other-show-recommendation-count" data-i18n="option_other_show_recommendation_count"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-scroll-space-key"><label for="option-other-scroll-space-key" data-i18n="option_other_scroll_space_key"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-comments-nesting-level"><label for="option-other-comments-nesting-level" data-i18n="option_other_comments_nesting_level"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-comments-count-refresh"><label for="option-other-comments-count-refresh" data-i18n="option_other_comments_count_refresh"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-comments-count-refresh-title"><label for="option-other-comments-count-refresh-title" data-i18n="option_other_comments_count_refresh_title"></label>
</div>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-other-comments-user-system"><label for="option-other-comments-user-system" data-i18n="option_other_comments_user_system"></label>
</div>
</div>
<div class="tab-content" id="websocket">
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws"><label for="option-ws" data-i18n="option_ws"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-comments"><label for="option-ws-comments" data-i18n="option_ws_comments"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-comments-color-fadeout"><label for="option-ws-comments-color-fadeout" data-i18n="option_ws_comments_color_fadeout"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-comments-notifications"><label for="option-ws-comments-notifications" data-i18n="option_ws_comments_notifications"></label>
</div>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-feeds" disabled><label for="option-ws-feeds" data-i18n="option_ws_feeds"></label>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-feeds-subscriptions"><label for="option-ws-feeds-subscriptions" data-i18n="option_ws_feeds_subscriptions"></label>
</div>
<div class="option-node">
<input type="checkbox" class="option-boolean" id="option-ws-feeds-blogs"><label for="option-ws-feeds-blogs" data-i18n="option_ws_feeds_blogs"></label>
</div>
</div>
</div>
</div>
<div class="tab-content" id="feedback">
<section class="tabs-content-item" id="feedback">
<div class="text" data-i18n="options_feedback_text"></div>
</div>
</div>
</section>
</form>
</main>
<p class="saved hidden" data-i18n="options_text_saved"></p>
<div id="panel">
<div class="left" id="status"></div>
<div class="right">
<div id="pp-version"></div>
</div>
</div>
</div>
<footer class="footer">
<p>Point+ <span id="version"></span> by
<a href="https://skobkin-ru.point.im/" target="_blank">@skobkin-ru</a> &
<a href="https://nokitakaze.point.im/" target="_blank">@NokitaKaze</a>
</p>
</footer>
<script src="js/options.js"></script>
<script src="js/i18n.js"></script>