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
apertium · Jun 25, 2021 · 065c1c9 · 065c1c9
1 parent 062fda2
commit 065c1c9
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 25 deletions.
diff --git 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
@@ -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,14 +21,18 @@ $(".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");
 
     removeFromEnabledWebsiteList(globalSettings, hostname);
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,14 +43,18 @@ $("#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");
 
     removeFromEnabledWebsiteList(globalSettings, hostname);
     updateEnabledTable($("#enabled-website-tbody"));
 });
 
+$(document).click(function(){
+    $("#target-language-dropdown").hide();
+});
+
 function init() {
     globalSettings = getGlobalSettings();
     getLangPairs();