2024-08-15 15:28:33 +00:00
|
|
|
# WebAppLocalizer
|
|
|
|
|
|
|
|
Quick reference for AI-assisted development of the WebAppLocalizer class.
|
|
|
|
|
|
|
|
## Import
|
2024-08-19 21:12:58 +00:00
|
|
|
```html
|
|
|
|
<script src="/lollms_assets/js/web.app.localizer"></script>
|
2024-08-15 15:28:33 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
## Initialization
|
|
|
|
```javascript
|
|
|
|
const localizer = new WebAppLocalizer(translations, localStoragePrefix, languageSelector);
|
|
|
|
```
|
|
|
|
|
|
|
|
## Key Methods
|
|
|
|
- `setLanguage(lang)`
|
|
|
|
- `getCurrentLanguage()`
|
|
|
|
- `getAvailableLanguages()`
|
|
|
|
- `translate(key)`
|
|
|
|
- `apply()`
|
|
|
|
|
|
|
|
## Translations Object Structure
|
|
|
|
```javascript
|
|
|
|
{
|
|
|
|
[langCode]: {
|
|
|
|
name: "Language Name",
|
|
|
|
translations: {
|
|
|
|
[key]: "Translation"
|
2024-08-26 23:59:25 +00:00
|
|
|
},
|
|
|
|
// optional
|
|
|
|
promptTranslations: {
|
|
|
|
[prompt name]: "Translation"
|
2024-08-15 15:28:33 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
## HTML Usage
|
|
|
|
```html
|
|
|
|
<element data-translate="key"></element>
|
|
|
|
```
|
|
|
|
|
|
|
|
Apply translations: `localizer.apply();`
|
2024-08-26 23:59:25 +00:00
|
|
|
Get the translation of a prompt with options:
|
|
|
|
```javascript
|
|
|
|
localizer.formatPrompt([prompt name], {
|
|
|
|
variable name: variable value to substitude in the translation string
|
|
|
|
})
|
|
|
|
```
|
|
|
|
In the translation string use the syntax {variable name}. This will allow using variable string parts when translating.
|