Commit 2bd966ed authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '43-customized-translations' into 'main'

Customized translations

Closes #43

See merge request !36
parents dd359a1c 3e5a15b3
......@@ -55,6 +55,18 @@ Add a container `<div>` to your HTML page and initialize the Genesys UI with the
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/', // tile server url for the base layer
attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ' // attribution data
},
},
i18n: {
en: {
translations: {
// No customizations
}
},
es: {
translations: {
// No customizations
}
}
}
};
......@@ -84,6 +96,7 @@ to *@geneesys-pgr/ui-embedded*:
|`clientSecret` | **Required** | Ditto. |
|`filter` |`undefined` | Allows for narrowing the scope of requested accession data from Genesys API. <br />To filter for accessions from your genebank, use: `{ institute: { code: ['XXX000'] } }` with the FAO WIEWS Code of your genebank. Default `undefined` value will return all accessions. |
|`language`|*en*| Specify the language of the user interface.<br />Fully supported: `en`, `zh-TW`<br />Partially supported: `es` |
| `i18n` | `{ ... }` | See *Customizing translations* |
|`title`| *Genesys:* | HTML page title prefix |
| `accession` | `{ ... }` | See *Accession* configuration options |
| `shoppingCart` | `{ ... }` | See *Shopping cart* configuration options |
......@@ -138,13 +151,37 @@ The map is **disabled by default**. To allow users to see map of accession colle
|`baseMap.url`|[World_Light_Gray_Base](https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}/)| Tile server template URL for the base map layer. |
|`baseMap.attribution`|Tiles &copy; ...| Map base layer attribution. |
# Translating Embedded Genesys
*Embedded Genesys* is developed in English.
The [en/translations.json](src/locales/en/translations.json) lists all labels currently in use by the library.
The library is translated by friends in our community members to other languages, listed in [src/locales](src/locales/).
Help us make *Embedded Genesys* available in your language or improve the current translations at
**https://www.transifex.com/crop-trust/embedded-genesys/content/**
We welcome your contributions!
## Customizing translations
It is possible that the translations bundled with the library do not match your needs.
You may customize translations of individual labels by listing them in the `i18n` property of the `genesysConfig`.
```js
const genesysConfig = {
i18n: {
es: { // customizations for Spanish labels
translations: { // 'translations' is mandatory
"pagetitle": {
"accessionList": "Accesiones" // customize the translation of 'pagetitle.accessionList'
}
}
}
}
```
**Note:** the complete list of labels is available in [en/translations.json](src/locales/en/translations.json).
# License and Disclaimer
......
import { Config } from 'config/config';
import {
showGenesysUI,
// showOverview, // for testing
} from 'genesys';
import {Config} from 'config/config';
import {showGenesysUI,} from 'genesys';
const queryLang = document.location.search && document.location.search.substr(1) || undefined;
......@@ -13,7 +10,7 @@ const genesysConfig: Config = {
captchaSiteKey: '10000000-ffff-ffff-ffff-000000000001',
language: queryLang,
title: 'Testing:',
filter: { institute: { code: [ 'COL003', 'BEL084', 'ETH013' ] } },
filter: {institute: {code: ['COL003', 'BEL084', 'ETH013']}},
accession: {
pdci: true,
subsets: true,
......@@ -22,6 +19,19 @@ const genesysConfig: Config = {
shoppingCart: {
enabled: true,
},
i18n: {
en: {
translations: {
// No customizations
}
},
es: {
translations: {
// No customizations
}
}
},
map: {
enabled: true,
height: '500px',
......
......@@ -15,6 +15,7 @@ export class Config {
public captchaSiteKey?: string;
public title?: string;
public map?: MapConfig;
public i18n?: { [key: string]: Translations };
public constructor(config: Config) {
this.apiUrl = config.apiUrl || defaultConfig.apiUrl;
......@@ -24,15 +25,16 @@ export class Config {
this.captchaSiteKey = config.captchaSiteKey || defaultConfig.captchaSiteKey;
this.filter = config.filter || defaultConfig.filter;
this.title = config.title || defaultConfig.title;
this.i18n = config.i18n || defaultConfig.i18n;
// Merge feature config
this.accession = { ...defaultConfig.accession, ...config.accession };
this.shoppingCart = { ...defaultConfig.shoppingCart, ...config.shoppingCart };
this.accession = {...defaultConfig.accession, ...config.accession};
this.shoppingCart = {...defaultConfig.shoppingCart, ...config.shoppingCart};
if (! this.captchaSiteKey) {
// Force disable shopping cart if captchaSiteKey is missing
this.shoppingCart.enabled = false;
}
this.map = { ...defaultConfig.map, ...config.map };
this.map = {...defaultConfig.map, ...config.map};
// console.log('Source and merged configuration', config, this);
}
}
......@@ -55,6 +57,10 @@ export class MapConfig extends BaseFeatureConfig {
};
}
export interface Translations {
translations: { [key: string]: unknown } ; // the only property we expect is 'translations' because that matches our primary resource name in i18next config
}
export const defaultConfig: Partial<Config> = {
apiUrl: 'https://api.sandbox.genesys-pgr.org',
filter: {},
......@@ -69,6 +75,18 @@ export const defaultConfig: Partial<Config> = {
shoppingCart: {
enabled: false,
},
i18n: {
en: {
translations:
{
'action': {
'cancel': 'Cancel',
'save': 'Save',
'delete': 'Delete',
}
},
}
},
map: {
enabled: true,
height: '400px', // 'calc(100vh - 115px)',
......
......@@ -57,7 +57,7 @@ export function showGenesysUI(holdingNode: HTMLElement, config: Config) {
const { apiUrl, clientId, clientKey, language } = config;
reconfigureServiceAxios({ apiUrl });
initI18n(language);
initI18n(language, config.i18n);
store.dispatch(setConfig(config));
checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {
......@@ -85,7 +85,7 @@ export function showOverview(holdingNode: HTMLElement, config: Config) {
const { apiUrl, clientId, clientKey, language } = config;
reconfigureServiceAxios({ apiUrl });
initI18n(language);
initI18n(language, config.i18n);
store.dispatch(setConfig(config));
checkAccessTokens(apiUrl, clientId, clientKey).then( (result) => {
......
import i18n from 'i18next';
import * as _ from 'lodash';
// import HttpApi from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
import transEn from 'locales/en/translations.json';
import transEs from 'locales/es/translations.json';
import transZhTw from 'locales/zh-TW/translations.json';
import { Translations } from "config/config";
// import transRu from 'locales/ru/translations.json';
// Bundled resources
......@@ -24,7 +26,7 @@ const resources = {
// withCredentials: false,
// };
const initI18n = (language = 'en') => {
const initI18n = (language = 'en', translations?: { [key: string]: Translations }) => {
const I = i18n
// .use(HttpApi)
.use(initReactI18next) // passes i18n down to react-i18next
......@@ -43,7 +45,7 @@ const initI18n = (language = 'en') => {
react: {
useSuspense: false,
},
resources,
resources: _.merge(resources, translations),
// partialBundledLanguages: true,
// backend: loaderOptions, // backend options
interpolation: {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment