From 769d1bb71a60343c035f354e39fb99ccc13bd00e Mon Sep 17 00:00:00 2001 From: isqua Date: Mon, 5 Jan 2015 22:40:26 +0300 Subject: [PATCH] Enhance options --- chrome_point_plus/css/options.css | 238 +++++++++-------- chrome_point_plus/js/i18n.js | 8 +- chrome_point_plus/js/options.js | 132 ++++++---- chrome_point_plus/options.html | 416 +++++++++++++++++------------- 4 files changed, 458 insertions(+), 336 deletions(-) diff --git a/chrome_point_plus/css/options.css b/chrome_point_plus/css/options.css index 91da353..a4925fe 100644 --- a/chrome_point_plus/css/options.css +++ b/chrome_point_plus/css/options.css @@ -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; } diff --git a/chrome_point_plus/js/i18n.js b/chrome_point_plus/js/i18n.js index 0c2edf8..89d2ea8 100644 --- a/chrome_point_plus/js/i18n.js +++ b/chrome_point_plus/js/i18n.js @@ -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); }); -}); \ No newline at end of file +}, false); diff --git a/chrome_point_plus/js/options.js b/chrome_point_plus/js/options.js index bb92350..2cee9a6 100644 --- a/chrome_point_plus/js/options.js +++ b/chrome_point_plus/js/options.js @@ -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 @skobkin-ru
\n' - + '& @NokitaKaze' - ); +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(); diff --git a/chrome_point_plus/options.html b/chrome_point_plus/options.html index ef0a7fa..406b216 100644 --- a/chrome_point_plus/options.html +++ b/chrome_point_plus/options.html @@ -1,241 +1,299 @@ - + + Point Plus options - - - - + + -
- +
+ -
-
+
+
- + + -
- -
+ -
- -
+ -
- -
+ -
- -
+ -
- -
+
-
- -
+
- + + + +
- -
- -
- + +
- - + +
-
- -
+
- + + -
- -
+
- + + -
- -
+
- + + -
- -
+ -
- -
+
- + + -
- -
+ +
+ + + +
+ +
+ + + + + + +
+ + + +
- + + + + +
+
+
+ +
+ + + + + + + + +
+ + + +
+ + +
+ + + + + + + + + +
- + + + + +
+ + +
+ +
+
+ +
- + + + + + +
- + + -
- -
-
+ -
- - -
- -
+
-
+ -
-
- -
- -
- -
- -
- -
- -
- -
- -
- - -
- - - -
-
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- - -
- -
-
- -
- -
-
- -
-
- - -
- - -
- -
- -
- -
-
- -
- - -
- -
- -
- -
-
-
-
- -
+
-
-
+ + +
+ -
-
- -
-
-
-
-
+