basics of JS i18n

Author: longhotsummer

README.md

@@ -21,12 +21,14 @@ Refer to https://indigo.readthedocs.io/en/latest/running/index.html
 
 ## Adding translation strings
 
-Each indigo package has its own translations in the `locale` directory. Translations for strings are added on [CrowdIn](https://crowdin.com/project/lawsafrica-indigo).
+Each indigo package has its own translations in the `locale` directory, and Javascript translations are in
+`static/i18n`. Translations for strings are added on [CrowdIn](https://crowdin.com/project/lawsafrica-indigo).
 
 If you have added or changed strings that need translating, you must [tell Django to update the .po files](https://docs.djangoproject.com/en/2.2/topics/i18n/translation/#localization-how-to-create-language-files) so that translations can be supplied through CrowdIn.
 
 ```bash
-for app in indigo indigo_api indigo_za; do pushd $app; django-admin makemessages -a; popd; done
+scripts/extract-translations.sh
+npm run extract-translations
 ```
 
 And then commit the changes. CrowdIn will pick up any changed strings and make them available for translation. Once they are translated, it will

crowdin.yml

@@ -9,3 +9,5 @@ files:
     translation: /indigo_social/locale/%two_letters_code%/LC_MESSAGES/%original_file_name%
   - source: /indigo_za/locale/en/LC_MESSAGES/django.po
     translation: /indigo_za/locale/%two_letters_code%/LC_MESSAGES/%original_file_name%
+  - source: /indigo_app/static/i18n/indigo_app-en.json
+    translation: /indigo_app/static/i18n/indigo_app-%two_letters_code%.json

i18next-parser.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  "defaultNamespace": "indigo_app",
+  "locales": [
+    "en",
+    "fr"
+  ],
+  "keySeparator": false,
+  "lexers": {
+    "js": [
+      {
+        "lexer": "JavascriptLexer",
+        "functions": ["t", "$t"]
+      }
+    ]
+  },
+  "input": [
+    "indigo_app/static/javascript/indigo/**/*.js",
+  ],
+  "output": "indigo_app/static/i18n/$NAMESPACE-$LOCALE.json"
+}

indigo/settings.py

@@ -161,7 +161,10 @@
             'v2': 'indigo_content_api.v2.urls_api',
             'v3': 'indigo_content_api.v3.urls_api',
         }
-    }
+    },
+
+    # namespaces to look for translation packs for javascript translation via i18next
+    'JS_I18N_NAMESPACES': ['indigo_app'],
 }
 
 # Database

indigo_app/context_processors.py

@@ -2,6 +2,9 @@
 
 import json
 
+from django.utils.translation import get_language
+from django.templatetags.static import static
+
 
 def general(request):
     """
@@ -16,6 +19,7 @@ def general(request):
         'USER_JSON': serialise_user(request),
         'MAINTENANCE_MODE': settings.INDIGO['MAINTENANCE_MODE'],
         'SENTRY_DSN': settings.SENTRY_DSN,
+        'JS_I18N': json.dumps(js_i18n(request)),
     }
 
 
@@ -41,3 +45,22 @@ def serialise_user(request):
         data = UserDetailsSerializer(context={'request': request}).to_representation(request.user)
 
     return json.dumps(data)
+
+
+def js_i18n(request):
+    """ Configuration for i18next for javascript translations."""
+    paths = {
+        f'{ns}-{code}': static(f'i18n/{ns}-{code}.json')
+        for code, name in settings.LANGUAGES
+        for ns in settings.INDIGO['JS_I18N_NAMESPACES']
+    }
+
+    return {
+        'loadPaths': paths,
+        'ns': 'indigo_app',
+        'lng': get_language(),
+        'fallbackLng': 'en',
+        'returnEmptyString': False,
+        'keySeparator': False,
+        'debug': settings.DEBUG,
+    }

indigo_app/js/indigo.js

@@ -14,6 +14,8 @@ import './compat-imports';
 import { relativeTimestamps } from './timestamps';
 import htmx from 'htmx.org';
 import { createComponent, getVue, registerComponents } from './vue';
+import i18next from 'i18next';
+import HttpApi from 'i18next-http-backend';
 
 customElements.define('la-akoma-ntoso', LaAkomaNtoso);
 customElements.define('la-gutter', LaGutter);
@@ -30,6 +32,7 @@ class IndigoApp {
     this.components = [];
     this.componentLibrary = {};
     this.Vue = getVue();
+    this.setupI18n();
     this.setupHtmx();
 
     for (const [name, component] of Object.entries(components)) {
@@ -45,6 +48,17 @@ class IndigoApp {
     window.dispatchEvent(new Event('indigo.components-created'));
   }
 
+  setupI18n () {
+    const opts = window.Indigo.i18n;
+    opts.backend = {};
+    opts.backend.loadPath = function (languages, namespaces) {
+      return opts.loadPaths[namespaces[0] + '-' + languages[0]];
+    };
+    i18next.use(HttpApi).init(opts);
+    // setup a global translation function
+    window.$t = i18next.t.bind(i18next);
+  }
+
   setupHtmx () {
     window.htmx = htmx;
     document.body.addEventListener('htmx:configRequest', (e) => {

indigo_app/static/i18n/indigo_app-en.json

@@ -0,0 +1,10 @@
+{
+  "Save": "",
+  "Cancel": "",
+  "Are you sure you want to resolve this?": "",
+  "Reply": "",
+  "Publish this document to users?": "",
+  "Hide this document from users?": "",
+  "You cannot delete published documents. Please mark the document as a draft and try again.": "",
+  "Are you sure you want to delete this document?": ""
+}

indigo_app/static/i18n/indigo_app-fr.json

@@ -0,0 +1,10 @@
+{
+  "Save": "Sauvegarder",
+  "Cancel": "Annuler",
+  "Are you sure you want to resolve this?": "",
+  "Reply": "",
+  "Publish this document to users?": "",
+  "Hide this document from users?": "",
+  "You cannot delete published documents. Please mark the document as a draft and try again.": "",
+  "Are you sure you want to delete this document?": ""
+}

indigo_app/static/javascript/indigo/views/annotations.js

@@ -100,8 +100,8 @@
 
       this.$el
           .find('.button-container')
-          .append('<button class="btn btn-primary btn-sm save">Save</button>')
-          .append('<button class="btn btn-outline-secondary btn-sm unedit float-end">Cancel</button>')
+          .append('<button class="btn btn-primary btn-sm save">' + $t('Save') + '</button>')
+          .append('<button class="btn btn-outline-secondary btn-sm unedit float-end">' + $t('Cancel') + '</button>')
           .end()
           .find('.content')
           .replaceWith($textarea);
@@ -115,7 +115,7 @@
     },
 
     close: function(e) {
-      if (confirm('Are you sure you want to resolve this?')) {
+      if (confirm($t('Are you sure you want to resolve this?'))) {
         this.model.set('closed', true);
         this.model.save();
       }
@@ -228,8 +228,8 @@
 
       if (Indigo.user.hasPerm('indigo_api.add_annotation')) {
         $('<div class="annotation reply-container">')
-            .append('<textarea class="form-control reply-box" placeholder="Reply...">')
-            .append('<button class="btn btn-primary btn-sm post hidden" disabled>Reply</button>')
+            .append('<textarea class="form-control reply-box" placeholder="' + $t('Reply') + '...">')
+            .append('<button class="btn btn-primary btn-sm post hidden" disabled>' + $t('Reply') + '</button>')
             .appendTo(this.el);
       }
     },

indigo_app/static/javascript/indigo/views/document.js

@@ -260,14 +260,14 @@
     },
 
     saveAndPublish: function() {
-      if (Indigo.user.hasPerm('indigo_api.publish_document') && confirm('Publish this document to users?')) {
+      if (Indigo.user.hasPerm('indigo_api.publish_document') && confirm($t('Publish this document to users?'))) {
         this.document.set('draft', false);
         this.save();
       }
     },
 
     saveAndUnpublish: function() {
-      if (Indigo.user.hasPerm('indigo_api.publish_document') && confirm('Hide this document from users?')) {
+      if (Indigo.user.hasPerm('indigo_api.publish_document') && confirm($t('Hide this document from users?'))) {
         this.document.set('draft', true);
         this.save();
       }
@@ -313,11 +313,11 @@
 
     delete: function() {
       if (!this.document.get('draft')) {
-        alert('You cannot delete published documents. Please mark the document as a draft and try again.');
+        alert($t('You cannot delete published documents. Please mark the document as a draft and try again.'));
         return;
       }
 
-      if (confirm('Are you sure you want to delete this document?')) {
+      if (confirm($t('Are you sure you want to delete this document?'))) {
         var frbr_uri = this.document.work.get('frbr_uri');
 
         Indigo.progressView.peg();

indigo_app/templates/base.html

@@ -1,4 +1,4 @@
-{% load pipeline sass_tags static account django_htmx %}
+{% load pipeline sass_tags static account django_htmx i18n %}
 
 <!DOCTYPE html>
 <html>
@@ -81,6 +81,7 @@
       if (!window.Indigo) window.Indigo = {};
       if (!window.Indigo.Preloads) window.Indigo.Preloads = {};
 
+      window.Indigo.i18n = {{ JS_I18N|safe }};
       window.Indigo.resolverUrl = '{{ RESOLVER_URL }}';
       {% if user.is_authenticated %}
       window.Indigo.Preloads.user = {{ USER_JSON|safe }};