funddy/jstranslations-bundle

JsTranslations for Symfony2

JavaScript Translations Bundle

, _(*1)

This bundle enables you to use your Symfony translator from JavaScript, allowing the generate translations in a very similar way., _(*2)

Setup and Configuration

First, you should have the Translator enabled at app/config.yml, _(*3)

framework:
    translator: { fallback: en }

Add the following to your composer.json file:, _(*4)

{
    "require": {
        "funddy/jstranslations-bundle": "2.0.*"
    }
}

Update the vendor libraries:, _(*5)

curl -s http://getcomposer.org/installer | php
php composer.phar install

Register the Bundle FunddyJsTranslationsBundle in app/AppKernel.php., _(*6)

public function registerBundles()
{
    $bundles = array(
        new Funddy\Bundle\JsTranslationsBundle\FunddyJsTranslationsBundle()
    );
}

For finishing, override the default translator with one which implements the ReadableTranslator interface at app/parameters.yml file, _(*7)

parameters:
    translator.class: Funddy\Bundle\JsTranslationsBundle\ReadableTranslator\SymfonyReadableTranslator

Usage

Expose the translations that you want to have accessible from your JavaScript code adding the languages and domains to the bundle configuration, _(*8)

funddy_js_translations:
    languages: [es, en]
    domains: [messages]

Now it's time to decide whether you want to use static or dynamic generated translations., _(*9)

Dynamic Translations

This is the most flexible option. Every time you make a change in translations you'll be able to access them from JavaScript. It's ideal for development environment or for those cases where you performance is not an issue. As everything in life, you have to pay a price, which is invoking an URL to regenerate all translations every time you make a request., _(*10)

Include FunddyJsTranslationsBundle routing at app/routing.yml, _(*11)

jstranslations:
    resource: "@FunddyJsTranslationsBundle/Resources/config/routing.yml"

Include the scripts, _(*12)

<script>var TRANSLATIONS_LOCALE = "{{ app.request.locale }}"</script>
<script src="{{ path('funddy_jstranslations', {locale: app.request.locale}) }}"></script>
<script src="{{ asset('bundles/funddyjstranslations/js/lib/funddytranslations.js') }}"></script>

Static Translations

Is the best solution when we talk about performance, include compiled translations in order to avoid controller execution., _(*13)

Compile the translations, _(*14)

php app/console funddy:jstranslations:dump

Include translations, _(*15)

<script>var TRANSLATIONS_LOCALE = '{{ app.request.locale }}'</script>
<script src="{{ asset('js/translations.' ~ app.request.locale ~ '.js') }}"></script>
<script src="{{ asset('bundles/funddyjstranslations/js/lib/funddytranslations.js') }}"></script>

Have fun!

<script>
    console.log(Translator.trans('Hello %name%!', {'%name%': 'Charlie'})); //Hello Charlie!
    console.log(Translator.transChoice('{1} There is one apple|]1,19] There are %count% apples', 3, {'%count%': 3}));//There are 3 apples
</script>

Defining Your Own Translator

What if you do not want to use the default "Translator" global var and define your own? Easy, include only translations runtime and define your own translator., _(*16)