commit 065c1c99522d7a131325054f0429419f205c5b42
Author: OverPoweredDev <omkar.prabhune19@vit.edu>
Date:   Fri Jun 25 11:59:24 2021 +0530

    made some minor updates
    
    - Dropdown closes when you click anywhere on the rest of the body for both pop-up's and settings
    - Removed a couple TODO's
    - fixed some other warnings

diff --git a/src/popup/options.html b/src/popup/options.html
index 4b6fe0e..e21ef85 100644
--- a/src/popup/options.html
+++ b/src/popup/options.html
@@ -39,7 +39,7 @@
                     </svg>
                 </button>
             </div>
-            <div id="target-language-dropdown" class="language-dropdown target-language-dropdown"></div>
+            <div id="target-language-dropdown" class="language-dropdown target-language-dropdown" style="display: none"></div>
         </div>
     </div>
     <div class="website-table">
diff --git a/src/popup/options.js b/src/popup/options.js
index ac60b1a..e89199f 100644
--- a/src/popup/options.js
+++ b/src/popup/options.js
@@ -2,12 +2,14 @@ let globalSettings;
 init()
 
 // Sets default language
-$("#default-target-language-button").on('click', function () {
+$("#default-target-language-button").on('click', function (e) {
+    e.stopPropagation();
+
     let dropdown = $("#target-language-dropdown")[0];
-    if (dropdown.style.display === "") {
+    if (dropdown.style.display === "none") {
         dropdown.style.display = "block";
     } else {
-        dropdown.style.display = "";
+        dropdown.style.display = "none";
     }
 });
 
@@ -19,7 +21,7 @@ $(".enabled-language").on('click', function () {
     saveGlobalSettings(globalSettings);
 });
 
-// TODO: delete a website from the hover list
+// Deletes a website from the hover list
 $(".delete-website").on('click', function () {
     let hostname = $(this).attr("data-url");
 
@@ -27,6 +29,10 @@ $(".delete-website").on('click', function () {
     updateEnabledTable($("#enabled-website-tbody"));
 });
 
+$(document).click(function() {
+    $("#target-language-dropdown").hide();
+});
+
 function init() {
     globalSettings = getGlobalSettings();
     getLangPairs();
diff --git a/src/popup/popup.css b/src/popup/popup.css
index 624b412..c5e6ded 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -225,11 +225,9 @@ tr, td, th {
 
 .dropdown {
     position: relative;
-    display: inline-block;
 }
 
 .language-dropdown {
-    display: none;
     position: absolute;
     background-color: #f1f1f1;
     max-height: 9em;
diff --git a/src/popup/popup.html b/src/popup/popup.html
index cb1a0f4..f000ff7 100644
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -41,7 +41,7 @@
                             </svg>
                         </button>
                     </div>
-                    <div id="source-dropdown-div" class="language-dropdown"></div>
+                    <div id="source-dropdown-div" class="language-dropdown" style="display: none"></div>
                 </div>
             </div>
         </div>
@@ -62,7 +62,7 @@
                             </svg>
                         </button>
                     </div>
-                    <div id="target-dropdown-div" class="language-dropdown target-language-dropdown"></div>
+                    <div id="target-dropdown-div" class="language-dropdown target-language-dropdown" style="display: none"></div>
                 </div>
             </div>
         </div>
@@ -84,8 +84,8 @@
                 <button id="translate-webpage-button" type="button" class="btn btn-dark btn-sm">Translate Webpage</button>
             </div>
             <div class="enable-hover-checkbox form-check">
-                <input id="enable-hover-checkbox" class="form-check-input" type="checkbox" value="" id="enable-hover">
-                <label class="form-check-label" for="enable-hover">
+                <input id="enable-hover-checkbox" class="form-check-input" type="checkbox" value="">
+                <label class="form-check-label" for="enable-hover-checkbox">
                     Enable Hover-In Translation
                 </label>
             </div>
diff --git a/src/popup/popup.js b/src/popup/popup.js
index 8b95cfb..2fe26c4 100644
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -3,12 +3,14 @@ let globalSettings;
 init();
 
 // Displays source languages available
-$("#source-language-button").on('click', function () {
+$("#source-language-button").on('click', function (e) {
+    e.stopPropagation();
+
     let dropdown = $("#source-dropdown-div")[0];
-    if (dropdown.style.display === "") {
+    if (dropdown.style.display === "none") {
         dropdown.style.display = "block";
     } else {
-        dropdown.style.display = "";
+        dropdown.style.display = "none";
     }
 });
 
@@ -24,12 +26,14 @@ $("#source-dropdown-div").on('click', '.source-language-option', function () {
 });
 
 // Displays target languages available for current source
-$("#target-language-button").on('click', function () {
+$("#target-language-button").on('click', function (e) {
+    e.stopPropagation();
+
     let dropdown = $("#target-dropdown-div")[0];
-    if (dropdown.style.display === "") {
+    if (dropdown.style.display === "none") {
         dropdown.style.display = "block";
     } else {
-        dropdown.style.display = "";
+        dropdown.style.display = "none";
     }
 });
 
@@ -113,7 +117,10 @@ $("#enable-hover-checkbox").on('click', async function () {
     });
 });
 
-
+$(document).click(function(){
+    $("#target-dropdown-div").hide();
+    $("#source-dropdown-div").hide();
+});
 
 async function init() {
     globalSettings = getGlobalSettings();
@@ -188,8 +195,7 @@ async function getSourceLanguage(){
         $("#source-language").addClass('error');
         return null;
     } else if (languageCode === 'detect') {
-        let detectCode = await detectInputLanguage();
-        return detectCode;
+        return await detectInputLanguage();
     } else {
         return languageCode
     }
diff --git a/src/settings/settings.html b/src/settings/settings.html
index 7cb28e1..d745a63 100644
--- a/src/settings/settings.html
+++ b/src/settings/settings.html
@@ -31,7 +31,7 @@
           </svg>
         </button>
       </div>
-      <div id="target-language-dropdown" class="language-dropdown">
+      <div id="target-language-dropdown" class="language-dropdown" style="display: none">
       </div>
     </div>
   </div>
diff --git a/src/settings/settings.js b/src/settings/settings.js
index a199862..5326339 100644
--- a/src/settings/settings.js
+++ b/src/settings/settings.js
@@ -1,12 +1,14 @@
 let globalSettings;
 init();
 
-$("#default-target-language-button").on('click', function () {
+$("#default-target-language-button").on('click', function (e) {
+    e.stopPropagation();
+
     let dropdown = $("#target-language-dropdown")[0];
-    if (dropdown.style.display === "") {
+    if (dropdown.style.display === "none") {
         dropdown.style.display = "block";
     } else {
-        dropdown.style.display = "";
+        dropdown.style.display = "none";
     }
 });
 
@@ -41,7 +43,7 @@ $("#source-select").on('click', async function () {
     saveGlobalSettings(globalSettings);
 });
 
-// TODO: hover-enabled table
+// Delete a website from hover-enabled table
 $(".delete-website").on('click', function () {
     let hostname = $(this).attr("data-url");
 
@@ -49,6 +51,10 @@ $(".delete-website").on('click', function () {
     updateEnabledTable($("#enabled-website-tbody"));
 });
 
+$(document).click(function(){
+    $("#target-language-dropdown").hide();
+});
+
 function init() {
     globalSettings = getGlobalSettings();
     getLangPairs();