Use youre favourite language

SWAC includes multi language support for the whole page.
Each component has a language directory where language files for a concrete language is stored. For example langs/de.js.
The language file is automatically loaded with the component and the language is automatically choosen useing the browser options.
However it can be overwritten by setting SWAC.config.lang in the confguration.

Useing language entries

To use a language entry in your skin (HTML fragment) there are a view options. The swac_lang attribute can be used on any tag to translate the contents inside this tag with the expression identified by the id that is noted in the attribute.

<div id="mytext" swa="Present FROM ../data/exampledata_list.json">
   Text: <span swac_lang="core.model_nodata">No data</span>
</div>
        

In button, label, legend, option and a you can place the id directly inside the value-Attribute.

<input type="button" value="core.model_nodata">
        

<a href="#">core.model_nodata</a> 
        

In the "placeholder", "title", "alt" and "uk-tooltip" attribute you can use the language id directly, too.

<a href="#" title="core.model_nodata">Look at the title attribute</a> 
        

To use multilanguage on any attributes, define the swac_langattr attribute and state there the attribute names and the language id.

<a href="#" swac_langattr="myattr:core.model_nodata">Look at the myattr attribute</a> 
        

Custom messages for empty lists

When a component uses the option showWhenNoData: true. There is automatically a message generated about no data available, when there is no dataset. You can customise the message for each useage of a component. Create a language entry in the app_LNGCODE.js with the id of the requestor with "_nodata" appended.

<div id="mypesonalid" swa="Present FROM emptydata"></div> 
        

var app_en = {
    mypersonalid_nodata: "My personal no data message"
};
        

Useing language entries in javascript code

All laguage entries of the currently loaded language are available in an global variable, too. Use SWAC_lang for access to the language entries. The current active langauge is accessable in dict attribute.

window.swac.lang.dict.core.model.nodata;
        

Useing placeholders in language entires

Some language entries have placeholders in it. You can fill this placeholders by useing the SWAC_language.replacePlaceholders function.

// Language entry is defined as: moreerrors: "Es sind %number% weitere Fehler aufgetreten."
let moreMsgs = window.swac.lang.dict.core.moreerrors;
moreMsgs = window.swac.lang.replacePlaceholders(moreMsgs, 'number', 5);
UIkit.modal.alert(moreMsgs);
        

Writing own language files

You can add language files eayseily with some simplte javascript object.
The file can have any name but must end with the short language abbrivation.
Language files for components are name only with the language abbrivation and placed in the components lang folder.
The content of the language file is a simple javascript object with a name corosponding to the components name or a free choosen name followed by _ and the language abbrivation.

var Mediacode_de = {
    notitle: 'Kein Titel',
    novideosupport: 'Ihr Browser unterstützt leider keine Videovidergabe.',
    noaudiosupport: 'Ihr Browser unterstützt leider keine Audiovidergabe',
};
export default Mediacode_de;

Loading additional language files

You can load additional language files. Those are applied automatically to the pages content after load.
The path to the file does not contain the language abbrivation and the .js. Also the objects name does not append the _ and the language abbrivation.

window.onload = function () {
    // Load language file for mediacode
    SWAC.lang.loadTranslationFile('../swac/components/Mediaplayer/langs/mediacode', 'Mediacode').then(
        function() {
            window.swac.lang.translateAll(document);
         });
    );
}
        

Useing app language file

You can define and load a app language file. This must be called app and within app_LANGCODE.js. If you load it over the above descriped way to load custom languages this file has a special possibility. It can overwrite any default language anetries from the component language files. To do so, just add an entry with the full qualified language entry name from the component.

var app_de = {
    "myownentry": "This entry is a extra languge entry for your app it does not overwrite any entries from the components.",
    "Edit.adddataset": "This entry overwrites the language entry from the Edit component."
};
export default app_de;
        

Language depending formations

SWAC language support allows number and date formation to users localised language. Use the following HTML attributes to control the localisation:

Change the language on the fly

Language can be changed on the fly. The translator component provides a language change button.