Skip to content
Snippets Groups Projects
Select Git revision
  • 70a173455a2254c3f28e133680faaf6d355d6a7a
  • master default protected
  • 1.31
  • 4.38.7
  • 4.38.6
  • 4.38.5
  • 4.38.4
  • 4.38.3
  • 4.38.2
  • 4.38.1
  • 4.38.0
  • 4.37.2
  • 4.37.1
  • 4.37.0
  • 4.36.0
  • 4.35.0
  • 4.34.1
  • 4.34.0
  • 4.33.1
  • 4.33.0
  • 4.32.2
  • 4.32.1
  • 4.32.0
23 results

i18n-locale-and-formatter.md

Blame
  • i18n-locale-and-formatter.md 3.12 KiB

    We need the Formatter and Translations class and the parseLocale() function to handle translations.
    In the context of the DOM we can also use the getLocaleOfDocument() method.

    import {Translations} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/i18n/translations.js';
    import {Formatter} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/text/formatter.js';
    import {parseLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/i18n/locale.js';
    import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/dom/locale.js';

    Let's start with the function parseLocale(). This function can create a Locale object from a string.

    So we can create the corresponding Locale object from the string en_GB.

    const locale = parseLocale('en_GB')
    // ↦ Locale {}

    If we move in the browser, so we can also use the function getLocaleOfDocument().
    This function returns a locale object as a result.

    This function looks if the HTML tag <html lang="en"> has a lang attribute.
    If no locale is defined, the default value is assumed to be en.

    We now need an object with the translations. For this we use the Translations class.

    We can either define the translations ourselves or load them via an API.

    // define translations
    const translation = new Translations(parseLocale('en-GB'));
    translation.assignTranslations({
               text1: 'hello world!',
               text2: {
                 'one': 'click once',
                 'other': 'click ${n | tostring} times' // this is where the pipe comes in
               }
            });
    
    // fetch from API
    const translation = new Fetch('https://example.com/${language}.json').getTranslation('en-GB');
    // ↦ https://example.com/en.json 

    If we now have a translation, we can now read the desired strings. For this
    we use the method Translation.getText() or the method Translation.getPluralRuleText()
    for texts with more than one number.

    const message = translation.getText('text1');
    // -> hello world

    To translate texts with number references, enter the desired number.

    let n=1;
    const message1 = translation.getPluralRuleText('text2', n);
    // -> click once
    
    n=2
    const message2 = translation.getPluralRuleText('text2', n);
    // -> click ${n} times

    To replace the placeholder now, the formatter is used.

    const text = new Formatter({n}).format(message2); 
    console.log(text)
    // ↦ click 2 times

    Finally, let's take a look at the formatter class from the i18n module.

    import {Formatter} from 
        'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.0/dist/modules/i18n/formatter.js';

    A tranlate object can be passed directly to this class.

    There is also the possibility to pass values in the format string.

    // define translation
    const translations = new Translations('en')
        .assignTranslations({
            // text with placeholder
            message: "${animal} has eaten the ${food}!"
        });
    
    // without marker and inline values
    new Formatter({}, translations).format("message::animal=dog::food=cake")
    // ↦ dog has eaten the cake!     

    Voila!