CODEWITHSUNDEEP
javascriptinternationalizationi18next
lorife
lorife

Reputation: 387

i18n, javascript - is there a way to use a 2nd file for the differences?

I would like to use, as I am doing now, one file for my primary language and a second file for english. This is working great.

Now I would like to add two more files. One with just the changes compared to the primary language and a second one for the other language.

In other word..the first file is a big file with all the dictionary but for a specific customer i need some words to be translated differently. Instead of writing another file 99% equal to the original I just would like to write the different words.

How can I do that?

this is my code:

var i18nextInstance = i18next
  .use(i18nextXHRBackend)
  .use(i18nextBrowserLanguageDetector)
  .init(
    {
      detection: {
        // Escludo localStorage. Praticamente ricorda l'ultima lingua usata.
        //order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
        order: ['querystring', 'cookie', 'navigator', 'htmlTag'],
      },
      fallbackLng: 'en',
      lng: lingua_attiva,
      debug: false,
      ns: ['common'],
      defaultNS: 'common',
      backend: {
        loadPath: './i18n/{{lng}}/{{ns}}.json',
        crossDomain: true,
        parse: function (data) {
          // queste 3 righe sotto mi fanno utilizzare il json che include anche la lingua.
          // infatti, nel caso di un file per lingua, la lingua non andrebbe messa. Solo che ci sono delle estensioni
          // come quella di PHP che la vogliono lo stesso. Per questo la lascio e la escludo.
          try {
            var json = JSON.parse(data); // --> { en: {  ... } }
            var m = Object.keys(json); // --> ['en']
            return json[m[0]]; // --> { common: { ... } }
          } catch (e) {
            alert(e); // error in the above string (in this case, yes)!
          }
        },
      },
    },
    function (err, t) {
      // initialized and ready to go!

      // Se in ingresso non avevo passato nessuna lingua, la imposto adesso con quella rilevata
      if (lingua_attiva == undefined) {
        lingua_attiva = i18nextInstance.language.substr(0, 2);
      }

      // Se la lingua non è tra quelle abilitate, forzo inglese
      if (lingua_attiva != 'it' && lingua_attiva != 'en') {
        lingua_attiva = 'en';
      }

      ConfiguraMainWebsite();
      AggiornaTraduzioni();
    }
  );

// Configuro le opzioni per utilizzare jquery nelle traduzioni
jqueryI18next.init(i18nextInstance, $, {
  tName: 't', // --> appends $.t = i18next.t
  i18nName: 'i18n', // --> appends $.i18n = i18next
  handleName: 'localize', // --> appends $(selector).localize(opts);
  selectorAttr: 'data-i18n', // selector for translating elements
  targetAttr: 'i18n-target', // data-() attribute to grab target element to translate (if diffrent then itself)
  optionsAttr: 'i18n-options', // data-() attribute that contains options, will load/set if useOptionsAttr = true
  useOptionsAttr: true, // see optionsAttr
  parseDefaultValueFromContent: true, // parses default values from content ele.val or ele.text
});

Upvotes: 0

Views: 484

Answers (1)

felixmosh
felixmosh

Reputation: 35553

You can create a new file with diffs only (this means that the keys are the same as in the common file), let's call it diffs and use i18next namespace fallback feature.

In a specific place you can use diffs namespace (which will load diffs.json file) and fallback to your common namespace for missing keys.

Since your config is already defined common as a defaultNS, all you need to do is just for the specific user change the namespace to diffs.

<div class="outer" data-i18n="diffs:key"></div>
// -----------------------------^

$(".outer").localize();

You can define the namespace for a specific region of translation

$(".outer").localize({ns: 'diffs'});
// this will call translation on the `.outer` div with a specific namespace without the need to attach it as I've showed before

Upvotes: 1

Related Questions