Added translate tor support #32

3 files changed, 163 insertions, 50 deletions

diff --git a/src/pages/options/reddit/reddit.js b/src/pages/options/reddit/reddit.js
index 57702dc8..549822a5 100644
--- a/src/pages/options/reddit/reddit.js
+++ b/src/pages/options/reddit/reddit.js
@@ -57,7 +57,6 @@ function changeProtocolSettings(protocol) {
     }
 }
 
-
 redditHelper.init().then(() => {
     disableRedditElement.checked = !redditHelper.getDisableReddit();
 
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index 4ef26221..92ac1dbc 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -120,12 +120,21 @@
             </select>
         </div>
 
+        <div class="some-block option-block">
+            <h4>Protocol</h4>
+            <select id="protocol">
+                <option value="normal">Normal</option>
+                <option value="tor">Tor</option>
+            </select>
+        </div>
+
         <hr>
 
         <div id="simplyTranslate-lingva">
             <div class="some-block option-block">
                 <h4>From</h4>
                 <select id="from">
+                    <option value="DEFAULT">Default</option>
                     <option value="auto">Auto</option>
                     <option value="af">Afrikaans</option>
                     <option value="sq">Albanian</option>
@@ -237,10 +246,10 @@
                     <option value="zu">Zulu</option>
                 </select>
             </div>
-
             <div class="some-block option-block">
                 <h4>To</h4>
                 <select id="to">
+                    <option value="DEFAULT">Default</option>
                     <option value="af">Afrikaans</option>
                     <option value="sq">Albanian</option>
                     <option value="am">Amharic</option>
@@ -354,54 +363,107 @@
         </div>
 
         <div id="simplyTranslate">
-            <div class="some-block option-block">
-                <h4>Default Instances</h4>
-            </div>
-            <div class="checklist" id="simplyTranslate-normal-checklist">
-            </div>
-            <hr>
-            <div class="some-block option-block">
-                <h4>Custom Instances</h4>
+            <div id="simplyTranslate-normal">
+                <div class="some-block option-block">
+                    <h4>Default Instances</h4>
+                </div>
+                <div class="checklist" id="simplyTranslate-normal-checklist">
+                </div>
+                <hr>
+                <div class="some-block option-block">
+                    <h4>Custom Instances</h4>
+                </div>
+                <form id="custom-simplyTranslate-normal-instance-form">
+                    <div class="some-block option-block">
+                        <input id="simplyTranslate-normal-custom-instance" placeholder="https://simplyTranslate.com"
+                            type="url" />
+                        <button type="submit" class="add" id="simplyTranslate-normal-add-instance">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                                fill="currentColor">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+                <div class="checklist" id="simplyTranslate-normal-custom-checklist"></div>
             </div>
-            <form id="custom-simplyTranslate-normal-instance-form">
+            <div id="simplyTranslate-tor">
                 <div class="some-block option-block">
-                    <input id="simplyTranslate-normal-custom-instance" placeholder="https://simplyTranslate.com"
-                        type="url" />
-                    <button type="submit" class="add" id="simplyTranslate-normal-add-instance">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                            <path d="M0 0h24v24H0V0z" fill="none" />
-                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                        </svg>
-                    </button>
+                    <h4>Default Instances</h4>
                 </div>
-            </form>
-            <div class="checklist" id="simplyTranslate-normal-custom-checklist"></div>
+                <div class="checklist" id="simplyTranslate-tor-checklist">
+                </div>
+                <hr>
+                <div class="some-block option-block">
+                    <h4>Custom Instances</h4>
+                </div>
+                <form id="custom-simplyTranslate-tor-instance-form">
+                    <div class="some-block option-block">
+                        <input id="simplyTranslate-tor-custom-instance" placeholder="https://simplyTranslate.com"
+                            type="url" />
+                        <button type="submit" class="add" id="simplyTranslate-tor-add-instance">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                                fill="currentColor">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+                <div class="checklist" id="simplyTranslate-tor-custom-checklist"></div>
+            </div>
         </div>
 
         <div id="lingva">
-            <div class="some-block option-block">
-                <h4>Default Instances</h4>
-            </div>
-            <div class="checklist" id="lingva-normal-checklist">
-            </div>
-            <hr>
-            <div class="some-block option-block">
-                <h4>Custom Instances</h4>
+            <div id="lingva-normal">
+                <div class="some-block option-block">
+                    <h4>Default Instances</h4>
+                </div>
+                <div class="checklist" id="lingva-normal-checklist">
+                </div>
+                <hr>
+                <div class="some-block option-block">
+                    <h4>Custom Instances</h4>
+                </div>
+                <form id="custom-lingva-normal-instance-form">
+                    <div class="some-block option-block">
+                        <input id="lingva-normal-custom-instance" placeholder="https://lingva.com" type="url" />
+                        <button type="submit" class="add" id="lingva-normal-add-instance">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                                fill="currentColor">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+                <div class="checklist" id="lingva-normal-custom-checklist"></div>
             </div>
-            <form id="custom-lingva-normal-instance-form">
+            <div id="lingva-tor">
                 <div class="some-block option-block">
-                    <input id="lingva-normal-custom-instance" placeholder="https://lingva.com" type="url" />
-                    <button type="submit" class="add" id="lingva-normal-add-instance">
-                        <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
-                            fill="currentColor">
-                            <path d="M0 0h24v24H0V0z" fill="none" />
-                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                        </svg>
-                    </button>
+                    <h4>Default Instances</h4>
+                </div>
+                <div class="checklist" id="lingva-tor-checklist">
                 </div>
-            </form>
-            <div class="checklist" id="lingva-normal-custom-checklist"></div>
+                <hr>
+                <div class="some-block option-block">
+                    <h4>Custom Instances</h4>
+                </div>
+                <form id="custom-lingva-tor-instance-form">
+                    <div class="some-block option-block">
+                        <input id="lingva-tor-custom-instance" placeholder="https://lingva.com" type="url" />
+                        <button type="submit" class="add" id="lingva-tor-add-instance">
+                            <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px"
+                                fill="currentColor">
+                                <path d="M0 0h24v24H0V0z" fill="none" />
+                                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                            </svg>
+                        </button>
+                    </div>
+                </form>
+                <div class="checklist" id="lingva-tor-custom-checklist"></div>
+            </div>
         </div>
 
     </section>
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index 266814b1..7626f34b 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -32,27 +32,56 @@ translateFrontendElement.addEventListener("change",
     }
 );
 
-let fromElement = document.getElementById("from");
-fromElement.addEventListener("change",
+let protocolElement = document.getElementById("protocol")
+protocolElement.addEventListener("change",
     (event) => {
-        let from = event.target.options[fromElement.selectedIndex].value;
-        translateHelper.setFrom(from);
+        let protocol = event.target.options[protocolElement.selectedIndex].value
+        translateHelper.setProtocol(protocol);
+        changeProtocolSettings(protocol);
+    }
+);
+
+function changeProtocolSettings(protocol) {
+    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate-normal");
+    let torSimplyTranslateDiv = document.getElementById("simplyTranslate-tor");
+
+    let normalLingvaDiv = document.getElementById("lingva-normal");
+    let torLingvaDiv = document.getElementById("lingva-tor");
+    if (protocol == 'normal') {
+        normalSimplyTranslateDiv.style.display = 'block';
+        normalLingvaDiv.style.display = 'block';
+        torLingvaDiv.style.display = 'none';
+        torSimplyTranslateDiv.style.display = 'none';
+    }
+    else if (protocol == 'tor') {
+        normalSimplyTranslateDiv.style.display = 'none';
+        normalLingvaDiv.style.display = 'none';
+        torLingvaDiv.style.display = 'block';
+        torSimplyTranslateDiv.style.display = 'block';
     }
+}
+
+let fromElement = document.getElementById("from");
+fromElement.addEventListener("change",
+    event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value)
 );
 
 let toElement = document.getElementById("to");
 toElement.addEventListener("change",
-    (event) => {
-        let to = event.target.options[toElement.selectedIndex].value;
-        translateHelper.setTo(to);
-    }
+    event => translateHelper.setTo(event.target.options[toElement.selectedIndex].value)
 );
 
 translateHelper.init().then(() => {
     disableElement.checked = !translateHelper.getDisable();
+
     let frontend = translateHelper.getFrontend();
     translateFrontendElement.value = frontend;
     changeFrontendsSettings(frontend);
+
+    let protocol = translateHelper.getProtocol();
+    protocolElement.value = protocol;
+    changeProtocolSettings(protocol);
+
     fromElement.value = translateHelper.getFrom();
     toElement.value = translateHelper.getTo();
 
@@ -65,7 +94,19 @@ translateHelper.init().then(() => {
         translateHelper.setSimplyTranslateNormalRedirectsChecks,
         translateHelper.getSimplyTranslateNormalCustomRedirects,
         translateHelper.setSimplyTranslateNormalCustomRedirects
-    )
+    );
+
+    commonHelper.processDefaultCustomInstances(
+        'simplyTranslate',
+        'tor',
+        translateHelper,
+        document,
+        translateHelper.getSimplyTranslateTorRedirectsChecks,
+        translateHelper.setSimplyTranslateTorRedirectsChecks,
+        translateHelper.getSimplyTranslateTorCustomRedirects,
+        translateHelper.setSimplyTranslateTorCustomRedirects
+    );
+
 
     commonHelper.processDefaultCustomInstances(
         'lingva',
@@ -76,5 +117,16 @@ translateHelper.init().then(() => {
         translateHelper.setLingvaNormalRedirectsChecks,
         translateHelper.getLingvaNormalCustomRedirects,
         translateHelper.setLingvaNormalCustomRedirects
+    );
+
+    commonHelper.processDefaultCustomInstances(
+        'lingva',
+        'tor',
+        translateHelper,
+        document,
+        translateHelper.getLingvaTorRedirectsChecks,
+        translateHelper.setLingvaTorRedirectsChecks,
+        translateHelper.getLingvaTorCustomRedirects,
+        translateHelper.setLingvaTorCustomRedirects
     )
 });
\ No newline at end of file