summaryrefslogtreecommitdiffstats
path: root/chrome/browser/resources/keyboard/common.js
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/browser/resources/keyboard/common.js')
-rw-r--r--chrome/browser/resources/keyboard/common.js234
1 files changed, 66 insertions, 168 deletions
diff --git a/chrome/browser/resources/keyboard/common.js b/chrome/browser/resources/keyboard/common.js
index 486f006..54b9907 100644
--- a/chrome/browser/resources/keyboard/common.js
+++ b/chrome/browser/resources/keyboard/common.js
@@ -115,6 +115,35 @@ function sendKey(key, type) {
}
/**
+ * Add a child div element that represents the content of the given element.
+ * A child div element that represents a text content is added if
+ * opt_textContent is given. Otherwise a child element that represents an image
+ * content is added. If the given element already has a child, the child element
+ * is modified.
+ * @param {Element} element The DOM Element to which the content is added.
+ * @param {string} opt_textContent The text to be inserted.
+ * @return {void}
+ */
+function addContent(element, opt_textContent) {
+ if (element.childNodes.length > 0) {
+ var content = element.childNodes[0];
+ if (opt_textContent) {
+ content.textContent = opt_textContent;
+ }
+ return;
+ }
+
+ var content = document.createElement('div');
+ if (opt_textContent) {
+ content.textContent = opt_textContent;
+ content.className = 'text-key';
+ } else {
+ content.className = 'image-key';
+ }
+ element.appendChild(content);
+}
+
+/**
* Set up the event handlers necessary to respond to mouse and touch events on
* the virtual keyboard.
* @param {BaseKey} key The BaseKey object corresponding to this key.
@@ -229,18 +258,6 @@ function BaseKey() {}
BaseKey.prototype = {
/**
- * The aspect ratio of this key.
- * @type {number}
- */
- aspect_: 1,
-
- /**
- * The column.
- * @type {number}
- */
- column_: 0.,
-
- /**
* The cell type of this key. Determines the background colour.
* @type {string}
*/
@@ -291,21 +308,6 @@ BaseKey.prototype = {
},
/**
- * @return {number} The aspect ratio of this key.
- */
- get aspect() {
- return this.aspect_;
- },
-
- /**
- * Set the horizontal position for this key.
- * @param {number} column Horizonal position (in multiples of row height).
- */
- set column(column) {
- this.column_ = column;
- },
-
- /**
* Set the vertical position, aka row, of this key.
* @param {number} row The row.
*/
@@ -316,56 +318,11 @@ BaseKey.prototype = {
},
/**
- * Returns the amount of padding for the top of the key.
- * @param {string} mode The mode for the key.
- * @param {number} height The height of the key.
- * @return {number} Padding in pixels.
- */
- getPadding: function(mode, height) {
- return Math.floor(height / 3.5);
- },
-
- /**
- * Size the DOM elements of this key.
- * @param {string} mode The mode to be sized.
- * @param {number} height The height of the key.
- * @return {void}
- */
- sizeElement: function(mode, height) {
- var padding = this.getPadding(mode, height);
- var border = 1;
- var margin = 5;
- var width = Math.floor(height * (this.column_ + this.aspect_)) -
- Math.floor(height * this.column_);
-
- var extraHeight = margin + padding + 2 * border;
- var extraWidth = margin + 2 * border;
-
- this.modeElements_[mode].style.width = (width - extraWidth) + 'px';
- this.modeElements_[mode].style.height = (height - extraHeight) + 'px';
- this.modeElements_[mode].style.marginLeft = margin + 'px';
- this.modeElements_[mode].style.fontSize = (height / 3.5) + 'px';
- this.modeElements_[mode].style.paddingTop = padding + 'px';
- },
-
- /**
- * Resize all modes of this key based on the given height.
- * @param {number} height The height of the key.
- * @return {void}
- */
- resize: function(height) {
- for (var i in this.modeElements_) {
- this.sizeElement(i, height);
- }
- },
-
- /**
* Create the DOM elements for the given keyboard mode. Must be overridden.
* @param {string} mode The keyboard mode to create elements for.
- * @param {number} height The height of the key.
* @return {Element} The top-level DOM Element for the key.
*/
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
throw new Error('makeDOM not implemented in BaseKey');
},
};
@@ -381,7 +338,6 @@ BaseKey.prototype = {
*/
function Key(key, shift, num, symbol) {
this.modeElements_ = {};
- this.aspect_ = 1; // ratio width:height
this.cellType_ = '';
this.modes_ = {};
@@ -395,12 +351,11 @@ Key.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
- this.modeElements_[mode].textContent = this.modes_[mode].display;
this.modeElements_[mode].className = 'key';
+ addContent(this.modeElements_[mode], this.modes_[mode].display);
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
sendKeyFunction(this.modes_[mode].keyIdentifier, 'keydown'),
sendKeyFunction(this.modes_[mode].keyIdentifier, 'keyup'));
@@ -411,15 +366,13 @@ Key.prototype = {
/**
* A key which displays an SVG image.
- * @param {number} aspect The aspect ratio of the key.
* @param {string} className The class that provides the image.
* @param {string} keyId The key identifier for the key.
* @constructor
* @extends {BaseKey}
*/
-function SvgKey(aspect, className, keyId) {
+function SvgKey(className, keyId) {
this.modeElements_ = {};
- this.aspect_ = aspect;
this.cellType_ = 'nc';
this.className_ = className;
this.keyId_ = keyId;
@@ -429,21 +382,15 @@ SvgKey.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- getPadding: function(mode, height) { return 0; },
-
- /** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
this.modeElements_[mode].className = 'key';
-
- var img = document.createElement('div');
- img.className = 'image-key ' + this.className_;
- this.modeElements_[mode].appendChild(img);
+ this.modeElements_[mode].classList.add(this.className_);
+ addContent(this.modeElements_[mode]);
setupKeyEventHandlers(this, this.modeElements_[mode],
sendKeyFunction(this.keyId_, 'keydown'),
sendKeyFunction(this.keyId_, 'keyup'));
- this.sizeElement(mode, height);
return this.modeElements_[mode];
}
@@ -451,30 +398,29 @@ SvgKey.prototype = {
/**
* A Key that remains the same through all modes.
- * @param {number} aspect The aspect ratio of the key.
* @param {string} content The display text for the key.
* @param {string} keyId The key identifier for the key.
* @constructor
* @extends {BaseKey}
*/
-function SpecialKey(aspect, content, keyId) {
+function SpecialKey(className, content, keyId) {
this.modeElements_ = {};
- this.aspect_ = aspect;
this.cellType_ = 'nc';
this.content_ = content;
this.keyId_ = keyId;
+ this.className_ = className;
}
SpecialKey.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
- this.modeElements_[mode].textContent = this.content_;
this.modeElements_[mode].className = 'key';
+ this.modeElements_[mode].classList.add(this.className_);
+ addContent(this.modeElements_[mode], this.content_);
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
sendKeyFunction(this.keyId_, 'keydown'),
sendKeyFunction(this.keyId_, 'keyup'));
@@ -485,48 +431,38 @@ SpecialKey.prototype = {
/**
* A shift key.
- * @param {number} aspect The aspect ratio of the key.
* @constructor
* @extends {BaseKey}
*/
-function ShiftKey(aspect) {
+function ShiftKey(className) {
this.modeElements_ = {};
- this.aspect_ = aspect;
this.cellType_ = 'nc';
+ this.className_ = className;
}
ShiftKey.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- getPadding: function(mode, height) {
- if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
- return BaseKey.prototype.getPadding.call(this, mode, height);
- }
- return 0;
- },
-
- /** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
+ this.modeElements_[mode].className = 'key shift';
+ this.modeElements_[mode].classList.add(this.className_);
if (mode == KEY_MODE || mode == SHIFT_MODE) {
- var shift = document.createElement('div');
- shift.className = 'image-key shift';
- this.modeElements_[mode].appendChild(shift);
+ addContent(this.modeElements_[mode]);
} else if (mode == NUMBER_MODE) {
- this.modeElements_[mode].textContent = 'more';
+ addContent(this.modeElements_[mode], 'more');
} else if (mode == SYMBOL_MODE) {
- this.modeElements_[mode].textContent = '#123';
+ addContent(this.modeElements_[mode], '#123');
}
if (mode == SHIFT_MODE || mode == SYMBOL_MODE) {
- this.modeElements_[mode].className = 'moddown key';
+ this.modeElements_[mode].classList.add('moddown');
} else {
- this.modeElements_[mode].className = 'key';
+ this.modeElements_[mode].classList.remove('moddown');
}
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
function() {
transitionMode(SHIFT_MODE);
@@ -543,7 +479,6 @@ ShiftKey.prototype = {
*/
function SymbolKey() {
this.modeElements_ = {}
- this.aspect_ = 1.3;
this.cellType_ = 'nc';
}
@@ -553,20 +488,20 @@ SymbolKey.prototype = {
/** @inheritDoc */
makeDOM: function(mode, height) {
this.modeElements_[mode] = document.createElement('div');
+ this.modeElements_[mode].className = 'key symbol';
if (mode == KEY_MODE || mode == SHIFT_MODE) {
- this.modeElements_[mode].textContent = '#123';
+ addContent(this.modeElements_[mode], '#123');
} else if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
- this.modeElements_[mode].textContent = 'abc';
+ addContent(this.modeElements_[mode], 'abc');
}
if (mode == NUMBER_MODE || mode == SYMBOL_MODE) {
- this.modeElements_[mode].className = 'moddown key';
+ this.modeElements_[mode].classList.add('moddown');
} else {
- this.modeElements_[mode].className = 'key';
+ this.modeElements_[mode].classList.remove('moddown');
}
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
function() {
transitionMode(NUMBER_MODE);
@@ -583,7 +518,6 @@ SymbolKey.prototype = {
*/
function DotComKey() {
this.modeElements_ = {}
- this.aspect_ = 1.3;
this.cellType_ = 'nc';
}
@@ -591,12 +525,11 @@ DotComKey.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
- this.modeElements_[mode].textContent = '.com';
- this.modeElements_[mode].className = 'key';
+ this.modeElements_[mode].className = 'key com';
+ addContent(this.modeElements_[mode], '.com');
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
function() {
sendKey('.');
@@ -611,13 +544,11 @@ DotComKey.prototype = {
/**
* The key that hides the keyboard.
- * @param {number} aspect The aspect ratio of the key.
* @constructor
* @extends {BaseKey}
*/
-function HideKeyboardKey(aspect) {
+function HideKeyboardKey() {
this.modeElements_ = {}
- this.aspect_ = aspect;
this.cellType_ = 'nc';
}
@@ -625,18 +556,11 @@ HideKeyboardKey.prototype = {
__proto__: BaseKey.prototype,
/** @inheritDoc */
- getPadding: function(mode, height) { return 0; },
-
- /** @inheritDoc */
- makeDOM: function(mode, height) {
+ makeDOM: function(mode) {
this.modeElements_[mode] = document.createElement('div');
- this.modeElements_[mode].className = 'key';
-
- var hide = document.createElement('div');
- hide.className = 'image-key hide';
- this.modeElements_[mode].appendChild(hide);
+ this.modeElements_[mode].className = 'key hide';
+ addContent(this.modeElements_[mode]);
- this.sizeElement(mode, height);
setupKeyEventHandlers(this, this.modeElements_[mode],
function() {
if (chrome.experimental) {
@@ -663,22 +587,10 @@ function Row(position, keys) {
Row.prototype = {
/**
- * Get the total aspect ratio of the row.
- * @return {number} The aspect ratio relative to a height of 1 unit.
- */
- get aspect() {
- var total = 0;
- for (var i = 0; i < this.keys_.length; ++i) {
- total += this.keys_[i].aspect;
- }
- return total;
- },
-
- /**
* Create the DOM elements for the row.
* @return {Element} The top-level DOM Element for the row.
*/
- makeDOM: function(height) {
+ makeDOM: function() {
this.element_ = document.createElement('div');
this.element_.className = 'row';
for (var i = 0; i < MODES.length; ++i) {
@@ -691,7 +603,7 @@ Row.prototype = {
for (var j = 0; j < this.keys_.length; ++j) {
var key = this.keys_[j];
for (var i = 0; i < MODES.length; ++i) {
- this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i], height));
+ this.modeElements_[MODES[i]].appendChild(key.makeDOM(MODES[i]));
}
}
@@ -701,11 +613,8 @@ Row.prototype = {
this.modeElements_[MODES[i]].appendChild(clearingDiv);
}
- var column = 0.;
for (var i = 0; i < this.keys_.length; ++i) {
this.keys_[i].row = this.position_;
- this.keys_[i].column = column;
- column += this.keys_[i].aspect;
}
return this.element_;
@@ -720,17 +629,6 @@ Row.prototype = {
for (var i = 0; i < MODES.length; ++i) {
this.modeElements_[MODES[i]].style.display = 'none';
}
- this.modeElements_[mode].style.display = 'block';
- },
-
- /**
- * Resizes all keys in the row according to the global size.
- * @param {number} height The height of the key.
- * @return {void}
- */
- resize: function(height) {
- for (var i = 0; i < this.keys_.length; ++i) {
- this.keys_[i].resize(height);
- }
+ this.modeElements_[mode].style.display = '-webkit-box';
},
};