commit f0b7486120d86405c46b3ed3d36311dc2ccc314f
Author: OverPoweredDev <omkar.prabhune19@vit.edu>
Date:   Sun Jun 6 15:16:57 2021 +0530

    enabled dropdowns to work everywhere

diff --git a/background/storage.js b/background/storage.js
index 7ece728..fb424c9 100644
--- a/background/storage.js
+++ b/background/storage.js
@@ -34,10 +34,12 @@ function getLanguageCodeMap(){
         "mlt" : "Maltese",
         "mlt_translit" : "Maltese(translit.)",
         "cat" : "Catalan",
+        "cym" : "Welsh",
         "spa" : "Spanish",
         "ben" : "Bangali",
         "eng" : "English",
         "rus" : "Russian",
+        "eus" : "Basque",
         "tat" : "Tatar",
         "btc" : "Bati",
         "asm" : "Assamese",
@@ -227,4 +229,26 @@ function getTargetList() {
         list.push(languageList[i].targetLanguage);
     }
     return [...new Set(list)];
+}
+
+function getSourceWithTarget(target) {
+    let languageList = JSON.parse(localStorage.getItem("apertium.langPairs")).langPairs;
+    let list = [];
+    for (let i = 0; i < languageList.length; i++) {
+        if(languageList[i].targetLanguage === target) {
+            list.push(languageList[i].sourceLanguage);
+        }
+    }
+    return [...new Set(list)];
+}
+
+function getTargetwithSource(source) {
+    let languageList = JSON.parse(localStorage.getItem("apertium.langPairs")).langPairs;
+    let list = [];
+    for (let i = 0; i < languageList.length; i++) {
+        if(languageList[i].sourceLanguage === source) {
+            list.push(languageList[i].targetLanguage);
+        }
+    }
+    return [...new Set(list)];
 }
\ No newline at end of file
diff --git a/popup/options.html b/popup/options.html
index 2fcdec0..df0dfdc 100644
--- a/popup/options.html
+++ b/popup/options.html
@@ -39,7 +39,7 @@
                     </svg>
                 </button>
             </div>
-            <div id="target-language-dropdown" class="language-dropdown"></div>
+            <div id="target-language-dropdown" class="language-dropdown target-language-dropdown"></div>
         </div>
     </div>
     <div class="website-table">
diff --git a/popup/popup.css b/popup/popup.css
index 5c7cf84..624b412 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -233,13 +233,13 @@ tr, td, th {
     position: absolute;
     background-color: #f1f1f1;
     max-height: 9em;
-    width: 10em;
+    width: 10.5em;
     box-shadow: 0 0.2em 0.4em 0 rgba(0,0,0,0.2);
     z-index: 2;
     overflow-y: auto;
 }
 
-#target-language-dropdown {
+.target-language-dropdown {
     right: 0;
 }
 
diff --git a/popup/popup.html b/popup/popup.html
index 70a67e6..fac04b7 100644
--- a/popup/popup.html
+++ b/popup/popup.html
@@ -32,8 +32,8 @@
             <div class="d-inline-flex align-items-start justify-content-between">
                 <div class="dropdown">
                     <div role="group" class="d-flex flex-wrap pl-0 btn-group">
-                        <button type="button" class="btn btn-dark btn-sm">Source Lang</button>
-                        <button id="source-language-dropdown" value="detect" type="button" class="btn btn-dark btn-sm">
+                        <button id="source-language" type="button" class="btn btn-dark btn-sm">Source Lang</button>
+                        <button id="source-language-button" value="detect" type="button" class="btn btn-dark btn-sm">
                             <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor"
                                  class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                 <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
@@ -53,15 +53,15 @@
             <div class="d-inline-flex align-items-start justify-content-between">
                 <div class="dropdown">
                     <div role="group" class="d-flex flex-wrap pl-0 btn-group">
-                        <button type="button" class="btn btn-dark btn-sm">Target Lang</button>
-                        <button id="target-language-dropdown" type="button" class="btn btn-dark btn-sm">
+                        <button id="target-language" type="button" class="btn btn-dark btn-sm">Target Lang</button>
+                        <button id="target-language-button" type="button" class="btn btn-dark btn-sm">
                             <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor"
                                  class="bi bi-caret-down-fill" viewBox="0 0 16 16">
                                 <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
                             </svg>
                         </button>
                     </div>
-                    <div id="target-dropdown-div" class="language-dropdown"></div>
+                    <div id="target-dropdown-div" class="language-dropdown target-language-dropdown"></div>
                 </div>
             </div>
         </div>
diff --git a/popup/popup.js b/popup/popup.js
index a4fd8b7..63f2395 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -1,15 +1,40 @@
-let globalSettings = getGlobalSettings();
+let globalSettings;
 let prevText = "";
 
+init();
+
 //TODO: Displays source languages available
-$("#source-language-dropdown").click(function () {
-    let sourceLanguageList = getSourceList();
-    createDropdown($("#source-dropdown-div"), sourceLanguageList);
+$("#source-language-button").click(function () {
+    let dropdown = $("#source-dropdown-div")[0];
+    if (dropdown.style.display === "") {
+        dropdown.style.display = "block";
+    } else {
+        dropdown.style.display = "";
+    }
+});
+
+$(".source-language-option").click(function () {
+    let selectedLanguage = getSelectedLanguage($(this));
+
+    setSourceLanguage(selectedLanguage);
+    createTargetDropdown($("#target-language-button"), selectedLanguage)
 });
 
 //TODO: Displays target languages available for current source
-$("#target-language-dropdown").click(function () {
+$("#target-language-button").click(function () {
+    let dropdown = $("#target-dropdown-div")[0];
+    if (dropdown.style.display === "") {
+        dropdown.style.display = "block";
+    } else {
+        dropdown.style.display = "";
+    }
+});
+
+$(".target-language-option").click(function () {
+    let selectedLanguage = getSelectedLanguage($(this));
 
+    setTargetLanguage(selectedLanguage);
+    createSourceDropdown($("#source-language-button"), selectedLanguage);
 });
 
 //TODO: Exchange source and target languages if possible. Set up cases if not
@@ -43,6 +68,10 @@ $("#enable-hover-checkbox").click(function () {
 
 
 function init() {
+    globalSettings = getGlobalSettings();
+    setTargetLanguage(globalSettings.defaultLanguage);
+    createSourceDropdown($("#source-dropdown-div"), globalSettings.defaultLanguage);
+    createTargetDropdown($("#target-dropdown-div"));
 
 }
 
@@ -67,6 +96,14 @@ function getInputText() {
     return text;
 }
 
+function getSelectedLanguage(selector) {
+    selector.addClass("selected-language");
+    let text = $(".selected-language").text();
+    selector.removeClass("selected-language");
+
+    return text;
+}
+
 async function getTranslation(inputText, sourceLanguage, targetLanguage) {
     let outputText;
     let langPair = "";
@@ -83,9 +120,64 @@ async function getTranslation(inputText, sourceLanguage, targetLanguage) {
     return outputText;
 }
 
-function createDropdown(parent, list) {
+function setTargetLanguage(targetLanguage) {
+    let codeMap = getLanguageCodeMap();
+    if (codeMap[targetLanguage] === undefined) {
+        $("#target-language").text(targetLanguage);
+    } else {
+        $("#target-language").text(codeMap[targetLanguage]);
+    }
+}
+
+function setSourceLanguage(sourceLanguage) {
+    let codeMap = getLanguageCodeMap();
+    if (codeMap[sourceLanguage] === undefined) {
+        $("#source-language").text(sourceLanguage);
+    } else {
+        $("#source-language").text(codeMap[sourceLanguage]);
+    }
+}
+
+function createTargetDropdown(parent, source = "") {
     parent.empty();
+    let codeMap = getLanguageCodeMap();
+
+    let list;
+    if (source) {
+        list = getTargetwithSource(source);
+    } else {
+        list = getTargetList();
+    }
+
     list.forEach((languageCode) => {
-        parent.append("<option class='enabled-language' value='" + languageCode + "'>" + languageCode + "</option>");
-    })
+        let languageName;
+        if (codeMap[languageCode] === undefined) {
+            languageName = languageCode;
+        } else {
+            languageName = codeMap[languageCode];
+        }
+        parent.append("<option class='enabled-language target-language-option' value='" + languageCode + "'>" + languageName + "</option>");
+    });
 }
+
+function createSourceDropdown(parent, target = "") {
+    parent.empty();
+    let codeMap = getLanguageCodeMap();
+
+    let list;
+    if (target) {
+        list = getSourceWithTarget(target);
+    } else {
+        list = getSourceList();
+    }
+
+    list.forEach((languageCode) => {
+        let languageName;
+        if (codeMap[languageCode] === undefined) {
+            languageName = languageCode;
+        } else {
+            languageName = codeMap[languageCode];
+        }
+        parent.append("<option class='enabled-language source-language-option' value='" + languageCode + "'>" + languageName + "</option>");
+    });
+}
\ No newline at end of file