implemented prev/next definitions

SandeepKrSuman · Apr 1, 2022 · 141877a · 141877a
1 parent 61d120f
commit 141877a
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 35 deletions.
diff --git a/content.js b/content.js
@@ -3,21 +3,15 @@ window.addEventListener("mouseup", handleSelection);
 var selectedText;
 
 function handleSelection() {
-    selectedText = window.getSelection().toString();
+  selectedText = window.getSelection().toString().replace(/\s/g, "");
 }
 
 chrome.runtime.onMessage.addListener(gotMessage);
 
-function gotMessage(message, sender, sendResponse){
-    if(selectedText.length > 0){
-        let msg = {
-            swor: selectedText.trim()
-        };
-
-        sendResponse(msg);
-    }
-
-    else{
-        sendResponse({swor: "error"});
-    }
-}
+function gotMessage(message, sender, sendResponse) {
+  let msg =
+    selectedText && selectedText.length > 0
+      ? selectedText
+      : "_TextNotSelected_";
+  sendResponse({ swor: msg });
+}
diff --git a/popup/popup.html b/popup/popup.html
@@ -11,8 +11,8 @@ <h1 id="word"></h1>
       <div id="definition"></div>
       <p id="example"></p>
       <div id="navigatecontainer" class="navigate-container hidenavigator">
-        <span class="navigator previous">&laquo;</span>
-        <span class="navigator next">&raquo;</span>
+        <span id="prev" class="navigator previous">&laquo;</span>
+        <span id="next" class="navigator next">&raquo;</span>
       </div>
       <script src="popup.js" type="text/javascript"></script>
   </body>

diff --git a/popup/popup.js b/popup/popup.js
@@ -7,8 +7,12 @@ function gotTabs(tabs) {
   };
 
   chrome.tabs.sendMessage(tabs[0].id, msg, function (response) {
-    if (response.swor === "error") {
-      document.getElementById("word").innerHTML = "Please select a word!";
+    if (!response) {
+      document.getElementById("phonetic").innerHTML = "Welcome!";
+      document.getElementById("example").innerHTML =
+        "Please select a word to find its definition.";
+    } else if (response.swor === "_TextNotSelected_") {
+      document.getElementById("error").innerHTML = "Please select a word!";
     } else {
       let swo = response.swor;
       swo = swo.replace(/[^a-zA-Z ]/g, "");
@@ -17,26 +21,65 @@ function gotTabs(tabs) {
   });
 }
 
+let wordef,
+  word,
+  phonetic,
+  pos,
+  defin,
+  example,
+  index = 0,
+  indlimit;
+
 async function dictionary(query) {
   let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${query}`;
   let response = await fetch(url);
-  let json = await response.json();
-  if (json && !json.title) {
-    document.getElementById("word").innerHTML = json[0].word;
-    document.getElementById("phonetic").innerHTML = `${
-      json[0].phonetic ? json[0].phonetic : ""
-    }  (${json[0].meanings[0].partOfSpeech})`;
-    document.getElementById("definition").innerHTML =
-      json[0].meanings[0].definitions[0].definition;
-    if (json[0].meanings[0].definitions[0].example) {
-      document.getElementById(
-        "example"
-      ).innerHTML = `Example: ${json[0].meanings[0].definitions[0].example}`;
+  wordef = await response.json();
+  if (wordef && !wordef.title) {
+    indlimit = wordef[0].meanings.length;
+    word = wordef[0].word;
+    phonetic = wordef[0].phonetic ? wordef[0].phonetic : "";
+    index = 0;
+
+    setValues();
+
+    if (indlimit > 1) {
+      document
+        .getElementById("navigatecontainer")
+        .classList.remove("hidenavigator");
     }
-    document
-      .getElementById("navigatecontainer")
-      .classList.remove("hidenavigator");
-  } else if (json.title) {
-    document.getElementById("error").innerHTML = "⚠  " + json.title;
+  } else if (wordef.title) {
+    document.getElementById("error").innerHTML = "⚠  " + wordef.title;
+  }
+}
+
+document.getElementById("prev").addEventListener("click", handlePrevious);
+document.getElementById("next").addEventListener("click", handleNext);
+
+function handlePrevious() {
+  index = index - 1;
+  if (index < 0) index = indlimit - 1;
+  setValues();
+}
+
+function handleNext() {
+  index = index + 1;
+  if (index >= indlimit) index = 0;
+  setValues();
+}
+
+function setValues() {
+  pos = wordef[0].meanings[index].partOfSpeech;
+  defin = wordef[0].meanings[index].definitions[0].definition;
+  example = wordef[0].meanings[index].definitions[0].example
+    ? wordef[0].meanings[index].definitions[0].example
+    : null;
+
+  document.getElementById("word").innerHTML = word;
+  document.getElementById("phonetic").innerHTML = `${phonetic}  (${pos})`;
+  document.getElementById("definition").innerHTML = defin;
+  if (example) {
+    document.getElementById("example").innerHTML = `Example: ${example}`;
+  } else {
+    document.getElementById("example").innerHTML = "";
   }
 }