mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-14 23:32:20 +00:00
feat(i18n): an ./i18n entry for an application with its own language choice
startPageLocale, followPageLocale and switchLocale start, follow and switch the page's language as the standalone application and the globe picker do, for an application that offers the language elsewhere and passes localePicker: false. The standalone application uses them.
This commit is contained in:
1 parent
feab48397f
commit
5f96009b67
12 files changed
+255
-23
No files matched your search
@@ -59,6 +59,30 @@ The language picker switches in place, without a reload. A view that calls `t()`
|
||||
|
||||
A toast already on screen keeps its words.
|
||||
|
||||
## An application with its own language choice
|
||||
|
||||
An application that composes Core and offers the language somewhere else (a menu, a settings page) imports the `./i18n` entry (`src/i18n/page.js`) and passes `localePicker: false` to `createApplicationControls`:
|
||||
|
||||
```js
|
||||
import {
|
||||
LOCALES,
|
||||
LOCALE_NAMES,
|
||||
followPageLocale,
|
||||
getLocale,
|
||||
onLocaleChange,
|
||||
startPageLocale,
|
||||
switchLocale,
|
||||
} from '<core package>/i18n';
|
||||
|
||||
startPageLocale(document); // before any view renders: ?lang=, stored choice, browser, English; translates data-i18n markup
|
||||
const stopFollowing = followPageLocale(document); // <html lang>/dir and data-i18n markup follow each switch
|
||||
|
||||
for (const code of LOCALES) addMenuItem(LOCALE_NAMES[code], code === getLocale());
|
||||
menu.onChoose = (code) => switchLocale(code); // switched in place and stored (in ?lang when storage is blocked)
|
||||
```
|
||||
|
||||
`switchLocale` does what a choice in the globe picker does, and returns `'unchanged'` for the active language. `onLocaleChange` tells the application's own menu to mark the new language.
|
||||
|
||||
## Rules
|
||||
|
||||
- **Pass literals.** `t('Close')`, not `t(label)` (unless `label` holds a `msg()` value) and never a template literal with `${…}`.
|
||||
@@ -109,6 +133,7 @@ Icons (`aria-hidden="true"`, Material Symbols), comments, CSS values and lowerca
|
||||
| `src/ui/i18n.js` | the page's vue-i18n instance: the active locale and the catalogs |
|
||||
| `src/i18n/marker.js` | `msg` alone, for modules the server or tools import (no catalogs) |
|
||||
| `src/i18n/locale.js` | shipped languages, their names, choosing the language at boot |
|
||||
| `src/i18n/page.js` | the `./i18n` entry: start, follow and switch the page's language |
|
||||
| `src/i18n/locales/<code>.json` | one catalog per language, keyed by English text |
|
||||
| `src/i18n/same-as-english.json` | per language, the entries that stay as in English on purpose |
|
||||
| `scripts/i18n.mjs` | `npm run i18n`: extracts messages, checks the catalogs, finds unmarked UI text |
|
||||
|
||||
Reference in new issue
Block a user