Make the option of behavior when text is selected a radio button

simple-translate/_locales/en/messages.json

@@ -35,17 +35,26 @@
     "ifShowCandidateCaptionLabel": {
         "message": "Show multiple translation candidates when a single word is translated."
     },
-    "ifAutoTranslate": {
-        "message": "Automatically display translation panel"
+    "whenSelectTextLabel": {
+        "message": "Behavior when selecting text"
     },
     "ifAutoTranslateLabel": {
+        "message": "Display translation panel"
+    },
+    "ifAutoTranslateCaptionLabel": {
         "message": "Directly display the translation panel without displaying the button."
     },
     "ifShowButtonLabel": {
-        "message": "Display the button when text is selected"
+        "message": "Display translation button"
     },
     "ifShowButtonCaptionLabel": {
-        "message": "Display the translation button when text is selected on the web page."
+        "message": "Display the translation button to open the panel when clicked."
+    },
+    "dontshowbuttonlabel": {
+        "message": "Don't display button or panel"
+    },
+    "dontshowbuttonCaptionlabel": {
+        "message": "Don't display the translation button or the translation panel."
     },
     "ifCheckLangLabel": {
         "message": "Do not display the button if translation is not required"

simple-translate/_locales/ja_JP/messages.json

@@ -47,12 +47,6 @@
     "ifCheckLangCaptionLabel": {
         "message": "選択したテキストの言語を検出し，翻訳先言語と同じ場合はボタンを表示しません。"
     },
-    "ifAutoTranslate": {
-        "message": "自動的に翻訳パネルを表示する"
-    },
-    "ifAutoTranslateLabel": {
-        "message": "ボタンを表示せずに直接翻訳パネルを表示します。"
-    },
     "ifShowMenuLabel": {
         "message": "コンテキストメニューを表示する"
     },

simple-translate/options/options.css

@@ -141,6 +141,10 @@ hr {
     padding: 10px 0px 10px 0px;
 }
 
+.optionContainer.reverse {
+    flex-direction: row-reverse;
+}
+
 .buttonsContainer {
     justify-content: flex-start;
 }
@@ -166,6 +170,11 @@ hr {
     justify-content: flex-end;
 }
 
+.reverse .optionForm {
+    flex-basis: 40px;
+    justify-content: flex-start;
+}
+
 #importClear {
     position: relative;
     left: 10px;
@@ -315,6 +324,48 @@ input[type="checkbox"]:checked + .checkbox::after {
     border-right: 3px solid var(--highlight);
 }
 
+input[type="radio"] {
+    display: none;
+}
+
+.radio {
+    padding-left: 20px;
+    position: relative;
+    cursor: pointer;
+}
+
+.radio::before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: -2px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--button);
+    border-radius: 50%;
+}
+
+.radio:hover::before {
+    border-color: var(--highlight);
+}
+
+input[type="radio"]:checked + .radio {
+    color: var(--highlight);
+}
+
+input[type="radio"]:checked + .radio::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: var(--highlight);
+}
+
 select {
     -moz-appearance: none;
     text-overflow: ellipsis;

simple-translate/options/options.html

@@ -79,18 +79,48 @@
                     <ul class=categoryElements>
                         <li class=optionContainer>
                             <div class=optionText>
-                                <p class=ifShowButtonLabel>テキスト選択時にボタンを表示する</p>
-                                <p class="caption ifShowButtonCaptionLabel">webページ上のテキストを選択した時に翻訳ボタンを表示します。</p>
-                            </div>
-                            <div class=optionForm>
-                                <label>
-                                <input type=checkbox id=ifShowButton class=saveByChange checked>
-                                <span class=checkbox></span>
-                                </label>
+                                <p class=whenSelectTextLabel>テキスト選択時の動作</p>
                             </div>
                         </li>
                         <ul class=childElements>
                             <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=ifShowButtonLabel>翻訳ボタンを表示する</p>
+                                    <p class="caption ifShowButtonCaptionLabel">クリックすると翻訳パネルが開くボタンを表示します。</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input type=radio name=whenSelectText value=showButton class=saveByChange>
+                                        <span class=radio></span>
+                                    </label>
+                                </div>
+                            </li>
+                            <li class="optionContainer new">
+                                <div class=optionText>
+                                    <p class=ifAutoTranslateLabel>翻訳パネルを表示する</p>
+                                    <p class="caption ifAutoTranslateCaptionLabel">ボタンを表示せずに直接翻訳パネルを表示します。</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input type=radio name=whenSelectText value=showPanel class=saveByChange>
+                                        <span class=radio></span>
+                                    </label>
+                                </div>
+                            </li>
+                            <li class=optionContainer>
+                                <div class=optionText>
+                                    <p class=dontShowButtonLabel>ボタンやパネルを表示しない</p>
+                                    <p class="caption dontShowButtonCaptionLabel">翻訳ボタンや翻訳パネルを表示しません。</p>
+                                </div>
+                                <div class=optionForm>
+                                    <label>
+                                        <input type=radio name=whenSelectText value=dontShowButton class=saveByChange checked>
+                                        <span class=radio></span>
+                                    </label>
+                                </div>
+                            </li>
+                            <hr>
+                            <li class="optionContainer">
                                 <div class=optionText>
                                     <p class=ifCheckLangLabel>翻訳の必要がなければボタンを表示しない</p>
                                     <p class="caption ifCheckLangCaptionLabel">選択したテキストの言語を判定し，翻訳先言語と同じ場合はボタンを表示しません。</p>
@@ -102,18 +132,6 @@
                                     </label>
                                 </div>
                             </li>
-                            <li class=optionContainer>
-                                <div class=optionText>
-                                    <p class=ifAutoTranslate>自動的に翻訳パネルを表示する</p>
-                                    <p class="caption ifAutoTranslateCaptionLabel">ボタンを表示せずに直接翻訳パネルを表示します。</p>
-                                </div>
-                                <div class=optionForm>
-                                    <label>
-                                    <input type=checkbox id=ifAutoTranslate class=saveByChange>
-                                    <span class=checkbox></span>
-                                    </label>
-                                </div>
-                            </li>
                         </ul>
 
                         <br>

simple-translate/simple-translate.js

@@ -15,7 +15,6 @@ window.addEventListener("mouseup", Select, false);
 function Select(e) {
     hidePanel(e);
     setTimeout(function () { //誤動作防止の為ディレイを設ける
-        //selectionWord = String(window.getSelection());
         if (e.target.tagName == "INPUT" || e.target.tagName == "TEXTAREA") {
             selectionWord = e.target.value.substring(e.target.selectionStart, e.target.selectionEnd);
         } else {
@@ -24,16 +23,23 @@ function Select(e) {
 
         if ((selectionWord.length !== 0) && (e.button == 0) && (e.target.id !== "simple-translate-panel") && (e.target.parentElement.id !== "simple-translate-panel")) { //選択範囲が存在かつ左クリックかつパネル以外のとき
             clickPosition = e;
-            if (S.get().ifShowButton) { 
-                checkLang().then(function (results) {
-                    if (results && S.get().ifAutoTranslate) { // 自動翻訳パネル表示がOnならshowPanel()
-                        translate();
-                        showPanel(e);
-                    } else if (results) { // Offならボタンを表示
-                        popupButton(e);
+
+            checkLang().then(function (results) {
+                if (results) {
+                    console.log(S.get().whenSelectText);
+                    switch (S.get().whenSelectText) {
+                        case 'showButton':
+                            popupButton(e);
+                            break;
+                        case 'showPanel':
+                            translate();
+                            showPanel(e);
+                            break;
+                        case 'dontShowButton':
+                            break;
                     }
-                });
-            }
+                }
+            });
         }
     }, 200);
 }