Add the option show translation candidates

simple-translate/_locales/en/messages.json

@@ -29,6 +29,12 @@
     "webPageLabel": {
         "message": "Web page"
     },
+    "ifShowCandidateLabel": {
+        "message": "Show translation candidates"
+    },
+    "ifShowCandidateCaptionLabel": {
+        "message": "Show multiple translation candidates when a single word is translated."
+    },
     "ifShowButtonLabel": {
         "message": "Display the button when text is selected"
     },

simple-translate/options/options.html

@@ -54,6 +54,19 @@
                                 </div>
                             </div>
                         </li>
+
+                        <li class="optionContainer new">
+                            <div class=optionText>
+                                <p class=ifShowCandidateLabel>翻訳候補を表示する</p>
+                                <p class="caption ifShowCandidateCaptionLabel">単一の語句が翻訳された時に複数の候補を表示します。</p>
+                            </div>
+                            <div class=optionForm>
+                                <label>
+                                    <input type=checkbox id=ifShowCandidate class=saveByChange>
+                                    <span class=checkbox></span>
+                                </label>
+                            </div>
+                        </li>
                     </ul>
                 </li>
 

simple-translate/popup/popup.css

@@ -91,6 +91,14 @@ hr {
     padding: 0px 5px 20px;
 }
 
+#target p {
+    margin: 0;
+}
+
+#target .candidate {
+    color: var(--sub-text);
+}
+
 #footer {
     display: flex;
     flex-direction: row;

simple-translate/popup/popup.html

@@ -19,7 +19,8 @@
 
         <hr>
         <div id=target>
-            <p></p>
+            <p class=result></p>
+            <p class=candidate></p>
         </div>
     </div>
     <div id=footer>

simple-translate/popup/popup.js

@@ -132,7 +132,9 @@ function getRequest(word) {
     return new Promise(function (resolve, reject) {
         let xhr = new XMLHttpRequest();
         xhr.responseType = 'json';
-        let url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=" + targetLang + "&dt=t&q=" + encodeURIComponent(word);
+        //let url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=" + targetLang + "&dt=t&q=" + encodeURIComponent(word);
+        let url = "https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=" + targetLang + "&dt=t&dt=bd&q=" + encodeURIComponent(word);
+
         xhr.open("GET", url);
         xhr.send();
         xhr.onload = function () {
@@ -143,8 +145,15 @@ function getRequest(word) {
 
 //翻訳結果を表示
 function showResult(results) {
-    target.innerText = "";
+    const resultArea = target.getElementsByClassName("result")[0];
+    const candidateArea = target.getElementsByClassName("candidate")[0];
+    resultArea.innerText = "";
+    candidateArea.innerText = "";
+
     let resultText = "";
+    let candidateText = "";
+    let wordsCount = 0;
+    let lineCount = 0;
 
     //第二言語に変更
     if (ifChangeSecondLang) {
@@ -154,12 +163,23 @@ function showResult(results) {
         else if ((lang != defaultTargetLang || percentage == 0) && changeLangFlag) unchangeSecondLang();
     }
     for (let j = 0; j < results.length; j++) {
+        lineCount++;
         for (let i = 0; i < results[j].response[0].length; i++) {
             resultText += results[j].response[0][i][0];
         }
         resultText += "\n";
+
+        if (results[j].response[1]) {
+            wordsCount++;
+            for (let i = 0; i < results[j].response[1].length; i++) {
+                const partsOfSpeech = results[j].response[1][i][0];
+                const candidates = results[j].response[1][i][1];
+                candidateText += `\n${partsOfSpeech}${partsOfSpeech!="" ? ": " : ""}${candidates.join(", ")}`;
+            }
+        }
     }
-    target.innerText = resultText;
+    resultArea.innerText = resultText;
+    if (S.get().ifShowCandidate && wordsCount == 1 && lineCount == 1) candidateArea.innerText = candidateText;
 }
 
 let changeLangFlag = false;

simple-translate/simple-translate.css

@@ -50,6 +50,9 @@
 
 #simple-translate-panel p::-moz-selection {
     background: #ebebeb;
+
+#simple-translate-panel .candidate {
+    color: var(--sub-text);
 }
 
 @keyframes simple-translate-showButton {

simple-translate/simple-translate.js

@@ -112,20 +112,29 @@ function getRequest(word) {
 function showResult(results) {
     panel.innerText = "";
     let resultText = "";
+    let candidateText = "";
+    let wordsCount = 0;
+    let lineCount = 0;
+
     for (let j = 0; j < results.length; j++) {
+        lineCount++;
         for (let i = 0; i < results[j].response[0].length; i++) {
             resultText += results[j].response[0][i][0];
         }
-        resultText += "\n"; //
+        resultText += "\n";
 
         if (results[j].response[1]) {
-          for (let i = 0; i < results[j].response[1].length; i++) {
+            wordsCount++;
-            resultText += "\n" + results[j].response[1][i][0] + ": " + results[j].response[1][i][1].join(", ");
+            for (let i = 0; i < results[j].response[1].length; i++) {
-          }
+                const partsOfSpeech = results[j].response[1][i][0];
+                const candidates = results[j].response[1][i][1];
+                candidateText += `\n${partsOfSpeech}${partsOfSpeech!="" ? ": " : ""}${candidates.join(", ")}`;
+            }
         }
     }
-    panel.innerHTML = "<p></p>"
+    panel.innerHTML = "<p class=result></p><p class=candidate>"
-    panel.getElementsByTagName("p")[0].innerText = resultText;
+    panel.getElementsByClassName("result")[0].innerText = resultText;
+    if (S.get().ifShowCandidate && wordsCount == 1 && lineCount == 1) panel.getElementsByClassName("candidate")[0].innerText = candidateText;
     panelPosition(clickPosition);
 
 }
@@ -170,7 +179,7 @@ function panelPosition(e) {
 
     panel.style.maxWidth = S.get().width + "px";
     panel.style.maxHeight = S.get().height + "px";
-    panel.getElementsByTagName("p")[0].style.fontSize = S.get().fontSize + "px";
+    panel.style.fontSize = S.get().fontSize + "px";
 }