Adopt ui-core's localization system

button.ts

@@ -4,7 +4,6 @@ namespace ui {
     const BUTTON_FOCUS_LABEL_OFFSET = 1
     const BUTTON_FOCUS_LABEL_PADDING = 1
     const BUTTON_CONTENT_GAP = 3
-    const BUTTON_DEFAULT_FONT = bitmaps.font8
     const BUTTON_CONTROL_HORIZONTAL_PADDING = 16
     const BUTTON_CONTROL_VERTICAL_PADDING = 8
     const BUTTON_CONTROL_MIN_WIDTH = 24
@@ -132,7 +131,7 @@ namespace ui {
         content: UiControlContent,
         style?: UiButtonStyle,
     ): number {
-        const font = (style && style.font) || BUTTON_DEFAULT_FONT
+        const font = (style && style.font) || locFont()
         const text = content.text || ""
         const textWidth = text.length ? font.charWidth * text.length : 0
         const bitmapWidth = content.bitmap ? content.bitmap.width : 0
@@ -151,7 +150,7 @@ namespace ui {
         content: UiControlContent,
         style?: UiButtonStyle,
     ): number {
-        const font = (style && style.font) || BUTTON_DEFAULT_FONT
+        const font = (style && style.font) || locFont()
         const text = content.text || ""
         const textHeight = text.length ? font.charHeight : 0
         const bitmapHeight = content.bitmap ? content.bitmap.height : 0
@@ -263,7 +262,7 @@ namespace ui {
             this.contentRect(rect, content, style, contentRect)
             const bitmap = content.bitmap
             const text = this.contentText(content, style)
-            const font = style.font || BUTTON_DEFAULT_FONT
+            const font = style.font || locFont()
             const color = style.color !== undefined ? style.color : 15
             const graphicWidth = bitmap ? bitmap.width : 0
 
@@ -365,7 +364,7 @@ namespace ui {
             }
             const text = this.focusLabelText(content, style, focusLabelText)
             if (text.length == 0) return
-            const font = style.font || BUTTON_DEFAULT_FONT
+            const font = style.font || locFont()
             const textWidth = font.charWidth * text.length
             const textHeight = font.charHeight
             const padding = BUTTON_FOCUS_LABEL_PADDING
@@ -410,7 +409,7 @@ namespace ui {
             style: UiButtonStyle,
             output: Rect,
         ): void {
-            const font = style.font || BUTTON_DEFAULT_FONT
+            const font = style.font || locFont()
             const text = this.contentText(content, style)
             const textWidth = text.length > 0 ? font.charWidth * text.length : 0
             const textHeight = text.length > 0 ? font.charHeight : 0

label.ts

@@ -1,5 +1,4 @@
 namespace ui {
-    const LABEL_DEFAULT_FONT = bitmaps.font8
     const LABEL_CONTENT_GAP = 3
 
     /**
@@ -63,7 +62,7 @@ namespace ui {
                 this.content_ = undefined
                 this.color_ = color !== undefined ? color : 1
                 this.backgroundColor_ = undefined
-                this.font_ = LABEL_DEFAULT_FONT
+                this.font_ = locFont()
                 this.width_ = 0
                 this.height_ = 0
             } else {
@@ -72,7 +71,7 @@ namespace ui {
                 this.content_ = options
                 this.color_ = options.color !== undefined ? options.color : 1
                 this.backgroundColor_ = options.backgroundColor
-                this.font_ = options.font || LABEL_DEFAULT_FONT
+                this.font_ = options.font || locFont()
                 this.width_ = _uiControls.sizeWidth(options.size, 0)
                 this.height_ = _uiControls.sizeHeight(options.size, 0)
             }

locales/README.md

@@ -0,0 +1,25 @@
+# Locale catalogs
+
+Each catalog is a flat JSON object keyed by the English source string that
+appears inside a `ui.loc(...)` / `ui.locc(...)` / `ui.locf(...)` call, mapping
+that key to its translation for one language.
+
+- `en.json` is generated -- run `npm run loc:strings` to regenerate it
+  from the `files` listed in `pxt.json`; do not edit it by hand.
+- Every other file (`fr.json`, ...) is the translation catalog for one
+  language, keyed by the same English strings. A key missing from a catalog
+  falls back to the English string at runtime, so partial catalogs are safe.
+
+Key-cap translations render on fixed-width keys, so keep them at most one
+character longer than the English source (for example `space` -> `espace`,
+`DEL` -> `SUP`).
+
+## Adding a new caption
+
+Wrap the caption literal in `ui.loc(...)` where the control renders it, then run
+`npm run loc:strings` to regenerate `en.json`. Add translations to the
+`<lang>.json` catalogs, keyed by the source string.
+
+An application that consumes this library can override any of these translations
+from its own catalogs: the app catalog layer wins over the library layers when
+they are merged for a build.

locales/ca.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "SUP",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espai"
+}

locales/cs.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "SMAŽ",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "mezera"
+}

locales/cy.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "DIL",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "bwlch"
+}

locales/de.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "ENTF",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "Leer"
+}

locales/en.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "DEL",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "space"
+}

locales/es-ES.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "SUP",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espacio"
+}

locales/es-MX.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "SUP",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espacio"
+}

locales/eu.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "EZAB",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "tartea"
+}

locales/fil.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "BURA",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "puwang"
+}

locales/fr-CA.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "SUP",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espace"
+}

locales/fr.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "SUP",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espace"
+}

locales/hr.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "DEL",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "razmak"
+}

locales/hu.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "TÖRL",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "szóköz"
+}

locales/it.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "CANC",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "spazio"
+}

locales/nl.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "WIS",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "spatie"
+}

locales/pl.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "USUŃ",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "spacja"
+}

locales/pt-BR.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "APAG",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espaço"
+}

locales/pt-PT.json

@@ -0,0 +1,10 @@
+{
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "123": "123",
+    "ABC": "ABC",
+    "DEL": "APAG",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "espaço"
+}

locales/ru.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "СТЕР",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "пробел"
+}

locales/tr.json

@@ -0,0 +1,10 @@
+{
+    "123": "123",
+    "#+=": "#+=",
+    "+/-": "+/-",
+    "ABC": "ABC",
+    "DEL": "SİL",
+    "OK": "OK",
+    "abc": "abc",
+    "space": "boşluk"
+}

modal-grid.ts

@@ -409,6 +409,7 @@ namespace ui {
                         this.style_ && this.style_.color !== undefined
                             ? this.style_.color
                             : 1,
+                    font: locFont(),
                 })
             this.renderControls(
                 surface,
@@ -502,7 +503,7 @@ namespace ui {
                 const text = controls[i].text || ""
                 textLength = Math.max(textLength, text.length)
             }
-            return Math.max(24, textLength * bitmaps.font8.charWidth + 16)
+            return Math.max(24, textLength * locFont().charWidth + 16)
         }
 
         private titleHeight(): number {
@@ -779,7 +780,7 @@ namespace ui {
                       ? this.title_
                       : this.title_.text
             let width = titleText
-                ? titleText.length * bitmaps.font8.charWidth
+                ? titleText.length * locFont().charWidth
                 : 0
             const bitmap =
                 this.title_ !== undefined && typeof this.title_ != "string"

numeric-entry.ts

@@ -1,5 +1,4 @@
 namespace ui {
-    const NUMERIC_ENTRY_FONT = bitmaps.font8
     const UI_NUMERIC_ENTRY_FLAG_DELETE_ENABLED = 1
     const UI_NUMERIC_ENTRY_FLAG_CANCEL_ENABLED = 2
 
@@ -190,7 +189,7 @@ namespace ui {
                 surface,
                 rect,
                 this.text_,
-                NUMERIC_ENTRY_FONT,
+                locFont(),
             )
         }
 
@@ -967,10 +966,10 @@ namespace ui {
         private keyTextForKey(key: UiNumericEntryModalKeyValue): string {
             if (key >= 0 && key <= 9) return "" + key
             if (key == UI_NUMERIC_ENTRY_KEY_DECIMAL_POINT) return "."
-            if (key == UI_NUMERIC_ENTRY_KEY_TOGGLE_SIGN) return "+/-"
+            if (key == UI_NUMERIC_ENTRY_KEY_TOGGLE_SIGN) return loc("+/-")
             if (key == UI_NUMERIC_ENTRY_KEY_BACKSPACE) return "<-"
-            if (key == UI_NUMERIC_ENTRY_KEY_DELETE) return "DEL"
-            return "OK"
+            if (key == UI_NUMERIC_ENTRY_KEY_DELETE) return loc("DEL")
+            return loc("OK")
         }
     }
 }

package.json

@@ -1,6 +1,7 @@
 {
     "scripts": {
-        "format": "prettier --write \"**/*.ts\""
+        "format": "prettier --write \"**/*.ts\"",
+        "loc:strings": "node scripts/locstrings.mjs"
     },
     "devDependencies": {
         "prettier": "^3.8.3"

pxt.json

@@ -31,7 +31,7 @@
         "radio": "*",
         "microphone": "*",
         "display-shield": "github:microbit-apps/display-shield#v1.1.4",
-        "ui-core": "github:microbit-apps/ui-core#v0.0.4"
+        "ui-core": "github:microbit-apps/ui-core#v0.0.5"
     },
     "testDependencies": {}
 }