Internationalizing User Interface Options

To translate User Interface Options, you will need to create a copy of the HTML templates and translate any text within, and then supply custom URLs for those templates.

The English templates are in the 'infusion' folder, in the 'components/uiOptions/html' folder. The easiest way to localize would be to create new folders beside the HTML folder (i.e. as a sibling to the HTML folder) for other languages and keep the file names the same. Then you can simply modify the 'prefix' option in your code:

fluid.uiOptions.fatPanel(".flc-uiOptions", {
	prefix: static_url + "javascripts/infusion/components/uiOptions/html-translated/",
	slidingPanel: {
		...

To translate the strings in the drop downs:

The strings are defined as options to the UI Options component, so they can be overridden by the integrator by passing in new strings. You do this where the UI Options component is created

The tool is created by the call

uiOptions = fluid.uiOptions.fatPanel.withMediaPanel(".flc-uiOptions", {…});

The second argument contains the options for configuring the tool; this is where you would specify the strings, by adding a 'textControls' property to the object. The format for doing this is as follows:

...
slidingPanel: {...},
components: {...},
textControls: {
   options: {
       strings: {
           textFont: ["translatedDefault", "translatedTimes New Roman", "translatedComic Sans", "translatedArial", "translatedVerdana"],
           theme: ["translatedDefault", "translatedBlack on white", "translatedWhite on black", "translatedBlack on yellow", "translatedYellow on black"]
       }
   }
}