summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--chrome/browser/resources/keyboard/common.js234
-rw-r--r--chrome/browser/resources/keyboard/layout_handwriting_vk.js21
-rw-r--r--chrome/browser/resources/keyboard/layout_us.js22
-rw-r--r--chrome/browser/resources/keyboard/main.css97
-rw-r--r--chrome/browser/resources/keyboard/main.js88
5 files changed, 211 insertions, 251 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';
},
};
diff --git a/chrome/browser/resources/keyboard/layout_handwriting_vk.js b/chrome/browser/resources/keyboard/layout_handwriting_vk.js
index 6c26c6d..bc54b3a 100644
--- a/chrome/browser/resources/keyboard/layout_handwriting_vk.js
+++ b/chrome/browser/resources/keyboard/layout_handwriting_vk.js
@@ -21,9 +21,8 @@ const HANDWRITING_CANVAS_ELEMENT_ID = 'handwriting-canvas';
* @constructor
* @extends {BaseKey}
*/
-function ClearHandwritingKey(aspect, content) {
+function ClearHandwritingKey(content) {
this.modeElements_ = {}
- this.aspect_ = aspect;
this.cellType_ = 'nc';
this.content_ = content;
}
@@ -34,10 +33,8 @@ ClearHandwritingKey.prototype = {
/** @inheritDoc */
makeDOM: function(mode, height) {
this.modeElements_[mode] = document.createElement('div');
- this.modeElements_[mode].textContent = this.content_;
- this.modeElements_[mode].className = 'key';
-
- this.sizeElement(mode, height);
+ this.modeElements_[mode].className = 'key handwriting-clear';
+ addContent(this.modeElements_[mode], this.content_);
this.modeElements_[mode].onclick = function() {
var canvas = document.getElementById(HANDWRITING_CANVAS_ELEMENT_ID);
@@ -191,17 +188,17 @@ HandwritingCanvas.prototype = {
*/
var KEYS_HANDWRITING_VK = [
[
- new ClearHandwritingKey(5, 'CLEAR')
+ new ClearHandwritingKey('CLEAR')
],
[
- new SvgKey(5, 'return', 'Enter')
+ new SvgKey('handwriting-return', 'Enter')
],
[
- new SpecialKey(3.7, 'SPACE', 'Spacebar'),
- new SvgKey(1.3, 'backspace', 'Backspace')
+ new SpecialKey('handwriting-space', 'SPACE', 'Spacebar'),
+ new SvgKey('handwriting-backspace', 'Backspace')
],
[
- new SvgKey(3.7, 'mic', ''),
- new HideKeyboardKey(1.3)
+ new SvgKey('handwriting-mic', ''),
+ new HideKeyboardKey()
]
];
diff --git a/chrome/browser/resources/keyboard/layout_us.js b/chrome/browser/resources/keyboard/layout_us.js
index e65743f..5b12dca 100644
--- a/chrome/browser/resources/keyboard/layout_us.js
+++ b/chrome/browser/resources/keyboard/layout_us.js
@@ -19,7 +19,7 @@ var backspaceKey;
*/
var KEYS_US = [
[
- new SvgKey(1, 'tab', 'Tab'),
+ new SvgKey('tab', 'Tab'),
new Key(C('q'), C('Q'), C('1'), C('`')),
new Key(C('w'), C('W'), C('2'), C('~')),
new Key(C('e'), C('E'), C('3'), new Character('<', 'LessThan')),
@@ -30,7 +30,7 @@ var KEYS_US = [
new Key(C('i'), C('I'), C('8'), C('}')),
new Key(C('o'), C('O'), C('9'), C('\'')),
new Key(C('p'), C('P'), C('0'), C('|')),
- backspaceKey = new SvgKey(1.6, 'backspace', 'Backspace')
+ backspaceKey = new SvgKey('backspace', 'Backspace')
],
[
new SymbolKey(),
@@ -44,10 +44,10 @@ var KEYS_US = [
new Key(C('k'), C('K'), C('*'), C('#')),
new Key(C('l'), C('L'), C('('), C(' ')),
new Key(C('\''), C('\''), C(')'), C(' ')),
- new SvgKey(1.3, 'return', 'Enter')
+ new SvgKey('return', 'Enter')
],
[
- new ShiftKey(1.6),
+ new ShiftKey('left_shift'),
new Key(C('z'), C('Z'), C('/'), C(' ')),
new Key(C('x'), C('X'), C('-'), C(' ')),
new Key(C('c'), C('C'), C('\''), C(' ')),
@@ -58,19 +58,19 @@ var KEYS_US = [
new Key(C('!'), C('!'), C('{'), C(' ')),
new Key(C('?'), C('?'), C('}'), C(' ')),
new Key(C('/'), C('/'), C('\\'), C(' ')),
- new ShiftKey(1)
+ new ShiftKey()
],
[
- new SvgKey(1.3, 'mic', ''),
+ new SvgKey('mic', ''),
new DotComKey(),
- new SpecialKey(1.3, '@', '@'),
+ new SpecialKey('at', '@', '@'),
// TODO(bryeung): the spacebar needs to be a little bit more stretchy,
// since this row has only 7 keys (as opposed to 12), the truncation
// can cause it to not be wide enough.
- new SpecialKey(4.8, ' ', 'Spacebar'),
- new SpecialKey(1.3, ',', ','),
- new SpecialKey(1.3, '.', '.'),
- new HideKeyboardKey(1.3)
+ new SpecialKey('space', ' ', 'Spacebar'),
+ new SpecialKey('comma', ',', ','),
+ new SpecialKey('period', '.', '.'),
+ new HideKeyboardKey()
]
];
diff --git a/chrome/browser/resources/keyboard/main.css b/chrome/browser/resources/keyboard/main.css
index b5aeaeb..e77af0b 100644
--- a/chrome/browser/resources/keyboard/main.css
+++ b/chrome/browser/resources/keyboard/main.css
@@ -14,17 +14,40 @@ body {
}
div.main {
+ margin: 0 auto;
display: -webkit-box;
- margin-top: 5px;
+ -webkit-box-orient: vertical;
+}
+
+div.keyboard {
+ margin: 0 auto;
+ display: -webkit-box;
+ text-align: center;
+ -webkit-box-flex: 1;
+}
+
+div.rows {
+ display: -webkit-box;
+ text-align: center;
+ -webkit-box-orient: vertical;
+ -webkit-box-flex: 1;
}
div.canvas {
- margin-left: 5px;
+ display: block;
+ margin: 5px 0 0 5px;
-webkit-box-flex: 1;
}
div.row {
+ display: -webkit-box;
margin-top: 5px;
+ -webkit-box-flex: 1;
+}
+
+div.row > div {
+ display: -webkit-box;
+ -webkit-box-flex: 1;
}
canvas.handwriting {
@@ -66,12 +89,23 @@ canvas.handwriting {
.key {
border: 1px solid gray;
color: #dbdbdb;
- float: left;
+ display: -webkit-box;
font-family: sans-serif;
- text-align: center;
+ margin-left: 5px;
+ position: relative;
+ -webkit-box-flex: 1;
-webkit-border-radius: 4px;
}
+.key > div {
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
.r0 {
background: -webkit-linear-gradient(#5a616f, #505662);
}
@@ -120,26 +154,69 @@ div.moddown {
width: 100%;
}
-.backspace {
+.text-key {
+ height: 1.2em;
+}
+
+.backspace > div, .handwriting-backspace > div {
background-image: url("del.svg");
}
-.tab {
+.tab > div {
background-image: url("tab.svg");
}
-.return {
+.return > div, .handwriting-return > div {
background-image: url("ret.svg");
}
-.mic {
+.mic > div, .handwriting-mic > div {
background-image: url("mic.svg");
}
-.shift {
+.shift > div.image-key {
background-image: url("shift.svg");
}
-.hide {
+.moddownshift > div {
+ background-image: url("shift.svg");
+}
+
+.hide > div {
background-image: url("keyboard.svg");
}
+
+.at,
+.com,
+.comma,
+.handwriting-backspace,
+.hide,
+.mic,
+.period,
+.return,
+.symbol {
+ -webkit-box-flex: 1.3;
+}
+
+.backspace,
+.left_shift {
+ -webkit-box-flex: 1.6;
+}
+
+.space {
+ -webkit-box-flex: 4.8;
+}
+
+.handwriting-mic,
+.handwriting-space {
+ -webkit-box-flex: 3.7;
+}
+
+.handwriting-clear,
+.handwriting-return {
+ -webkit-box-flex: 5;
+}
+
+.nodisplay {
+ display: none;
+}
diff --git a/chrome/browser/resources/keyboard/main.js b/chrome/browser/resources/keyboard/main.js
index d83924b..715e019 100644
--- a/chrome/browser/resources/keyboard/main.js
+++ b/chrome/browser/resources/keyboard/main.js
@@ -32,18 +32,22 @@ var currentKeyboardLayout = 'us';
* The keyboard's aspect ratio.
* @type {number}
*/
-var kKeyboardAspect = 3.3;
+const kKeyboardAspect = 3.15;
/**
- * Calculate the height of the row based on the size of the page.
- * @return {number} The height of each row, in pixels.
+ * The ratio of the row height to the font size.
+ * @type {number}
*/
-function getRowHeight() {
+const kFontSizeRatio = 3.5;
+
+/**
+ * Calculate the height of the keyboard based on the size of the page.
+ * @return {number} The height of the keyboard in pixels.
+ */
+function getKeyboardHeight() {
var x = window.innerWidth;
var y = window.innerHeight - ((imeui && imeui.visible) ? IME_HEIGHT : 0);
- return (x > kKeyboardAspect * y) ?
- (height = Math.floor(y / 4)) :
- (height = Math.floor(x / (kKeyboardAspect * 4)));
+ return (x > kKeyboardAspect * y) ? y : Math.floor(x / kKeyboardAspect);
}
/**
@@ -58,44 +62,19 @@ function setMode(mode) {
}
}
-var oldHeight = 0;
-var oldX = 0;
-var oldAspect = 0;
-
/**
* Resize the keyboard according to the new window size.
* @return {void}
*/
window.onresize = function() {
- var height = getRowHeight();
- var newX = document.documentElement.clientWidth;
- // All rows of the current keyboard should have the same aspect, so just use
- // the first row.
- var newAspect = KEYBOARDS[currentKeyboardLayout]['rows'][0].aspect;
-
- if (newX != oldX || height != oldHeight || newAspect != oldAspect) {
- var totalWidth = Math.floor(height * newAspect);
- var leftPadding = Math.floor((newX - totalWidth) / 2);
- document.getElementById('b').style.paddingLeft = leftPadding + 'px';
- }
-
- if (height != oldHeight || newAspect != oldAspect) {
- var rows = KEYBOARDS[currentKeyboardLayout]['rows'];
- for (var i = 0; i < rows.length; ++i) {
- rows[i].resize(height);
- }
- var canvas = KEYBOARDS[currentKeyboardLayout]['canvas'];
- if (canvas !== undefined) {
- var canvasHeight = (height - 2 /* overlapped margin*/) * rows.length;
- canvas.resize(canvasHeight);
- }
- }
-
+ var keyboardDiv = document.getElementById('keyboard');
+ var height = getKeyboardHeight();
+ keyboardDiv.style.height = height + 'px';
+ var mainDiv = document.getElementById('main');
+ mainDiv.style.width = Math.floor(kKeyboardAspect * height) + 'px';
+ var rowsLength = KEYBOARDS[currentKeyboardLayout]['rows'].length;
+ keyboardDiv.style.fontSize = (height / kFontSizeRatio / rowsLength) + 'px';
updateIme();
-
- oldHeight = height;
- oldX = newX;
- oldAspect = newAspect;
}
/**
@@ -105,12 +84,13 @@ window.onresize = function() {
window.onload = function() {
var body = document.getElementById('b');
- initIme(body);
-
var mainDiv = document.createElement('div');
mainDiv.className = 'main';
+ mainDiv.id = 'main';
body.appendChild(mainDiv);
+ initIme(mainDiv);
+
// TODO(mazda,yusukes): If we support 40+ virtual keyboards, it's not a good
// idea to create rows (and DOM) for all keyboards inside onload(). We should
// do it on an on-demand basis instead.
@@ -123,35 +103,41 @@ window.onload = function() {
}
}
- height = getRowHeight();
+ // A div element which holds rows and canvases
+ var keyboardDiv = document.createElement('div');
+ keyboardDiv.className = 'keyboard';
+ keyboardDiv.id = 'keyboard';
// A div element which holds canvases for all keyboards layouts.
var canvasesDiv = document.createElement('div');
- canvasesDiv.className = 'canvas';
+ canvasesDiv.className = 'nodisplay';
for (var layout in KEYBOARDS) {
// A div element which holds rows for the layout.
var rowsDiv = document.createElement('div');
var rows = KEYBOARDS[layout]['rows'];
for (var i = 0; i < rows.length; ++i) {
- rowsDiv.appendChild(rows[i].makeDOM(height));
+ rowsDiv.appendChild(rows[i].makeDOM());
rows[i].showMode(currentMode);
}
- rowsDiv.hidden = true;
- mainDiv.appendChild(rowsDiv);
+ rowsDiv.className = 'nodisplay';
+ keyboardDiv.appendChild(rowsDiv);
KEYBOARDS[layout]['rowsDiv'] = rowsDiv;
var canvas = KEYBOARDS[layout]['canvas'];
if (canvas !== undefined) {
canvas.visible = false;
- var canvasHeight = (height - 2 /* overlapped margin*/) * rows.length;
+ var border = 1;
+ var marginTop = 5;
+ var canvasHeight = getKeyboardHeight() - 2 * border - marginTop;
canvas.resize(canvasHeight);
canvasesDiv.appendChild(canvas);
}
+ KEYBOARDS[layout]['canvasesDiv'] = canvasesDiv;
}
- mainDiv.appendChild(canvasesDiv);
+ keyboardDiv.appendChild(canvasesDiv);
+ mainDiv.appendChild(keyboardDiv);
- oldHeight = height;
window.onhashchange();
// Restore the keyboard to the default state when it is hidden.
@@ -184,8 +170,10 @@ window.onhashchange = function() {
var visible = (layout == new_layout);
var canvas = KEYBOARDS[layout]['canvas'];
var rowsDiv = KEYBOARDS[layout]['rowsDiv'];
- rowsDiv.hidden = !visible;
+ var canvasesDiv = KEYBOARDS[layout]['canvasesDiv'];
+ rowsDiv.className = visible ? 'rows' : 'nodisplay';
if (canvas !== undefined) {
+ canvasesDiv.className = visible ? 'canvas' : 'nodisplay';
canvas.visible = visible;
if (!visible) {
canvas.clear();
generated by cgit v1.1 at 2025-01-28 23:38:29 +0000