Restructuring Settings Structure

author: ManeraKai <manerakai@protonmail.com> 2022-04-12 02:27:39 +0300
committer: ManeraKai <manerakai@protonmail.com> 2022-04-12 02:27:39 +0300
commit: 5d4377c081d18d89e64184c60d3fa97504768c81 (patch)
tree: c6dd7c0c79fe68060e1366809443c3d096c11e18 /src/pages/options/translate
parent: auto fetch proxitok instances (#185) (diff)
download: libredirect-5d4377c081d18d89e64184c60d3fa97504768c81.zip
2 files changed, 380 insertions, 381 deletions
diff --git a/src/pages/options/translate/translate.html b/src/pages/options/translate/translate.html
index aace2d45..3116a0ac 100644
--- a/src/pages/options/translate/translate.html
+++ b/src/pages/options/translate/translate.html
@@ -2,12 +2,12 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
-    <link href="../../stylesheets/styles.css" rel="stylesheet" />
-    <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/x-icon" href="../../../assets/images/libredirect.svg" />
+  <link href="../../stylesheets/styles.css" rel="stylesheet" />
+  <title data-localise="__MSG_libTranslate__">LibRedirect: Translate</title>
 </head>
 
 <body dir="auto" class="option">
@@ -128,380 +128,378 @@
 
   </section>
 
-    <section class="option-block">
+  <section class="option-block">
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_enable__">Enable</h4>
+      <input id="disable-simplyTranslate" type="checkbox" checked />
+    </div>
+
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_frontend__">Frontend</h4>
+      <select id="translate-frontend">
+        <option value="simplyTranslate">SimplyTranslate</option>
+        <option value="lingva">Lingva</option>
+      </select>
+    </div>
+
+    <div class="some-block option-block">
+      <h4 data-localise="__MSG_protocol__">Protocol</h4>
+      <select id="protocol">
+        <option value="normal" data-localise="__MSG_normal__">Normal</option>
+        <option value="tor" data-localise="__MSG_tor__">Tor</option>
+      </select>
+    </div>
+
+    <hr>
+
+    <div id="simplyTranslate">
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_from__">From</h4>
+        <select class="from">
+          <option value="DEFAULT">Default</option>
+          <option value="auto">Auto</option>
+          <option value="af">Afrikaans</option>
+          <option value="sq">Albanian</option>
+          <option value="am">Amharic</option>
+          <option value="ar">Arabic</option>
+          <option value="hy">Armenian</option>
+          <option value="az">Azerbaijani</option>
+          <option value="eu">Basque</option>
+          <option value="be">Belarusian</option>
+          <option value="bn">Bengali</option>
+          <option value="bs">Bosnian</option>
+          <option value="bg">Bulgarian</option>
+          <option value="ca">Catalan</option>
+          <option value="ceb">Cebuano</option>
+          <option value="ny">Chichewa</option>
+          <option value="zh-CN">Chinese</option>
+          <option value="co">Corsican</option>
+          <option value="hr">Croatian</option>
+          <option value="cs">Czech</option>
+          <option value="da">Danish</option>
+          <option value="nl">Dutch</option>
+          <option value="en">English</option>
+          <option value="eo">Esperanto</option>
+          <option value="et">Estonian</option>
+          <option value="tl">Filipino</option>
+          <option value="fi">Finnish</option>
+          <option value="fr">French</option>
+          <option value="fy">Frisian</option>
+          <option value="gl">Galician</option>
+          <option value="ka">Georgian</option>
+          <option value="de">German</option>
+          <option value="el">Greek</option>
+          <option value="gu">Gujarati</option>
+          <option value="ht">Haitian Creole</option>
+          <option value="ha">Hausa</option>
+          <option value="haw">Hawaiian</option>
+          <option value="iw">Hebrew</option>
+          <option value="hi">Hindi</option>
+          <option value="hmn">Hmong</option>
+          <option value="hu">Hungarian</option>
+          <option value="is">Icelandic</option>
+          <option value="ig">Igbo</option>
+          <option value="id">Indonesian</option>
+          <option value="ga">Irish</option>
+          <option value="it">Italian</option>
+          <option value="ja">Japanese</option>
+          <option value="jw">Javanese</option>
+          <option value="kn">Kannada</option>
+          <option value="kk">Kazakh</option>
+          <option value="km">Khmer</option>
+          <option value="rw">Kinyarwanda</option>
+          <option value="ko">Korean</option>
+          <option value="ku">Kurdish (Kurmanji)</option>
+          <option value="ky">Kyrgyz</option>
+          <option value="lo">Lao</option>
+          <option value="la">Latin</option>
+          <option value="lv">Latvian</option>
+          <option value="lt">Lithuanian</option>
+          <option value="lb">Luxembourgish</option>
+          <option value="mk">Macedonian</option>
+          <option value="mg">Malagasy</option>
+          <option value="ms">Malay</option>
+          <option value="ml">Malayalam</option>
+          <option value="mt">Maltese</option>
+          <option value="mi">Maori</option>
+          <option value="mr">Marathi</option>
+          <option value="mn">Mongolian</option>
+          <option value="my">Myanmar (Burmese)</option>
+          <option value="ne">Nepali</option>
+          <option value="no">Norwegian</option>
+          <option value="or">Odia (Oriya)</option>
+          <option value="ps">Pashto</option>
+          <option value="fa">Persian</option>
+          <option value="pl">Polish</option>
+          <option value="pt">Portuguese</option>
+          <option value="pa">Punjabi</option>
+          <option value="ro">Romanian</option>
+          <option value="ru">Russian</option>
+          <option value="sm">Samoan</option>
+          <option value="gd">Scots Gaelic</option>
+          <option value="sr">Serbian</option>
+          <option value="st">Sesotho</option>
+          <option value="sn">Shona</option>
+          <option value="sd">Sindhi</option>
+          <option value="si">Sinhala</option>
+          <option value="sk">Slovak</option>
+          <option value="sl">Slovenian</option>
+          <option value="so">Somali</option>
+          <option value="es">Spanish</option>
+          <option value="su">Sundanese</option>
+          <option value="sw">Swahili</option>
+          <option value="sv">Swedish</option>
+          <option value="tg">Tajik</option>
+          <option value="ta">Tamil</option>
+          <option value="tt">Tatar</option>
+          <option value="te">Telugu</option>
+          <option value="th">Thai</option>
+          <option value="tr">Turkish</option>
+          <option value="tk">Turkmen</option>
+          <option value="uk">Ukrainian</option>
+          <option value="ur">Urdu</option>
+          <option value="ug">Uyghur</option>
+          <option value="uz">Uzbek</option>
+          <option value="vi">Vietnamese</option>
+          <option value="cy">Welsh</option>
+          <option value="xh">Xhosa</option>
+          <option value="yi">Yiddish</option>
+          <option value="yo">Yoruba</option>
+          <option value="zu">Zulu</option>
+        </select>
+      </div>
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_to__">To</h4>
+        <select class="to">
+          <option value="DEFAULT">Default</option>
+          <option value="af">Afrikaans</option>
+          <option value="sq">Albanian</option>
+          <option value="am">Amharic</option>
+          <option value="ar">Arabic</option>
+          <option value="hy">Armenian</option>
+          <option value="az">Azerbaijani</option>
+          <option value="eu">Basque</option>
+          <option value="be">Belarusian</option>
+          <option value="bn">Bengali</option>
+          <option value="bs">Bosnian</option>
+          <option value="bg">Bulgarian</option>
+          <option value="ca">Catalan</option>
+          <option value="ceb">Cebuano</option>
+          <option value="ny">Chichewa</option>
+          <option value="zh-CN">Chinese</option>
+          <option value="co">Corsican</option>
+          <option value="hr">Croatian</option>
+          <option value="cs">Czech</option>
+          <option value="da">Danish</option>
+          <option value="nl">Dutch</option>
+          <option value="en">English</option>
+          <option value="eo">Esperanto</option>
+          <option value="et">Estonian</option>
+          <option value="tl">Filipino</option>
+          <option value="fi">Finnish</option>
+          <option value="fr">French</option>
+          <option value="fy">Frisian</option>
+          <option value="gl">Galician</option>
+          <option value="ka">Georgian</option>
+          <option value="de">German</option>
+          <option value="el">Greek</option>
+          <option value="gu">Gujarati</option>
+          <option value="ht">Haitian Creole</option>
+          <option value="ha">Hausa</option>
+          <option value="haw">Hawaiian</option>
+          <option value="iw">Hebrew</option>
+          <option value="hi">Hindi</option>
+          <option value="hmn">Hmong</option>
+          <option value="hu">Hungarian</option>
+          <option value="is">Icelandic</option>
+          <option value="ig">Igbo</option>
+          <option value="id">Indonesian</option>
+          <option value="ga">Irish</option>
+          <option value="it">Italian</option>
+          <option value="ja">Japanese</option>
+          <option value="jw">Javanese</option>
+          <option value="kn">Kannada</option>
+          <option value="kk">Kazakh</option>
+          <option value="km">Khmer</option>
+          <option value="rw">Kinyarwanda</option>
+          <option value="ko">Korean</option>
+          <option value="ku">Kurdish (Kurmanji)</option>
+          <option value="ky">Kyrgyz</option>
+          <option value="lo">Lao</option>
+          <option value="la">Latin</option>
+          <option value="lv">Latvian</option>
+          <option value="lt">Lithuanian</option>
+          <option value="lb">Luxembourgish</option>
+          <option value="mk">Macedonian</option>
+          <option value="mg">Malagasy</option>
+          <option value="ms">Malay</option>
+          <option value="ml">Malayalam</option>
+          <option value="mt">Maltese</option>
+          <option value="mi">Maori</option>
+          <option value="mr">Marathi</option>
+          <option value="mn">Mongolian</option>
+          <option value="my">Myanmar (Burmese)</option>
+          <option value="ne">Nepali</option>
+          <option value="no">Norwegian</option>
+          <option value="or">Odia (Oriya)</option>
+          <option value="ps">Pashto</option>
+          <option value="fa">Persian</option>
+          <option value="pl">Polish</option>
+          <option value="pt">Portuguese</option>
+          <option value="pa">Punjabi</option>
+          <option value="ro">Romanian</option>
+          <option value="ru">Russian</option>
+          <option value="sm">Samoan</option>
+          <option value="gd">Scots Gaelic</option>
+          <option value="sr">Serbian</option>
+          <option value="st">Sesotho</option>
+          <option value="sn">Shona</option>
+          <option value="sd">Sindhi</option>
+          <option value="si">Sinhala</option>
+          <option value="sk">Slovak</option>
+          <option value="sl">Slovenian</option>
+          <option value="so">Somali</option>
+          <option value="es">Spanish</option>
+          <option value="su">Sundanese</option>
+          <option value="sw">Swahili</option>
+          <option value="sv">Swedish</option>
+          <option value="tg">Tajik</option>
+          <option value="ta">Tamil</option>
+          <option value="tt">Tatar</option>
+          <option value="te">Telugu</option>
+          <option value="th">Thai</option>
+          <option value="tr">Turkish</option>
+          <option value="tk">Turkmen</option>
+          <option value="uk">Ukrainian</option>
+          <option value="ur">Urdu</option>
+          <option value="ug">Uyghur</option>
+          <option value="uz">Uzbek</option>
+          <option value="vi">Vietnamese</option>
+          <option value="cy">Welsh</option>
+          <option value="xh">Xhosa</option>
+          <option value="yi">Yiddish</option>
+          <option value="yo">Yoruba</option>
+          <option value="zu">Zulu</option>
+        </select>
+      </div>
+
+      <div class="some-block option-block">
+        <h4 data-localise="__MSG_engine__">Engine</h4>
+        <select class="engine">
+          <option value="DEFAULT" data-localise="__MSG_default__">Default</option>
+          <option value="google">Google</option>
+          <option value="libre">Libre</option>
+          <option value="deepl">Deepl</option>
+          <option value="iciba">ICIBA</option>
+          <option value="reverso">Reverso</option>
+        </select>
+      </div>
+      <div class="normal">
         <div class="some-block option-block">
-            <h4 data-localise="__MSG_enable__">Enable</h4>
-            <input id="disable-simplyTranslate" type="checkbox" checked />
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
         </div>
-
+        <div class="checklist checklist">
+        </div>
+        <hr>
         <div class="some-block option-block">
-            <h4 data-localise="__MSG_frontend__">Frontend</h4>
-            <select id="translate-frontend">
-                <option value="simplyTranslate">SimplyTranslate</option>
-                <option value="lingva">Lingva</option>
-            </select>
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
         </div>
-
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://simplyTranslate.com" type="url" />
+            <button type="submit" class="add 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 custom-checklist"></div>
+      </div>
+      <div class="tor">
         <div class="some-block option-block">
-            <h4 data-localise="__MSG_protocol__">Protocol</h4>
-            <select id="protocol">
-                <option value="normal" data-localise="__MSG_normal__">Normal</option>
-                <option value="tor" data-localise="__MSG_tor__">Tor</option>
-            </select>
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist">
         </div>
-
         <hr>
-
-        <div id="simplyTranslate">
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_from__">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>
-                    <option value="am">Amharic</option>
-                    <option value="ar">Arabic</option>
-                    <option value="hy">Armenian</option>
-                    <option value="az">Azerbaijani</option>
-                    <option value="eu">Basque</option>
-                    <option value="be">Belarusian</option>
-                    <option value="bn">Bengali</option>
-                    <option value="bs">Bosnian</option>
-                    <option value="bg">Bulgarian</option>
-                    <option value="ca">Catalan</option>
-                    <option value="ceb">Cebuano</option>
-                    <option value="ny">Chichewa</option>
-                    <option value="zh-CN">Chinese</option>
-                    <option value="co">Corsican</option>
-                    <option value="hr">Croatian</option>
-                    <option value="cs">Czech</option>
-                    <option value="da">Danish</option>
-                    <option value="nl">Dutch</option>
-                    <option value="en">English</option>
-                    <option value="eo">Esperanto</option>
-                    <option value="et">Estonian</option>
-                    <option value="tl">Filipino</option>
-                    <option value="fi">Finnish</option>
-                    <option value="fr">French</option>
-                    <option value="fy">Frisian</option>
-                    <option value="gl">Galician</option>
-                    <option value="ka">Georgian</option>
-                    <option value="de">German</option>
-                    <option value="el">Greek</option>
-                    <option value="gu">Gujarati</option>
-                    <option value="ht">Haitian Creole</option>
-                    <option value="ha">Hausa</option>
-                    <option value="haw">Hawaiian</option>
-                    <option value="iw">Hebrew</option>
-                    <option value="hi">Hindi</option>
-                    <option value="hmn">Hmong</option>
-                    <option value="hu">Hungarian</option>
-                    <option value="is">Icelandic</option>
-                    <option value="ig">Igbo</option>
-                    <option value="id">Indonesian</option>
-                    <option value="ga">Irish</option>
-                    <option value="it">Italian</option>
-                    <option value="ja">Japanese</option>
-                    <option value="jw">Javanese</option>
-                    <option value="kn">Kannada</option>
-                    <option value="kk">Kazakh</option>
-                    <option value="km">Khmer</option>
-                    <option value="rw">Kinyarwanda</option>
-                    <option value="ko">Korean</option>
-                    <option value="ku">Kurdish (Kurmanji)</option>
-                    <option value="ky">Kyrgyz</option>
-                    <option value="lo">Lao</option>
-                    <option value="la">Latin</option>
-                    <option value="lv">Latvian</option>
-                    <option value="lt">Lithuanian</option>
-                    <option value="lb">Luxembourgish</option>
-                    <option value="mk">Macedonian</option>
-                    <option value="mg">Malagasy</option>
-                    <option value="ms">Malay</option>
-                    <option value="ml">Malayalam</option>
-                    <option value="mt">Maltese</option>
-                    <option value="mi">Maori</option>
-                    <option value="mr">Marathi</option>
-                    <option value="mn">Mongolian</option>
-                    <option value="my">Myanmar (Burmese)</option>
-                    <option value="ne">Nepali</option>
-                    <option value="no">Norwegian</option>
-                    <option value="or">Odia (Oriya)</option>
-                    <option value="ps">Pashto</option>
-                    <option value="fa">Persian</option>
-                    <option value="pl">Polish</option>
-                    <option value="pt">Portuguese</option>
-                    <option value="pa">Punjabi</option>
-                    <option value="ro">Romanian</option>
-                    <option value="ru">Russian</option>
-                    <option value="sm">Samoan</option>
-                    <option value="gd">Scots Gaelic</option>
-                    <option value="sr">Serbian</option>
-                    <option value="st">Sesotho</option>
-                    <option value="sn">Shona</option>
-                    <option value="sd">Sindhi</option>
-                    <option value="si">Sinhala</option>
-                    <option value="sk">Slovak</option>
-                    <option value="sl">Slovenian</option>
-                    <option value="so">Somali</option>
-                    <option value="es">Spanish</option>
-                    <option value="su">Sundanese</option>
-                    <option value="sw">Swahili</option>
-                    <option value="sv">Swedish</option>
-                    <option value="tg">Tajik</option>
-                    <option value="ta">Tamil</option>
-                    <option value="tt">Tatar</option>
-                    <option value="te">Telugu</option>
-                    <option value="th">Thai</option>
-                    <option value="tr">Turkish</option>
-                    <option value="tk">Turkmen</option>
-                    <option value="uk">Ukrainian</option>
-                    <option value="ur">Urdu</option>
-                    <option value="ug">Uyghur</option>
-                    <option value="uz">Uzbek</option>
-                    <option value="vi">Vietnamese</option>
-                    <option value="cy">Welsh</option>
-                    <option value="xh">Xhosa</option>
-                    <option value="yi">Yiddish</option>
-                    <option value="yo">Yoruba</option>
-                    <option value="zu">Zulu</option>
-                </select>
-            </div>
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_to__">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>
-                    <option value="ar">Arabic</option>
-                    <option value="hy">Armenian</option>
-                    <option value="az">Azerbaijani</option>
-                    <option value="eu">Basque</option>
-                    <option value="be">Belarusian</option>
-                    <option value="bn">Bengali</option>
-                    <option value="bs">Bosnian</option>
-                    <option value="bg">Bulgarian</option>
-                    <option value="ca">Catalan</option>
-                    <option value="ceb">Cebuano</option>
-                    <option value="ny">Chichewa</option>
-                    <option value="zh-CN">Chinese</option>
-                    <option value="co">Corsican</option>
-                    <option value="hr">Croatian</option>
-                    <option value="cs">Czech</option>
-                    <option value="da">Danish</option>
-                    <option value="nl">Dutch</option>
-                    <option value="en">English</option>
-                    <option value="eo">Esperanto</option>
-                    <option value="et">Estonian</option>
-                    <option value="tl">Filipino</option>
-                    <option value="fi">Finnish</option>
-                    <option value="fr">French</option>
-                    <option value="fy">Frisian</option>
-                    <option value="gl">Galician</option>
-                    <option value="ka">Georgian</option>
-                    <option value="de">German</option>
-                    <option value="el">Greek</option>
-                    <option value="gu">Gujarati</option>
-                    <option value="ht">Haitian Creole</option>
-                    <option value="ha">Hausa</option>
-                    <option value="haw">Hawaiian</option>
-                    <option value="iw">Hebrew</option>
-                    <option value="hi">Hindi</option>
-                    <option value="hmn">Hmong</option>
-                    <option value="hu">Hungarian</option>
-                    <option value="is">Icelandic</option>
-                    <option value="ig">Igbo</option>
-                    <option value="id">Indonesian</option>
-                    <option value="ga">Irish</option>
-                    <option value="it">Italian</option>
-                    <option value="ja">Japanese</option>
-                    <option value="jw">Javanese</option>
-                    <option value="kn">Kannada</option>
-                    <option value="kk">Kazakh</option>
-                    <option value="km">Khmer</option>
-                    <option value="rw">Kinyarwanda</option>
-                    <option value="ko">Korean</option>
-                    <option value="ku">Kurdish (Kurmanji)</option>
-                    <option value="ky">Kyrgyz</option>
-                    <option value="lo">Lao</option>
-                    <option value="la">Latin</option>
-                    <option value="lv">Latvian</option>
-                    <option value="lt">Lithuanian</option>
-                    <option value="lb">Luxembourgish</option>
-                    <option value="mk">Macedonian</option>
-                    <option value="mg">Malagasy</option>
-                    <option value="ms">Malay</option>
-                    <option value="ml">Malayalam</option>
-                    <option value="mt">Maltese</option>
-                    <option value="mi">Maori</option>
-                    <option value="mr">Marathi</option>
-                    <option value="mn">Mongolian</option>
-                    <option value="my">Myanmar (Burmese)</option>
-                    <option value="ne">Nepali</option>
-                    <option value="no">Norwegian</option>
-                    <option value="or">Odia (Oriya)</option>
-                    <option value="ps">Pashto</option>
-                    <option value="fa">Persian</option>
-                    <option value="pl">Polish</option>
-                    <option value="pt">Portuguese</option>
-                    <option value="pa">Punjabi</option>
-                    <option value="ro">Romanian</option>
-                    <option value="ru">Russian</option>
-                    <option value="sm">Samoan</option>
-                    <option value="gd">Scots Gaelic</option>
-                    <option value="sr">Serbian</option>
-                    <option value="st">Sesotho</option>
-                    <option value="sn">Shona</option>
-                    <option value="sd">Sindhi</option>
-                    <option value="si">Sinhala</option>
-                    <option value="sk">Slovak</option>
-                    <option value="sl">Slovenian</option>
-                    <option value="so">Somali</option>
-                    <option value="es">Spanish</option>
-                    <option value="su">Sundanese</option>
-                    <option value="sw">Swahili</option>
-                    <option value="sv">Swedish</option>
-                    <option value="tg">Tajik</option>
-                    <option value="ta">Tamil</option>
-                    <option value="tt">Tatar</option>
-                    <option value="te">Telugu</option>
-                    <option value="th">Thai</option>
-                    <option value="tr">Turkish</option>
-                    <option value="tk">Turkmen</option>
-                    <option value="uk">Ukrainian</option>
-                    <option value="ur">Urdu</option>
-                    <option value="ug">Uyghur</option>
-                    <option value="uz">Uzbek</option>
-                    <option value="vi">Vietnamese</option>
-                    <option value="cy">Welsh</option>
-                    <option value="xh">Xhosa</option>
-                    <option value="yi">Yiddish</option>
-                    <option value="yo">Yoruba</option>
-                    <option value="zu">Zulu</option>
-                </select>
-            </div>
-
-            <div class="some-block option-block">
-                <h4 data-localise="__MSG_engine__">Engine</h4>
-                <select id="simplyTranslate-engine">
-                    <option value="DEFAULT" data-localise="__MSG_default__">Default</option>
-                    <option value="google">Google</option>
-                    <option value="libre">Libre</option>
-                    <option value="deepl">Deepl</option>
-                    <option value="iciba">ICIBA</option>
-                    <option value="reverso">Reverso</option>
-                </select>
-            </div>
-            <div id="simplyTranslate-normal">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="simplyTranslate-normal-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">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>
-            <div id="simplyTranslate-tor">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="simplyTranslate-tor-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise"__MSG_customInstances__">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 class="some-block option-block">
+          <h4 data-localise"__MSG_customInstances__">Custom Instances</h4>
         </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://simplyTranslate.com" type="url" />
+            <button type="submit" class="add 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 custom-checklist"></div>
+      </div>
+    </div>
 
-        <div id="lingva">
-            <div id="lingva-normal">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="lingva-normal-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">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>
-            <div id="lingva-tor">
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
-                </div>
-                <div class="checklist" id="lingva-tor-checklist">
-                </div>
-                <hr>
-                <div class="some-block option-block">
-                    <h4 data-localise="__MSG_customInstances__">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 id="lingva">
+      <div class="normal">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist">
         </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://lingva.com" type="url" />
+            <button type="submit" class="add 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 custom-checklist"></div>
+      </div>
+      <div class="tor">
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_defaultInstances__">Default Instances</h4>
+        </div>
+        <div class="checklist checklist">
+        </div>
+        <hr>
+        <div class="some-block option-block">
+          <h4 data-localise="__MSG_customInstances__">Custom Instances</h4>
+        </div>
+        <form class="custom-instance-form">
+          <div class="some-block option-block">
+            <input class="custom-instance" placeholder="https://lingva.com" type="url" />
+            <button type="submit" class="add 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 custom-checklist"></div>
+      </div>
+    </div>
 
-    </section>
+  </section>
 
-    <script type="module" src="../init.js"></script>
-    <script type="module" src="./translate.js"></script>
-    <script type="module" src="../../../assets/javascripts/localise.js"></script>
+  <script type="module" src="../init.js"></script>
+  <script type="module" src="./translate.js"></script>
+  <script type="module" src="../../../assets/javascripts/localise.js"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/pages/options/translate/translate.js b/src/pages/options/translate/translate.js
index d1df35ab..5da48740 100644
--- a/src/pages/options/translate/translate.js
+++ b/src/pages/options/translate/translate.js
@@ -6,8 +6,8 @@ disableElement.addEventListener("change",
     (event) => translateHelper.setDisable(!event.target.checked)
 );
 
-let simplyTranslateDivElement = document.getElementById("simplyTranslate")
-let lingvaDivElement = document.getElementById("lingva")
+let simplyTranslateDivElement = document.getElementById("simplyTranslate");
+let lingvaDivElement = document.getElementById("lingva");
 
 
 function changeFrontendsSettings(frontend) {
@@ -22,14 +22,14 @@ function changeFrontendsSettings(frontend) {
 }
 let translateFrontendElement = document.getElementById("translate-frontend");
 translateFrontendElement.addEventListener("change",
-    (event) => {
+    event => {
         let frontend = event.target.options[translateFrontendElement.selectedIndex].value
         translateHelper.setFrontend(frontend)
         changeFrontendsSettings(frontend);
     }
 );
 
-let protocolElement = document.getElementById("protocol")
+let protocolElement = document.getElementById("protocol");
 protocolElement.addEventListener("change",
     (event) => {
         let protocol = event.target.options[protocolElement.selectedIndex].value
@@ -39,11 +39,12 @@ protocolElement.addEventListener("change",
 );
 
 function changeProtocolSettings(protocol) {
-    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate-normal");
-    let torSimplyTranslateDiv = document.getElementById("simplyTranslate-tor");
+    let normalSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("normal")[0];
+    let torSimplyTranslateDiv = document.getElementById("simplyTranslate").getElementsByClassName("tor")[0];
+
+    let normalLingvaDiv = document.getElementById("lingva").getElementsByClassName("normal")[0];
+    let torLingvaDiv = document.getElementById("lingva").getElementsByClassName("tor")[0];
 
-    let normalLingvaDiv = document.getElementById("lingva-normal");
-    let torLingvaDiv = document.getElementById("lingva-tor");
     if (protocol == 'normal') {
         normalSimplyTranslateDiv.style.display = 'block';
         normalLingvaDiv.style.display = 'block';
@@ -58,17 +59,18 @@ function changeProtocolSettings(protocol) {
     }
 }
 
-let fromElement = document.getElementById("from");
+let fromElement = document.getElementsByClassName("from")[0];
 fromElement.addEventListener("change",
     event => translateHelper.setFrom(event.target.options[fromElement.selectedIndex].value)
 );
 
-let toElement = document.getElementById("to");
+let toElement = document.getElementsByClassName("to")[0];
 toElement.addEventListener("change",
     event => translateHelper.setTo(event.target.options[toElement.selectedIndex].value)
 );
 
-let simplyTranslateEngineElement = document.getElementById("simplyTranslate-engine");
+let simplyTranslateElement = document.getElementById("simplyTranslate")
+let simplyTranslateEngineElement = simplyTranslateElement.getElementsByClassName("engine")[0];
 simplyTranslateEngineElement.addEventListener("change",
     event => translateHelper.setSimplyTranslateEngine(event.target.options[simplyTranslateEngineElement.selectedIndex].value)
 );
@@ -110,7 +112,6 @@ translateHelper.init().then(() => {
         translateHelper.setSimplyTranslateTorCustomRedirects
     );
 
-
     commonHelper.processDefaultCustomInstances(
         'lingva',
         'normal',
author	ManeraKai <manerakai@protonmail.com>	2022-04-12 02:27:39 +0300
committer	ManeraKai <manerakai@protonmail.com>	2022-04-12 02:27:39 +0300
commit	5d4377c081d18d89e64184c60d3fa97504768c81 (patch)
tree	c6dd7c0c79fe68060e1366809443c3d096c11e18 /src/pages/options/translate
parent	auto fetch proxitok instances (#185) (diff)
download	libredirect-5d4377c081d18d89e64184c60d3fa97504768c81.zip