Merge pull request #12058 from luke-chang/908592_pinyin_symbol_panel

Bug 908592 - [Keyboard] Improve symbol panel layout of Pinyin IME. r=rudylu
mozilla-b2g · Sep 25, 2013 · a056d03 · a056d03
2 parents af99229 + 0d22c00
commit a056d03
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 56 deletions.
diff --git a/apps/keyboard/js/imes/jspinyin/jspinyin.js b/apps/keyboard/js/imes/jspinyin/jspinyin.js
@@ -159,8 +159,6 @@ IMEngine.prototype = {
   // if the length of the syllables buffer is reached.
   _kBufferLenLimit: 30,
 
-  _symbolLayoutFullMode: true,
-
   // Remember the candidate length of last searching result because we don't
   // want to output all candidates at a time.
   // Set it to 0 when we don't need the candidates buffer anymore.
@@ -289,7 +287,7 @@ IMEngine.prototype = {
 
     // Select the first candidate if needed.
     if (code === KeyEvent.DOM_VK_RETURN ||
-        !this._isSymbol(code) ||
+        !this._isPinyinKey(code) ||
         this._pendingSymbols.length >= this._kBufferLenLimit) {
       debug('Nono-bopomofo key is pressed or the input is too long.');
       var sendKey = true;
@@ -298,7 +296,6 @@ IMEngine.prototype = {
           // candidate list exists; output the first candidate
           debug('Sending first candidate.');
           this._glue.sendString(this._firstCandidate);
-          this.empty();
           // no return here
           if (code === KeyEvent.DOM_VK_RETURN) {
             sendKey = false;
@@ -309,6 +306,7 @@ IMEngine.prototype = {
 
       //pass the key to IMEManager for default action
       debug('Default action.');
+      this.empty();
       if (sendKey) {
         this._glue.sendKey(code);
       }
@@ -325,16 +323,17 @@ IMEngine.prototype = {
     this._updateCandidatesAndSymbols(this._next.bind(this));
   },
 
-  _isSymbol: function engine_isSymbol(code) {
-
-    // '
-    if (code == 39) {
-      return true;
-    }
+  _isPinyinKey: function engine_isPinyinKey(code) {
+    if (this._keyboard == 'zh-Hans-Pinyin') {
+      // '
+      if (code == 39) {
+        return true;
+      }
 
-    // a-z
-    if (code >= 97 && code <= 122) {
-      return true;
+      // a-z
+      if (code >= 97 && code <= 122) {
+        return true;
+      }
     }
 
     return false;
@@ -410,11 +409,18 @@ IMEngine.prototype = {
   },
 
   _alterKeyboard: function engine_changeKeyboard(keyboard) {
-    this._keyboard = keyboard;
+    this._resetKeypressQueue();
     this.empty();
+
+    this._keyboard = keyboard;
     this._glue.alterKeyboard(keyboard);
   },
 
+  _resetKeypressQueue: function engine_abortKeypressQueue() {
+    this._keypressQueue = [];
+    this._isWorking = false;
+  },
+
   /**
    * Override
    */
@@ -523,6 +529,7 @@ IMEngine.prototype = {
     document.body.removeChild(document.getElementById('libpinyin_js'));
     document.body.removeChild(document.getElementById('user_dict_js'));
 
+    this._resetKeypressQueue();
     this.empty();
   },
 
@@ -538,21 +545,22 @@ IMEngine.prototype = {
     IMEngineBase.prototype.click.call(this, keyCode);
 
     switch (keyCode) {
-      case -11:
+      case -11: // Switch to Pinyin Panel
         this._alterKeyboard('zh-Hans-Pinyin');
         break;
-      case -12:
-        this._symbolLayoutFullMode = false;
-        this._alterKeyboard('zh-Hans-Pinyin-Symbol');
-        break;
-      case -13:
-        this._symbolLayoutFullMode = true;
-        this._alterKeyboard('zh-Hans-Pinyin-Symbol-Full');
-        break;
-      case -14:
-        var keyboard = this._symbolLayoutFullMode ?
-          'zh-Hans-Pinyin-Symbol-Full' : 'zh-Hans-Pinyin-Symbol';
-        this._alterKeyboard(keyboard);
+      case -20: // Switch to Chinese Symbol Panel, Same page
+      case -21: // Switch to Chinese Symbol Panel, Page 1
+      case -22: // Switch to Chinese Symbol Panel, Page 2
+      case -30: // Switch to English Symbol Panel, Same page
+      case -31: // Switch to English Symbol Panel, Page 1
+      case -32: // Switch to English Symbol Panel, Page 2
+        var index = Math.abs(keyCode);
+        var symbolType = index < 30 ? 'Ch' : 'En';
+        var symbolPage = index % 10;
+        if (!symbolPage)
+          symbolPage = this._keyboard.substr(-1);
+        this._alterKeyboard(
+          'zh-Hans-Pinyin-Symbol-' + symbolType + '-' + symbolPage);
         break;
       default:
         this._keypressQueue.push(keyCode);
@@ -611,8 +619,6 @@ IMEngine.prototype = {
     this._firstCandidate = '';
     this._sendPendingSymbols();
     this._sendCandidates([]);
-    this._keypressQueue = [];
-    this._isWorking = false;
   },
 
   /**

diff --git a/apps/keyboard/js/layout.js b/apps/keyboard/js/layout.js
@@ -1083,14 +1083,15 @@ const Keyboards = {
         { value: 'n' }, { value: 'm' },
         { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
       ], [
-        { value: '?123', keyCode: -14, ratio: 1.5 },
-        { value: '&nbsp', keyCode: KeyEvent.DOM_VK_SPACE, ratio: 5 },
+        { value: '?123', keyCode: -21, ratio: 1.5 },
+        { value: '空格', keyCode: KeyEvent.DOM_VK_SPACE, ratio: 5 },
         { value: '。', ratio: 1.5 },
         { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
       ]
     ]
   },
-  'zh-Hans-Pinyin-Symbol': {
+  'zh-Hans-Pinyin-Symbol-Ch-1': {
+    hidesSwitchKey: true,
     needsCandidatePanel: true,
     disableAlternateLayout: true,
     width: 10,
@@ -1101,27 +1102,31 @@ const Keyboards = {
     keys: [
       [
         { value: '1' }, { value: '2' }, { value: '3' } , { value: '4' },
-        { value: '5' } , { value: '6' }, { value: '7' } , { value: '8' },
+        { value: '5' }, { value: '6' }, { value: '7' } , { value: '8' },
         { value: '9' }, { value: '0' }
       ], [
-        { value: '@', hidden: ['email'] }, { value: '#' }, { value: '$' },
-        { value: '%' },
-        { value: '&' } , { value: '*' }, { value: '-' }, { value: '+' },
-        { value: '(' }, { value: ')' }, { value: '_', visible: ['email']}
+        { value: '？' }, { value: '！' }, { value: '：' }, { value: '；' },
+        { value: '……', compositeKey: '……', className: 'pinyin-ch-ellipsis' },
+        { value: '～' }, { value: '（' }, { value: '）' },
+        { value: '“' }, { value: '”' }
       ], [
-        { value: '半', ratio: 1.5, keyCode: -13 },
-        { value: '!' }, { value: '\"' }, { value: "'" }, { value: ':' },
-        { value: ';' }, { value: '/' }, { value: '?' },
+        { value: '1/2', ratio: 1.5, keyCode: -22 },
+        { value: '、' }, { value: '@' }, { value: '&' }, { value: '^' },
+        { value: '#' }, { value: '%' }, { value: '/' },
         { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
       ], [
-        { value: '拼', keyCode: -11, ratio: 1.5 },
-        { value: '&nbsp', ratio: 5, keyCode: KeyboardEvent.DOM_VK_SPACE },
-        { value: '.', ratio: 1.5 },
+        { value: '返回', ratio: 1.5, keyCode: -11 },
+        { value: '中/<span class="pinyin-toggle-button-small">英</span>',
+          ratio: 1.5, keyCode: -30 },
+        { value: '，' },
+        { value: '空格', ratio: 3, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '。' },
         { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
       ]
     ]
   },
-  'zh-Hans-Pinyin-Symbol-Full': {
+  'zh-Hans-Pinyin-Symbol-Ch-2': {
+    hidesSwitchKey: true,
     needsCandidatePanel: true,
     disableAlternateLayout: true,
     width: 10,
@@ -1131,22 +1136,93 @@ const Keyboards = {
     },
     keys: [
       [
-        { value: '１' }, { value: '２' }, { value: '３' } , { value: '４' },
-        { value: '５' } , { value: '６' }, { value: '７' } , { value: '８' },
-        { value: '９' }, { value: '０' }
+        { 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: '+' }, { value: '-' }, { value: '_' }, { value: '=' },
+        { value: '$' }, { value: '￥' }, { value: '《' }, { value: '》' },
+        { value: '{' }, { value: '}' }
       ], [
-        { value: '全', ratio: 1.5, keyCode: -12 },
-        { value: '！' }, { value: '“' }, { value: '”' }, { value: '：' },
-        { value: '；' }, { value: '…' }, { value: '？' },
+        { value: '2/2', ratio: 1.5, keyCode: -21 },
+        { value: '【' }, { value: '】' }, { value: '「' }, { value: '」' },
+        { value: '＊' }, { value: '·' }, { value: '|' },
         { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
       ], [
-        { value: '拼', keyCode: -11, ratio: 1.5 },
-        { value: '&nbsp', ratio: 5, keyCode: KeyboardEvent.DOM_VK_SPACE },
-        { value: '。', ratio: 1.5 },
+        { value: '返回', ratio: 1.5, keyCode: -11 },
+        { value: '中/<span class="pinyin-toggle-button-small">英</span>',
+          ratio: 1.5, keyCode: -30 },
+        { value: '，' },
+        { value: '空格', ratio: 3, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '。' },
+        { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+      ]
+    ]
+  },
+  'zh-Hans-Pinyin-Symbol-En-1': {
+    hidesSwitchKey: true,
+    needsCandidatePanel: true,
+    disableAlternateLayout: true,
+    width: 10,
+    textLayoutOverwrite: {
+      ',': false,
+      '.': false
+    },
+    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: '1/2', ratio: 1.5, keyCode: -32 },
+        { value: '\\' }, { value: '@' }, { value: '&' }, { value: '^' },
+        { value: '#' }, { value: '%' }, { value: '/' },
+        { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+      ], [
+        { value: '返回', ratio: 1.5, keyCode: -11 },
+        { value: '<span class="pinyin-toggle-button-small">中</span>/英',
+          ratio: 1.5, keyCode: -20 },
+        { value: ',' },
+        { value: '空格', ratio: 3, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '.' },
+        { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
+      ]
+    ]
+  },
+  'zh-Hans-Pinyin-Symbol-En-2': {
+    hidesSwitchKey: true,
+    needsCandidatePanel: true,
+    disableAlternateLayout: true,
+    width: 10,
+    textLayoutOverwrite: {
+      ',': false,
+      '.': false
+    },
+    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: '2/2', ratio: 1.5, keyCode: -31 },
+        { value: '[' }, { value: ']' }, { value: '「' }, { value: '」' },
+        { value: '*' }, { value: '`' }, { value: '|' },
+        { value: '⌫', ratio: 1.5, keyCode: KeyEvent.DOM_VK_BACK_SPACE }
+      ], [
+        { value: '返回', ratio: 1.5, keyCode: -11 },
+        { value: '<span class="pinyin-toggle-button-small">中</span>/英',
+          ratio: 1.5, keyCode: -20 },
+        { value: ',' },
+        { value: '空格', ratio: 3, keyCode: KeyboardEvent.DOM_VK_SPACE },
+        { value: '.' },
         { value: '↵', ratio: 2, keyCode: KeyEvent.DOM_VK_RETURN }
       ]
     ]

diff --git a/apps/keyboard/js/render.js b/apps/keyboard/js/render.js
@@ -127,6 +127,10 @@ const IMERender = (function() {
           className = layout.keyClassName;
         }
 
+        if (key.className) {
+          className += ' ' + key.className;
+        }
+
         var ratio = key.ratio || 1;
         rowLayoutWidth += ratio;
 

diff --git a/apps/keyboard/style/keyboard.css b/apps/keyboard/style/keyboard.css
@@ -296,6 +296,14 @@ button::-moz-focus-inner {
   display: none;
 }
 
+.keyboard-key.pinyin-ch-ellipsis > .visual-wrapper > span {
+  font-size: 1.6rem;
+}
+
+span.pinyin-toggle-button-small {
+  font-size: 70%;
+}
+
 /* Alternatives menu -- this menu appears when you tap and hold a key that has
 alternative special (accented) characters. The menu "grows" out of the key
 and displays the list of alternatives. */