Refactoring: format code according to Google style guides
Change-Id: I9b6a5c2f1237e0e3f49fed94991168517cb8b8a9
diff --git a/src/background.js b/src/background.js
index ed86f66..b7857c8 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,266 +1,266 @@
var array_elements = [], translator_tab = null, translator_window = null;
function isEmpty(obj) {
- return Object.keys(obj).length === 0;
+ return Object.keys(obj).length === 0;
}
function getTranslationUrl(lang, text) {
- var params = new URLSearchParams({
- sl: 'auto',
- tl: lang,
- text: text,
- op: 'translate',
- });
- return 'https://translate.google.com/?' + params.toString();
+ var params = new URLSearchParams({
+ sl: 'auto',
+ tl: lang,
+ text: text,
+ op: 'translate',
+ });
+ return 'https://translate.google.com/?' + params.toString();
}
function translationClick(info, tab) {
- console.log(info.selectionText);
- chrome.storage.sync.get('uniquetab', items => {
- var url = getTranslationUrl(
- array_elements[info.menuItemId]['langCode'], info.selectionText);
- var settings_tab = {url};
- if (translator_tab && items.uniquetab == 'yep') {
- chrome.tabs.update(translator_tab, settings_tab, tab => {
- chrome.tabs.highlight(
- {
- windowId: tab.windowId,
- tabs: tab.index,
- },
- _ => {
- chrome.windows.update(tab.windowId, {
- focused: true,
- });
- });
- });
- } else if (items.uniquetab == 'panel') {
- chrome.windows.create(
- {
- type: 'panel',
- url,
- width: 1000,
- height: 382,
- },
- function(tab) {
- translator_window = tab.windowId;
- translator_tab = tab.id;
- chrome.windows.onRemoved.addListener(function(windowId) {
- if (windowId == translator_window) {
- translator_window = null;
- translator_tab = null;
- }
- });
- });
- } else {
- chrome.tabs.create(settings_tab, function(tab) {
- translator_window = tab.windowId;
- translator_tab = tab.id;
- chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
- if (tabId == translator_tab) {
- translator_window = null;
- translator_tab = null;
- }
- });
- });
- }
- });
+ console.log(info.selectionText);
+ chrome.storage.sync.get('uniquetab', items => {
+ var url = getTranslationUrl(
+ array_elements[info.menuItemId]['langCode'], info.selectionText);
+ var settings_tab = {url};
+ if (translator_tab && items.uniquetab == 'yep') {
+ chrome.tabs.update(translator_tab, settings_tab, tab => {
+ chrome.tabs.highlight(
+ {
+ windowId: tab.windowId,
+ tabs: tab.index,
+ },
+ _ => {
+ chrome.windows.update(tab.windowId, {
+ focused: true,
+ });
+ });
+ });
+ } else if (items.uniquetab == 'panel') {
+ chrome.windows.create(
+ {
+ type: 'panel',
+ url,
+ width: 1000,
+ height: 382,
+ },
+ function(tab) {
+ translator_window = tab.windowId;
+ translator_tab = tab.id;
+ chrome.windows.onRemoved.addListener(function(windowId) {
+ if (windowId == translator_window) {
+ translator_window = null;
+ translator_tab = null;
+ }
+ });
+ });
+ } else {
+ chrome.tabs.create(settings_tab, function(tab) {
+ translator_window = tab.windowId;
+ translator_tab = tab.id;
+ chrome.tabs.onRemoved.addListener(function(tabId, removeInfo) {
+ if (tabId == translator_tab) {
+ translator_window = null;
+ translator_tab = null;
+ }
+ });
+ });
+ }
+ });
}
function openOptionsPage() {
- if (chrome.runtime.openOptionsPage) {
- // New way to open options pages, if supported (Chrome 42+).
- chrome.runtime.openOptionsPage();
- } else {
- chrome.tabs.create(
- {
- 'url': 'chrome-extension://' +
- chrome.i18n.getMessage('@@extension_id') + '/options.html',
- 'active': true
- },
- tab => {
- chrome.windows.update(tab.windowId, {focused: true});
- });
- }
+ if (chrome.runtime.openOptionsPage) {
+ // New way to open options pages, if supported (Chrome 42+).
+ chrome.runtime.openOptionsPage();
+ } else {
+ chrome.tabs.create(
+ {
+ 'url': 'chrome-extension://' +
+ chrome.i18n.getMessage('@@extension_id') + '/options.html',
+ 'active': true
+ },
+ tab => {
+ chrome.windows.update(tab.windowId, {focused: true});
+ });
+ }
}
function createmenus() {
- chrome.storage.sync.get('translateinto', function(items) {
- chrome.contextMenus.removeAll();
+ chrome.storage.sync.get('translateinto', function(items) {
+ chrome.contextMenus.removeAll();
- var count = 0, singleone = true;
+ var count = 0, singleone = true;
- for (var language of Object.keys(items.translateinto)) {
- if (count == 0) {
- count++;
- } else {
- singleone = false;
- break;
- }
- }
+ for (var language of Object.keys(items.translateinto)) {
+ if (count == 0) {
+ count++;
+ } else {
+ singleone = false;
+ break;
+ }
+ }
- if (singleone) {
- for (var language_id of Object.keys(items.translateinto)) {
- var language = items.translateinto[language_id];
- var languagem = isoLangs[language];
- var id = chrome.contextMenus.create({
- 'id': 'tr_single_parent',
- 'title': chrome.i18n.getMessage('contextmenu_title2', languagem.name),
- 'contexts': ['selection'],
- });
- array_elements[id] = new Array();
- array_elements[id]['langCode'] = language;
- }
- } else {
- var parentEl = chrome.contextMenus.create({
- 'id': 'parent',
- 'title': chrome.i18n.getMessage('contextmenu_title'),
- 'contexts': ['selection']
- });
- for (var language_id of Object.keys(items.translateinto)) {
- var language = items.translateinto[language_id];
- var languagem = isoLangs[language];
- var title = languagem.name + ' (' + languagem.nativeName + ')';
- var id = chrome.contextMenus.create({
- 'id': 'tr_language_' + language,
- 'title': title,
- 'parentId': parentEl,
- 'contexts': ['selection']
- });
- array_elements[id] = new Array();
- array_elements[id]['langCode'] = language;
- }
- chrome.contextMenus.create({
- 'id': 'tr_separator',
- 'type': 'separator',
- 'parentId': parentEl,
- 'contexts': ['selection']
- });
- chrome.contextMenus.create({
- 'id': 'tr_options',
- 'title': chrome.i18n.getMessage('contextmenu_edit'),
- 'parentId': parentEl,
- 'contexts': ['selection']
- });
- }
- });
+ if (singleone) {
+ for (var language_id of Object.keys(items.translateinto)) {
+ var language = items.translateinto[language_id];
+ var languagem = isoLangs[language];
+ var id = chrome.contextMenus.create({
+ 'id': 'tr_single_parent',
+ 'title': chrome.i18n.getMessage('contextmenu_title2', languagem.name),
+ 'contexts': ['selection'],
+ });
+ array_elements[id] = new Array();
+ array_elements[id]['langCode'] = language;
+ }
+ } else {
+ var parentEl = chrome.contextMenus.create({
+ 'id': 'parent',
+ 'title': chrome.i18n.getMessage('contextmenu_title'),
+ 'contexts': ['selection']
+ });
+ for (var language_id of Object.keys(items.translateinto)) {
+ var language = items.translateinto[language_id];
+ var languagem = isoLangs[language];
+ var title = languagem.name + ' (' + languagem.nativeName + ')';
+ var id = chrome.contextMenus.create({
+ 'id': 'tr_language_' + language,
+ 'title': title,
+ 'parentId': parentEl,
+ 'contexts': ['selection']
+ });
+ array_elements[id] = new Array();
+ array_elements[id]['langCode'] = language;
+ }
+ chrome.contextMenus.create({
+ 'id': 'tr_separator',
+ 'type': 'separator',
+ 'parentId': parentEl,
+ 'contexts': ['selection']
+ });
+ chrome.contextMenus.create({
+ 'id': 'tr_options',
+ 'title': chrome.i18n.getMessage('contextmenu_edit'),
+ 'parentId': parentEl,
+ 'contexts': ['selection']
+ });
+ }
+ });
}
chrome.runtime.onInstalled.addListener(function(details) {
- chrome.storage.sync.get(null, function(items) {
- if (details.reason == 'install') {
- if (isEmpty(items)) {
- var settings = {'translateinto': {}, 'uniquetab': ''},
- default_language =
- chrome.i18n.getMessage('@@ui_locale').split('_')[0];
+ chrome.storage.sync.get(null, function(items) {
+ if (details.reason == 'install') {
+ if (isEmpty(items)) {
+ var settings = {'translateinto': {}, 'uniquetab': ''},
+ default_language =
+ chrome.i18n.getMessage('@@ui_locale').split('_')[0];
- if (isoLangs[default_language] != 'undefined') {
- settings.translateinto[default_language] = default_language;
- }
+ if (isoLangs[default_language] != 'undefined') {
+ settings.translateinto[default_language] = default_language;
+ }
- chrome.storage.sync.set(settings, function() {
- chrome.notifications.create('install', {
- type: 'basic',
- iconUrl: 'icons/translate-128.png',
- title: chrome.i18n.getMessage('notification_install_title'),
- message: chrome.i18n.getMessage('notification_install_message'),
- isClickable: true
- });
- });
- }
- }
- if (details.reason == 'update') {
- var version = details.previousVersion.split('.');
+ chrome.storage.sync.set(settings, function() {
+ chrome.notifications.create('install', {
+ type: 'basic',
+ iconUrl: 'icons/translate-128.png',
+ title: chrome.i18n.getMessage('notification_install_title'),
+ message: chrome.i18n.getMessage('notification_install_message'),
+ isClickable: true
+ });
+ });
+ }
+ }
+ if (details.reason == 'update') {
+ var version = details.previousVersion.split('.');
- // Updating from a version previous to v0.6
- if (version[0] == '0' && version[1] < '6') {
- var settings = {
- languages: {},
- uniquetab: '',
- };
- var default_language =
- chrome.i18n.getMessage('@@ui_locale').split('_')[0];
+ // Updating from a version previous to v0.6
+ if (version[0] == '0' && version[1] < '6') {
+ var settings = {
+ languages: {},
+ uniquetab: '',
+ };
+ var default_language =
+ chrome.i18n.getMessage('@@ui_locale').split('_')[0];
- if (isoLangs[default_language] != 'undefined')
- settings.languages[default_language] = default_language;
+ if (isoLangs[default_language] != 'undefined')
+ settings.languages[default_language] = default_language;
- chrome.storage.sync.set(settings, function() {
- chrome.notifications.create('upgradedtostorage', {
- type: 'basic',
- iconUrl: 'icons/translate-128.png',
- title:
- chrome.i18n.getMessage('notification_upgradedtostorage_title'),
- message: chrome.i18n.getMessage(
- 'notification_upgradedtostorage_message'),
- isClickable: true,
- });
- });
- }
+ chrome.storage.sync.set(settings, function() {
+ chrome.notifications.create('upgradedtostorage', {
+ type: 'basic',
+ iconUrl: 'icons/translate-128.png',
+ title:
+ chrome.i18n.getMessage('notification_upgradedtostorage_title'),
+ message: chrome.i18n.getMessage(
+ 'notification_upgradedtostorage_message'),
+ isClickable: true,
+ });
+ });
+ }
- // Updating from a version previous to v0.7
- if (version[0] == '0' && version[1] < '7') {
- items.translateinto = {};
- var i = 0;
- for (var language in items.languages) {
- items.translateinto[i] = items.languages[language];
- i++;
- }
- delete items.languages;
- chrome.storage.sync.set(items, _ => {
- chrome.notifications.create('reorder', {
- type: 'basic',
- iconUrl: 'icons/translate-128.png',
- title: chrome.i18n.getMessage('notification_reorder_title'),
- message: chrome.i18n.getMessage('notification_reorder_message'),
- isClickable: true
- });
- });
- }
- }
- });
+ // Updating from a version previous to v0.7
+ if (version[0] == '0' && version[1] < '7') {
+ items.translateinto = {};
+ var i = 0;
+ for (var language in items.languages) {
+ items.translateinto[i] = items.languages[language];
+ i++;
+ }
+ delete items.languages;
+ chrome.storage.sync.set(items, _ => {
+ chrome.notifications.create('reorder', {
+ type: 'basic',
+ iconUrl: 'icons/translate-128.png',
+ title: chrome.i18n.getMessage('notification_reorder_title'),
+ message: chrome.i18n.getMessage('notification_reorder_message'),
+ isClickable: true
+ });
+ });
+ }
+ }
+ });
});
chrome.storage.onChanged.addListener((changes, areaName) => {
- if (areaName == 'sync') createmenus();
+ if (areaName == 'sync') createmenus();
});
chrome.storage.sync.get(null, items => {
- if (items.translateinto) {
- createmenus();
- } else {
- chrome.contextMenus.removeAll();
- var parent = chrome.contextMenus.create({
- 'id': 'tr_parent',
- 'title': chrome.i18n.getMessage('contextmenu_title'),
- 'contexts': ['selection']
- });
- var id = chrome.contextMenus.create({
- 'id': 'tr_options',
- 'title': chrome.i18n.getMessage('contextmenu_edit'),
- 'parentId': parent,
- 'contexts': ['selection']
- });
- }
+ if (items.translateinto) {
+ createmenus();
+ } else {
+ chrome.contextMenus.removeAll();
+ var parent = chrome.contextMenus.create({
+ 'id': 'tr_parent',
+ 'title': chrome.i18n.getMessage('contextmenu_title'),
+ 'contexts': ['selection']
+ });
+ var id = chrome.contextMenus.create({
+ 'id': 'tr_options',
+ 'title': chrome.i18n.getMessage('contextmenu_edit'),
+ 'parentId': parent,
+ 'contexts': ['selection']
+ });
+ }
});
chrome.notifications.onClicked.addListener(notification_id => {
- switch (notification_id) {
- case 'install':
- case 'upgradedtostorage':
- case 'reorder':
- openOptionsPage();
- break;
- }
- chrome.notifications.clear(notification_id);
+ switch (notification_id) {
+ case 'install':
+ case 'upgradedtostorage':
+ case 'reorder':
+ openOptionsPage();
+ break;
+ }
+ chrome.notifications.clear(notification_id);
});
chrome.contextMenus.onClicked.addListener((info, tab) => {
- if (info.menuItemId == 'tr_options') {
- openOptionsPage();
- } else {
- translationClick(info, tab);
- }
+ if (info.menuItemId == 'tr_options') {
+ openOptionsPage();
+ } else {
+ translationClick(info, tab);
+ }
});
chrome.browserAction.onClicked.addListener(_ => {
- openOptionsPage();
+ openOptionsPage();
});
diff --git a/src/css/options.css b/src/css/options.css
index 72b5904..7808e30 100644
--- a/src/css/options.css
+++ b/src/css/options.css
@@ -1,157 +1,172 @@
/*@import url("widgets.css");*/
body {
- padding: 10px;
- font-family: "Roboto", "Arial", sans-serif!important;
- background-color: #BBDEFB;
- background-repeat: repeat;
- background-position: left top;
- font-size: 90%;
- cursor: default;
- min-width: 400px;
+ padding: 10px;
+ font-family: "Roboto", "Arial", sans-serif !important;
+ background-color: #BBDEFB;
+ background-repeat: repeat;
+ background-position: left top;
+ font-size: 90%;
+ cursor: default;
+ min-width: 400px;
}
+
h1 {
- text-align: center;
- font-size: 30px;
+ text-align: center;
+ font-size: 30px;
}
+
h2 {
- font-size: 20px;
+ font-size: 20px;
}
+
#languages_container {
- width: 300px;
- height: 365px;
- border: 1px solid #ccc;
- background-color: #E3F2FD;
- overflow: auto;
+ width: 300px;
+ height: 365px;
+ border: 1px solid #ccc;
+ background-color: #E3F2FD;
+ overflow: auto;
}
+
#languages {
- list-style: none;
- margin: 0;
- padding: 0;
+ list-style: none;
+ margin: 0;
+ padding: 0;
}
+
#languages li {
- padding: 15px;
- border-bottom: 1px dashed #ddd;
- background-color: #EEF7FD;
- cursor: move;
- -webkit-user-select: none;
+ padding: 15px;
+ border-bottom: 1px dashed #ddd;
+ background-color: #EEF7FD;
+ cursor: move;
+ -webkit-user-select: none;
}
+
#languages li.sortable-ghost {
- background-color: #E3F2FD;
+ background-color: #E3F2FD;
}
+
#languages li .delete {
- font-size: 14px;
- float: right;
- cursor: pointer;
- color: red;
+ font-size: 14px;
+ float: right;
+ cursor: pointer;
+ color: red;
}
+
#languages_footer {
- width: 300px;
- height: 35px;
- background-color: #fff;
- border: 1px solid #ccc;
- border-top: 0;
+ width: 300px;
+ height: 35px;
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-top: 0;
}
-button, input, select, option {
- font-size: 13px!important;
+
+button,
+input,
+select,
+option {
+ font-size: 13px !important;
}
+
#languages_add {
- margin-left: 4px;
- margin-top: 4px;
+ margin-left: 4px;
+ margin-top: 4px;
}
+
#save {
- display: block;
- margin: 18px auto;
+ display: block;
+ margin: 18px auto;
}
/* Dialog */
dialog#languages_add_dialog {
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -216px;
- margin-top: -91px;
- height: 150px;
- width: 400px;
- border: 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-left: -216px;
+ margin-top: -91px;
+ height: 150px;
+ width: 400px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
dialog h3 {
- margin-bottom: 10px;
+ margin-bottom: 10px;
}
dialog #language_label {
- font-size: 12px;
+ font-size: 12px;
}
dialog select {
- width: 100%;
+ width: 100%;
}
dialog .action_buttons {
- margin-top: 10px;
- float: right;
+ margin-top: 10px;
+ float: right;
}
dialog::backdrop {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
}
/* Credits */
#credits_container {
- position: absolute;
- top: 0px;
- right: 50px;
- background: rgb(195, 235, 204);
- border: solid 1px rgb(139, 139, 139);
- border-top: 0;
- border-radius: 0px 0px 5px 5px;
+ position: absolute;
+ top: 0px;
+ right: 50px;
+ background: rgb(195, 235, 204);
+ border: solid 1px rgb(139, 139, 139);
+ border-top: 0;
+ border-radius: 0px 0px 5px 5px;
}
#credits_container a {
- color: green!important;
- margin: 0 5px;
+ color: green !important;
+ margin: 0 5px;
}
dialog#credits_dialog {
- position: fixed;
- top: 50%;
- left: 50%;
- margin-left: -216px;
- margin-top: -231px;
- height: 430px;
- width: 400px;
- border: 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-left: -216px;
+ margin-top: -231px;
+ height: 430px;
+ width: 400px;
+ border: 1px solid rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
dialog#credits_dialog .content_area h4 {
- margin-bottom: 0px;
+ margin-bottom: 0px;
}
dialog#credits_dialog .content_area a.homepage {
- position: absolute;
- right: 16px;
- font-size: 14px;
+ position: absolute;
+ right: 16px;
+ font-size: 14px;
}
-dialog#credits_dialog .content_area p, dialog#credits_dialog .content_area span {
- font-size: 14px;
+dialog#credits_dialog .content_area p,
+dialog#credits_dialog .content_area span {
+ font-size: 14px;
}
dialog#credits_dialog .content_area p.author {
- margin-top: 7px;
+ margin-top: 7px;
}
#otheroptions p {
- margin-top: 0;
- margin-bottom: 0;
+ margin-top: 0;
+ margin-bottom: 0;
}
diff --git a/src/js/options.js b/src/js/options.js
index eba0a1a..0f79b2d 100644
--- a/src/js/options.js
+++ b/src/js/options.js
@@ -1,229 +1,226 @@
function $(selector) {
- return document.querySelector(selector);
+ return document.querySelector(selector);
}
function $all(selector) {
- return document.querySelectorAll(selector);
+ return document.querySelectorAll(selector);
}
function isEmpty(obj) {
- return Object.keys(obj).length === 0;
+ return Object.keys(obj).length === 0;
}
function i18n() {
- $all('[data-i18n]').forEach(el => {
- el.innerHTML =
- chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n'));
- });
+ $all('[data-i18n]').forEach(el => {
+ el.innerHTML =
+ chrome.i18n.getMessage('options_' + el.getAttribute('data-i18n'));
+ });
}
function printListModal() {
- $('#select_language').textContent = '';
- var heysortable = sortable.toArray();
- for (var language in isoLangs) {
- if (!inArray(language, heysortable)) {
- var el = document.createElement('option');
- el.setAttribute('value', language);
- el.innerText = isoLangs[language]['name'] + ' (' +
- isoLangs[language]['nativeName'] + ')';
- $('#select_language').appendChild(el);
- }
+ $('#select_language').textContent = '';
+ var heysortable = sortable.toArray();
+ for (var language in isoLangs) {
+ if (!inArray(language, heysortable)) {
+ var el = document.createElement('option');
+ el.setAttribute('value', language);
+ el.innerText = isoLangs[language]['name'] + ' (' +
+ isoLangs[language]['nativeName'] + ')';
+ $('#select_language').appendChild(el);
}
+ }
}
function init() {
- i18n();
- chrome.storage.sync.get(null, items => {
- // If no settings are set
- if (isEmpty(items)) {
- items = {
- translateinto: {},
- uniquetab: '',
- };
- chrome.storage.sync.set(items);
- }
+ i18n();
+ chrome.storage.sync.get(null, items => {
+ // If no settings are set
+ if (isEmpty(items)) {
+ items = {
+ translateinto: {},
+ uniquetab: '',
+ };
+ chrome.storage.sync.set(items);
+ }
- // Check the checkbox of the window opening
- if (items.uniquetab === 'yep') $('#uniquetab').checked = true;
- if (items.uniquetab === '') $('#varioustabs').checked = true;
- if (items.uniquetab === 'panel') $('#panel').checked = true;
+ // Check the checkbox of the window opening
+ if (items.uniquetab === 'yep') $('#uniquetab').checked = true;
+ if (items.uniquetab === '') $('#varioustabs').checked = true;
+ if (items.uniquetab === 'panel') $('#panel').checked = true;
- // Add event listeners for certain buttons and links
- $('#panelsflag').addEventListener('click', _ => {
- event.preventDefault();
- chrome.tabs.create({url: 'chrome://flags/#enable-panels'});
- });
-
- $('#save').addEventListener('click', _ => {
- saveOptions();
- });
-
- // Print selected language list
- var languages = items.translateinto;
-
- if (languages) {
- for (var language_id of Object.keys(languages)) {
- var language = languages[language_id];
- var el = document.createElement('li');
- el.setAttribute('data-language', language);
- el.setAttribute('data-id', language);
- el.innerHTML = isoLangs[language]['name'] + ' (' +
- isoLangs[language]['nativeName'] + ')' +
- '<span data-language=\'' + language +
- '\' class=\'delete\'>x</span>';
- $('#languages').appendChild(el);
- $('#languages li[data-language=' + language + '] .delete')
- .addEventListener('click', function() {
- $('#languages')
- .removeChild(
- $('li[data-language=' +
- this.getAttribute('data-language') + ']'));
- printListModal();
- });
- }
- }
-
- // Initiate Sortable
- sortable = new Sortable($('#languages'), {animation: 150});
-
- // Handling The Dialog
- $('#languages_add').addEventListener('click', _ => {
- $('dialog#languages_add_dialog').showModal();
- $('#select_language').focus();
- });
-
- $('#languages_add_cancel').addEventListener('click', _ => {
- $('dialog#languages_add_dialog').close();
- });
-
- $('#languages_add_ok').addEventListener('click', _ => {
- var el = document.createElement('li');
- var language = $('#select_language').value;
- if (inArray(language, sortable.toArray())) {
- return;
- }
- el.setAttribute('data-language', language);
- el.setAttribute('data-id', language);
- el.innerHTML = isoLangs[language]['name'] + ' (' +
- isoLangs[language]['nativeName'] + ')' +
- '<span data-language=\'' + language +
- '\' class=\'delete\'>x</span>';
- $('#languages').appendChild(el);
- var selection =
- $('#select_language option[value=' + language + ']');
- selection.parentNode.removeChild(selection);
- $('#languages li[data-id=' + language + '] .delete')
- .addEventListener('click', function() {
- $('#languages')
- .removeChild(
- $('li[data-language=' +
- this.getAttribute('data-language') + ']'));
- printListModal();
- });
- $('dialog').close();
- });
-
- // About credits...
- fetch('json/credits.json')
- .then(res => res.json())
- .then(json => {
- var content = $('dialog#credits_dialog .content_area');
- json.forEach(item => {
- var div = document.createElement('div');
- if (item.url) {
- var a = document.createElement('a');
- a.classList.add('homepage');
- a.href = item.url;
- a.target = '_blank';
- a.textContent =
- chrome.i18n.getMessage('options_credits_homepage');
- div.append(a);
- }
-
- var h4 = document.createElement('h4');
- h4.textContent = item.name;
- div.append(h4);
-
- if (item.author) {
- var p = document.createElement('p');
- p.classList.add('author');
- p.textContent =
- chrome.i18n.getMessage('options_credits_by') + ' ' +
- item.author +
- (item.license ? ' - ' + item.license : '');
- div.append(p);
- }
- content.append(div);
- });
-
- window.onhashchange = function() {
- if (location.hash == '#credits') {
- $('dialog#credits_dialog').showModal();
- $('#credits_ok').focus();
- }
- };
-
- if (location.hash == '#credits') {
- $('dialog#credits_dialog').showModal();
- $('#credits_ok').focus();
- }
-
- $('#credits_ok').addEventListener('click', _ => {
- $('dialog#credits_dialog').close();
- });
- $('dialog#credits_dialog').addEventListener('close', _ => {
- history.pushState(
- '', document.title,
- window.location.pathname + window.location.search);
- });
-
- // Print language list in the modal dialog
- printListModal();
- })
- .catch(err => console.log(err));
+ // Add event listeners for certain buttons and links
+ $('#panelsflag').addEventListener('click', _ => {
+ event.preventDefault();
+ chrome.tabs.create({url: 'chrome://flags/#enable-panels'});
});
+
+ $('#save').addEventListener('click', _ => {
+ saveOptions();
+ });
+
+ // Print selected language list
+ var languages = items.translateinto;
+
+ if (languages) {
+ for (var language_id of Object.keys(languages)) {
+ var language = languages[language_id];
+ var el = document.createElement('li');
+ el.setAttribute('data-language', language);
+ el.setAttribute('data-id', language);
+ el.innerHTML = isoLangs[language]['name'] + ' (' +
+ isoLangs[language]['nativeName'] + ')' +
+ '<span data-language=\'' + language +
+ '\' class=\'delete\'>x</span>';
+ $('#languages').appendChild(el);
+ $('#languages li[data-language=' + language + '] .delete')
+ .addEventListener('click', function() {
+ $('#languages')
+ .removeChild($(
+ 'li[data-language=' + this.getAttribute('data-language') +
+ ']'));
+ printListModal();
+ });
+ }
+ }
+
+ // Initiate Sortable
+ sortable = new Sortable($('#languages'), {animation: 150});
+
+ // Handling The Dialog
+ $('#languages_add').addEventListener('click', _ => {
+ $('dialog#languages_add_dialog').showModal();
+ $('#select_language').focus();
+ });
+
+ $('#languages_add_cancel').addEventListener('click', _ => {
+ $('dialog#languages_add_dialog').close();
+ });
+
+ $('#languages_add_ok').addEventListener('click', _ => {
+ var el = document.createElement('li');
+ var language = $('#select_language').value;
+ if (inArray(language, sortable.toArray())) {
+ return;
+ }
+ el.setAttribute('data-language', language);
+ el.setAttribute('data-id', language);
+ el.innerHTML = isoLangs[language]['name'] + ' (' +
+ isoLangs[language]['nativeName'] + ')' +
+ '<span data-language=\'' + language + '\' class=\'delete\'>x</span>';
+ $('#languages').appendChild(el);
+ var selection = $('#select_language option[value=' + language + ']');
+ selection.parentNode.removeChild(selection);
+ $('#languages li[data-id=' + language + '] .delete')
+ .addEventListener('click', function() {
+ $('#languages')
+ .removeChild(
+ $('li[data-language=' + this.getAttribute('data-language') +
+ ']'));
+ printListModal();
+ });
+ $('dialog').close();
+ });
+
+ // About credits...
+ fetch('json/credits.json')
+ .then(res => res.json())
+ .then(json => {
+ var content = $('dialog#credits_dialog .content_area');
+ json.forEach(item => {
+ var div = document.createElement('div');
+ if (item.url) {
+ var a = document.createElement('a');
+ a.classList.add('homepage');
+ a.href = item.url;
+ a.target = '_blank';
+ a.textContent =
+ chrome.i18n.getMessage('options_credits_homepage');
+ div.append(a);
+ }
+
+ var h4 = document.createElement('h4');
+ h4.textContent = item.name;
+ div.append(h4);
+
+ if (item.author) {
+ var p = document.createElement('p');
+ p.classList.add('author');
+ p.textContent = chrome.i18n.getMessage('options_credits_by') +
+ ' ' + item.author +
+ (item.license ? ' - ' + item.license : '');
+ div.append(p);
+ }
+ content.append(div);
+ });
+
+ window.onhashchange = function() {
+ if (location.hash == '#credits') {
+ $('dialog#credits_dialog').showModal();
+ $('#credits_ok').focus();
+ }
+ };
+
+ if (location.hash == '#credits') {
+ $('dialog#credits_dialog').showModal();
+ $('#credits_ok').focus();
+ }
+
+ $('#credits_ok').addEventListener('click', _ => {
+ $('dialog#credits_dialog').close();
+ });
+ $('dialog#credits_dialog').addEventListener('close', _ => {
+ history.pushState(
+ '', document.title,
+ window.location.pathname + window.location.search);
+ });
+
+ // Print language list in the modal dialog
+ printListModal();
+ })
+ .catch(err => console.log(err));
+ });
}
function saveOptions() {
- var languages = document.getElementById('languages');
- var options = {
- uniquetab: '',
- translateinto: {},
- };
+ var languages = document.getElementById('languages');
+ var options = {
+ uniquetab: '',
+ translateinto: {},
+ };
- options.uniquetab = radioSelected('uniquetab');
+ options.uniquetab = radioSelected('uniquetab');
- var selected_languages = sortable.toArray();
+ var selected_languages = sortable.toArray();
- var i = 0;
- for (var language_id in selected_languages) {
- var language = selected_languages[language_id];
- options.translateinto[i] = language;
- i++;
- }
+ var i = 0;
+ for (var language_id in selected_languages) {
+ var language = selected_languages[language_id];
+ options.translateinto[i] = language;
+ i++;
+ }
- chrome.storage.sync.set(options, function() {
- var background = chrome.extension.getBackgroundPage();
+ chrome.storage.sync.set(options, function() {
+ var background = chrome.extension.getBackgroundPage();
- background.translator_tab = false;
- background.translator_window = false;
- window.close();
- });
+ background.translator_tab = false;
+ background.translator_window = false;
+ window.close();
+ });
}
function radioSelected(a) {
- var elements = document.getElementsByName(a);
+ var elements = document.getElementsByName(a);
- for (var i = 0; i < elements.length; i++)
- if (elements[i].checked) return elements[i].value;
+ for (var i = 0; i < elements.length; i++)
+ if (elements[i].checked) return elements[i].value;
}
function inArray(needle, haystack) {
- var length = haystack.length;
- for (var i = 0; i < length; i++) {
- if (haystack[i] == needle) return true;
- }
- return false;
+ var length = haystack.length;
+ for (var i = 0; i < length; i++) {
+ if (haystack[i] == needle) return true;
+ }
+ return false;
}
window.addEventListener('load', init);
diff --git a/src/json/credits.json b/src/json/credits.json
index e2e9882..9e8243e 100644
--- a/src/json/credits.json
+++ b/src/json/credits.json
@@ -1,30 +1,30 @@
[
- {
- "name": "Metro Uinvert Dock Icon Set",
- "url": "http://dakirby309.deviantart.com/art/Metro-Uinvert-Dock-Icon-Set-725-Icons-294529071",
- "author": "dAKirby309"
- },
- {
- "name": "Russian Translation",
- "url": "https://code.google.com/r/sashasimkin-translateselectedtext/source/detail?r=fc4e58ee0d69929d610a84a7600338e99b9d3d83",
- "author": "Alexander Simkin"
- },
- {
- "name": "Sortable",
- "url": "https://github.com/RubaXa/Sortable",
- "author": "Lebedev Konstantin",
- "license": "MIT License"
- },
- {
- "name": "Chromium",
- "url": "https://code.google.com/p/chromium/",
- "author": "The Chromium Authors",
- "license": "BSD-like License"
- },
- {
- "name": "What-2-Nite",
- "url": "https://github.com/enricolucia/what-2-nite/blob/master/isoLangs.json",
- "author": "Google, Inc.",
- "license": "MIT License"
- }
+ {
+ "name": "Metro Uinvert Dock Icon Set",
+ "url": "http://dakirby309.deviantart.com/art/Metro-Uinvert-Dock-Icon-Set-725-Icons-294529071",
+ "author": "dAKirby309"
+ },
+ {
+ "name": "Russian Translation",
+ "url": "https://code.google.com/r/sashasimkin-translateselectedtext/source/detail?r=fc4e58ee0d69929d610a84a7600338e99b9d3d83",
+ "author": "Alexander Simkin"
+ },
+ {
+ "name": "Sortable",
+ "url": "https://github.com/RubaXa/Sortable",
+ "author": "Lebedev Konstantin",
+ "license": "MIT License"
+ },
+ {
+ "name": "Chromium",
+ "url": "https://code.google.com/p/chromium/",
+ "author": "The Chromium Authors",
+ "license": "BSD-like License"
+ },
+ {
+ "name": "What-2-Nite",
+ "url": "https://github.com/enricolucia/what-2-nite/blob/master/isoLangs.json",
+ "author": "Google, Inc.",
+ "license": "MIT License"
+ }
]
diff --git a/src/options.html b/src/options.html
index 104cacd..2765d1a 100644
--- a/src/options.html
+++ b/src/options.html
@@ -1,59 +1,62 @@
<!DOCTYPE html>
<html>
- <head>
- <meta charset="UTF-8">
- <title>Options</title>
- <link rel="stylesheet" type="text/css" href="css/options.css">
- <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
- </head>
- <body>
- <div id="credits_container">
- <a href="#credits" id="credits" data-i18n="credits"></a>
- </div>
- <h1 id="welcome" data-i18n="welcome"></h1>
+<head>
+ <meta charset="UTF-8">
+ <title>Options</title>
+ <link rel="stylesheet" type="text/css" href="css/options.css">
+ <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic,400italic' rel='stylesheet' type='text/css'>
+</head>
- <p id="introduction" data-i18n="introduction"></p>
+<body>
+ <div id="credits_container">
+ <a href="#credits" id="credits" data-i18n="credits"></a>
+ </div>
- <div id="languages_container">
- <ul id="languages"></ul>
- </div>
- <div id="languages_footer">
- <button id="languages_add" data-i18n="addlanguage_addbutton"></button>
- </div>
+ <h1 id="welcome" data-i18n="welcome"></h1>
- <h2 id="otheroptionsheader" data-i18n="otheroptionsheader"></h2>
+ <p id="introduction" data-i18n="introduction"></p>
- <div id="otheroptions">
- <p><input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs" data-i18n="tabsoption_1"></label></p>
- <p><input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab" data-i18n="tabsoption_2"></label></p>
- <p><input type="radio" name="uniquetab" id="panel" value="panel"> <label id="panel_label" for="panel" data-i18n="tabsoption_3"></label></p>
- </div>
+ <div id="languages_container">
+ <ul id="languages"></ul>
+ </div>
+ <div id="languages_footer">
+ <button id="languages_add" data-i18n="addlanguage_addbutton"></button>
+ </div>
- <button id="save" data-i18n="savebutton"></button>
+ <h2 id="otheroptionsheader" data-i18n="otheroptionsheader"></h2>
- <dialog id="languages_add_dialog">
- <h3 data-i18n="addlanguage"></h3>
- <div class="content_area">
- <label id="language_label" for="select_language" data-i18n="language_label"></label>
- <select id="select_language"></select>
- </div>
- <div class="action_buttons">
- <button id="languages_add_cancel" data-i18n="cancel"></button>
- <button id="languages_add_ok" data-i18n="ok"></button>
- </div>
- </dialog>
- <dialog id="credits_dialog">
- <h3 data-i18n="credits"></h3>
- <div class="content_area">
- </div>
- <div class="action_buttons">
- <button id="credits_ok" data-i18n="ok"></button>
- </div>
- </dialog>
+ <div id="otheroptions">
+ <p><input type="radio" name="uniquetab" id="varioustabs" value=""> <label id="varioustabs_label" for="varioustabs" data-i18n="tabsoption_1"></label></p>
+ <p><input type="radio" name="uniquetab" id="uniquetab" value="yep"> <label id="uniquetab_label" for="uniquetab" data-i18n="tabsoption_2"></label></p>
+ <p><input type="radio" name="uniquetab" id="panel" value="panel"> <label id="panel_label" for="panel" data-i18n="tabsoption_3"></label></p>
+ </div>
- <script src="js/common.js"></script>
- <script src="js/options.js"></script>
- <script src="js/sortable.js"></script>
- </body>
+ <button id="save" data-i18n="savebutton"></button>
+
+ <dialog id="languages_add_dialog">
+ <h3 data-i18n="addlanguage"></h3>
+ <div class="content_area">
+ <label id="language_label" for="select_language" data-i18n="language_label"></label>
+ <select id="select_language"></select>
+ </div>
+ <div class="action_buttons">
+ <button id="languages_add_cancel" data-i18n="cancel"></button>
+ <button id="languages_add_ok" data-i18n="ok"></button>
+ </div>
+ </dialog>
+ <dialog id="credits_dialog">
+ <h3 data-i18n="credits"></h3>
+ <div class="content_area">
+ </div>
+ <div class="action_buttons">
+ <button id="credits_ok" data-i18n="ok"></button>
+ </div>
+ </dialog>
+
+ <script src="js/common.js"></script>
+ <script src="js/options.js"></script>
+ <script src="js/sortable.js"></script>
+</body>
+
</html>