got pop-up translation to work!

conditionally, haven't quite enabled detect-language yet
apertium · Jun 7, 2021 · b574534 · b574534
1 parent f0b7486
commit b574534
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 30 deletions.
diff --git a/background/storage.js b/background/storage.js
@@ -114,7 +114,7 @@ function getLanguageCodeMap(){
         "frp" : "Arpitan",
         "gla" : "Gaelic",
         "hin" : "Hindi",
-        "ara" : "Aragonese",
+        "ara" : "Arabic",
         "guj" : "Gujurati",
         "kok" : "Konkani",
         "mar" : "Marathi",
@@ -171,7 +171,8 @@ function getLanguageCodeMap(){
         "tki" : "Iraqi Türkmen",
         "trw" : "Torwali",
         "zab_Simp" : "Dizhsa(Simp.)",
-        "zab_Phon" : "Dizhsa(Phon.)"
+        "zab_Phon" : "Dizhsa(Phon.)",
+        "select" : "Select"
     }
 }
 

diff --git a/popup/options.js b/popup/options.js
@@ -2,7 +2,7 @@ let globalSettings;
 init()
 
 // Sets default language
-$("#default-target-language-button").click(function () {
+$("#default-target-language-button").on('click', function () {
     let dropdown = $("#target-language-dropdown")[0];
     if (dropdown.style.display === "") {
         dropdown.style.display = "block";
@@ -11,7 +11,7 @@ $("#default-target-language-button").click(function () {
     }
 });
 
-$(".enabled-language").click(function () {
+$(".enabled-language").on('click', function () {
     let selectedLanguage = getSelectedLanguage($(this));
 
     globalSettings.defaultLanguage = selectedLanguage;
@@ -20,7 +20,7 @@ $(".enabled-language").click(function () {
 });
 
 // TODO: delete a website from the hover list
-$(".delete-website").click(function () {
+$(".delete-website").on('click', function () {
 
 });
 

diff --git a/popup/popup.js b/popup/popup.js
@@ -1,10 +1,9 @@
 let globalSettings;
-let prevText = "";
 
 init();
 
-//TODO: Displays source languages available
-$("#source-language-button").click(function () {
+// Displays source languages available
+$("#source-language-button").on('click', function () {
     let dropdown = $("#source-dropdown-div")[0];
     if (dropdown.style.display === "") {
         dropdown.style.display = "block";
@@ -13,15 +12,19 @@ $("#source-language-button").click(function () {
     }
 });
 
-$(".source-language-option").click(function () {
+$("#source-dropdown-div").on('click', '.source-language-option', function () {
     let selectedLanguage = getSelectedLanguage($(this));
 
     setSourceLanguage(selectedLanguage);
-    createTargetDropdown($("#target-language-button"), selectedLanguage)
+    if (selectedLanguage === 'select') {
+        createTargetDropdown($("#target-dropdown-div"));
+    } else {
+        createTargetDropdown($("#target-dropdown-div"), selectedLanguage);
+    }
 });
 
-//TODO: Displays target languages available for current source
-$("#target-language-button").click(function () {
+// Displays target languages available for current source
+$("#target-language-button").on('click', function () {
     let dropdown = $("#target-dropdown-div")[0];
     if (dropdown.style.display === "") {
         dropdown.style.display = "block";
@@ -30,38 +33,45 @@ $("#target-language-button").click(function () {
     }
 });
 
-$(".target-language-option").click(function () {
+$("#target-dropdown-div").on('click', '.target-language-option', function () {
     let selectedLanguage = getSelectedLanguage($(this));
 
     setTargetLanguage(selectedLanguage);
-    createSourceDropdown($("#source-language-button"), selectedLanguage);
+
+    if (selectedLanguage === 'select') {
+        createSourceDropdown($("#source-dropdown-div"));
+    } else {
+        createSourceDropdown($("#source-dropdown-div"), selectedLanguage);
+    }
 });
 
 //TODO: Exchange source and target languages if possible. Set up cases if not
-$("#exchange-source-target").click( function () {
+$("#exchange-source-target").on('click', function () {
 
 });
 
-$("#translate-button").click(function () {
+$("#translate-button").on('click', function () {
     let translateInput = getInputText();
     if (!translateInput) return;
 
-    //TODO: get src and targ languages from user
-    let sourceLanguage = "eng";
-    let targetLanguage = "spa";
+    let sourceLanguage = getSourceLanguage();
+    if(!sourceLanguage) return;
+
+    let targetLanguage = getTargetLanguage();
+    if(!targetLanguage) return;
 
     getTranslation(translateInput, sourceLanguage, targetLanguage).then(translateOutput => {
         $(".output-text-box").val(translateOutput);
     });
 });
 
 // TODO: Translate the entire current webpage
-$("#translate-webpage-button").click(function () {
+$("#translate-webpage-button").on('click', function () {
 
 });
 
 // TODO: Enable hover if inactive before, disable if active
-$("#enable-hover-checkbox").click(function () {
+$("#enable-hover-checkbox").on('click', function () {
 
 });
 
@@ -72,7 +82,6 @@ function init() {
     setTargetLanguage(globalSettings.defaultLanguage);
     createSourceDropdown($("#source-dropdown-div"), globalSettings.defaultLanguage);
     createTargetDropdown($("#target-dropdown-div"));
-
 }
 
 // only return text if it is (a) non-empty; (b) less than the limit; (c) different from the previous input.
@@ -86,19 +95,16 @@ function getInputText() {
     } else if (text.length > globalSettings.inputSizeLimit) {
         inputField.addClass("error");
         return null;
-    } else if (text === prevText) {
-        return null;
     }
 
     inputField.removeClass("error");
-    prevText = text;
 
     return text;
 }
 
 function getSelectedLanguage(selector) {
     selector.addClass("selected-language");
-    let text = $(".selected-language").text();
+    let text = $(".selected-language").val();
     selector.removeClass("selected-language");
 
     return text;
@@ -120,8 +126,31 @@ async function getTranslation(inputText, sourceLanguage, targetLanguage) {
     return outputText;
 }
 
+function getTargetLanguage(){
+    let languageCode = $("#target-language").val();
+
+    if(languageCode === 'select' || languageCode === undefined){
+        $("#target-language").addClass('error');
+        return null;
+    } else {
+        return languageCode
+    }
+}
+
+function getSourceLanguage(){
+    let languageCode = $("#source-language").val();
+
+    if(languageCode === 'select' || languageCode === undefined){
+        $("#source-language").addClass('error');
+        return null;
+    } else {
+        return languageCode
+    }
+}
+
 function setTargetLanguage(targetLanguage) {
     let codeMap = getLanguageCodeMap();
+    $("#target-language").val(targetLanguage);
     if (codeMap[targetLanguage] === undefined) {
         $("#target-language").text(targetLanguage);
     } else {
@@ -131,6 +160,7 @@ function setTargetLanguage(targetLanguage) {
 
 function setSourceLanguage(sourceLanguage) {
     let codeMap = getLanguageCodeMap();
+    $("#source-language").val(sourceLanguage);
     if (codeMap[sourceLanguage] === undefined) {
         $("#source-language").text(sourceLanguage);
     } else {
@@ -149,6 +179,8 @@ function createTargetDropdown(parent, source = "") {
         list = getTargetList();
     }
 
+    parent.append("<option class='enabled-language target-language-option' value='select'>Reset Language</option>");
+
     list.forEach((languageCode) => {
         let languageName;
         if (codeMap[languageCode] === undefined) {
@@ -171,6 +203,8 @@ function createSourceDropdown(parent, target = "") {
         list = getSourceList();
     }
 
+    parent.append("<option class='enabled-language source-language-option' value='select'>Reset Language</option>");
+
     list.forEach((languageCode) => {
         let languageName;
         if (codeMap[languageCode] === undefined) {

diff --git a/settings/settings.js b/settings/settings.js
@@ -1,7 +1,7 @@
 let globalSettings;
 init();
 
-$("#default-target-language-button").click(function () {
+$("#default-target-language-button").on('click', function () {
     let dropdown = $("#target-language-dropdown")[0];
     if (dropdown.style.display === "") {
         dropdown.style.display = "block";
@@ -10,20 +10,20 @@ $("#default-target-language-button").click(function () {
     }
 });
 
-$(".enabled-language").click(function () {
+$(".enabled-language").on('click', function () {
     let selectedLanguage = getSelectedLanguage($(this));
 
     globalSettings.defaultLanguage = selectedLanguage;
     setDefaultLanguage(selectedLanguage);
     saveGlobalSettings(globalSettings);
 });
 
-$("#update-button").click(async function () {
+$("#update-button").on('click', async function () {
     await updateLanguagePairs();
     saveGlobalSettings(globalSettings);
 });
 
-$("#source-select").change(async function () {
+$("#source-select").on('click', async function () {
     let selectedSource = $("#source-select option:selected").text();
     switch (selectedSource) {
         case "Apertium Release":