Merge pull request #18099 from Moz-TedC/bug-974794-vietnamese-ime-plu…

…s-telex

Bug 974794: Vietnamese IME. Incorporates Trung Ngo's Telex IME code.

apps/keyboard/js/layouts/vi-Qwerty.js

@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+Keyboards['vi-Qwerty'] = {
+  label: 'Vietnamese',
+  menuLabel: 'Tiếng Việt (QWERTY)',
+  imEngine: 'vietnamese',
+  needsCandidatePanel: true,
+  width: 10,
+  types: ['text', 'url', 'email'],
+  alt: {
+    'a': 'ăâ',
+    'd': 'đ',
+    'e': 'ê',
+    'o': 'ôơ',
+    'u': 'ư',
+    '.': ',?!-;:'
+  },
+  keys: [
+    [
+      { value: 'q' }, { value: 'w' }, { value: 'e' }, { value: 'r' },
+      { value: 't' } , { value: 'y' }, { value: 'u' }, { value: 'i' },
+      { value: 'o' }, { value: 'p' }
+    ], [
+      { value: 'a' }, { value: 's' }, { value: 'd' }, { value: 'f' },
+      { value: 'g' } , { value: 'h' }, { value: 'j' }, { value: 'k' },
+      { value: 'l' }
+    ], [
+      { value: '⇪', ratio: 1.5, keyCode: KeyEvent.DOM_VK_CAPS_LOCK },
+      { value: 'z' }, { value: 'x' }, { value: 'c' }, { value: 'v' },
+      { value: 'b' }, { value: 'n' }, { value: 'm' },
+      { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+    ], [
+      { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+      { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+    ]
+  ]
+};

apps/keyboard/js/layouts/vi-Telex.js

@@ -0,0 +1,26 @@
+Keyboards['vi-Telex'] = {
+  label: 'Vietnamese (Telex)',
+  menuLabel: 'Tiếng Việt (Telex)',
+  imEngine: 'jstelex',
+  types: ['text', 'url', 'email'],
+  keys: [
+    [
+      { value: 'q' }, { value: 'w' }, { value: 'e' } , { value: 'r' },
+      { value: 't' } , { value: 'y' }, { value: 'u' } , { value: 'i' },
+      { value: 'o' }, { value: 'p' }
+    ], [
+      { value: 'a' }, { value: 's' }, { value: 'd' }, { value: 'f' },
+      { value: 'g' } , { value: 'h' }, { value: 'j' }, { value: 'k' },
+      { value: 'l' },
+      { value: ':', visible: ['url']}, { value: '_', visible: ['email']}
+    ], [
+      { value: '⇪', ratio: 1.5, keyCode: KeyEvent.DOM_VK_CAPS_LOCK },
+      { value: 'z' }, { value: 'x' }, { value: 'c' }, { value: 'v' },
+      { value: 'b' }, { value: 'n' }, { value: 'm' },
+      { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+    ], [
+      { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+      { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+    ]
+  ]
+};

apps/keyboard/js/layouts/vi-Typewriter.js

@@ -0,0 +1,39 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// This is a traditional Vietnamese typewriter layout.
+Keyboards['vi-Typewriter'] = {
+  label: 'Vietnamese',
+  menuLabel: 'Tiếng Việt',
+  imEngine: 'vietnamese',
+  needsCandidatePanel: true,
+  width: 10,
+  types: ['text', 'url', 'email'],
+  alt: {
+    'đ': 'z',
+    'ư': 'f',
+    'ơ': 'j',
+    'ă': 'w',
+    '.': ',?!-;:'
+  },
+  keys: [
+    [
+      { value: 'a' }, { value: 'đ' }, { value: 'e' }, { value: 'r' },
+      { value: 't' } , { value: 'y' }, { value: 'u' }, { value: 'i' },
+      { value: 'o' }, { value: 'p' }
+    ], [
+      { value: 'q' }, { value: 's' }, { value: 'd' }, { value: 'ư' },
+      { value: 'g' } , { value: 'h' }, { value: 'ơ' }, { value: 'k' },
+      { value: 'l' }, { value: 'm' }
+    ], [
+      { value: '⇪', ratio: 1.5, keyCode: KeyEvent.DOM_VK_CAPS_LOCK },
+      { value: 'ă' }, { value: 'x' }, { value: 'c' }, { value: 'v' },
+      { value: 'b' }, { value: 'n' }, { value: '^', keyCode: 94 },
+      { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+    ], [
+      { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+      { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+    ]
+  ]
+};

apps/keyboard/js/render.js

@@ -337,6 +337,14 @@ const IMERender = (function() {
     if (!activeIme)
       return;
 
+    if (inputMethodName == 'vietnamese' && candidates.length) {
+      // In the Vietnamese IM, the candidates correspond to tones.
+      // There will be either 2 or 5. All must appear.
+      numberOfCandidatesPerRow = candidates.length;
+      candidateUnitWidth =
+        Math.floor(ime.clientWidth / numberOfCandidatesPerRow);
+    }
+
     // TODO: Save the element
     var candidatePanel = activeIme.querySelector('.keyboard-candidate-panel');
     var candidatePanelToggleButton =
@@ -487,11 +495,20 @@ const IMERender = (function() {
     var candidatesLength = candidates.length;
 
     for (var i = 0; i < candidatesLength; i++) {
-      var cand = candidates[i][0];
-      var data = candidates[i][1];
-      var span = document.createElement('span');
+      var cand, data;
+      if (typeof candidates[i] == 'string') {
+        cand = data = candidates[i];
+      } else {
+        cand = candidates[i][0];
+        data = candidates[i][1];
+      }
+
       var unit = (cand.length >> 1) + 1;
+      if (inputMethodName == 'vietnamese') {
+        unit = 1;
+      }
 
+      var span = document.createElement('span');
       span.textContent = cand;
       span.dataset.selection = true;
       span.dataset.data = data;
@@ -708,6 +725,9 @@ const IMERender = (function() {
         ime.querySelectorAll('.candidate-row span'),
         function(item) {
           var unit = (item.textContent.length >> 1) + 1;
+          if (inputMethodName == 'vietnamese') {
+            unit = 1;
+          }
           item.style.width = (unit * candidateUnitWidth - 2) + 'px';
         }
       );

apps/keyboard/style/keyboard.css

@@ -441,6 +441,10 @@ bubble above the key when you tap and hold. */
   border: none;
 }
 
+.keyboard-candidate-panel.vietnamese .candidate-row span {
+  font-size: 1.7rem;
+}
+
 /* for latin suggestions we don't need such a tall box */
 /* and in latin we hide the toggle button, so we can be full-width */
 .candidate-panel .keyboard-candidate-panel.latin {

build/config/keyboard-layouts.json

@@ -166,6 +166,10 @@
     "ur": [
         {"layoutId": "en", "app": ["apps", "keyboard"]}
     ],
+    "vi": [
+        {"layoutId": "vi-Typewriter", "app": ["apps", "keyboard"]},
+        {"layoutId": "fr", "app": ["apps", "keyboard"]}
+    ],
     "zh-CN": [
         {"layoutId": "zh-Hans-Pinyin", "app": ["apps", "keyboard"]},
         {"layoutId": "en", "app": ["apps", "keyboard"]}