Translation System for JavaScript

[taufik-nurrohman]

The easiest way to add translation support in JavaScript application is by embedding inline JavaScript contains the desired language data as object:

$i18n = 'window.i18n = ' . To::JSON([
    'Load!' => i('Load!'),
    'Loading...' => i('Loading...'),
    'Loaded.' => i('Loaded.')
]) . ';';

Asset::script($i18n);

Then, to access the translation object within your JavaScript application…

function sprintf(str, ...args) {
    // Load external library to parse formats in string!
}

function translate(str, args = []) {
    let i18n = window.i18n[str] ?? str;
    if (!Array.isArray(args)) {
        args = [args];
    }
    if (args.length > 0 && -1 !== str.indexOf('%')) {
        i18n = sprintf(i18n, ...args);
    }
    return i18n;
}

// Translate!

if (isLoading) {
    console.log(translate('Loading...'));
}

if (isLoaded) {
    console.log(translate('Loaded.'));
}

let button = document.createElement('button');

button.innerHTML = translate('Load!');
button.value = 'index.html';

button.addEventListener('click', function() {
    this.innerHTML = translate('Loading...');
    doLoading(this.value);
});

function doLoading(value) {
    // Do AJAX stuff here!
}