Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

Integrating Elefant's I18n into static .js files

edited January 2013 in Apps

I've run into the problem of translating text inside a .js file and how to go about it in Elefant. So I just added new $.i18n() and $.i18n_append() functions as well as I18n::export() on the PHP side:

https://github.com/jbroadway/elefant/commit/18e0a02fa78af2dc914bb22f9ce73d38f7be6ec6

Here's how it works:

First, you need to call $.i18n_append() with a list of strings to make available to $.i18n() which can then be used anywhere in your .js files. There are a few ways to call this:

1. Directly:

<script>
$(function () {
    $.i18n_append ({
        'Some text': '{"Some text"}'
    });
});
</script>

2. In PHP:

<?php

$page->add_script (I18n::export (array (
    'Some text',
    'Another bit of text'
    // etc.
)));

?>

3. Pass an array of strings to the view template and render it there:

<?php

$strings = array ('Some text', 'Another bit of text' /* etc */ );

echo View::render (
    'myapp/mytemplate',
    array ('strings' => $strings)
);

?>

Now in the template add this line:

{{ strings|I18n::export }}

Finally, in your JavaScript when you need to render that text, you can say:

$('#my-element').text ($.i18n ('Some text'));

Hope that helps improve access to Elefant's I18n capabilities as more functionality in apps moves to the client-side :)

PS. I'm putting together some documentation on all the JavaScript helpers that come with Elefant, since that list is really starting to grow!

Comments

  • I'd like to amend this with two points:

    First, now you can omit the array() from I18n::export() and simply call it like this:

    <?php
    
    $page->add_script (I18n::export (
        'Some text',
        'Another bit of text'
        // etc.
    ));
    
    ?>
    

    Second, passing the array to the view template and calling I18n::export via a filter (#3 in my previous post) is not the best approach. A better way would be to call it like this:

    <?php
    
    $strings = I18n::export ('Some text', 'Another bit of text' /* etc */ );
    
    echo View::render (
        'myapp/mytemplate',
        array ('strings' => $strings)
    );
    
    ?>
    

    Now you can include it in your view template like this instead:

    {{ strings|none }}
    

    This way, Elefant's language indexer can be made to recognize the translatable text and make it available to translators. Otherwise, this becomes difficult to do.

  • edited February 2015

    I would like to translate js text in a public handlers (without the top-bar).

    I added:

    $page->add_script ('/apps/admin/js/top-bar.js');
    $page->add_script (I18n::export (
        'Some text',
        'Another bit of text'
        // etc.
    ));
    

    to the handler but I get two errors in browser console:

    Uncaught TypeError: undefined is not a function (top-bar.js:351)

    Uncaught TypeError: Cannot read property 'logo' of null (top-bar.js:351)

    What am I doing wrong?

  • I recently moved the $.i18n functions into their own file so they can be used on public-facing pages without needing the top-bar.js script. These links should help do what you need:

    https://github.com/jbroadway/elefant/blob/master/apps/admin/handlers/util/i18n.php https://github.com/jbroadway/elefant/blob/master/apps/admin/js/jquery.i18n.js

  • Yes, thank you.

Sign In or Register to comment.