Change format rule
This commit is contained in:
parent
a3bdaeca75
commit
d3bcce91b6
|
@ -10,278 +10,282 @@ browser.runtime.onInstalled.addListener(function(){
|
|||
browser.runtime.openOptionsPage();
|
||||
});
|
||||
*/
|
||||
function settingsObj() {};
|
||||
(function () {
|
||||
function settingsObj() {}
|
||||
(function() {
|
||||
//オプションページを書き換え,設定の初期化
|
||||
//Rewrite option page, initialize setting
|
||||
settingsObj.prototype.initOptionsPage = function() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
labelSet();
|
||||
getSettingsByHtml();
|
||||
overRideSettingsByStorage().then(function() {
|
||||
overRideHtml();
|
||||
saveSettings();
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
//オプションページから設定を保存
|
||||
//Save settings from options page
|
||||
settingsObj.prototype.saveOptionsPage = function() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
getSettingsByHtml();
|
||||
saveSettings().then(function() {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
//設定を初期化
|
||||
//Initialize setting
|
||||
settingsObj.prototype.init = function() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
getSettings().then(function() {
|
||||
resolve(Settings);
|
||||
});
|
||||
});
|
||||
};
|
||||
//設定を返す
|
||||
//return settings
|
||||
settingsObj.prototype.get = function() {
|
||||
return Settings;
|
||||
};
|
||||
//受け取ったオブジェクトを保存
|
||||
//Save the received object
|
||||
settingsObj.prototype.save = function(settings) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
for (let i in settings) {
|
||||
Settings[i] = settings[i];
|
||||
}
|
||||
saveSettings().then(function() {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
//設定を削除
|
||||
//Delete settings
|
||||
settingsObj.prototype.clear = function(setting) {
|
||||
return new Promise(function(resolve, reject) {
|
||||
delete Settings[setting];
|
||||
saveSettings().then(function() {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
//全ての設定を削除
|
||||
//Delete all settings
|
||||
settingsObj.prototype.clearAll = function() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
Settings = new settingsObj();
|
||||
saveSettings().then(function() {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
};
|
||||
settingsObj.prototype.labelSet = function() {
|
||||
labelSet();
|
||||
};
|
||||
|
||||
//オプションページを書き換え,設定の初期化
|
||||
//Rewrite option page, initialize setting
|
||||
settingsObj.prototype.initOptionsPage = function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
labelSet();
|
||||
getSettingsByHtml();
|
||||
overRideSettingsByStorage().then(function () {
|
||||
overRideHtml();
|
||||
saveSettings();
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
};
|
||||
//オプションページから設定を保存
|
||||
//Save settings from options page
|
||||
settingsObj.prototype.saveOptionsPage = function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
getSettingsByHtml();
|
||||
saveSettings().then(function () {
|
||||
resolve();
|
||||
});
|
||||
})
|
||||
};
|
||||
//設定を初期化
|
||||
//Initialize setting
|
||||
settingsObj.prototype.init = function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
getSettings().then(function () {
|
||||
resolve(Settings);
|
||||
})
|
||||
})
|
||||
}
|
||||
//設定を返す
|
||||
//return settings
|
||||
settingsObj.prototype.get = function () {
|
||||
return Settings;
|
||||
};
|
||||
//受け取ったオブジェクトを保存
|
||||
//Save the received object
|
||||
settingsObj.prototype.save = function (settings) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
for (let i in settings) {
|
||||
Settings[i] = settings[i];
|
||||
//let Settings = new settingsObj();
|
||||
let Settings = {};
|
||||
//S = new settingsObj(); //外部から呼び出し Call from outside
|
||||
|
||||
//spanやoptionのid,buttonのclassに"Label"が含まれるときi18nから値を取得して書き換え
|
||||
//When "label" is included in span and option id, button class Retrieve the value from i18n and rewrite it
|
||||
function labelSet() {
|
||||
textLabelSet("p");
|
||||
textLabelSet("span");
|
||||
textLabelSet("option");
|
||||
textLabelSet("input");
|
||||
|
||||
function textLabelSet(tagName) {
|
||||
const items = document.getElementsByTagName(tagName);
|
||||
for (let i of items) {
|
||||
let label;
|
||||
if (i.id != undefined && i.id.includes("Label")) {
|
||||
label = browser.i18n.getMessage(i.id);
|
||||
} else if (i.className != undefined && i.className.includes("Label")) {
|
||||
const labelList = i.className.split(" ").filter((element, index, array) => {
|
||||
return element.includes("Label");
|
||||
});
|
||||
label = browser.i18n.getMessage(labelList[0]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!label == "") {
|
||||
if (tagName == "input") {
|
||||
switch (i.type) {
|
||||
case "button":
|
||||
case "submit":
|
||||
i.value = label;
|
||||
break;
|
||||
case "text":
|
||||
i.placeholder = label;
|
||||
break;
|
||||
}
|
||||
saveSettings().then(function () {
|
||||
resolve();
|
||||
});
|
||||
} else {
|
||||
i.innerHTML = label;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//storageからSettingsの項目を取得して存在しない物をSettingsに上書き
|
||||
//Retrieve the Settings item from storage and overwrite Settings that do not exist
|
||||
function overRideSettingsByStorage() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
browser.storage.local.get("Settings", function(value) {
|
||||
for (let i in Settings) {
|
||||
if (value.Settings != undefined && value.Settings[i] != undefined) {
|
||||
Settings[i] = value.Settings[i];
|
||||
}
|
||||
}
|
||||
for (let i in value.Settings) {
|
||||
if (Settings[i] == undefined) Settings[i] = value.Settings[i];
|
||||
}
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//オプションページにSettingsを反映
|
||||
//Reflect Settings on option page
|
||||
function overRideHtml() {
|
||||
let inputs = document.getElementsByTagName("input");
|
||||
for (let i in inputs) {
|
||||
if (inputs[i].id == undefined) continue;
|
||||
if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
|
||||
switch (inputs[i].type) {
|
||||
case "text":
|
||||
case "number":
|
||||
case "search":
|
||||
case "tel":
|
||||
case "url":
|
||||
case "email":
|
||||
case "password":
|
||||
case "datetime":
|
||||
case "month":
|
||||
case "week":
|
||||
case "time":
|
||||
case "datetime-local":
|
||||
case "range":
|
||||
case "color":
|
||||
inputs[i].value = Settings[inputs[i].id];
|
||||
break;
|
||||
case "checkbox":
|
||||
inputs[i].checked = Settings[inputs[i].id];
|
||||
break;
|
||||
case "radio":
|
||||
if (Settings[inputs[i].name] == inputs[i].value) {
|
||||
inputs[i].checked = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
let textareas = document.getElementsByTagName("textarea");
|
||||
for (let i in textareas) {
|
||||
if (textareas[i].id == undefined) continue;
|
||||
if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
textareas[i].value = Settings[textareas[i].id];
|
||||
}
|
||||
|
||||
let selects = document.getElementsByTagName("select");
|
||||
for (let i in selects) {
|
||||
if (selects[i].id == undefined) continue;
|
||||
if (selects[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
|
||||
selects[i].value = Settings[selects[i].id];
|
||||
}
|
||||
}
|
||||
|
||||
//オプションページから設定の値を取得
|
||||
//Get setting value from option page
|
||||
function getSettingsByHtml() {
|
||||
let inputs = document.getElementsByTagName("input");
|
||||
|
||||
for (let i in inputs) {
|
||||
if (inputs[i].id == undefined) continue;
|
||||
if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
|
||||
switch (inputs[i].type) {
|
||||
case "text":
|
||||
case "number":
|
||||
case "search":
|
||||
case "tel":
|
||||
case "url":
|
||||
case "email":
|
||||
case "password":
|
||||
case "datetime":
|
||||
case "month":
|
||||
case "week":
|
||||
case "time":
|
||||
case "datetime-local":
|
||||
case "range":
|
||||
case "color":
|
||||
Settings[inputs[i].id] = inputs[i].value;
|
||||
break;
|
||||
case "checkbox":
|
||||
Settings[inputs[i].id] = inputs[i].checked;
|
||||
break;
|
||||
case "radio":
|
||||
if (inputs[i].checked == true) {
|
||||
Settings[inputs[i].name] = inputs[i].value;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let textareas = document.getElementsByTagName("textarea");
|
||||
for (let i in textareas) {
|
||||
if (textareas[i].id == undefined) continue;
|
||||
if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
Settings[textareas[i].id] = textareas[i].value;
|
||||
}
|
||||
|
||||
let selects = document.getElementsByTagName("select");
|
||||
for (let i in selects) {
|
||||
if (selects[i].id == undefined) continue;
|
||||
if (selects[i].className != undefined && selects[i].className.indexOf("noSetting") != -1)
|
||||
continue;
|
||||
|
||||
Settings[selects[i].id] = selects[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
//ストレージが変更されたらget
|
||||
browser.storage.onChanged.addListener(changedSettings);
|
||||
|
||||
function changedSettings(changes, area) {
|
||||
if (Object.keys(changes).includes("Settings")) {
|
||||
Settings = changes.Settings.newValue;
|
||||
}
|
||||
}
|
||||
|
||||
function getSettings() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
browser.storage.local.get("Settings", function(value) {
|
||||
Settings = value.Settings;
|
||||
resolve(Settings);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
return new Promise(function(resolve, reject) {
|
||||
browser.storage.local
|
||||
.set({
|
||||
Settings: Settings
|
||||
})
|
||||
};
|
||||
//設定を削除
|
||||
//Delete settings
|
||||
settingsObj.prototype.clear = function (setting) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
delete Settings[setting];
|
||||
saveSettings().then(function () {
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
}
|
||||
//全ての設定を削除
|
||||
//Delete all settings
|
||||
settingsObj.prototype.clearAll = function () {
|
||||
return new Promise(function (resolve, reject) {
|
||||
Settings = new settingsObj();
|
||||
saveSettings().then(function () {
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
}
|
||||
settingsObj.prototype.labelSet = function () {
|
||||
labelSet();
|
||||
}
|
||||
|
||||
//let Settings = new settingsObj();
|
||||
let Settings = {};
|
||||
//S = new settingsObj(); //外部から呼び出し Call from outside
|
||||
|
||||
//spanやoptionのid,buttonのclassに"Label"が含まれるときi18nから値を取得して書き換え
|
||||
//When "label" is included in span and option id, button class Retrieve the value from i18n and rewrite it
|
||||
function labelSet() {
|
||||
textLabelSet("p");
|
||||
textLabelSet("span");
|
||||
textLabelSet("option");
|
||||
textLabelSet("input");
|
||||
|
||||
function textLabelSet(tagName) {
|
||||
const items = document.getElementsByTagName(tagName);
|
||||
for (let i of items) {
|
||||
let label;
|
||||
if (i.id != undefined && i.id.includes("Label")) {
|
||||
label = browser.i18n.getMessage(i.id);
|
||||
} else if (i.className != undefined && i.className.includes("Label")) {
|
||||
const labelList = i.className.split(' ').filter((element, index, array) => {
|
||||
return element.includes("Label");
|
||||
});
|
||||
label = browser.i18n.getMessage(labelList[0]);
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!label == "") {
|
||||
if (tagName == "input") {
|
||||
switch (i.type) {
|
||||
case "button":
|
||||
case "submit":
|
||||
i.value = label;
|
||||
break;
|
||||
case "text":
|
||||
i.placeholder = label;
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
i.innerHTML = label;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//storageからSettingsの項目を取得して存在しない物をSettingsに上書き
|
||||
//Retrieve the Settings item from storage and overwrite Settings that do not exist
|
||||
function overRideSettingsByStorage() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
browser.storage.local.get("Settings", function (value) {
|
||||
|
||||
for (let i in Settings) {
|
||||
if (value.Settings != undefined && value.Settings[i] != undefined) {
|
||||
Settings[i] = value.Settings[i];
|
||||
}
|
||||
}
|
||||
for (let i in value.Settings) {
|
||||
if (Settings[i] == undefined) Settings[i] = value.Settings[i];
|
||||
}
|
||||
resolve();
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
//オプションページにSettingsを反映
|
||||
//Reflect Settings on option page
|
||||
function overRideHtml() {
|
||||
let inputs = document.getElementsByTagName("input");
|
||||
for (let i in inputs) {
|
||||
if (inputs[i].id == undefined) continue;
|
||||
if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
|
||||
|
||||
switch (inputs[i].type) {
|
||||
case "text":
|
||||
case "number":
|
||||
case "search":
|
||||
case "tel":
|
||||
case "url":
|
||||
case "email":
|
||||
case "password":
|
||||
case "datetime":
|
||||
case "month":
|
||||
case "week":
|
||||
case "time":
|
||||
case "datetime-local":
|
||||
case "range":
|
||||
case "color":
|
||||
inputs[i].value = Settings[inputs[i].id];
|
||||
break;
|
||||
case "checkbox":
|
||||
inputs[i].checked = Settings[inputs[i].id];
|
||||
break;
|
||||
case "radio":
|
||||
if (Settings[inputs[i].name] == inputs[i].value) {
|
||||
inputs[i].checked = true;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
let textareas = document.getElementsByTagName("textarea");
|
||||
for (let i in textareas) {
|
||||
if (textareas[i].id == undefined) continue;
|
||||
if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1) continue;
|
||||
textareas[i].value = Settings[textareas[i].id];
|
||||
}
|
||||
|
||||
let selects = document.getElementsByTagName("select");
|
||||
for (let i in selects) {
|
||||
if (selects[i].id == undefined) continue;
|
||||
if (selects[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
|
||||
|
||||
selects[i].value = Settings[selects[i].id];
|
||||
}
|
||||
}
|
||||
|
||||
//オプションページから設定の値を取得
|
||||
//Get setting value from option page
|
||||
function getSettingsByHtml() {
|
||||
let inputs = document.getElementsByTagName("input");
|
||||
|
||||
for (let i in inputs) {
|
||||
if (inputs[i].id == undefined) continue;
|
||||
if (inputs[i].className != undefined && inputs[i].className.indexOf("noSetting") != -1) continue;
|
||||
|
||||
switch (inputs[i].type) {
|
||||
case "text":
|
||||
case "number":
|
||||
case "search":
|
||||
case "tel":
|
||||
case "url":
|
||||
case "email":
|
||||
case "password":
|
||||
case "datetime":
|
||||
case "month":
|
||||
case "week":
|
||||
case "time":
|
||||
case "datetime-local":
|
||||
case "range":
|
||||
case "color":
|
||||
Settings[inputs[i].id] = inputs[i].value;
|
||||
break;
|
||||
case "checkbox":
|
||||
Settings[inputs[i].id] = inputs[i].checked;
|
||||
break;
|
||||
case "radio":
|
||||
if (inputs[i].checked == true) {
|
||||
Settings[inputs[i].name] = inputs[i].value;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
let textareas = document.getElementsByTagName("textarea");
|
||||
for (let i in textareas) {
|
||||
if (textareas[i].id == undefined) continue;
|
||||
if (textareas[i].className != undefined && textareas[i].className.indexOf("noSetting") != -1) continue;
|
||||
Settings[textareas[i].id] = textareas[i].value;
|
||||
}
|
||||
|
||||
let selects = document.getElementsByTagName("select");
|
||||
for (let i in selects) {
|
||||
if (selects[i].id == undefined) continue;
|
||||
if (selects[i].className != undefined && selects[i].className.indexOf("noSetting") != -1) continue;
|
||||
|
||||
Settings[selects[i].id] = selects[i].value;
|
||||
}
|
||||
}
|
||||
|
||||
//ストレージが変更されたらget
|
||||
browser.storage.onChanged.addListener(changedSettings);
|
||||
|
||||
function changedSettings(changes, area) {
|
||||
if (Object.keys(changes).includes("Settings")) {
|
||||
Settings = changes.Settings.newValue;
|
||||
}
|
||||
}
|
||||
|
||||
function getSettings() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
browser.storage.local.get("Settings", function (value) {
|
||||
Settings = value.Settings;
|
||||
resolve(Settings);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function saveSettings() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
browser.storage.local.set({
|
||||
'Settings': Settings
|
||||
}).then(function () {
|
||||
resolve(Settings);
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
}());
|
||||
.then(function() {
|
||||
resolve(Settings);
|
||||
});
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -1,178 +1,182 @@
|
|||
{
|
||||
"extName": {
|
||||
"message": "Simple Translate"
|
||||
},
|
||||
"extDescription": {
|
||||
"message": "View translations easily as you browse the web."
|
||||
},
|
||||
"extName": {
|
||||
"message": "Simple Translate"
|
||||
},
|
||||
"extDescription": {
|
||||
"message": "View translations easily as you browse the web."
|
||||
},
|
||||
|
||||
"donateWithPaypalLabel": {
|
||||
"message": "Donate with PayPal"
|
||||
},
|
||||
"initialTextArea": {
|
||||
"message": "Enter text"
|
||||
},
|
||||
"showLink": {
|
||||
"message": "Translate this page"
|
||||
},
|
||||
"targetLangLabel": {
|
||||
"message": "Target language"
|
||||
},
|
||||
"langList": {
|
||||
"message": "af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
|
||||
},
|
||||
"donateWithPaypalLabel": {
|
||||
"message": "Donate with PayPal"
|
||||
},
|
||||
"initialTextArea": {
|
||||
"message": "Enter text"
|
||||
},
|
||||
"showLink": {
|
||||
"message": "Translate this page"
|
||||
},
|
||||
"targetLangLabel": {
|
||||
"message": "Target language"
|
||||
},
|
||||
"langList": {
|
||||
"message":
|
||||
"af:Afrikaans, sq:Albanian, am:Amharic, ar:Arabic, hy:Armenian, az:Azerbaijani, eu:Basque, be:Belarusian, bn:Bengali, bs:Bosnian, bg:Bulgarian, ca:Catalan, ceb:Cebuano, ny:Chewa, zh-CN:Chinese (PRC), zh-TW:Chinese (Taiwan), co:Corsican, hr:Croatian, cs:Czech, da:Danish, nl:Dutch, en:English, eo:Esperanto, et:Estonian, fi:Finnish, fr:French, fy:Frisian, gl:Galician, ka:Georgian, de:German, el:Greek, gu:Gujarati, ht:Haitian, ha:Hausa, haw:Hawaiian, he:Hebrew, hi:Hindi, hu:Hungarian, is:Icelandic, ig:Igbo, id:Indonesian, ga:Irish, it:Italian, ja:Japanese, jv:Javanese, kn:Kannada, kk:Kazakh, km:Khmer, ky:Kirghiz, ko:Korean, ku:Kurdish, lo:Laotian, la:Latin, lv:Latvian, lt:Lithuanian, lb:Luxembourgish, mk:Macedonian, mg:Malagasy, ms:Malay, ml:Malayalam, mt:Maltese, mi:Maori, mr:Marathi, mn:Mongolian, hmn:Monk, my:Myanmar, ne:Nepali, no:Norwegian, fa:Persian, pl:Polish, pt:Portuguese, pa:Punjabi, ps:Pushto, ro:Romanian, ru:Russian, sm:Samoan, gd:Scottish Gaelic, sr:Serbian, sn:Shona, sd:Sindhi, si:Sinhala, sk:Slovak, sl:Slovenian, so:Somali, sx:Sotho, es:Spanish, su:Sundanese, sw:Swahili, sv:Swedish, tl:Tagalog, tg:Tajiki, ta:Tamil, te:Telugu, th:Thai, tr:Turkish, uk:Ukrainian, ur:Urdu, uz:Uzbek, vi:Vietnamese, cy:Welsh, xh:Xosa, yi:Yiddish, yo:Yoruba, zu:Zulu"
|
||||
},
|
||||
|
||||
"settingsLabel": {
|
||||
"message": "Settings"
|
||||
},
|
||||
"generalLabel": {
|
||||
"message": "General"
|
||||
},
|
||||
"targetLangCaptionLabel": {
|
||||
"message": "Select the default target language."
|
||||
},
|
||||
"webPageLabel": {
|
||||
"message": "Web page"
|
||||
},
|
||||
"ifShowCandidateLabel": {
|
||||
"message": "Show translation candidates"
|
||||
},
|
||||
"ifShowCandidateCaptionLabel": {
|
||||
"message": "Show multiple translation candidates when a single word is translated."
|
||||
},
|
||||
"whenSelectTextLabel": {
|
||||
"message": "Behavior when selecting text"
|
||||
},
|
||||
"ifAutoTranslateLabel": {
|
||||
"message": "Display translation panel"
|
||||
},
|
||||
"ifAutoTranslateCaptionLabel": {
|
||||
"message": "Directly display the translation panel without displaying the button."
|
||||
},
|
||||
"ifShowButtonLabel": {
|
||||
"message": "Display translation button"
|
||||
},
|
||||
"ifShowButtonCaptionLabel": {
|
||||
"message": "Display the translation button to open the panel when clicked."
|
||||
},
|
||||
"dontshowbuttonlabel": {
|
||||
"message": "Don't display button or panel"
|
||||
},
|
||||
"dontshowbuttonCaptionlabel": {
|
||||
"message": "Don't display the translation button or the translation panel."
|
||||
},
|
||||
"ifCheckLangLabel": {
|
||||
"message": "Do not display the button if translation is not required"
|
||||
},
|
||||
"ifCheckLangCaptionLabel": {
|
||||
"message": "Detects the language of the selected text, and if it is the same as the target language, the button is not displayed."
|
||||
},
|
||||
"settingsLabel": {
|
||||
"message": "Settings"
|
||||
},
|
||||
"generalLabel": {
|
||||
"message": "General"
|
||||
},
|
||||
"targetLangCaptionLabel": {
|
||||
"message": "Select the default target language."
|
||||
},
|
||||
"webPageLabel": {
|
||||
"message": "Web page"
|
||||
},
|
||||
"ifShowCandidateLabel": {
|
||||
"message": "Show translation candidates"
|
||||
},
|
||||
"ifShowCandidateCaptionLabel": {
|
||||
"message": "Show multiple translation candidates when a single word is translated."
|
||||
},
|
||||
"whenSelectTextLabel": {
|
||||
"message": "Behavior when selecting text"
|
||||
},
|
||||
"ifAutoTranslateLabel": {
|
||||
"message": "Display translation panel"
|
||||
},
|
||||
"ifAutoTranslateCaptionLabel": {
|
||||
"message": "Directly display the translation panel without displaying the button."
|
||||
},
|
||||
"ifShowButtonLabel": {
|
||||
"message": "Display translation button"
|
||||
},
|
||||
"ifShowButtonCaptionLabel": {
|
||||
"message": "Display the translation button to open the panel when clicked."
|
||||
},
|
||||
"dontshowbuttonlabel": {
|
||||
"message": "Don't display button or panel"
|
||||
},
|
||||
"dontshowbuttonCaptionlabel": {
|
||||
"message": "Don't display the translation button or the translation panel."
|
||||
},
|
||||
"ifCheckLangLabel": {
|
||||
"message": "Do not display the button if translation is not required"
|
||||
},
|
||||
"ifCheckLangCaptionLabel": {
|
||||
"message":
|
||||
"Detects the language of the selected text, and if it is the same as the target language, the button is not displayed."
|
||||
},
|
||||
|
||||
"toolbarLabel": {
|
||||
"message": "Toolbar popup"
|
||||
},
|
||||
"ifChangeSecondLangLabel": {
|
||||
"message": "Automatically switch to the second language"
|
||||
},
|
||||
"ifChangeSecondLangCaptionLabel": {
|
||||
"message": "Detects the language of the input text, and if it is the same as the default target language, translate it into the second language."
|
||||
},
|
||||
"secondTargetLangLabel": {
|
||||
"message": "Second language"
|
||||
},
|
||||
"secondTargetLangCaptionLabel": {
|
||||
"message": "Select the second target language."
|
||||
},
|
||||
"toolbarLabel": {
|
||||
"message": "Toolbar popup"
|
||||
},
|
||||
"ifChangeSecondLangLabel": {
|
||||
"message": "Automatically switch to the second language"
|
||||
},
|
||||
"ifChangeSecondLangCaptionLabel": {
|
||||
"message":
|
||||
"Detects the language of the input text, and if it is the same as the default target language, translate it into the second language."
|
||||
},
|
||||
"secondTargetLangLabel": {
|
||||
"message": "Second language"
|
||||
},
|
||||
"secondTargetLangCaptionLabel": {
|
||||
"message": "Select the second target language."
|
||||
},
|
||||
|
||||
"menuLabel":{
|
||||
"message": "Context menu"
|
||||
},
|
||||
"ifShowMenuLabel": {
|
||||
"message": "Display the context menu"
|
||||
},
|
||||
"ifShowMenuCaptionLabel": {
|
||||
"message": "Add items to the context menu displayed when right clicking on the web page or the tab."
|
||||
},
|
||||
"menuLabel": {
|
||||
"message": "Context menu"
|
||||
},
|
||||
"ifShowMenuLabel": {
|
||||
"message": "Display the context menu"
|
||||
},
|
||||
"ifShowMenuCaptionLabel": {
|
||||
"message":
|
||||
"Add items to the context menu displayed when right clicking on the web page or the tab."
|
||||
},
|
||||
|
||||
"styleLabel": {
|
||||
"message": "Style"
|
||||
},
|
||||
"buttonStyleLabel": {
|
||||
"message": "Translation button"
|
||||
},
|
||||
"buttonStyleCaptionLabel": {
|
||||
"message": "Specify the style of the translation button displayed on the web page."
|
||||
},
|
||||
"buttonSizeLabel": {
|
||||
"message": "Size"
|
||||
},
|
||||
"buttonPositionLabel": {
|
||||
"message": "Display position"
|
||||
},
|
||||
"rightUpLabel": {
|
||||
"message": "Top right"
|
||||
},
|
||||
"rightDownLabel": {
|
||||
"message": "Bottom right"
|
||||
},
|
||||
"leftUpLabel": {
|
||||
"message": "Top left"
|
||||
},
|
||||
"leftDownLabel": {
|
||||
"message": "Bottom left"
|
||||
},
|
||||
"panelStyleLabel": {
|
||||
"message": "Translation panel"
|
||||
},
|
||||
"panelStyleCaptionLabel": {
|
||||
"message": "Specify the style of the translation panel displayed on the web page."
|
||||
},
|
||||
"widthLabel": {
|
||||
"message": "Width"
|
||||
},
|
||||
"heightLabel": {
|
||||
"message": "Height"
|
||||
},
|
||||
"fontSizeLabel": {
|
||||
"message": "Font size"
|
||||
},
|
||||
"bgColorLabel": {
|
||||
"message": "Background color"
|
||||
},
|
||||
"styleLabel": {
|
||||
"message": "Style"
|
||||
},
|
||||
"buttonStyleLabel": {
|
||||
"message": "Translation button"
|
||||
},
|
||||
"buttonStyleCaptionLabel": {
|
||||
"message": "Specify the style of the translation button displayed on the web page."
|
||||
},
|
||||
"buttonSizeLabel": {
|
||||
"message": "Size"
|
||||
},
|
||||
"buttonPositionLabel": {
|
||||
"message": "Display position"
|
||||
},
|
||||
"rightUpLabel": {
|
||||
"message": "Top right"
|
||||
},
|
||||
"rightDownLabel": {
|
||||
"message": "Bottom right"
|
||||
},
|
||||
"leftUpLabel": {
|
||||
"message": "Top left"
|
||||
},
|
||||
"leftDownLabel": {
|
||||
"message": "Bottom left"
|
||||
},
|
||||
"panelStyleLabel": {
|
||||
"message": "Translation panel"
|
||||
},
|
||||
"panelStyleCaptionLabel": {
|
||||
"message": "Specify the style of the translation panel displayed on the web page."
|
||||
},
|
||||
"widthLabel": {
|
||||
"message": "Width"
|
||||
},
|
||||
"heightLabel": {
|
||||
"message": "Height"
|
||||
},
|
||||
"fontSizeLabel": {
|
||||
"message": "Font size"
|
||||
},
|
||||
"bgColorLabel": {
|
||||
"message": "Background color"
|
||||
},
|
||||
|
||||
"informationLabel": {
|
||||
"message": "Information"
|
||||
},
|
||||
"licenseLabel": {
|
||||
"message": "License"
|
||||
},
|
||||
"donationLabel": {
|
||||
"message": "Please make a donation"
|
||||
},
|
||||
"donationCaptionLabel": {
|
||||
"message": "Thank you for using Simple Translate.<br>Your support will be a big encouragement, as I continue to develop the add-on.<br>If you like Simple Translate, I would be pleased if you could consider donating."
|
||||
},
|
||||
"amazonTitleLabel": {
|
||||
"message": "amazon.co.jp eGift Cards"
|
||||
},
|
||||
"addonPageLabel": {
|
||||
"message": "Add-on page"
|
||||
},
|
||||
"amazonUrl": {
|
||||
"message": "https://www.amazon.co.jp/dp/B004N3APGO?language=en_US"
|
||||
},
|
||||
"addonUrl": {
|
||||
"message": "https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/simple-translate\/?src=optionpage"
|
||||
},
|
||||
"informationLabel": {
|
||||
"message": "Information"
|
||||
},
|
||||
"licenseLabel": {
|
||||
"message": "License"
|
||||
},
|
||||
"donationLabel": {
|
||||
"message": "Please make a donation"
|
||||
},
|
||||
"donationCaptionLabel": {
|
||||
"message":
|
||||
"Thank you for using Simple Translate.<br>Your support will be a big encouragement, as I continue to develop the add-on.<br>If you like Simple Translate, I would be pleased if you could consider donating."
|
||||
},
|
||||
"amazonTitleLabel": {
|
||||
"message": "amazon.co.jp eGift Cards"
|
||||
},
|
||||
"addonPageLabel": {
|
||||
"message": "Add-on page"
|
||||
},
|
||||
"amazonUrl": {
|
||||
"message": "https://www.amazon.co.jp/dp/B004N3APGO?language=en_US"
|
||||
},
|
||||
"addonUrl": {
|
||||
"message": "https://addons.mozilla.org/en-US/firefox/addon/simple-translate/?src=optionpage"
|
||||
},
|
||||
|
||||
|
||||
"translatePageMenu": {
|
||||
"message": "Translate this page"
|
||||
},
|
||||
"translateTextMenu": {
|
||||
"message": "Translate selected text"
|
||||
},
|
||||
"translateLinkMenu": {
|
||||
"message": "Translate selected link"
|
||||
}
|
||||
"translatePageMenu": {
|
||||
"message": "Translate this page"
|
||||
},
|
||||
"translateTextMenu": {
|
||||
"message": "Translate selected text"
|
||||
},
|
||||
"translateLinkMenu": {
|
||||
"message": "Translate selected link"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,121 +4,127 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
//初回起動時にオプションページを表示して設定を初期化
|
||||
browser.runtime.onInstalled.addListener((details) => {
|
||||
if (details.reason != 'install' && details.reason != 'update') return;
|
||||
browser.runtime.onInstalled.addListener(details => {
|
||||
if (details.reason != "install" && details.reason != "update") return;
|
||||
|
||||
browser.tabs.create({
|
||||
url: "options/options.html#information?action=updated",
|
||||
active: false
|
||||
});
|
||||
browser.tabs.create({
|
||||
url: "options/options.html#information?action=updated",
|
||||
active: false
|
||||
});
|
||||
});
|
||||
|
||||
let S = new settingsObj();
|
||||
|
||||
browser.storage.onChanged.addListener(showMenu);
|
||||
if (typeof (browser.contextMenus.onShown) != 'undefined') browser.contextMenus.onShown.addListener(updateMenu);
|
||||
if (typeof browser.contextMenus.onShown != "undefined")
|
||||
browser.contextMenus.onShown.addListener(updateMenu);
|
||||
|
||||
S.init().then(function () {
|
||||
showMenu();
|
||||
S.init().then(function() {
|
||||
showMenu();
|
||||
});
|
||||
|
||||
function showMenu() {
|
||||
if (S.get().ifShowMenu) {
|
||||
menuRemove();
|
||||
menuCreate();
|
||||
} else menuRemove();
|
||||
if (S.get().ifShowMenu) {
|
||||
menuRemove();
|
||||
menuCreate();
|
||||
} else menuRemove();
|
||||
}
|
||||
|
||||
//テキストまたはリンクの選択時はページ翻訳を非表示にする
|
||||
function updateMenu(info, tab) {
|
||||
if (info.contexts.includes('selection') || info.contexts.includes('link')) {
|
||||
browser.contextMenus.update('translatePage', { contexts: ['password'] }); //passwordにすることで事実上無効にする
|
||||
} else {
|
||||
browser.contextMenus.update('translatePage', { contexts: ['all'] });
|
||||
}
|
||||
browser.contextMenus.refresh();
|
||||
if (info.contexts.includes("selection") || info.contexts.includes("link")) {
|
||||
browser.contextMenus.update("translatePage", { contexts: ["password"] }); //passwordにすることで事実上無効にする
|
||||
} else {
|
||||
browser.contextMenus.update("translatePage", { contexts: ["all"] });
|
||||
}
|
||||
browser.contextMenus.refresh();
|
||||
}
|
||||
|
||||
//メニューを表示
|
||||
function menuCreate() {
|
||||
browser.contextMenus.create({
|
||||
id: "translatePageOnTab",
|
||||
title: browser.i18n.getMessage("translatePageMenu"),
|
||||
contexts: ["tab"],
|
||||
});
|
||||
browser.contextMenus.create({
|
||||
id: "translatePageOnTab",
|
||||
title: browser.i18n.getMessage("translatePageMenu"),
|
||||
contexts: ["tab"]
|
||||
});
|
||||
|
||||
browser.contextMenus.create({
|
||||
id: "translatePage",
|
||||
title: browser.i18n.getMessage("translatePageMenu"),
|
||||
contexts: ["all"],
|
||||
});
|
||||
browser.contextMenus.create({
|
||||
id: "translatePage",
|
||||
title: browser.i18n.getMessage("translatePageMenu"),
|
||||
contexts: ["all"]
|
||||
});
|
||||
|
||||
browser.contextMenus.create({
|
||||
id: "translateText",
|
||||
title: browser.i18n.getMessage("translateTextMenu"),
|
||||
contexts: ["selection"],
|
||||
});
|
||||
browser.contextMenus.create({
|
||||
id: "translateText",
|
||||
title: browser.i18n.getMessage("translateTextMenu"),
|
||||
contexts: ["selection"]
|
||||
});
|
||||
|
||||
browser.contextMenus.create({
|
||||
id: "translateLink",
|
||||
title: browser.i18n.getMessage("translateLinkMenu"),
|
||||
contexts: ["link"],
|
||||
});
|
||||
browser.contextMenus.create({
|
||||
id: "translateLink",
|
||||
title: browser.i18n.getMessage("translateLinkMenu"),
|
||||
contexts: ["link"]
|
||||
});
|
||||
}
|
||||
|
||||
//メニューを削除
|
||||
function menuRemove() {
|
||||
browser.contextMenus.removeAll();
|
||||
browser.contextMenus.removeAll();
|
||||
}
|
||||
|
||||
|
||||
//メニュークリック時
|
||||
browser.contextMenus.onClicked.addListener(function (info, tab) {
|
||||
switch (info.menuItemId) {
|
||||
case "translatePage":
|
||||
case "translatePageOnTab":
|
||||
translatePageMenu(info, tab);
|
||||
break;
|
||||
case "translateText":
|
||||
translateTextMenu(info, tab);
|
||||
break;
|
||||
case "translateLink":
|
||||
translateLinkMenu(info, tab);
|
||||
break;
|
||||
}
|
||||
browser.contextMenus.onClicked.addListener(function(info, tab) {
|
||||
switch (info.menuItemId) {
|
||||
case "translatePage":
|
||||
case "translatePageOnTab":
|
||||
translatePageMenu(info, tab);
|
||||
break;
|
||||
case "translateText":
|
||||
translateTextMenu(info, tab);
|
||||
break;
|
||||
case "translateLink":
|
||||
translateLinkMenu(info, tab);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//テキストを翻訳
|
||||
function translateTextMenu(info, tab) {
|
||||
browser.tabs.sendMessage(
|
||||
tab.id, {
|
||||
message: "showPanelFromMenu"
|
||||
}
|
||||
)
|
||||
browser.tabs.sendMessage(tab.id, {
|
||||
message: "showPanelFromMenu"
|
||||
});
|
||||
}
|
||||
|
||||
//ページ全体を翻訳
|
||||
function translatePageMenu(info, tab) {
|
||||
browser.tabs.create({
|
||||
'url': "https://translate.google.com/translate?hl=" + S.get().targetLang + "&sl=auto&u=" + encodeURIComponent(info.pageUrl),
|
||||
'active': true,
|
||||
'index': tab.index + 1
|
||||
});
|
||||
browser.tabs.create({
|
||||
url:
|
||||
"https://translate.google.com/translate?hl=" +
|
||||
S.get().targetLang +
|
||||
"&sl=auto&u=" +
|
||||
encodeURIComponent(info.pageUrl),
|
||||
active: true,
|
||||
index: tab.index + 1
|
||||
});
|
||||
}
|
||||
|
||||
//リンクを翻訳
|
||||
function translateLinkMenu(info, tab) {
|
||||
browser.tabs.create({
|
||||
'url': "https://translate.google.com/translate?hl=" + S.get().targetLang + "&sl=auto&u=" + encodeURIComponent(info.linkUrl),
|
||||
'active': true,
|
||||
'index': tab.index + 1
|
||||
});
|
||||
browser.tabs.create({
|
||||
url:
|
||||
"https://translate.google.com/translate?hl=" +
|
||||
S.get().targetLang +
|
||||
"&sl=auto&u=" +
|
||||
encodeURIComponent(info.linkUrl),
|
||||
active: true,
|
||||
index: tab.index + 1
|
||||
});
|
||||
}
|
||||
|
||||
//スクリプトからのメッセージに返信
|
||||
browser.runtime.onMessage.addListener(function (request) {
|
||||
switch (request.message) {
|
||||
case "getSetting":
|
||||
break;
|
||||
}
|
||||
browser.runtime.onMessage.addListener(function(request) {
|
||||
switch (request.message) {
|
||||
case "getSetting":
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,57 +1,56 @@
|
|||
{
|
||||
"manifest_version": 2,
|
||||
"version": "1.8.2",
|
||||
"manifest_version": 2,
|
||||
"version": "1.8.2",
|
||||
|
||||
"name": "__MSG_extName__",
|
||||
"description": "__MSG_extDescription__",
|
||||
"default_locale": "en",
|
||||
"name": "__MSG_extName__",
|
||||
"description": "__MSG_extDescription__",
|
||||
"default_locale": "en",
|
||||
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "simple-translate@sienori"
|
||||
}
|
||||
"applications": {
|
||||
"gecko": {
|
||||
"id": "simple-translate@sienori"
|
||||
}
|
||||
},
|
||||
|
||||
"permissions": ["<all_urls>", "storage", "contextMenus"],
|
||||
|
||||
"options_ui": {
|
||||
"page": "options/options.html",
|
||||
"open_in_tab": true
|
||||
},
|
||||
|
||||
"icons": {
|
||||
"512": "icons/512.png",
|
||||
"128": "icons/128.png",
|
||||
"64": "icons/64.png",
|
||||
"48": "icons/48.png",
|
||||
"32": "icons/32.png"
|
||||
},
|
||||
|
||||
"background": {
|
||||
"scripts": ["Settings.js", "background.js"]
|
||||
},
|
||||
|
||||
"browser_action": {
|
||||
"default_icon": {
|
||||
"512": "icons/512.png",
|
||||
"128": "icons/128.png",
|
||||
"64": "icons/64.png",
|
||||
"48": "icons/48.png",
|
||||
"38": "icons/38.png",
|
||||
"32": "icons/32.png",
|
||||
"19": "icons/19.png",
|
||||
"16": "icons/16.png"
|
||||
},
|
||||
"default_popup": "popup/popup.html"
|
||||
},
|
||||
|
||||
"permissions": ["<all_urls>", "storage", "contextMenus"],
|
||||
|
||||
"options_ui": {
|
||||
"page": "options/options.html",
|
||||
"open_in_tab": true
|
||||
},
|
||||
|
||||
"icons": {
|
||||
"512": "icons/512.png",
|
||||
"128": "icons/128.png",
|
||||
"64": "icons/64.png",
|
||||
"48": "icons/48.png",
|
||||
"32": "icons/32.png"
|
||||
|
||||
},
|
||||
|
||||
"background": {
|
||||
"scripts": ["Settings.js", "background.js"]
|
||||
},
|
||||
|
||||
"browser_action": {
|
||||
"default_icon": {
|
||||
"512": "icons/512.png",
|
||||
"128": "icons/128.png",
|
||||
"64": "icons/64.png",
|
||||
"48": "icons/48.png",
|
||||
"38": "icons/38.png",
|
||||
"32": "icons/32.png",
|
||||
"19": "icons/19.png",
|
||||
"16": "icons/16.png"
|
||||
},
|
||||
"default_popup": "popup/popup.html"
|
||||
},
|
||||
|
||||
"content_scripts": [
|
||||
{
|
||||
"all_frames":true,
|
||||
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
|
||||
"css": ["simple-translate.css"],
|
||||
"js": ["Settings.js", "translate.js", "simple-translate.js"]
|
||||
}
|
||||
]
|
||||
"content_scripts": [
|
||||
{
|
||||
"all_frames": true,
|
||||
"matches": ["http://*/*", "https://*/*", "<all_urls>"],
|
||||
"css": ["simple-translate.css"],
|
||||
"js": ["Settings.js", "translate.js", "simple-translate.js"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -1,221 +1,218 @@
|
|||
:root {
|
||||
--main-text: #0c0c0d;
|
||||
--sub-text: #737373;
|
||||
--line: #ededf0;
|
||||
--button: #d7d7db;
|
||||
--highlight: #5595ff;
|
||||
--main-bg: #ffffff;
|
||||
--new: #ff4f4f;
|
||||
--main-text: #0c0c0d;
|
||||
--sub-text: #737373;
|
||||
--line: #ededf0;
|
||||
--button: #d7d7db;
|
||||
--highlight: #5595ff;
|
||||
--main-bg: #ffffff;
|
||||
--new: #ff4f4f;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-bg);
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica",
|
||||
sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: var(--main-text);
|
||||
background-color: var(--main-bg);
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
hr {
|
||||
width: 100%;
|
||||
background-color: var(--line);
|
||||
height: 1px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
background-color: var(--line);
|
||||
height: 1px;
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
/*----sidebar----*/
|
||||
|
||||
#sidebar {
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
-moz-user-select: none;
|
||||
font-size: 17px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.logotitle {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--sub-text);
|
||||
/*margin: auto;*/
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
color: var(--sub-text);
|
||||
/*margin: auto;*/
|
||||
}
|
||||
|
||||
.sidebarItem:hover {
|
||||
text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
#sidebar > ul {
|
||||
padding-left: 40px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
#sidebar > ul > li {
|
||||
padding: 10px 15px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#sidebar .selected {
|
||||
color: var(--highlight);
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
|
||||
/*----contents----*/
|
||||
|
||||
#contents {
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 50px;
|
||||
width: 650px;
|
||||
|
||||
padding-top: 20px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 50px;
|
||||
width: 650px;
|
||||
}
|
||||
|
||||
.contentTitle {
|
||||
font-size: 33px;
|
||||
font-weight: 200;
|
||||
color: var(--sub-text);
|
||||
line-height: 2;
|
||||
font-size: 33px;
|
||||
font-weight: 200;
|
||||
color: var(--sub-text);
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--sub-text);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
#contents ul {
|
||||
margin: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.childElements {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
border-left: solid 10px var(--line);
|
||||
padding-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
border-left: solid 10px var(--line);
|
||||
}
|
||||
|
||||
.categoryContainer {}
|
||||
.categoryContainer {
|
||||
}
|
||||
|
||||
.categoryElements {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.categoryTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--sub-text);
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.optionContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0px 10px 0px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.optionContainer.reverse {
|
||||
flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.buttonsContainer {
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.new p:nth-child(1)::after {
|
||||
content: "New";
|
||||
color: var(--new);
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--new);
|
||||
border-radius: 2px;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
content: "New";
|
||||
color: var(--new);
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--new);
|
||||
border-radius: 2px;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.updated p:nth-child(1)::after {
|
||||
content: "Updated";
|
||||
color: var(--new);
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--new);
|
||||
border-radius: 2px;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
content: "Updated";
|
||||
color: var(--new);
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--new);
|
||||
border-radius: 2px;
|
||||
padding: 0px 5px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.optionForm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.reverse .optionForm {
|
||||
flex-basis: 40px;
|
||||
justify-content: flex-start;
|
||||
flex-basis: 40px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#importClear {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.favicon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 1px;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
padding: 1px;
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
/*----forms----*/
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="number"],
|
||||
input[type="text"],
|
||||
input[type="color"] {
|
||||
-moz-appearance: textfield;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
-moz-appearance: textfield;
|
||||
width: 50px;
|
||||
height: 30px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input[type="number"]:hover,
|
||||
|
@ -224,197 +221,195 @@ input[type="color"]:hover,
|
|||
input[type="number"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="color"]:focus {
|
||||
border-color: var(--highlight);
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
input[type="color"] {
|
||||
background-color: var(--main-bg);
|
||||
padding: 5px;
|
||||
background-color: var(--main-bg);
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
color: var(--main-text);
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
background-color: #fbfbfb;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
height: 30px;
|
||||
font-size: 13px;
|
||||
color: var(--main-text);
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
background-color: #fbfbfb;
|
||||
cursor: pointer;
|
||||
|
||||
white-space: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.includeSpan {
|
||||
padding: 0px;
|
||||
height: 28px;
|
||||
padding: 0px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #f5f5f5;
|
||||
border-color: var(--highlight);
|
||||
background: #f5f5f5;
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--line);
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: var(--sub-text);
|
||||
text-decoration-line: none;
|
||||
color: var(--sub-text);
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
|
||||
a:visited {
|
||||
color: var(--sub-text);
|
||||
color: var(--sub-text);
|
||||
}
|
||||
|
||||
.pageLink {
|
||||
color: var(--highlight) !important;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
color: var(--highlight) !important;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.pageLink:hover {
|
||||
color: var(--highlight);
|
||||
text-decoration-line: underline;
|
||||
color: var(--highlight);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
/*margin-right: 20px;*/
|
||||
cursor: pointer;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
/*margin-right: 20px;*/
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.checkbox:hover::before {
|
||||
border-color: var(--highlight);
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .checkbox {
|
||||
color: var(--highlight);
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .checkbox::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
transform: rotate(40deg);
|
||||
border-bottom: 3px solid var(--highlight);
|
||||
border-right: 3px solid var(--highlight);
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
width: 6px;
|
||||
height: 14px;
|
||||
transform: rotate(40deg);
|
||||
border-bottom: 3px solid var(--highlight);
|
||||
border-right: 3px solid var(--highlight);
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio {
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 50%;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid var(--button);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.radio:hover::before {
|
||||
border-color: var(--highlight);
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + .radio {
|
||||
color: var(--highlight);
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + .radio::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--highlight);
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--highlight);
|
||||
}
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
text-overflow: ellipsis;
|
||||
border: var(--button) solid 1px;
|
||||
border-radius: 2px;
|
||||
padding: 3px 5px;
|
||||
padding-right: 20px;
|
||||
width: 100%;
|
||||
-moz-appearance: none;
|
||||
text-overflow: ellipsis;
|
||||
border: var(--button) solid 1px;
|
||||
border-radius: 2px;
|
||||
padding: 3px 5px;
|
||||
padding-right: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border: var(--highlight) solid 1px;
|
||||
border: var(--highlight) solid 1px;
|
||||
}
|
||||
|
||||
.selectWrap {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.selectWrap:before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
transform: rotate(45deg);
|
||||
border-bottom: 2px solid var(--sub-text);
|
||||
border-right: 2px solid var(--sub-text);
|
||||
transform: rotate(45deg);
|
||||
border-bottom: 2px solid var(--sub-text);
|
||||
border-right: 2px solid var(--sub-text);
|
||||
}
|
||||
|
||||
.selectWrap:hover::before {
|
||||
border-bottom: 2px solid var(--highlight);
|
||||
border-right: 2px solid var(--highlight);
|
||||
border-bottom: 2px solid var(--highlight);
|
||||
border-right: 2px solid var(--highlight);
|
||||
}
|
||||
|
||||
option {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
|
@ -2,66 +2,68 @@
|
|||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
const S = new settingsObj()
|
||||
const S = new settingsObj();
|
||||
let targetLang = document.getElementById("targetLang");
|
||||
let secondTargetLang = document.getElementById("secondTargetLang");
|
||||
|
||||
setLangList();
|
||||
|
||||
function setLangList() {
|
||||
let langList = browser.i18n.getMessage("langList");
|
||||
langList = langList.split(", ");
|
||||
let langList = browser.i18n.getMessage("langList");
|
||||
langList = langList.split(", ");
|
||||
|
||||
for (let i in langList) {
|
||||
langList[i] = langList[i].split(":");
|
||||
}
|
||||
langList = langList.sort(alphabeticallySort);
|
||||
for (let i in langList) {
|
||||
langList[i] = langList[i].split(":");
|
||||
}
|
||||
langList = langList.sort(alphabeticallySort);
|
||||
|
||||
let langListHtml = "";
|
||||
for (let i of langList) {
|
||||
langListHtml += `<option value=${i[0]}>${i[1]}</option>`
|
||||
}
|
||||
targetLang.innerHTML = langListHtml;
|
||||
secondTargetLang.innerHTML = langListHtml;
|
||||
let langListHtml = "";
|
||||
for (let i of langList) {
|
||||
langListHtml += `<option value=${i[0]}>${i[1]}</option>`;
|
||||
}
|
||||
targetLang.innerHTML = langListHtml;
|
||||
secondTargetLang.innerHTML = langListHtml;
|
||||
|
||||
initialSetting();
|
||||
initialSetting();
|
||||
}
|
||||
|
||||
function alphabeticallySort(a, b) {
|
||||
if (a[1].toString() > b[1].toString()) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
if (a[1].toString() > b[1].toString()) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
function initialSetting() {
|
||||
switch (browser.i18n.getUILanguage()) { //一部の言語はブラウザの設定に合わせる
|
||||
case "ja":
|
||||
case "zh-CN":
|
||||
case "zh-TW":
|
||||
case "ko":
|
||||
case "ru":
|
||||
case "de":
|
||||
case "fr":
|
||||
case "it":
|
||||
targetLang.value = browser.i18n.getUILanguage();
|
||||
secondTargetLang.value = "en";
|
||||
break;
|
||||
default:
|
||||
targetLang.value = "en";
|
||||
secondTargetLang.value = "ja";
|
||||
break;
|
||||
}
|
||||
switch (
|
||||
browser.i18n.getUILanguage() //一部の言語はブラウザの設定に合わせる
|
||||
) {
|
||||
case "ja":
|
||||
case "zh-CN":
|
||||
case "zh-TW":
|
||||
case "ko":
|
||||
case "ru":
|
||||
case "de":
|
||||
case "fr":
|
||||
case "it":
|
||||
targetLang.value = browser.i18n.getUILanguage();
|
||||
secondTargetLang.value = "en";
|
||||
break;
|
||||
default:
|
||||
targetLang.value = "en";
|
||||
secondTargetLang.value = "ja";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
S.initOptionsPage().then(function () {
|
||||
const saveByChangeItems = document.getElementsByClassName("saveByChange");
|
||||
for (let item of saveByChangeItems) {
|
||||
item.addEventListener("change", save)
|
||||
}
|
||||
})
|
||||
S.initOptionsPage().then(function() {
|
||||
const saveByChangeItems = document.getElementsByClassName("saveByChange");
|
||||
for (let item of saveByChangeItems) {
|
||||
item.addEventListener("change", save);
|
||||
}
|
||||
});
|
||||
|
||||
function save() {
|
||||
S.saveOptionsPage();
|
||||
S.saveOptionsPage();
|
||||
}
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
let e = {};
|
||||
e.hash = location.href;
|
||||
|
||||
if (e.hash.indexOf('#') != -1) {
|
||||
e.hash = '#' + e.hash.split('#')[1];
|
||||
if (e.hash.indexOf("#") != -1) {
|
||||
e.hash = "#" + e.hash.split("#")[1];
|
||||
} else {
|
||||
e.hash = "#settings";
|
||||
e.hash = "#settings";
|
||||
}
|
||||
readHash(e);
|
||||
|
||||
|
@ -18,52 +18,55 @@ tm.HashObserver.enable();
|
|||
document.addEventListener("changehash", readHash, false);
|
||||
|
||||
function readHash(e) {
|
||||
const hash = e.hash.split('?')[0];
|
||||
const hash = e.hash.split("?")[0];
|
||||
|
||||
let selected = document.getElementsByClassName("selected");
|
||||
selected[0].classList.remove("selected");
|
||||
let selected = document.getElementsByClassName("selected");
|
||||
selected[0].classList.remove("selected");
|
||||
|
||||
document.getElementById("settings").style.display = "none";
|
||||
document.getElementById("information").style.display = "none";
|
||||
document.getElementById("settings").style.display = "none";
|
||||
document.getElementById("information").style.display = "none";
|
||||
|
||||
switch (hash) {
|
||||
case "#settings":
|
||||
document.getElementById("settings").style.display = "block";
|
||||
document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
|
||||
break;
|
||||
case "#information":
|
||||
document.getElementById("information").style.display = "block";
|
||||
document.getElementsByClassName("informationLabel")[0].classList.add("selected");
|
||||
break;
|
||||
default:
|
||||
document.getElementById("settings").style.display = "block";
|
||||
document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
|
||||
break;
|
||||
}
|
||||
switch (hash) {
|
||||
case "#settings":
|
||||
document.getElementById("settings").style.display = "block";
|
||||
document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
|
||||
break;
|
||||
case "#information":
|
||||
document.getElementById("information").style.display = "block";
|
||||
document.getElementsByClassName("informationLabel")[0].classList.add("selected");
|
||||
break;
|
||||
default:
|
||||
document.getElementById("settings").style.display = "block";
|
||||
document.getElementsByClassName("settingsLabel")[0].classList.add("selected");
|
||||
break;
|
||||
}
|
||||
|
||||
const params = getParams(e.hash);
|
||||
switch (params.action) {
|
||||
case 'updated':
|
||||
showUpdated();
|
||||
break;
|
||||
}
|
||||
const params = getParams(e.hash);
|
||||
switch (params.action) {
|
||||
case "updated":
|
||||
showUpdated();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function getParams(hash) {
|
||||
let params = {};
|
||||
if (hash.split('?')[1] == undefined) return params;
|
||||
hash = hash.split('?')[1].split('&');
|
||||
for (let i of hash) {
|
||||
params[i.split('=')[0]] = i.split('=')[1];
|
||||
}
|
||||
return params;
|
||||
let params = {};
|
||||
if (hash.split("?")[1] == undefined) return params;
|
||||
hash = hash.split("?")[1].split("&");
|
||||
for (let i of hash) {
|
||||
params[i.split("=")[0]] = i.split("=")[1];
|
||||
}
|
||||
return params;
|
||||
}
|
||||
|
||||
function showUpdated() {
|
||||
const version = document.getElementsByClassName('addonVersion')[0];
|
||||
version.classList.add('updated');
|
||||
const version = document.getElementsByClassName("addonVersion")[0];
|
||||
version.classList.add("updated");
|
||||
}
|
||||
|
||||
document.getElementsByClassName("addonUrl")[0].href = browser.i18n.getMessage("addonUrl");
|
||||
document.getElementsByClassName("amazonUrl")[0].href = browser.i18n.getMessage("amazonUrl");
|
||||
document.getElementsByClassName('addonVersion')[0].getElementsByClassName('caption')[0].getElementsByTagName('a')[0].innerText = `Version ${browser.runtime.getManifest().version}`;
|
||||
document
|
||||
.getElementsByClassName("addonVersion")[0]
|
||||
.getElementsByClassName("caption")[0]
|
||||
.getElementsByTagName("a")[0].innerText = `Version ${browser.runtime.getManifest().version}`;
|
||||
|
|
|
@ -1,227 +1,227 @@
|
|||
:root {
|
||||
--main-text: #0c0c0d;
|
||||
--sub-text: #737373;
|
||||
--line: #ededf0;
|
||||
--button: #d7d7db;
|
||||
--highlight: #5595ff;
|
||||
--main-bg: #ffffff;
|
||||
--confirm: #ff4f4f;
|
||||
--main-text: #0c0c0d;
|
||||
--sub-text: #737373;
|
||||
--line: #ededf0;
|
||||
--button: #d7d7db;
|
||||
--highlight: #5595ff;
|
||||
--main-bg: #ffffff;
|
||||
--confirm: #ff4f4f;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
width: 348px;
|
||||
overflow: hidden;
|
||||
background-color: var(--main-bg);
|
||||
font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica",
|
||||
sans-serif;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
width: 348px;
|
||||
overflow: hidden;
|
||||
background-color: var(--main-bg);
|
||||
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#header {
|
||||
padding: 10px;
|
||||
background-color: var(--line);
|
||||
padding: 10px;
|
||||
background-color: var(--line);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
-moz-user-select: none;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#header .rightButtons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#donate {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#donate svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
fill: var(--sub-text);
|
||||
transition: all 100ms;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
fill: var(--sub-text);
|
||||
transition: all 100ms;
|
||||
}
|
||||
|
||||
#donate:hover svg {
|
||||
fill: var(--confirm);
|
||||
fill: var(--confirm);
|
||||
}
|
||||
|
||||
#setting {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#setting svg {
|
||||
flex-shrink: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
fill: var(--sub-text);
|
||||
transform: rotate(180deg);
|
||||
transition: fill 100ms, transform 300ms ease;
|
||||
flex-shrink: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
fill: var(--sub-text);
|
||||
transform: rotate(180deg);
|
||||
transition: fill 100ms, transform 300ms ease;
|
||||
}
|
||||
|
||||
#setting:hover svg {
|
||||
fill: var(--highlight);
|
||||
transform: rotate(270deg);
|
||||
fill: var(--highlight);
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
#main {
|
||||
padding: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font: inherit;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
background-color: var(--main-bg);
|
||||
font: inherit;
|
||||
resize: none;
|
||||
overflow: auto;
|
||||
background-color: var(--main-bg);
|
||||
|
||||
max-height: 215px;
|
||||
height: 37px;
|
||||
max-height: 215px;
|
||||
height: 37px;
|
||||
|
||||
/* 100% - padding*2 - border*2 */
|
||||
width: calc(100% - 22px);
|
||||
/* 100% - padding*2 - border*2 */
|
||||
width: calc(100% - 22px);
|
||||
|
||||
padding: 10px;
|
||||
border: solid 1px var(--button);
|
||||
border-radius: 2px;
|
||||
transition: border-color 100ms ease-out;
|
||||
padding: 10px;
|
||||
border: solid 1px var(--button);
|
||||
border-radius: 2px;
|
||||
transition: border-color 100ms ease-out;
|
||||
}
|
||||
|
||||
textarea:hover,
|
||||
textarea:focus {
|
||||
border-color: var(--highlight)
|
||||
border-color: var(--highlight);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: solid 1px var(--button);
|
||||
height: 1px;
|
||||
margin: 10px 0px;
|
||||
border: none;
|
||||
border-top: solid 1px var(--button);
|
||||
height: 1px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
#target {
|
||||
max-height: 215px;
|
||||
min-height: 30px;
|
||||
overflow-y: auto;
|
||||
word-wrap: break-word;
|
||||
padding: 0px 5px 0px;
|
||||
background-color: var(--main-bg);
|
||||
max-height: 215px;
|
||||
min-height: 30px;
|
||||
overflow-y: auto;
|
||||
word-wrap: break-word;
|
||||
padding: 0px 5px 0px;
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
#target p {
|
||||
margin: 0;
|
||||
background-color: var(--main-bg);
|
||||
margin: 0;
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
#target .result{
|
||||
background-color: var(--main-bg);
|
||||
#target .result {
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
#target .candidate {
|
||||
color: var(--sub-text);
|
||||
margin-top:1em;
|
||||
background-color: var(--main-bg);
|
||||
color: var(--sub-text);
|
||||
margin-top: 1em;
|
||||
background-color: var(--main-bg);
|
||||
}
|
||||
|
||||
#target .candidate:empty {
|
||||
margin-top:0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 10px 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0px 10px 10px;
|
||||
}
|
||||
|
||||
#link {
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#link a {
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: var(--highlight);
|
||||
font-style: normal;
|
||||
text-decoration: none;
|
||||
color: var(--highlight);
|
||||
}
|
||||
|
||||
#link a:hover {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
select {
|
||||
-moz-appearance: none;
|
||||
text-overflow: ellipsis;
|
||||
border: var(--button) solid 1px;
|
||||
border-radius: 2px;
|
||||
padding: 3px 5px;
|
||||
padding-right: 20px;
|
||||
width: 100%;
|
||||
transition: border-color 100ms ease-out;
|
||||
-moz-appearance: none;
|
||||
text-overflow: ellipsis;
|
||||
border: var(--button) solid 1px;
|
||||
border-radius: 2px;
|
||||
padding: 3px 5px;
|
||||
padding-right: 20px;
|
||||
width: 100%;
|
||||
transition: border-color 100ms ease-out;
|
||||
}
|
||||
|
||||
select:hover {
|
||||
border: var(--highlight) solid 1px;
|
||||
border: var(--highlight) solid 1px;
|
||||
}
|
||||
|
||||
.selectWrap {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.selectWrap:before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
right: 7px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
|
||||
transform: rotate(45deg);
|
||||
border-bottom: 2px solid var(--sub-text);
|
||||
border-right: 2px solid var(--sub-text);
|
||||
transform: rotate(45deg);
|
||||
border-bottom: 2px solid var(--sub-text);
|
||||
border-right: 2px solid var(--sub-text);
|
||||
|
||||
transition: border-color 100ms ease-out;
|
||||
transition: border-color 100ms ease-out;
|
||||
}
|
||||
|
||||
.selectWrap:hover::before {
|
||||
border-bottom: 2px solid var(--highlight);
|
||||
border-right: 2px solid var(--highlight);
|
||||
border-bottom: 2px solid var(--highlight);
|
||||
border-right: 2px solid var(--highlight);
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--line);
|
||||
background: var(--line);
|
||||
}
|
||||
|
|
|
@ -78,4 +78,4 @@
|
|||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
|
@ -7,14 +7,14 @@ const S = new settingsObj();
|
|||
const T = new Translate();
|
||||
|
||||
//設定を読み出し
|
||||
S.init().then(function (value) {
|
||||
defaultTargetLang = value.targetLang;
|
||||
secondTargetLang = value.secondTargetLang;
|
||||
langList.value = value.targetLang; //リスト初期値をセット
|
||||
langList.addEventListener("change", changeLang);
|
||||
S.init().then(function(value) {
|
||||
defaultTargetLang = value.targetLang;
|
||||
secondTargetLang = value.secondTargetLang;
|
||||
langList.value = value.targetLang; //リスト初期値をセット
|
||||
langList.addEventListener("change", changeLang);
|
||||
|
||||
document.body.style.fontSize = value.fontSize;
|
||||
})
|
||||
document.body.style.fontSize = value.fontSize;
|
||||
});
|
||||
|
||||
let target = document.getElementById("target");
|
||||
let langList = document.getElementById("langList");
|
||||
|
@ -30,156 +30,165 @@ let sourceWord = "";
|
|||
setLangList();
|
||||
|
||||
function setLangList() {
|
||||
let langListStr = browser.i18n.getMessage("langList");
|
||||
langListStr = langListStr.split(", ");
|
||||
let langListStr = browser.i18n.getMessage("langList");
|
||||
langListStr = langListStr.split(", ");
|
||||
|
||||
for (let i in langListStr) {
|
||||
langListStr[i] = langListStr[i].split(":");
|
||||
}
|
||||
langListStr = langListStr.sort(alphabeticallySort);
|
||||
for (let i in langListStr) {
|
||||
langListStr[i] = langListStr[i].split(":");
|
||||
}
|
||||
langListStr = langListStr.sort(alphabeticallySort);
|
||||
|
||||
let langListHtml = "";
|
||||
for (let i of langListStr) {
|
||||
langListHtml += `<option value=${i[0]}>${i[1]}</option>`
|
||||
}
|
||||
let langListHtml = "";
|
||||
for (let i of langListStr) {
|
||||
langListHtml += `<option value=${i[0]}>${i[1]}</option>`;
|
||||
}
|
||||
|
||||
langList.innerHTML = langListHtml;
|
||||
langList.innerHTML = langListHtml;
|
||||
}
|
||||
|
||||
setTitles();
|
||||
function setTitles(){
|
||||
document.getElementById('donate').title = browser.i18n.getMessage('donateWithPaypalLabel');
|
||||
document.getElementById("setting").title = browser.i18n.getMessage('settingsLabel');
|
||||
document.getElementById("langList").title = browser.i18n.getMessage('targetLangLabel');
|
||||
function setTitles() {
|
||||
document.getElementById("donate").title = browser.i18n.getMessage("donateWithPaypalLabel");
|
||||
document.getElementById("setting").title = browser.i18n.getMessage("settingsLabel");
|
||||
document.getElementById("langList").title = browser.i18n.getMessage("targetLangLabel");
|
||||
}
|
||||
|
||||
function alphabeticallySort(a, b) {
|
||||
if (a[1].toString() > b[1].toString()) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
if (a[1].toString() > b[1].toString()) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
|
||||
//翻訳先言語変更時に更新
|
||||
async function changeLang() {
|
||||
if (typeof (url) != "undefined") showLink();
|
||||
if (typeof url != "undefined") showLink();
|
||||
|
||||
if (sourceWord !== "") {
|
||||
const resultData = await T.translate(sourceWord, undefined, langList.value);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
}
|
||||
if (sourceWord !== "") {
|
||||
const resultData = await T.translate(sourceWord, undefined, langList.value);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
}
|
||||
}
|
||||
|
||||
//アクティブなタブを取得して渡す
|
||||
browser.tabs.query({
|
||||
browser.tabs
|
||||
.query({
|
||||
currentWindow: true,
|
||||
active: true
|
||||
}).then(function (tabs) {
|
||||
})
|
||||
.then(function(tabs) {
|
||||
getSelectionWord(tabs);
|
||||
});
|
||||
});
|
||||
|
||||
//アクティブタブから選択文字列とurlを取得
|
||||
function getSelectionWord(tabs) {
|
||||
for (let tab of tabs) {
|
||||
browser.tabs.sendMessage(
|
||||
tab.id, {
|
||||
message: "fromPopup"
|
||||
}
|
||||
).then(response => {
|
||||
sourceWord = response.word;
|
||||
url = response.url;
|
||||
refleshSource();
|
||||
showLink();
|
||||
}).catch(()=>{});
|
||||
}
|
||||
for (let tab of tabs) {
|
||||
browser.tabs
|
||||
.sendMessage(tab.id, {
|
||||
message: "fromPopup"
|
||||
})
|
||||
.then(response => {
|
||||
sourceWord = response.word;
|
||||
url = response.url;
|
||||
refleshSource();
|
||||
showLink();
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
//ページ翻訳へのリンクを表示
|
||||
function showLink() {
|
||||
document.getElementById("link").innerHTML = "<a href=https://translate.google.com/translate?hl=" + langList.value + "&sl=auto&u=" + encodeURIComponent(url) + ">" + browser.i18n.getMessage('showLink') + "</a>";
|
||||
document.getElementById("link").innerHTML =
|
||||
"<a href=https://translate.google.com/translate?hl=" +
|
||||
langList.value +
|
||||
"&sl=auto&u=" +
|
||||
encodeURIComponent(url) +
|
||||
">" +
|
||||
browser.i18n.getMessage("showLink") +
|
||||
"</a>";
|
||||
}
|
||||
|
||||
//翻訳元テキストを表示
|
||||
function refleshSource() {
|
||||
if (sourceWord !== "") {
|
||||
textarea.innerHTML = sourceWord;
|
||||
resize();
|
||||
inputText();
|
||||
}
|
||||
if (sourceWord !== "") {
|
||||
textarea.innerHTML = sourceWord;
|
||||
resize();
|
||||
inputText();
|
||||
}
|
||||
}
|
||||
|
||||
textarea.addEventListener("paste", resize)
|
||||
textarea.addEventListener("paste", resize);
|
||||
|
||||
textarea.addEventListener("keydown", resize);
|
||||
|
||||
textarea.addEventListener("keyup", function (event) {
|
||||
//if (event.keyCode == 13) resize();
|
||||
resize();
|
||||
inputText();
|
||||
textarea.addEventListener("keyup", function(event) {
|
||||
//if (event.keyCode == 13) resize();
|
||||
resize();
|
||||
inputText();
|
||||
});
|
||||
|
||||
//テキストボックスをリサイズ
|
||||
function resize() {
|
||||
setTimeout(function () {
|
||||
textarea.style.height = "0px";
|
||||
textarea.style.height = parseInt(textarea.scrollHeight) + "px";
|
||||
}, 0);
|
||||
setTimeout(function() {
|
||||
textarea.style.height = "0px";
|
||||
textarea.style.height = parseInt(textarea.scrollHeight) + "px";
|
||||
}, 0);
|
||||
}
|
||||
|
||||
textarea.addEventListener("click", textAreaClick, {
|
||||
once: true
|
||||
once: true
|
||||
});
|
||||
//テキストエリアクリック時の処理
|
||||
function textAreaClick() {
|
||||
textarea.select();
|
||||
textarea.select();
|
||||
}
|
||||
|
||||
//文字入力時の処理
|
||||
async function inputText() {
|
||||
sourceWord = textarea.value;
|
||||
sourceWord = textarea.value;
|
||||
|
||||
const resultData = await T.translate(sourceWord, 'auto', langList.value);
|
||||
changeSecondLang(defaultTargetLang, resultData.sourceLanguage, resultData.percentage);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
const resultData = await T.translate(sourceWord, "auto", langList.value);
|
||||
changeSecondLang(defaultTargetLang, resultData.sourceLanguage, resultData.percentage);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
}
|
||||
|
||||
function showResult(resultText, candidateText) {
|
||||
const resultArea = target.getElementsByClassName("result")[0];
|
||||
const candidateArea = target.getElementsByClassName("candidate")[0];
|
||||
const resultArea = target.getElementsByClassName("result")[0];
|
||||
const candidateArea = target.getElementsByClassName("candidate")[0];
|
||||
|
||||
resultArea.innerText = resultText;
|
||||
if (S.get().ifShowCandidate) candidateArea.innerText = candidateText;
|
||||
resultArea.innerText = resultText;
|
||||
if (S.get().ifShowCandidate) candidateArea.innerText = candidateText;
|
||||
}
|
||||
|
||||
let changeLangFlag = false;
|
||||
|
||||
function changeSecondLang(defaultTargetLang, sourceLang, percentage) {
|
||||
if(!S.get().ifChangeSecondLang) return;
|
||||
//検出された翻訳元言語がターゲット言語と一致
|
||||
const equalsSourceAndTarget = sourceLang == langList.value && percentage > 0;
|
||||
if (!S.get().ifChangeSecondLang) return;
|
||||
//検出された翻訳元言語がターゲット言語と一致
|
||||
const equalsSourceAndTarget = sourceLang == langList.value && percentage > 0;
|
||||
|
||||
//検出された翻訳元言語がデフォルト言語と一致
|
||||
const equalsSourceAndDefault = sourceLang == defaultTargetLang && percentage > 0;
|
||||
//検出された翻訳元言語がデフォルト言語と一致
|
||||
const equalsSourceAndDefault = sourceLang == defaultTargetLang && percentage > 0;
|
||||
|
||||
if (!changeLangFlag) {
|
||||
//通常時
|
||||
if (equalsSourceAndTarget && equalsSourceAndDefault) {
|
||||
//ソースとターゲットとデフォルトが一致する場合
|
||||
//ターゲットを第2言語に変更
|
||||
changeLangFlag = true;
|
||||
langList.value = secondTargetLang;
|
||||
changeLang();
|
||||
}
|
||||
} else {
|
||||
//第2言語に切替した後
|
||||
if (!equalsSourceAndDefault) {
|
||||
//ソースとデフォルトが異なる場合
|
||||
//ターゲットをデフォルトに戻す
|
||||
changeLangFlag = false;
|
||||
langList.value = defaultTargetLang;
|
||||
changeLang();
|
||||
|
||||
}
|
||||
if (!changeLangFlag) {
|
||||
//通常時
|
||||
if (equalsSourceAndTarget && equalsSourceAndDefault) {
|
||||
//ソースとターゲットとデフォルトが一致する場合
|
||||
//ターゲットを第2言語に変更
|
||||
changeLangFlag = true;
|
||||
langList.value = secondTargetLang;
|
||||
changeLang();
|
||||
}
|
||||
} else {
|
||||
//第2言語に切替した後
|
||||
if (!equalsSourceAndDefault) {
|
||||
//ソースとデフォルトが異なる場合
|
||||
//ターゲットをデフォルトに戻す
|
||||
changeLangFlag = false;
|
||||
langList.value = defaultTargetLang;
|
||||
changeLang();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,94 +1,95 @@
|
|||
:root {
|
||||
--simple-translate-main-text: #0c0c0d;
|
||||
--simple-translate-sub-text: #737373;
|
||||
--simple-translate-line: #ededf0;
|
||||
--simple-translate-button: #d7d7db;
|
||||
--simple-translate-highlight: #5595ff;
|
||||
--simple-translate-main-bg: #ffffff;
|
||||
--simple-translate-main-text: #0c0c0d;
|
||||
--simple-translate-sub-text: #737373;
|
||||
--simple-translate-line: #ededf0;
|
||||
--simple-translate-button: #d7d7db;
|
||||
--simple-translate-highlight: #5595ff;
|
||||
--simple-translate-main-bg: #ffffff;
|
||||
}
|
||||
|
||||
#simple-translate-button {
|
||||
all: initial;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 10%;
|
||||
background-image: url("icons/512.png");
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
animation-duration: 200ms;
|
||||
animation-name: simple-translate-showButton;
|
||||
all: initial;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 10%;
|
||||
background-image: url("icons/512.png");
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
position: fixed;
|
||||
z-index: 2147483647;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
animation-duration: 200ms;
|
||||
animation-name: simple-translate-showButton;
|
||||
}
|
||||
|
||||
#simple-translate-panel {
|
||||
all: initial;
|
||||
background-color: var(--simple-translate-main-bg);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
min-height: 20px;
|
||||
max-height: 200px;
|
||||
line-height: 150%;
|
||||
height: auto;
|
||||
min-width: 10px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
padding: 10px 18px;
|
||||
z-index: 2147483646;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
all: initial;
|
||||
background-color: var(--simple-translate-main-bg);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
|
||||
border-radius: 3px;
|
||||
min-height: 20px;
|
||||
max-height: 200px;
|
||||
line-height: 150%;
|
||||
height: auto;
|
||||
min-width: 10px;
|
||||
max-width: 300px;
|
||||
position: fixed;
|
||||
padding: 10px 18px;
|
||||
z-index: 2147483646;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#simple-translate-panel p {
|
||||
all: initial;
|
||||
font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif !important;
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
color: var(--simple-translate-main-text);
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
all: initial;
|
||||
font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial", "Helvetica",
|
||||
sans-serif !important;
|
||||
text-align: left;
|
||||
display: block;
|
||||
font-size: inherit;
|
||||
color: var(--simple-translate-main-text);
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#simple-translate-panel p::-moz-selection {
|
||||
background: var(--simple-translate-line);
|
||||
background: var(--simple-translate-line);
|
||||
}
|
||||
|
||||
#simple-translate-panel .candidate {
|
||||
color: var(--simple-translate-sub-text);
|
||||
margin-top:1em;
|
||||
color: var(--simple-translate-sub-text);
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#simple-translate-panel .candidate:empty {
|
||||
margin-top:0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@keyframes simple-translate-showButton {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: scale3d(1.1, 1.1, 1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes simple-translate-fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,7 +3,10 @@
|
|||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
document.body.insertAdjacentHTML("afterend", "<div id='simple-translate-button'></div><div id='simple-translate-panel'><p>...</p></div>"); //bodyの直後にボタン配置
|
||||
document.body.insertAdjacentHTML(
|
||||
"afterend",
|
||||
"<div id='simple-translate-button'></div><div id='simple-translate-panel'><p>...</p></div>"
|
||||
); //bodyの直後にボタン配置
|
||||
var button = document.getElementById("simple-translate-button");
|
||||
var panel = document.getElementById("simple-translate-panel");
|
||||
var selectionWord;
|
||||
|
@ -15,180 +18,199 @@ S.init();
|
|||
window.addEventListener("mouseup", Select, false);
|
||||
//テキスト選択時の処理 ダブルクリックした時2回処理が走るのを何とかしたい
|
||||
async function Select(e) {
|
||||
hidePanel(e);
|
||||
if (e.target.tagName == "INPUT" && e.target.type == "password") return;
|
||||
hidePanel(e);
|
||||
if (e.target.tagName == "INPUT" && e.target.type == "password") return;
|
||||
|
||||
setTimeout(async () => { //誤動作防止の為ディレイを設ける
|
||||
//選択文の取得 テキストフィールド内を選択した場合にも対応
|
||||
const isTextField = (e.target.tagName == "INPUT") || (e.target.tagName == "TEXTAREA");
|
||||
if (isTextField) selectionWord = e.target.value.substring(e.target.selectionStart, e.target.selectionEnd);
|
||||
else selectionWord = String(window.getSelection());
|
||||
setTimeout(async () => {
|
||||
//誤動作防止の為ディレイを設ける
|
||||
//選択文の取得 テキストフィールド内を選択した場合にも対応
|
||||
const isTextField = e.target.tagName == "INPUT" || e.target.tagName == "TEXTAREA";
|
||||
if (isTextField)
|
||||
selectionWord = e.target.value.substring(e.target.selectionStart, e.target.selectionEnd);
|
||||
else selectionWord = String(window.getSelection());
|
||||
|
||||
//選択文が存在し,パネル外を左クリックした場合は翻訳する
|
||||
const existsSelectionWord = (selectionWord.length !== 0);
|
||||
const isLeftClick = (e.button == 0);
|
||||
const isPanelOutside = (e.target.id !== 'simple-translate-panel') && (e.target.parentElement.id !== 'simple-translate-panel');
|
||||
const shouldTranslate = existsSelectionWord && isLeftClick && isPanelOutside;
|
||||
if (!shouldTranslate) return;
|
||||
//選択文が存在し,パネル外を左クリックした場合は翻訳する
|
||||
const existsSelectionWord = selectionWord.length !== 0;
|
||||
const isLeftClick = e.button == 0;
|
||||
const isPanelOutside =
|
||||
e.target.id !== "simple-translate-panel" &&
|
||||
e.target.parentElement.id !== "simple-translate-panel";
|
||||
const shouldTranslate = existsSelectionWord && isLeftClick && isPanelOutside;
|
||||
if (!shouldTranslate) return;
|
||||
|
||||
//選択した言語が翻訳先言語と異なれば翻訳する
|
||||
const needTranslate = await checkLang(selectionWord, 'auto', S.get().targetLang);
|
||||
if (!needTranslate) return;
|
||||
//選択した言語が翻訳先言語と異なれば翻訳する
|
||||
const needTranslate = await checkLang(selectionWord, "auto", S.get().targetLang);
|
||||
if (!needTranslate) return;
|
||||
|
||||
clickPosition = e;
|
||||
switch (S.get().whenSelectText) {
|
||||
case 'showButton':
|
||||
if (selectionWord.length == 0) return;
|
||||
popupButton(e);
|
||||
break;
|
||||
case 'showPanel':
|
||||
translate(selectionWord, 'auto', S.get().targetLang);
|
||||
if (selectionWord.length == 0) return;
|
||||
showPanel(e);
|
||||
break;
|
||||
case 'dontShowButton':
|
||||
break;
|
||||
}
|
||||
}, 0);
|
||||
clickPosition = e;
|
||||
switch (S.get().whenSelectText) {
|
||||
case "showButton":
|
||||
if (selectionWord.length == 0) return;
|
||||
popupButton(e);
|
||||
break;
|
||||
case "showPanel":
|
||||
translate(selectionWord, "auto", S.get().targetLang);
|
||||
if (selectionWord.length == 0) return;
|
||||
showPanel(e);
|
||||
break;
|
||||
case "dontShowButton":
|
||||
break;
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
//選択テキストの言語をチェックして返す
|
||||
async function checkLang(sourceWord, sourceLang, targetLang) {
|
||||
if (!S.get().ifCheckLang) return true; //設定がオフならtrue
|
||||
sourceWord = sourceWord.substr(0, 100); //先頭100字で言語を判定
|
||||
if (!S.get().ifCheckLang) return true; //設定がオフならtrue
|
||||
sourceWord = sourceWord.substr(0, 100); //先頭100字で言語を判定
|
||||
|
||||
const resultData = await T.translate(sourceWord, sourceLang, targetLang);
|
||||
const needTranslate = (S.get().targetLang != resultData.sourceLanguage) && (resultData.percentage > 0);
|
||||
return needTranslate; //ターゲットとソースの言語が不一致ならtrue
|
||||
const resultData = await T.translate(sourceWord, sourceLang, targetLang);
|
||||
const needTranslate =
|
||||
S.get().targetLang != resultData.sourceLanguage && resultData.percentage > 0;
|
||||
return needTranslate; //ターゲットとソースの言語が不一致ならtrue
|
||||
}
|
||||
|
||||
//ボタンを表示
|
||||
function popupButton(e) {
|
||||
let topPosition = 10;
|
||||
let leftPosition = 10;
|
||||
let buttonSize = S.get().buttonSize;
|
||||
let topPosition = 10;
|
||||
let leftPosition = 10;
|
||||
let buttonSize = S.get().buttonSize;
|
||||
|
||||
switch (S.get().buttonPosition) {
|
||||
case "rightUp":
|
||||
topPosition = (-1 * buttonSize) - 10;
|
||||
break;
|
||||
case "rightDown":
|
||||
break;
|
||||
case "leftUp":
|
||||
topPosition = (-1 * buttonSize) - 10;
|
||||
leftPosition = (-1 * buttonSize) - 10;
|
||||
break;
|
||||
case "leftDown":
|
||||
leftPosition = (-1 * buttonSize) - 10;
|
||||
break;
|
||||
}
|
||||
switch (S.get().buttonPosition) {
|
||||
case "rightUp":
|
||||
topPosition = -1 * buttonSize - 10;
|
||||
break;
|
||||
case "rightDown":
|
||||
break;
|
||||
case "leftUp":
|
||||
topPosition = -1 * buttonSize - 10;
|
||||
leftPosition = -1 * buttonSize - 10;
|
||||
break;
|
||||
case "leftDown":
|
||||
leftPosition = -1 * buttonSize - 10;
|
||||
break;
|
||||
}
|
||||
|
||||
button.style.left = e.clientX + leftPosition + 'px';
|
||||
button.style.top = e.clientY + topPosition + 'px';
|
||||
button.style.width = S.get().buttonSize + "px";
|
||||
button.style.height = S.get().buttonSize + "px";
|
||||
button.style.display = 'block';
|
||||
button.style.left = e.clientX + leftPosition + "px";
|
||||
button.style.top = e.clientY + topPosition + "px";
|
||||
button.style.width = S.get().buttonSize + "px";
|
||||
button.style.height = S.get().buttonSize + "px";
|
||||
button.style.display = "block";
|
||||
}
|
||||
button.addEventListener("click", function (e) {
|
||||
translate(selectionWord, 'auto', S.get().targetLang);
|
||||
button.addEventListener(
|
||||
"click",
|
||||
function(e) {
|
||||
translate(selectionWord, "auto", S.get().targetLang);
|
||||
showPanel(e);
|
||||
}, false);
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
async function translate(sourceWord, sourceLang, targetLang) {
|
||||
const resultData = await T.translate(sourceWord, sourceLang, targetLang);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
panelPosition(clickPosition);
|
||||
const resultData = await T.translate(sourceWord, sourceLang, targetLang);
|
||||
showResult(resultData.resultText, resultData.candidateText);
|
||||
panelPosition(clickPosition);
|
||||
}
|
||||
|
||||
function showResult(resultText, candidateText) {
|
||||
panel.innerHTML = '<p class=result></p><p class=candidate>';
|
||||
const resultArea = panel.getElementsByClassName("result")[0];
|
||||
const candidateArea = panel.getElementsByClassName("candidate")[0];
|
||||
panel.innerHTML = "<p class=result></p><p class=candidate>";
|
||||
const resultArea = panel.getElementsByClassName("result")[0];
|
||||
const candidateArea = panel.getElementsByClassName("candidate")[0];
|
||||
|
||||
resultArea.innerText = resultText;
|
||||
if (S.get().ifShowCandidate) candidateArea.innerText = candidateText;
|
||||
resultArea.innerText = resultText;
|
||||
if (S.get().ifShowCandidate) candidateArea.innerText = candidateText;
|
||||
}
|
||||
|
||||
//パネル表示
|
||||
function showPanel(e) {
|
||||
clickPosition = e;
|
||||
panel.style.display = 'block';
|
||||
panelPosition(e);
|
||||
clickPosition = e;
|
||||
panel.style.display = "block";
|
||||
panelPosition(e);
|
||||
}
|
||||
|
||||
//パネル非表示
|
||||
function hidePanel(e) {
|
||||
button.style.display = 'none'; //ボタンを非表示
|
||||
if ((e.target.id !== "simple-translate-panel") && (e.target.parentElement.id !== "simple-translate-panel")) { //パネル以外の場所をクリックでパネルを非表示
|
||||
panel.style.display = 'none';
|
||||
panel.innerHTML = "<p>...</p>";
|
||||
}
|
||||
button.style.display = "none"; //ボタンを非表示
|
||||
if (
|
||||
e.target.id !== "simple-translate-panel" &&
|
||||
e.target.parentElement.id !== "simple-translate-panel"
|
||||
) {
|
||||
//パネル以外の場所をクリックでパネルを非表示
|
||||
panel.style.display = "none";
|
||||
panel.innerHTML = "<p>...</p>";
|
||||
}
|
||||
}
|
||||
|
||||
//Esc押下でパネルを閉じる
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key == 'Escape') hidePanel(e);
|
||||
})
|
||||
document.addEventListener("keydown", e => {
|
||||
if (e.key == "Escape") hidePanel(e);
|
||||
});
|
||||
|
||||
//パネルがウィンドウ外にはみ出る時に位置を調整
|
||||
function panelPosition(e) {
|
||||
var p = new Object();
|
||||
panel.style.width = S.get().width + 'px'; //300px
|
||||
var panelHeight = panel.clientHeight;
|
||||
var panelWidth = parseInt(window.getComputedStyle(panel.getElementsByTagName("p")[0], null).width);
|
||||
//一旦パネルの横幅を300にしてpの横幅を取得
|
||||
var p = new Object();
|
||||
panel.style.width = S.get().width + "px"; //300px
|
||||
var panelHeight = panel.clientHeight;
|
||||
var panelWidth = parseInt(
|
||||
window.getComputedStyle(panel.getElementsByTagName("p")[0], null).width
|
||||
);
|
||||
//一旦パネルの横幅を300にしてpの横幅を取得
|
||||
|
||||
if (e.clientX + panelWidth > window.innerWidth - 80) {
|
||||
p.x = window.innerWidth - panelWidth - 80;
|
||||
} else {
|
||||
p.x = e.clientX;
|
||||
}
|
||||
if (e.clientY + panelHeight > window.innerHeight - 30) {
|
||||
p.y = window.innerHeight - panelHeight - 30;
|
||||
} else {
|
||||
p.y = e.clientY;
|
||||
}
|
||||
panel.style.width = 'auto'; //panelWidth + 'px';
|
||||
panel.style.top = p.y + 'px';
|
||||
panel.style.left = p.x + 'px';
|
||||
if (e.clientX + panelWidth > window.innerWidth - 80) {
|
||||
p.x = window.innerWidth - panelWidth - 80;
|
||||
} else {
|
||||
p.x = e.clientX;
|
||||
}
|
||||
if (e.clientY + panelHeight > window.innerHeight - 30) {
|
||||
p.y = window.innerHeight - panelHeight - 30;
|
||||
} else {
|
||||
p.y = e.clientY;
|
||||
}
|
||||
panel.style.width = "auto"; //panelWidth + 'px';
|
||||
panel.style.top = p.y + "px";
|
||||
panel.style.left = p.x + "px";
|
||||
|
||||
panel.style.maxWidth = S.get().width + "px";
|
||||
panel.style.maxHeight = S.get().height + "px";
|
||||
panel.style.fontSize = S.get().fontSize + "px";
|
||||
panel.style.backgroundColor = S.get().bgColor;
|
||||
panel.style.maxWidth = S.get().width + "px";
|
||||
panel.style.maxHeight = S.get().height + "px";
|
||||
panel.style.fontSize = S.get().fontSize + "px";
|
||||
panel.style.backgroundColor = S.get().bgColor;
|
||||
}
|
||||
|
||||
|
||||
//スクリプトからのメッセージに返信
|
||||
browser.runtime.onMessage.addListener(function (request) {
|
||||
switch (request.message) {
|
||||
case "fromPopup":
|
||||
return sendToPopup();
|
||||
break;
|
||||
case "showPanelFromMenu":
|
||||
showPanelFromMenu();
|
||||
break;
|
||||
}
|
||||
browser.runtime.onMessage.addListener(function(request) {
|
||||
switch (request.message) {
|
||||
case "fromPopup":
|
||||
return sendToPopup();
|
||||
break;
|
||||
case "showPanelFromMenu":
|
||||
showPanelFromMenu();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
//popupにテキストとurlを返す
|
||||
function sendToPopup() {
|
||||
return Promise.resolve({
|
||||
word: String(window.getSelection()),
|
||||
url: window.location.href
|
||||
});
|
||||
return Promise.resolve({
|
||||
word: String(window.getSelection()),
|
||||
url: window.location.href
|
||||
});
|
||||
}
|
||||
|
||||
//コンテキストメニュークリックでパネルを表示
|
||||
function showPanelFromMenu() {
|
||||
button.style.display = "none";
|
||||
|
||||
//キャレットブラウズモードに対応
|
||||
const isTextField = (document.activeElement.tagName == "INPUT") || (document.activeElement.tagName == "TEXTAREA");
|
||||
if (isTextField) selectionWord = document.activeElement.value.substring(document.activeElement.selectionStart, document.activeElement.selectionEnd);
|
||||
else selectionWord = String(window.getSelection());
|
||||
if (typeof (clickPosition) == 'undefined') clickPosition = { 'clientX': 0, 'clientY': 0 }
|
||||
button.style.display = "none";
|
||||
|
||||
translate(selectionWord, 'auto', S.get().targetLang);
|
||||
showPanel(clickPosition);
|
||||
//キャレットブラウズモードに対応
|
||||
const isTextField =
|
||||
document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA";
|
||||
if (isTextField)
|
||||
selectionWord = document.activeElement.value.substring(
|
||||
document.activeElement.selectionStart,
|
||||
document.activeElement.selectionEnd
|
||||
);
|
||||
else selectionWord = String(window.getSelection());
|
||||
if (typeof clickPosition == "undefined") clickPosition = { clientX: 0, clientY: 0 };
|
||||
|
||||
translate(selectionWord, "auto", S.get().targetLang);
|
||||
showPanel(clickPosition);
|
||||
}
|
||||
|
|
|
@ -4,83 +4,84 @@
|
|||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
class Translate {
|
||||
constructor() {
|
||||
constructor() {}
|
||||
|
||||
set sourceWord(word) {
|
||||
this.sourceWord = word;
|
||||
}
|
||||
|
||||
translate(sourceWord, sourceLang = "auto", targetLang) {
|
||||
//改行で分割
|
||||
const sourceLines = sourceWord.trim().split("\n");
|
||||
|
||||
let promises = [];
|
||||
for (let sourceLine of sourceLines) {
|
||||
promises.push(this.sendRequest(sourceLine, sourceLang, targetLang));
|
||||
}
|
||||
|
||||
set sourceWord(word) {
|
||||
this.sourceWord = word;
|
||||
}
|
||||
return new Promise(resolve => {
|
||||
Promise.all(promises).then(results => {
|
||||
resolve(this.formatResult(results));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
translate(sourceWord, sourceLang = 'auto', targetLang) {
|
||||
//改行で分割
|
||||
const sourceLines = sourceWord.trim().split("\n");
|
||||
sendRequest(word, sourceLang, targetLang) {
|
||||
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&dt=bd&q=${encodeURIComponent(
|
||||
word
|
||||
)}`;
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.responseType = "json";
|
||||
xhr.open("GET", url);
|
||||
xhr.send();
|
||||
|
||||
let promises = [];
|
||||
for (let sourceLine of sourceLines) {
|
||||
promises.push(this.sendRequest(sourceLine, sourceLang, targetLang));
|
||||
return new Promise((resolve, reject) => {
|
||||
xhr.onload = () => {
|
||||
resolve(xhr);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
formatResult(results) {
|
||||
const resultData = {
|
||||
resultText: "",
|
||||
candidateText: "",
|
||||
sourceLanguage: "",
|
||||
percentage: 0
|
||||
};
|
||||
|
||||
//翻訳元言語を取得
|
||||
resultData.sourceLanguage = results[0].response[2];
|
||||
resultData.percentage = results[0].response[6];
|
||||
|
||||
let candidateText = "";
|
||||
let wordCount = 0;
|
||||
let lineCount = 0;
|
||||
|
||||
for (const result of results) {
|
||||
lineCount++;
|
||||
|
||||
//翻訳文を取得
|
||||
for (const response of result.response[0]) {
|
||||
resultData.resultText += response[0];
|
||||
}
|
||||
resultData.resultText += "\n";
|
||||
|
||||
//訳候補を取得
|
||||
if (result.response[1]) {
|
||||
wordCount++;
|
||||
for (let i = 0; i < result.response[1].length; i++) {
|
||||
const partsOfSpeech = result.response[1][i][0];
|
||||
const candidates = result.response[1][i][1];
|
||||
candidateText += `${partsOfSpeech}${partsOfSpeech != "" ? ": " : ""}${candidates.join(
|
||||
", "
|
||||
)}\n`;
|
||||
}
|
||||
|
||||
return new Promise(resolve => {
|
||||
Promise.all(promises)
|
||||
.then((results) => {
|
||||
resolve(this.formatResult(results));
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
//訳候補が一つの単語のみに対して存在するとき返す
|
||||
if (wordCount == 1 && lineCount == 1) resultData.candidateText = candidateText;
|
||||
|
||||
|
||||
sendRequest(word, sourceLang, targetLang) {
|
||||
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&dt=bd&q=${encodeURIComponent(word)}`;
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.responseType = 'json';
|
||||
xhr.open("GET", url);
|
||||
xhr.send();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
xhr.onload = () => {
|
||||
resolve(xhr);
|
||||
};
|
||||
})
|
||||
}
|
||||
|
||||
formatResult(results) {
|
||||
const resultData = {
|
||||
resultText: '',
|
||||
candidateText: '',
|
||||
sourceLanguage: '',
|
||||
percentage: 0
|
||||
}
|
||||
|
||||
//翻訳元言語を取得
|
||||
resultData.sourceLanguage = results[0].response[2];
|
||||
resultData.percentage = results[0].response[6];
|
||||
|
||||
let candidateText = '';
|
||||
let wordCount = 0;
|
||||
let lineCount = 0;
|
||||
|
||||
for (const result of results) {
|
||||
lineCount++;
|
||||
|
||||
//翻訳文を取得
|
||||
for (const response of result.response[0]) {
|
||||
resultData.resultText += response[0];
|
||||
}
|
||||
resultData.resultText += '\n';
|
||||
|
||||
//訳候補を取得
|
||||
if (result.response[1]) {
|
||||
wordCount++;
|
||||
for (let i = 0; i < result.response[1].length; i++) {
|
||||
const partsOfSpeech = result.response[1][i][0];
|
||||
const candidates = result.response[1][i][1];
|
||||
candidateText += `${partsOfSpeech}${partsOfSpeech != '' ? ': ' : ''}${candidates.join(', ')}\n`;
|
||||
}
|
||||
}
|
||||
}
|
||||
//訳候補が一つの単語のみに対して存在するとき返す
|
||||
if (wordCount == 1 && lineCount == 1) resultData.candidateText = candidateText;
|
||||
|
||||
return resultData;
|
||||
}
|
||||
}
|
||||
return resultData;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue