🌐 Add some translation support to Options page

FrostCo · Sep 9, 2024 · b24eb93 · b24eb93
1 parent 9bfceac
commit b24eb93
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/locales/en/options.json b/locales/en/options.json
@@ -0,0 +1,11 @@
+{
+  "bookmarkletTab": "Bookmarklet",
+  "configTab": "Config",
+  "domainsTab": "Domains",
+  "helpTab": "Help",
+  "listsTab": "Lists",
+  "settingsTab": "Settings",
+  "statsTab": "Stats",
+  "testTab": "Test",
+  "wordsTab": "Words"
+}
diff --git a/src/script/optionPage.ts b/src/script/optionPage.ts
@@ -6,6 +6,7 @@ import OptionAuth from '@APF/optionAuth';
 import DataMigration from '@APF/dataMigration';
 import Bookmarklet from '@APF/bookmarklet';
 import Logger from '@APF/lib/logger';
+import Translation from '@APF/translation';
 import {
   booleanToNumber,
   deepCloneJson,
@@ -35,6 +36,7 @@ export default class OptionPage {
   lightModeButton: Element;
   prefersDarkScheme: boolean;
   themeElements: Element[];
+  translation: Translation;
 
   //#region Class reference helpers
   // Can be overridden in children classes
@@ -45,6 +47,7 @@ export default class OptionPage {
   static get Domain() { return Domain; }
   static get Filter() { return Filter; }
   static get OptionAuth() { return OptionAuth; }
+  static get Translation() { return Translation; }
   get Class() { return (this.constructor as typeof OptionPage); }
   //#endregion
 
@@ -204,6 +207,8 @@ export default class OptionPage {
     this.prefersDarkScheme = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)').matches : false;
     this.setHelpVersion();
     this.filter = new this.Class.Filter;
+    this.translation = new this.Class.Translation;
+    this.applyTranslation();
   }
 
   applyDarkTheme(allElements = true) {
@@ -258,6 +263,22 @@ export default class OptionPage {
     exportToFile(JSON.stringify(config, null, 2), `${filePrefix}-${timeForFileName()}.json`);
   }
 
+  applyTranslation() {
+    // Page and Header
+    document.getElementById('headTitle').textContent = this.translation.t('common:appName');
+    document.getElementById('title').textContent = this.translation.t('common:appName');
+    // Tabs
+    document.getElementById('bookmarkletTab').textContent = this.translation.t('options:bookmarkletTab');
+    document.getElementById('configTab').textContent = this.translation.t('options:configTab');
+    document.getElementById('domainsTab').textContent = this.translation.t('options:domainsTab');
+    document.getElementById('helpTab').textContent = this.translation.t('options:helpTab');
+    document.getElementById('listsTab').textContent = this.translation.t('options:listsTab');
+    document.getElementById('settingsTab').textContent = this.translation.t('options:settingsTab');
+    document.getElementById('statsTab').textContent = this.translation.t('options:statsTab');
+    document.getElementById('testTab').textContent = this.translation.t('options:testTab');
+    document.getElementById('wordsTab').textContent = this.translation.t('options:wordsTab');
+  }
+
   backupConfigInline(config = this.cfg.ordered()) {
     const configText = document.getElementById('configText') as HTMLTextAreaElement;
     configText.value = JSON.stringify(config, null, 2);

diff --git a/src/static/optionPage.html b/src/static/optionPage.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8"/>
-  <title>Advanced Profanity Filter</title>
+  <title id="headTitle">Advanced Profanity Filter</title>
   <link rel="stylesheet" type="text/css" href="w3.css"/>
   <link rel="stylesheet" type="text/css" href="w3-color-flat.css"/>
   <link rel="stylesheet" type="text/css" href="optionPage.css"/>
@@ -12,7 +12,7 @@
 
 <div id="header" class="w3-container">
   <img class="logo" src="img/icon38.png"/>
-  <span class="title">Advanced Profanity Filter</span>
+  <span id="title" class="title">Advanced Profanity Filter</span>
   <div class="w3-right">
     <span class="donations">
       <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XFL36QJY752R6&source=url" target="_blank"><img class="paypal" src="./img/donate.gif"></a>
@@ -25,12 +25,12 @@
 </div>
 
 <div id="menu" class="w3-bar w3-card w3-flat-peter-river">
-  <a href="#/" class="w3-bar-item w3-button w3-flat-belize-hole">Settings</a>
-  <a href="#/words" class="w3-bar-item w3-button">Words</a>
-  <a href="#/lists" class="w3-bar-item w3-button">Lists</a>
-  <a href="#/domains" class="w3-bar-item w3-button">Domains</a>
-  <a href="#/bookmarklet" class="w3-bar-item w3-button">Bookmarklet</a>
-  <a href="#/config" class="w3-bar-item w3-button">Config</a>
+  <a id="settingsTab" href="#/" class="w3-bar-item w3-button w3-flat-belize-hole">Settings</a>
+  <a id="wordsTab" href="#/words" class="w3-bar-item w3-button">Words</a>
+  <a id="listsTab" href="#/lists" class="w3-bar-item w3-button">Lists</a>
+  <a id="domainsTab" href="#/domains" class="w3-bar-item w3-button">Domains</a>
+  <a id="bookmarkletTab" href="#/bookmarklet" class="w3-bar-item w3-button">Bookmarklet</a>
+  <a id="configTab" href="#/config" class="w3-bar-item w3-button">Config</a>
   <div class="w3-bar-item w3-button w3-right themes">
     <div class="sun w3-hide">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
@@ -43,9 +43,9 @@
       </svg>
     </div>
   </div>
-  <a href="#/help" class="w3-bar-item w3-button w3-right">Help</a>
-  <a href="#/stats" class="w3-bar-item w3-button w3-right">Stats</a>
-  <a href="#/test" class="w3-bar-item w3-button w3-right">Test</a>
+  <a id="helpTab" href="#/help" class="w3-bar-item w3-button w3-right">Help</a>
+  <a id="statsTab" href="#/stats" class="w3-bar-item w3-button w3-right">Stats</a>
+  <a id="testTab" href="#/test" class="w3-bar-item w3-button w3-right">Test</a>
 </div>
 
 <div id="main" class="w3-hide">