Merge pull request #23359 from RudyLu/keyboard/Bug1019472

Bug 1019472 - [Keyboard] [ZhuYin] ZhuYin Keyboard should follow the reco... r=rudylu.
mozilla-b2g · Aug 28, 2014 · bc9a482 · bc9a482
2 parents 0535f7a + 44af06e
commit bc9a482
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 6 deletions.
diff --git a/apps/keyboard/js/imes/jszhuyin/jszhuyin.js b/apps/keyboard/js/imes/jszhuyin/jszhuyin.js
@@ -93,6 +93,15 @@ JSZhuyinGaiaKeyboardGlue.prototype.click = function jszg_click(code) {
   var BOPOMOFO_TONE_4 = 0x02cb;
   var BOPOMOFO_TONE_5 = 0x02d9;
 
+  if (code == -31) {
+    this.callbacks.alterKeyboard('zh-Hant-Zhuyin-AlternateLayout-Half');
+    return;
+  }
+  if (code == -32) {
+    this.callbacks.alterKeyboard('zh-Hant-Zhuyin-SymbolLayout-Half');
+    return;
+  }
+
   // We must handle Bopomofo symbols.
   if (code >= BOPOMOFO_START && code <= BOPOMOFO_END ||
       code === BOPOMOFO_TONE_1 || code === BOPOMOFO_TONE_2 ||

diff --git a/apps/keyboard/js/layouts/zh-Hant-Zhuyin.js b/apps/keyboard/js/layouts/zh-Hant-Zhuyin.js
@@ -2,13 +2,20 @@ Keyboards['zh-Hant-Zhuyin'] = {
   label: 'Chinese - Traditional - Zhuyin',
   shortLabel: '注',
   menuLabel: '注音',
+  basicLayoutKey: 'ㄅㄆㄇ',
   needsCandidatePanel: true,
+  needsCommaKey: true,
   imEngine: 'jszhuyin',
   types: ['text', 'url', 'email'],
   width: 11,
+  specificCssRule: true,
   textLayoutOverwrite: {
-    ',': false,
-    '.': false
+    ',': '，',
+    '.': '。'
+  },
+  alt: {
+    '.': '.,?!;:',
+    '。': '。，？！；：'
   },
   keys: [
     [
@@ -22,16 +29,156 @@ Keyboards['zh-Hant-Zhuyin'] = {
     ], [
       { value: 'ㄇ'},{ value: 'ㄋ'},{ value: 'ㄎ'},{ value: 'ㄑ'},
       { value: 'ㄕ'},{ value: 'ㄘ'},{ value: 'ㄨ'},{ value: 'ㄜ'},
-      { value: 'ㄠ'},{ value: 'ㄤ'}, { value: '…'}
+      { value: 'ㄠ'},{ value: 'ㄤ'}, { value: '！'}
     ], [
       { value: 'ㄈ'},{ value: 'ㄌ'},{ value: 'ㄏ'},{ value: 'ㄒ'},
       { value: 'ㄖ'},{ value: 'ㄙ'},{ value: 'ㄩ'},{ value: 'ㄝ'},
       { value: 'ㄡ'},{ value: 'ㄥ'},
       { value: '⌫', keyCode: KeyEvent.DOM_VK_BACK_SPACE }
     ], [
-      { value: '&nbsp', ratio: 7, keyCode: KeyboardEvent.DOM_VK_SPACE },
-      { value: '，'},
-      { value: '。'},
+      { value: '&nbsp', ratio: 9, keyCode: KeyboardEvent.DOM_VK_SPACE },
+      { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+    ]
+  ],
+  alternateLayout: {
+    width: 10,
+    textLayoutOverwrite: {
+      ',': '，',
+      '.': '。'
+    },
+    keys: [
+      [
+        { value: '1' }, { value: '2' }, { value: '3' } , { value: '4' },
+        { value: '5' }, { value: '6' }, { value: '7' } , { value: '8' },
+        { value: '9' }, { value: '0' }
+      ], [
+        { value: '＠' }, { value: '＃' }, { value: '＄' }, { value: '＆' },
+        { value: '＊' }, { value: '－' }, { value: '＿' }, { value: '／' },
+        { value: '（' }, { value: '）' }
+      ], [
+        { value: 'Alt',
+          keyCode: KeyEvent.DOM_VK_ALT,
+          className: 'page-switch-key'
+        },
+        { value: '<div class="zh-encode-switcher \
+                              zh-encode-switcher-half">半</div> \
+                  <div class="zh-encode-switcher \
+                              zh-encode-switcher-selected">全</div>',
+          keyCode: -31
+        },
+        { value: '＋',
+          supportsSwitching: {
+            value: '，'
+          }
+        },
+        { value: '：' }, { value: '；' }, { value: '「' },
+        { value: '」' }, { value: '？' }, { value: '！' },
+        { value: '⌫', keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+      ], [
+        { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+      ]
+    ]
+  },
+  symbolLayout: {
+    width: 10,
+    textLayoutOverwrite: {
+      ',': '，',
+      '.': '。'
+    },
+    keys: [
+      [
+        { value: '￥' }, { value: '€' }, { value: '￡' } , { value: '￠' },
+        { value: '₠' }, { value: '％' }, { value: '©' } , { value: '®' },
+        { value: '｜' }, { value: '＼' }
+      ], [
+        { value: '～' }, { value: '℃' }, { value: '℉' }, { value: '°' },
+        { value: '＜' }, { value: '＞' }, { value: '［' }, { value: '］' },
+        { value: '｛' }, { value: '｝' }
+      ], [
+        { value: 'Alt',
+          keyCode: KeyEvent.DOM_VK_ALT,
+          className: 'page-switch-key'
+        },
+        { value: '<div class="zh-encode-switcher \
+                              zh-encode-switcher-half">半</div> \
+                  <div class="zh-encode-switcher \
+                              zh-encode-switcher-selected">全</div>',
+          keyCode: -32
+        },
+        { value: '＋' }, { value: '＝' }, { value: '｀' }, { value: '＾' },
+        { value: '§' }, { value: '¿' }, { value: '¡' },
+        { value: '⌫', keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+      ], [
+        { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+      ]
+    ]
+  }
+};
+
+Keyboards['zh-Hant-Zhuyin-AlternateLayout-Half'] = {
+  basicLayoutKey: 'ㄅㄆㄇ',
+  needsCandidatePanel: true,
+  width: 10,
+  keys: [
+    [
+      { value: '1' }, { value: '2' }, { value: '3' } , { value: '4' },
+      { value: '5' }, { value: '6' }, { value: '7' } , { value: '8' },
+      { value: '9' }, { value: '0' }
+    ], [
+      { value: '@' }, { value: '#' }, { value: '$' }, { value: '&' },
+      { value: '*' }, { value: '-' }, { value: '_' }, { value: '/' },
+      { value: '(' }, { value: ')' }
+    ], [
+      { value: 'Alt', keyCode: -32, className: 'page-switch-key' },
+      { value: '<div class="zh-encode-switcher \
+                            zh-encode-switcher-half \
+                            zh-encode-switcher-selected">半</div> \
+                <div class="zh-encode-switcher">全</div>',
+        keyCode: -2
+      },
+      { value: '+',
+        supportsSwitching: {
+          value: ','
+        }
+      },
+      { value: ':' }, { value: ';' }, { value: '"' },
+      { value: '\'' }, { value: '?' }, { value: '!' },
+      { value: '⌫', keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+    ], [
+      { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
+      { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+    ]
+  ]
+};
+
+Keyboards['zh-Hant-Zhuyin-SymbolLayout-Half'] = {
+  basicLayoutKey: 'ㄅㄆㄇ',
+  needsCandidatePanel: true,
+  width: 10,
+  keys: [
+    [
+      { value: '¥' }, { value: '€' }, { value: '£' } , { value: '¢' },
+      { value: '₠' }, { value: '%' }, { value: '©' } , { value: '®' },
+      { value: '|' }, { value: '\\' }
+    ], [
+      { value: '~' }, { value: '℃' }, { value: '℉' }, { value: '°' },
+      { value: '<' }, { value: '>' }, { value: '[' }, { value: ']' },
+      { value: '{' }, { value: '}' }
+    ], [
+      { value: 'Alt', keyCode: -31, className: 'page-switch-key' },
+      { value: '<div class="zh-encode-switcher \
+                            zh-encode-switcher-half \
+                            zh-encode-switcher-selected">半</div> \
+                <div class="zh-encode-switcher">全</div>',
+        keyCode: -5
+      },
+      { value: '+' }, { value: '=' }, { value: '`' }, { value: '^' },
+      { value: '§' }, { value: '¿' }, { value: '¡' },
+      { value: '⌫', keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+    ], [
+      { value: '&nbsp', ratio: 8, keyCode: KeyboardEvent.DOM_VK_SPACE },
       { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
     ]
   ]

diff --git a/apps/keyboard/style/keyboard.css b/apps/keyboard/style/keyboard.css
@@ -720,6 +720,35 @@ bubble above the key when you tap and hold. */
   right: 0;
 }
 
+/* Zhuyin */
+.zh-Hant-Zhuyin .keyboard-key:not(.special-key) > .visual-wrapper > .key-element {
+  font-size: 2rem;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row0 {
+  background-color: #636e71;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row1 {
+  background-color: #5e696c;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row2 {
+  background-color: #5b6668;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row3 {
+  background-color: #566063;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row4 {
+  background-color: #525b5e;
+}
+
+.zh-Hant-Zhuyin .keyboard-row.row4 > .keyboard-key > .visual-wrapper > .key-element {
+  border-right-color: #434b4d;
+}
+
 /* With symbols on the bottom */
 .keyboard-key.bottom-symbol > .visual-wrapper:after {
   content: '';