feat: allow mixing languages and layouts

aradzie · Nov 26, 2024 · e8dd9fe · e8dd9fe
1 parent 393cd04
commit e8dd9fe
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 11 deletions.
diff --git a/packages/keybr-keyboard/lib/settings.test.ts b/packages/keybr-keyboard/lib/settings.test.ts
@@ -27,14 +27,15 @@ test("read default settings", () => {
 test("read configured values", () => {
   const options = KeyboardOptions.from(
     new Settings()
-      .set(keyboardProps.layout, Layout.EN_JP)
-      .set(keyboardProps.geometry, Geometry.ANSI_101)
+      .set(keyboardProps.language, Language.IT)
+      .set(keyboardProps.layout, Layout.IT_IT)
+      .set(keyboardProps.geometry, Geometry.ISO_102)
       .set(keyboardProps.zones, ZoneMod.SYMMETRIC),
   );
 
-  equal(options.language, Language.EN);
-  equal(options.layout, Layout.EN_JP);
-  equal(options.geometry, Geometry.JAPANESE_106);
+  equal(options.language, Language.IT);
+  equal(options.layout, Layout.IT_IT);
+  equal(options.geometry, Geometry.ISO_102);
   equal(options.zones, ZoneMod.SYMMETRIC);
 });
 
@@ -83,4 +84,22 @@ describe("update properties", () => {
     equal(options.geometry, Geometry.ANSI_101);
     equal(options.zones, ZoneMod.SYMMETRIC);
   });
+
+  it("mix language and layout", () => {
+    const options = KeyboardOptions.default()
+      .withLanguage(Language.FR)
+      .withLayout(Layout.EN_DVORAK);
+
+    equal(options.language, Language.FR);
+    equal(options.layout, Layout.EN_DVORAK);
+  });
+
+  it("reject invalid language and layout combination", () => {
+    const options = KeyboardOptions.default()
+      .withLanguage(Language.FR)
+      .withLayout(Layout.EL_GR);
+
+    equal(options.language, Language.FR);
+    equal(options.layout, Layout.FR_FR);
+  });
 });
diff --git a/packages/keybr-keyboard/lib/settings.ts b/packages/keybr-keyboard/lib/settings.ts
@@ -29,6 +29,7 @@ export enum Emulation {
 }
 
 export const keyboardProps = {
+  language: itemProp("keyboard.language", Language.ALL, Language.EN),
   layout: xitemProp("keyboard.layout", Layout.ALL, Layout.EN_US),
   geometry: itemProp("keyboard.geometry", Geometry.ALL, Geometry.ANSI_101),
   zones: itemProp("keyboard.zones", ZoneMod.ALL, ZoneMod.STANDARD),
@@ -49,10 +50,11 @@ export class KeyboardOptions {
 
   static from(settings: Settings): KeyboardOptions {
     const layout = settings.get(keyboardProps.layout);
+    const language = settings.get(keyboardProps.language, layout.language);
     const geometry = settings.get(keyboardProps.geometry);
     const zones = settings.get(keyboardProps.zones);
     return KeyboardOptions.default()
-      .withLanguage(layout.language)
+      .withLanguage(language)
       .withLayout(layout)
       .withGeometry(geometry)
       .withZones(zones);
@@ -96,9 +98,13 @@ export class KeyboardOptions {
   }
 
   selectableLayouts(): Layout[] {
-    return Layout.ALL.filter(
-      (layout) => layout.language.id === this.#language.id,
+    const list = Layout.ALL.filter(
+      (layout) => layout.language.script === this.#language.script,
     );
+    return [
+      ...list.filter((layout) => layout.language.id === this.#language.id),
+      ...list.filter((layout) => layout.language.id !== this.#language.id),
+    ];
   }
 
   selectableGeometries(): Geometry[] {
@@ -127,7 +133,7 @@ export class KeyboardOptions {
   }
 
   withLayout(layout: Layout): KeyboardOptions {
-    if (this.#language === layout.language) {
+    if (this.#language.script === layout.language.script) {
       const geometry = Geometry.first(layout.geometries);
       const zones = ZoneMod.first(geometry.zones);
       return new KeyboardOptions(
@@ -173,6 +179,7 @@ export class KeyboardOptions {
 
   save(settings: Settings): Settings {
     return settings
+      .set(keyboardProps.language, this.#language)
       .set(keyboardProps.layout, this.#layout)
       .set(keyboardProps.geometry, this.#geometry)
       .set(keyboardProps.zones, this.#zones);

diff --git a/packages/page-practice/lib/settings/KeyboardSettings.tsx b/packages/page-practice/lib/settings/KeyboardSettings.tsx
@@ -53,7 +53,11 @@ export function KeyboardSettings(): ReactNode {
 
 function LayoutProp(): ReactNode {
   const { formatMessage } = useIntl();
-  const { formatLanguageName, formatLayoutName } = useFormattedNames();
+  const {
+    formatLanguageName, //
+    formatLayoutName,
+    formatFullLayoutName,
+  } = useFormattedNames();
   const { compare } = useCollator();
   const { settings, updateSettings } = useSettings();
   const options = KeyboardOptions.from(settings);
@@ -97,7 +101,10 @@ function LayoutProp(): ReactNode {
           <OptionList
             options={options.selectableLayouts().map((item) => ({
               value: item.id,
-              name: formatLayoutName(item),
+              name:
+                item.language.id === options.language.id
+                  ? formatLayoutName(item)
+                  : formatFullLayoutName(item),
             }))}
             value={options.layout.id}
             onSelect={(id) => {