Sõnaveeb: Display clickable candidates for oblique cases

src/background/background.js

@@ -30,5 +30,17 @@ const init = async () => {
 };
 init();
 
+const onMessage = async (request) => {
+  log.log(logDir, "onMessage()", request);
+  switch (request.message) {
+    case "translateText": {
+      const tab = (await browser.tabs.query({ active: true, currentWindow: true }))[0];
+      browser.tabs.sendMessage(tab.id, request);
+      break;
+    }
+  }
+};
+
 browser.runtime.onInstalled.addListener(onInstalledListener);
 browser.commands.onCommand.addListener(onCommandListener);
+browser.runtime.onMessage.addListener(onMessage);

src/common/translate.js

@@ -127,33 +127,39 @@ const sendRequestToSonaveeb = async (word) => {
   }
 
   const mainDocument = domParser.parseFromString(mainPage.data, "text/html");
-  const wordIdElement = mainDocument.querySelector('input[name="word-id"]');
+  const wordIdElement = mainDocument.querySelector("input[name=\"word-id\"]");
-  if (!wordIdElement) {
+  if (wordIdElement) {
-    resultData.isError = true;
+    const wordId = wordIdElement.getAttribute("value");
-    resultData.errorMessage = `${browser.i18n.getMessage("sonaveebWordIdNotFound")}`;
-    return resultData;
-  }
-  const wordId = wordIdElement.getAttribute("value");
 
-  const wordDetailsPage = await _sendRequestToSonaveeb(`https://sonaveeb.ee/worddetails/unif/${wordId}`, resultData);
+    const wordDetailsPage = await _sendRequestToSonaveeb(`https://sonaveeb.ee/worddetails/unif/${wordId}`, resultData);
-  if (resultData.isError) {
+    if (resultData.isError) {
-    return resultData;
+      return resultData;
-  }
-
-  resultData.resultText = wordDetailsPage.data;
-
-  const wordDetailsDocument = domParser.parseFromString(wordDetailsPage.data, "text/html");
-  const morphoModalElement = wordDetailsDocument.querySelector('#morpho-modal-0');
-  if (morphoModalElement) {
-    const paradigmId = morphoModalElement.getAttribute("data-paradigm-id");
-
-    const morphoPage = await _sendRequestToSonaveeb(`https://sonaveeb.ee/morpho/unif/${paradigmId}/est`, resultData);
-    if (!resultData.isError) {
-      resultData.resultText += morphoPage.data;
-    } else {
-      resultData.isError = false;
-      resultData.errorMessage = "";
     }
+
+    resultData.resultText = wordDetailsPage.data;
+
+    const wordDetailsDocument = domParser.parseFromString(wordDetailsPage.data, "text/html");
+    const morphoModalElement = wordDetailsDocument.querySelector("#morpho-modal-0");
+    if (morphoModalElement) {
+      const paradigmId = morphoModalElement.getAttribute("data-paradigm-id");
+
+      const morphoPage = await _sendRequestToSonaveeb(`https://sonaveeb.ee/morpho/unif/${paradigmId}/est`, resultData);
+      if (!resultData.isError) {
+        resultData.resultText += morphoPage.data;
+      } else {
+        resultData.isError = false;
+        resultData.errorMessage = "";
+      }
+    }
+  } else {
+    const wordFormElement = mainDocument.querySelector("a.word-form");
+    if (!wordFormElement) {
+      resultData.isError = true;
+      resultData.errorMessage = `${browser.i18n.getMessage("sonaveebWordIdNotFound")}`;
+      return resultData;
+    }
+
+    resultData.candidateText = wordFormElement.parentNode.innerHTML;
   }
 
   resultData.sourceLanguage = "et";

src/content/components/TranslatePanel.js

@@ -138,6 +138,17 @@ export default class TranslatePanel extends Component {
     return { panelWidth: wrapperWidth, panelHeight: wrapperHeight };
   };
 
+  onCandidateClick = e => {
+    e.preventDefault();
+    if (e.target.tagName === "A" && e.target.className === "word-form") {
+      browser.runtime.sendMessage({
+        message: "translateText",
+        text: e.target.dataset.word,
+        position: this.props.position,
+      });
+    }
+  };
+
   componentWillReceiveProps = nextProps => {
     const isChangedContents =
       this.props.resultText !== nextProps.resultText ||
@@ -201,9 +212,12 @@ export default class TranslatePanel extends Component {
               ? ( <p className="simple-translate-result" dir="auto" dangerouslySetInnerHTML={{__html: resultText}}></p> )
               : ( <p className="simple-translate-result" style={getResultFontColor()} dir="auto">{splitLine(resultText)}</p> )
             }
-            <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto">
+            {rawHTML
-              {splitLine(candidateText)}
+              ? ( <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto" onClick={this.onCandidateClick} dangerouslySetInnerHTML={{__html: candidateText}}></p> )
-            </p>
+              : ( <p className="simple-translate-candidate" style={getCandidateFontColor()} dir="auto">
+                {splitLine(candidateText)}
+              </p> )
+            }
             {isError && (
               <p className="simple-translate-error">
                 {errorMessage}

src/content/index.js

@@ -167,6 +167,12 @@ const handleMessage = async request => {
       showTranslateContainer(selectedText, selectedPosition, null, true);
       break;
     }
+    case "translateText": {
+      if (!isEnabled) return empty;
+      removeTranslatecontainer();
+      showTranslateContainer(request.text, request.position, null, true);
+      break;
+    }
     case "getEnabled":
       return isEnabled;
     case "enableExtension":