HowTo Translate Javascript Strings?

Permalink 1 user found helpful

I've seen that you can translate javascript like this
current: "image {current} of {total}"

by saying
current:  ccm_t("image-of-total")
in your auto.js and in your controlller.php you use this function.

public function getJavaScriptStrings() {
      return array(
         'image-of-total' => t('image {current} of {total}')

But what do I do if I want to tranlate strings of a file within my /packages/colorbox/blocks/colorbox_image/js/colorbox.js ?

View Replies:
olsgreen replied on at Permalink Reply
If I'm getting the right idea of what you're asking, you can just call ccm_t("var_name") in colorbox? This obviously only works in block add and edit mode, but I assume you would of used this method if it was what you were after?

If you wanted to do it user side (not in block add / edit moe) use JSON to create an array of accessible objects from your controller and just access those within colorbox.js?

I'm not familiar with the 'colorbox image' package and I don't have it, so these are assumptions.

Fernandos replied on at Permalink Reply
yeah I think creating a JSON array for every language might be the right direction, but I wonder if there isn't any library or pattern I can follow to apply i18n to my javascript files or jquery plugins.. ?
Fernandos replied on at Permalink Reply
Well I just found which is quite nice!

I'll use it.
Shotster replied on at Permalink Reply
Hi Fernandos,

Thanks for raising this issue, as I've been thinking about what it would take to internationalize one of my sites.

The only problem with that jquery plugin is that it uses an entirely different translation mechanism than does C5. C5 makes use of PHP's gettext() function, and so you'd need to maintain your strings in two different places.

I don't know if it would be C5-sanctioned approach, but one way to go about it would be to simply process the JS server side. In other words, rename "colorbox.js" to "colorbox.js.php" and invoke gettext() where needed within the script...

alert('<?php echo gettext('This is my string!'); ?>');

...or the shorthand version...

alert('<?php echo _('This is my string!'); ?>');

Of course, you want to make sure the content is served properly as javascript by specifying the proper header at the top of the script...

header('Content-type: text/javascript');

There's probably a much better way to implement JS i18n in C5, but this should work and would probably be easier to maintain.

Fernandos replied on at Permalink Reply
Hi Steve!

I guess that sounds like an easy solution to use gettext for javascript files that are php files served as javascript files. But I tell you that overcomplicates stuff! If you want to change the language on the fly you would need a complete page reload, because your controller which holds the javascript strings(which are stored in your database) must be reloaded. With the jquery method you're just one XHR away from a language switch.
And spreading language files is easier because you can just give those translations away.

It's still not optimal in my opinion. Because an optimization would require me to merge language files for different plugins, which results in slow page loads because language strings cannot be streamed on demand like videos when you fast forward.

So you've two options that I know of:
1. Cacaded beast with php
2. lots of external js files for each plugin

Both have no common place where they share words that occur in both plugins. But that's a general problem in i18n solutions.
Fernandos replied on at Permalink Reply
The problem is that javascript plugins become applications themselves more and more and there is no good bridge between php and javascript frameworks yet.

I know that Zend has some jquery stuff, but that looks more or less experimental to me and I don't know if that solves this problem. I fear not.
Fernandos replied on at Permalink Reply
here's another library I found, this time a php library. "seems" to be good.
Shotster replied on at Permalink Reply
Yeah, good points, Fernandos. My suggestion is definitely a quick and dirty hack and not well thought out as a permanent solution. Perhaps something will start to gel if/when Andrew gives this some thought and suggests a direction.

Fernandos replied on at Permalink Reply
I would be happy also to hear a guideline or best practices regarding i18n with c5 for packages, themes and javascripts.