Added translation support to Svelte

libredirect · Jul 26, 2024 · e97b618 · e97b618
1 parent 2cb60e9
commit e97b618
Show file tree

Hide file tree

Showing 19 changed files with 251 additions and 206 deletions.
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "scripts": {
     "start": "web-ext run",
     "nightly": "web-ext run --firefox=/home/esmail/software/firefox_nightly/firefox",
+    "start_ar": "web-ext run --firefox=/home/esmail/software/firefox_ar/firefox",
     "android": "web-ext run -t firefox-android --adb-device emulator-5554 --firefox-apk org.mozilla.fenix ",
     "build": "web-ext build",
     "test": "web-ext lint",

diff --git a/src/assets/javascripts/localise.js b/src/assets/javascripts/localise.js
diff --git a/src/pages/components/Checkbox.svelte b/src/pages/components/Checkbox.svelte
@@ -1,9 +1,10 @@
 <script>
   export let checked
   export let onChange
+  console.log(document.body.dir)
 </script>
 
-<input {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
+<input class={document.body.dir} {...$$restProps} bind:checked on:change={onChange} type="checkbox" />
 
 <style>
   input[type="checkbox"] {
@@ -40,13 +41,13 @@
     left: 24px;
   }
 
-  /* body.rtl div.block input[type="checkbox"]::before {
-      left: auto;
-      right: 4px;
-    } */
+  input[type="checkbox"].rtl::before {
+    left: auto;
+    right: 3.5px;
+  }
 
-  /* body.rtl div.block input[type="checkbox"]:checked::before {
-      left: auto;
-      right: 24px;
-    } */
+  input[type="checkbox"].rtl:checked::before {
+    left: auto;
+    right: 24px;
+  }
 </style>
diff --git a/src/pages/icons/ExportIcon.svelte b/src/pages/icons/ExportIcon.svelte
@@ -1,4 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+<svg
+  {...$$restProps}
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="currentColor"
+>
   <path
     d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
   />

diff --git a/src/pages/icons/ImportIcon.svelte b/src/pages/icons/ImportIcon.svelte
@@ -1,5 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-    <path
-      d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-    />
-  </svg>
+<svg
+  {...$$restProps}
+  xmlns="http://www.w3.org/2000/svg"
+  height="24px"
+  viewBox="0 0 24 24"
+  width="24px"
+  fill="currentColor"
+>
+  <path
+    d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+  />
+</svg>
diff --git a/src/pages/icons/PingIcon.svelte b/src/pages/icons/PingIcon.svelte
@@ -1,4 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor">
+<svg
+  {...$$restProps}
+  xmlns="http://www.w3.org/2000/svg"
+  height="20px"
+  viewBox="0 0 24 24"
+  width="20px"
+  fill="currentColor"
+>
   <path
     d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z"
   /></svg

diff --git a/src/pages/icons/ResetIcon.svelte b/src/pages/icons/ResetIcon.svelte
@@ -5,6 +5,7 @@
   viewBox="0 0 24 24"
   width="24px"
   fill="currentColor"
+  {...$$restProps}
 >
   <path
     d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"

diff --git a/src/pages/options/init.js b/src/pages/options/init.js
diff --git a/src/pages/options_src/App.svelte b/src/pages/options_src/App.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import General from "./General/General.svelte"
   import utils from "../../assets/javascripts/utils.js"
@@ -67,12 +67,15 @@
       cssVariables = light
     }
   }
+
+  const dir = ["ar", "iw", "ku", "fa", "ur"].includes(browser.i18n.getUILanguage()) ? "rtl" : "ltr"
+  document.body.dir = dir
 </script>
 
 {#if _options && _config}
   <div
-    class="main"
-    dir="auto"
+    class={dir}
+    {dir}
     style="
     --text: {cssVariables.text};
     --bg-main: {cssVariables.bgMain};

diff --git a/src/pages/options_src/General/Exceptions.svelte b/src/pages/options_src/General/Exceptions.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import Row from "../../components/Row.svelte"
   import Select from "../../components/Select.svelte"
   import AddIcon from "../../icons/AddIcon.svelte"
@@ -54,10 +56,10 @@
   }
 </script>
 
-<div class="block block-option">
-  <Row>
-    <Label>Excluded from redirecting</Label>
-  </Row>
+<Row>
+  <Label>{browser.i18n.getMessage("excludeFromRedirecting") || "Excluded from redirecting"}</Label>
+</Row>
+<div dir="ltr">
   <Row>
     <div>
       <Input

diff --git a/src/pages/options_src/General/General.svelte b/src/pages/options_src/General/General.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Exceptions from "./Exceptions.svelte"
   import SettingsButtons from "./SettingsButtons.svelte"
@@ -26,12 +26,12 @@
 
 <div>
   <Row>
-    <Label>Theme</Label>
+    <Label>{browser.i18n.getMessage("theme") || "Theme"}</Label>
     <Select
       values={[
-        { value: "detect", name: "Auto" },
-        { value: "light", name: "Light" },
-        { value: "dark", name: "Dark" },
+        { value: "detect", name: browser.i18n.getMessage("auto") || "Auto" },
+        { value: "light", name: browser.i18n.getMessage("light") || "Light" },
+        { value: "dark", name: browser.i18n.getMessage("dark") || "Dark" },
       ]}
       value={_options.theme}
       onChange={e => {
@@ -43,13 +43,13 @@
   </Row>
 
   <Row>
-    <Label>Fetch public instances</Label>
+    <Label>{browser.i18n.getMessage("fetchPublicInstances") || "Fetch public instances"}</Label>
     <Select
       value={_options.fetchInstances}
       values={[
         { value: "github", name: "GitHub" },
         { value: "codeberg", name: "Codeberg" },
-        { value: "disable", name: "Disable" },
+        { value: "disable", name: browser.i18n.getMessage("disable") || "Disable" },
       ]}
       onChange={e => {
         _options.fetchInstances = e.target.options[e.target.options.selectedIndex].value
@@ -60,7 +60,7 @@
   </Row>
 
   <Row>
-    <Label>Redirect Only in Incognito</Label>
+    <Label>{browser.i18n.getMessage("redirectOnlyInIncognito") || "Redirect Only in Incognito"}</Label>
     <Checkbox
       checked={_options.redirectOnlyInIncognito}
       onChange={e => {
@@ -71,7 +71,7 @@
   </Row>
 
   <Row>
-    <Label>Bookmarks menu</Label>
+    <Label>{browser.i18n.getMessage("bookmarksMenu") || "Bookmarks menu"}</Label>
     <Checkbox bind:checked={bookmarksPermission} />
   </Row>
 

diff --git a/src/pages/options_src/General/SettingsButtons.svelte b/src/pages/options_src/General/SettingsButtons.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import { onDestroy } from "svelte"
   import Button from "../../components/Button.svelte"
@@ -85,8 +85,8 @@
 
 <div class="buttons">
   <Button on:click={() => importSettingsInput.click()} disabled={disableButtons}>
-    <ImportIcon />
-    <x data-localise="__MSG_importSettings__">Import Settings</x>
+    <ImportIcon class="margin margin_{document.body.dir}" />
+    <x data-localise="__MSG_importSettings__">{browser.i18n.getMessage("importSettings") || "Import Settings"}</x>
   </Button>
   <input
     type="file"
@@ -97,22 +97,33 @@
   />
 
   <Button on:click={exportSettings} disabled={disableButtons}>
-    <ExportIcon />
-    <x data-localise="__MSG_exportSettings__">Export Settings</x>
+    <ExportIcon class="margin margin_{document.body.dir}" />
+    <x data-localise="__MSG_exportSettings__">{browser.i18n.getMessage("exportSettings") || "Export Settings"}</x>
   </Button>
 
   <Button on:click={exportSettingsSync} disabled={disableButtons}>
-    <ExportIcon />
+    <ExportIcon class="margin margin_{document.body.dir}" />
     <x>Export Settings to Sync</x>
   </Button>
 
   <Button on:click={importSettingsSync} disabled={disableButtons}>
-    <ImportIcon />
-    <x>Import Settings from Sync</x>
+    <ImportIcon class="margin margin_{document.body.dir}" />
+    <x>{browser.i18n.getMessage("importSettingsFromSync") || "Import Settings from Sync"}</x>
   </Button>
 
   <Button on:click={resetSettings} disabled={disableButtons}>
-    <ResetIcon />
-    <x>Reset Settings</x>
+    <ResetIcon class="margin margin_{document.body.dir}" />
+    <x>{browser.i18n.getMessage("resetSettings") || "Reset Settings"}</x>
   </Button>
 </div>
+
+<style>
+  :global(.margin) {
+    margin-right: 10px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 10px;
+  }
+</style>
diff --git a/src/pages/options_src/Services/Instances.svelte b/src/pages/options_src/Services/Instances.svelte
@@ -1,5 +1,5 @@
 <script>
-  let browser = window.browser || window.chrome
+  const browser = window.browser || window.chrome
 
   import Button from "../../components/Button.svelte"
   import AddIcon from "../../icons/AddIcon.svelte"
@@ -28,7 +28,6 @@
   let blacklist
   let redirects
 
-  $: serviceOptions = _options[selectedService]
   $: serviceConf = _config.services[selectedService]
 
   let allInstances = []
@@ -103,18 +102,18 @@
 
 {#if serviceConf.frontends[selectedFrontend].instanceList && redirects && blacklist}
   <hr />
-  <div dir="ltr">
-    <div class="ping">
-      <Button on:click={pingInstances}>
-        <PingIcon />
-        Ping Instances
-      </Button>
-    </div>
 
-    <Row>
-      <Label>Add your favorite instances</Label>
-    </Row>
+  <div class="ping">
+    <Button on:click={pingInstances}>
+      <PingIcon class="margin margin_{document.body.dir}" />
+      {browser.i18n.getMessage("pingInstances") || "Ping Instances"}
+    </Button>
+  </div>
 
+  <Row>
+    <Label>{browser.i18n.getMessage("addYourFavoriteInstances") || "Add your favorite instances"}</Label>
+  </Row>
+  <div dir="ltr">
     <Row>
       <Input
         bind:value={addInstanceValue}
@@ -231,4 +230,13 @@
   a:hover {
     text-decoration: underline;
   }
+
+  :global(.margin) {
+    margin-right: 10px;
+    margin-left: 0;
+  }
+  :global(.margin_rtl) {
+    margin-right: 0;
+    margin-left: 10px;
+  }
 </style>
diff --git a/src/pages/options_src/Services/RedirectType.svelte b/src/pages/options_src/Services/RedirectType.svelte
@@ -1,4 +1,6 @@
 <script>
+  const browser = window.browser || window.chrome
+
   import { onDestroy } from "svelte"
   import SvelteSelect from "svelte-select"
   import { options, config } from "../stores"
@@ -26,9 +28,9 @@
   let values
   $: if (serviceConf.frontends[frontendName].embeddable) {
     values = [
-      { value: "both", name: "Both" },
-      { value: "sub_frame", name: "Only Embedded" },
-      { value: "main_frame", name: "Only Not Embedded" },
+      { value: "both", name: browser.i18n.getMessage("both") || "Both" },
+      { value: "sub_frame", name: browser.i18n.getMessage("onlyEmbedded") || "Only Embedded" },
+      { value: "main_frame", name: browser.i18n.getMessage("onlyNotEmbedded") || "Only Not Embedded" },
     ]
   } else if (
     serviceConf.frontends[frontendName].desktopApp &&
@@ -63,7 +65,7 @@
 </script>
 
 <Row>
-  <Label>Redirect Type</Label>
+  <Label>{browser.i18n.getMessage("redirectType") || "Redirect Type"}</Label>
   <Select
     value={serviceOptions.redirectType}
     onChange={e => {
@@ -76,7 +78,7 @@
 
 {#if serviceConf.frontends[frontendName].desktopApp && serviceOptions.redirectType != "main_frame"}
   <Row>
-    <Label>Embed Frontend</Label>
+    <Label>{browser.i18n.getMessage("embedFrontend") || "Embed Frontend"}</Label>
     <SvelteSelect
       clearable={false}
       class="svelte_select"