src/third_party/google_input_tools/src/chrome/os/inputview/elements/content/compactkey.js

   1 // Copyright 2014 The ChromeOS IME Authors. All Rights Reserved.
   2 // limitations under the License.
   3 // See the License for the specific language governing permissions and
   4 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   5 // distributed under the License is distributed on an "AS-IS" BASIS,
   6 // Unless required by applicable law or agreed to in writing, software
   7 //
   8 //      http://www.apache.org/licenses/LICENSE-2.0
   9 //
  10 // You may obtain a copy of the License at
  11 // you may not use this file except in compliance with the License.
  12 // Licensed under the Apache License, Version 2.0 (the "License");
  13 //
  14 goog.provide('i18n.input.chrome.inputview.elements.content.CompactKey');
  15
  16 goog.require('goog.array');
  17 goog.require('goog.dom');
  18 goog.require('goog.dom.TagName');
  19 goog.require('goog.dom.classlist');
  20 goog.require('goog.math.Coordinate');
  21 goog.require('goog.style');
  22 goog.require('i18n.input.chrome.inputview.Css');
  23 goog.require('i18n.input.chrome.inputview.MoreKeysShiftOperation');
  24 goog.require('i18n.input.chrome.inputview.SpecNodeName');
  25 goog.require('i18n.input.chrome.inputview.StateType');
  26 goog.require('i18n.input.chrome.inputview.SwipeDirection');
  27 goog.require('i18n.input.chrome.inputview.elements.ElementType');
  28 goog.require('i18n.input.chrome.inputview.elements.content.CompactKeyModel');
  29 goog.require('i18n.input.chrome.inputview.elements.content.FunctionalKey');
  30 goog.require('i18n.input.chrome.inputview.elements.content.GaussianEstimator');
  31 goog.require('i18n.input.chrome.message.ContextType');
  32
  33
  34
  35 goog.scope(function() {
  36 var CompactKeyModel =
  37     i18n.input.chrome.inputview.elements.content.CompactKeyModel;
  38 var ContextType = i18n.input.chrome.message.ContextType;
  39 var MoreKeysShiftOperation = i18n.input.chrome.inputview.MoreKeysShiftOperation;
  40 var SpecNodeName = i18n.input.chrome.inputview.SpecNodeName;
  41
  42
  43 /**
  44  * The key to switch between different key set.
  45  *
  46  * @param {string} id The id.
  47  * @param {string} text The text.
  48  * @param {string} hintText The hint text.
  49  * @param {!i18n.input.chrome.inputview.StateManager} stateManager The state
  50  *     manager.
  51  * @param {boolean} hasShift True if the compact key has shift.}
  52  * @param {!CompactKeyModel} compactKeyModel The attributes of compact key.
  53  * @param {goog.events.EventTarget=} opt_eventTarget The event target.
  54  * @constructor
  55  * @extends {i18n.input.chrome.inputview.elements.content.FunctionalKey}
  56  */
  57 i18n.input.chrome.inputview.elements.content.CompactKey = function(id, text,
  58     hintText, stateManager, hasShift, compactKeyModel, opt_eventTarget) {
  59   var textCssClass = compactKeyModel.textCssClass;
  60   goog.base(this, id, i18n.input.chrome.inputview.elements.ElementType.
  61       COMPACT_KEY, text, '', opt_eventTarget, textCssClass);
  62
  63   /**
  64    * The hint text.
  65    *
  66    * @type {string}
  67    */
  68   this.hintText = hintText;
  69
  70   /** @private {boolean} */
  71   this.hasShift_ = hasShift;
  72
  73   /**
  74    * The state manager.
  75    *
  76    * @type {!i18n.input.chrome.inputview.StateManager}
  77    * @private
  78    */
  79   this.stateManager_ = stateManager;
  80
  81   /**
  82    * The attributes of compact key.
  83    *
  84    * @private {CompactKeyModel}
  85    */
  86   this.compactKeyModel_ = compactKeyModel;
  87
  88   this.pointerConfig.longPressWithPointerUp = true;
  89   this.pointerConfig.flickerDirection =
  90       i18n.input.chrome.inputview.SwipeDirection.UP;
  91   this.pointerConfig.longPressDelay = 500;
  92 };
  93 goog.inherits(i18n.input.chrome.inputview.elements.content.CompactKey,
  94     i18n.input.chrome.inputview.elements.content.FunctionalKey);
  95 var CompactKey = i18n.input.chrome.inputview.elements.content.CompactKey;
  96
  97
  98 /**
  99  * The flickerred character.
 100  *
 101  * @type {string}
 102  */
 103 CompactKey.prototype.flickerredCharacter = '';
 104
 105
 106 /** @override */
 107 CompactKey.prototype.createDom = function() {
 108   goog.base(this, 'createDom');
 109
 110   goog.dom.classlist.add(this.tableCell,
 111       i18n.input.chrome.inputview.Css.COMPACT_KEY);
 112   if (!this.compactKeyModel_.isGrey) {
 113     goog.dom.classlist.remove(this.bgElem,
 114         i18n.input.chrome.inputview.Css.SPECIAL_KEY_BG);
 115   }
 116
 117   if (this.hintText) {
 118     var dom = this.getDomHelper();
 119     dom.removeChildren(this.tableCell);
 120     this.inlineWrap = dom.createDom(goog.dom.TagName.DIV,
 121         i18n.input.chrome.inputview.Css.INLINE_DIV);
 122     dom.appendChild(this.tableCell, this.inlineWrap);
 123     this.hintTextElem = dom.createDom(goog.dom.TagName.DIV,
 124         i18n.input.chrome.inputview.Css.HINT_TEXT, this.hintText);
 125     dom.appendChild(this.inlineWrap, this.hintTextElem);
 126     dom.appendChild(this.inlineWrap, this.textElem);
 127   }
 128 };
 129
 130
 131 /** @override */
 132 CompactKey.prototype.resize = function(width, height) {
 133   var elem = this.getElement();
 134   var marginLeft = Math.floor(width * this.compactKeyModel_.marginLeftPercent);
 135   if (marginLeft > 0) {
 136     marginLeft -= 5;
 137     elem.style.marginLeft = marginLeft + 'px';
 138   }
 139   var marginRight =
 140       Math.floor(width * this.compactKeyModel_.marginRightPercent);
 141   // TODO: Remove this ugly hack. The default margin right is 10px, we
 142   // need to add the default margin here to make all the keys have the same
 143   // look.
 144   if (marginRight > 0) {
 145     marginRight += 5;
 146     elem.style.marginRight = marginRight + 'px';
 147   }
 148
 149   goog.base(this, 'resize', width, height);
 150
 151   this.topLeftCoordinate = goog.style.getClientPosition(elem);
 152   this.centerCoordinate = new goog.math.Coordinate(
 153       this.topLeftCoordinate.x + this.availableWidth / 2,
 154       this.topLeftCoordinate.y + this.availableHeight / 2);
 155   this.estimator = new i18n.input.chrome.inputview.elements.content.
 156       GaussianEstimator(this.centerCoordinate,
 157           this.stateManager_.covariance.getValue(this.type),
 158           this.availableHeight / this.availableWidth);
 159 };
 160
 161
 162 /**
 163  * Gets the active character factoring in the current input type context.
 164  *
 165  * @private
 166  */
 167 CompactKey.prototype.getContextOptimizedText_ = function() {
 168   var context = this.stateManager_.contextType;
 169   // Remove all old css rules.
 170   for (var contextType in this.compactKeyModel_.textOnContext) {
 171     var oldCss =
 172         this.compactKeyModel_.
 173         textOnContext[contextType][SpecNodeName.TEXT_CSS_CLASS];
 174     goog.dom.classlist.remove(this.tableCell, oldCss);
 175   }
 176   var text;
 177   if (context && this.compactKeyModel_.textOnContext[context]) {
 178     text = this.compactKeyModel_.textOnContext[context][SpecNodeName.TEXT];
 179     var newCss =
 180         this.compactKeyModel_.
 181         textOnContext[context][SpecNodeName.TEXT_CSS_CLASS];
 182     goog.dom.classlist.add(this.tableCell, newCss);
 183   } else if (this.hasShift_ && this.stateManager_.hasState(
 184       i18n.input.chrome.inputview.StateType.SHIFT)) {
 185     // When there is specific text to display when shift is pressed down,
 186     // the text should be set accordingly.
 187     text = this.compactKeyModel_.textOnShift ?
 188         this.compactKeyModel_.textOnShift : this.text.toUpperCase();
 189   } else {
 190     text = this.text;
 191   }
 192   return text;
 193 };
 194
 195
 196 /**
 197  * Get the active character. It may be upper case |text| when shift is pressed
 198  * or flickerred character when swipe. Note this should replace Compactkey.text
 199  * for compact keys.
 200  */
 201 CompactKey.prototype.getActiveCharacter = function() {
 202   if (this.flickerredCharacter) {
 203     return this.flickerredCharacter;
 204   } else {
 205     return this.getContextOptimizedText_();
 206   }
 207 };
 208
 209
 210 /** @override */
 211 CompactKey.prototype.update = function() {
 212   goog.base(this, 'update');
 213
 214   var text = this.getContextOptimizedText_();
 215   var displayHintText = this.stateManager_.contextType != ContextType.PASSWORD;
 216   if (this.compactKeyModel_.textOnShift) {
 217     if (this.hasShift_ && this.stateManager_.hasState(
 218       i18n.input.chrome.inputview.StateType.SHIFT)) {
 219       // Deal with the case that when shift is pressed down,
 220       // only one character should show in the compact key.
 221       displayHintText = false;
 222       text = this.compactKeyModel_.textOnShift;
 223     }
 224   }
 225   this.hintTextElem &&
 226       goog.style.setElementShown(this.hintTextElem, displayHintText);
 227   text = this.compactKeyModel_.title ?
 228     chrome.i18n.getMessage(this.compactKeyModel_.title) : text;
 229   goog.dom.setTextContent(this.textElem, text);
 230 };
 231
 232
 233 /**
 234  * Gets the more characters.
 235  *
 236  * @return {!Array.<string>} The characters.
 237  */
 238 CompactKey.prototype.getMoreCharacters = function() {
 239   var moreCharacters = goog.array.clone(this.compactKeyModel_.moreKeys);
 240   switch (this.compactKeyModel_.moreKeysShiftOperation) {
 241     case MoreKeysShiftOperation.TO_UPPER_CASE:
 242       if (this.getActiveCharacter().toLowerCase() !=
 243           this.getActiveCharacter()) {
 244         for (var i = 0; i < this.compactKeyModel_.moreKeys.length; i++) {
 245           moreCharacters[i] = this.compactKeyModel_.moreKeys[i].toUpperCase();
 246         }
 247         goog.array.removeDuplicates(moreCharacters);
 248       }
 249       return moreCharacters;
 250     case MoreKeysShiftOperation.TO_LOWER_CASE:
 251       if (this.hasShift_ && this.stateManager_.hasState(
 252           i18n.input.chrome.inputview.StateType.SHIFT)) {
 253         for (var i = 0; i < this.compactKeyModel_.moreKeys.length; i++) {
 254           moreCharacters[i] = this.compactKeyModel_.moreKeys[i].toLowerCase();
 255         }
 256         goog.array.removeDuplicates(moreCharacters);
 257       }
 258       return moreCharacters;
 259     case MoreKeysShiftOperation.STABLE:
 260       break;
 261   }
 262   return moreCharacters;
 263 };
 264 });  // goog.scope
 265