keyboard_overlay.js revision 72a454cd3513ac24fbdd0e0cb9ad70b86a99b801
1513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch// Copyright (c) 2010 The Chromium Authors. All rights reserved. 2513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch// Use of this source code is governed by a BSD-style license that can be 3513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch// found in the LICENSE file. 4513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 5513209b27ff55e2841eac0e4120199c23acce758Ben Murdochvar BASE_KEYBOARD = { 6513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch top: 0, 7513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch left: 0, 8513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch width: 1237, 972a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen height: 514 10513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch}; 11513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 12513209b27ff55e2841eac0e4120199c23acce758Ben Murdochvar BASE_INSTRUCTIONS = { 1372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen top: 194, 14513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch left: 370, 15513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch width: 498, 1672a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen height: 112 17513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch}; 18513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 19513209b27ff55e2841eac0e4120199c23acce758Ben Murdochvar LABEL_TO_KEY_TEXT = { 20513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch alt: 'alt', 21513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch backspace: 'backspace', 22513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch ctrl: 'ctrl', 23513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch enter: 'enter', 24513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch esc: 'esc', 25513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_arrow_down: 'down', 26513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_arrow_left: 'left', 27513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_arrow_right: 'right', 28513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_arrow_up: 'up', 29513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_back: 'back', 30513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_backspace: 'backspace', 31513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_brightness_down: 'bright down', 32513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_brightness_up: 'bright up', 33513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_enter: 'enter', 34513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_forward: 'forward', 35513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_fullscreen: 'fullscreen', 3672a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen glyph_ime: 'ime', 3772a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen glyph_lock: 'lock', 38513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_overview: 'windows', 39513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_power: 'power', 4072a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen glyph_right: 'right', 41513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_reload: 'reload', 42513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_search: 'search', 4372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen glyph_shift: 'shift', 44513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_tab: 'tab', 45513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_tools: 'tools', 46513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_volume_down: 'vol. down', 47513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_volume_mute: 'mute', 48513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch glyph_volume_up: 'vol. up', 49513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shift: 'shift', 50513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch tab: 'tab' 51513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch}; 52513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 53513209b27ff55e2841eac0e4120199c23acce758Ben Murdochvar MODIFIER_TO_CLASS = { 54513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 'SHIFT': 'modifier-shift', 55513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 'CTRL': 'modifier-ctrl', 56513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 'ALT': 'modifier-alt' 57513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch}; 58513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 59513209b27ff55e2841eac0e4120199c23acce758Ben Murdochvar IDENTIFIER_TO_CLASS = { 60513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch '2A': 'is-shift', 61513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch '1D': 'is-ctrl', 62513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch '38': 'is-alt' 63513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch}; 64513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 65201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdochvar keyboardOverlayId = 'en_US'; 66513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 67513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 68513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns layouts data. 69513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 70513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getLayouts() { 71513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return keyboardOverlayData['layouts']; 72513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 73513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 74513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 75513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns shortcut data. 76513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 77513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getShortcutData() { 78513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return keyboardOverlayData['shortcut']; 79513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 80513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 81513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 82201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch * Returns the keyboard overlay ID. 83513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 84201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdochfunction getKeyboardOverlayId() { 85201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch return keyboardOverlayId 86513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 87513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 88513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 89513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns keyboard glyph data. 90513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 91513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getKeyboardGlyphData() { 92201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch return keyboardOverlayData['keyboardGlyph'][getKeyboardOverlayId()]; 93513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 94513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 95513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 96513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Converts a single hex number to a character. 97513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 98513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction hex2char(hex) { 99513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!hex) { 100513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return ''; 101513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 102513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var result = ''; 103513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var n = parseInt(hex, 16); 104513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (n <= 0xFFFF) { 105513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch result += String.fromCharCode(n); 106513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } else if (n <= 0x10FFFF) { 107513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch n -= 0x10000; 108513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch result += (String.fromCharCode(0xD800 | (n >> 10)) + 109513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch String.fromCharCode(0xDC00 | (n & 0x3FF))); 110513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } else { 111513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch console.error('hex2Char error: Code point out of range :' + hex); 112513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 113513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return result; 114513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 115513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 116513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 117513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns a list of modifiers from the key event. 118513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 119513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getModifiers(e) { 120513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!e) { 121513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return []; 122513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 123513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var modifiers = []; 124513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (e.keyCode == 16 || e.shiftKey) { 125513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch modifiers.push('SHIFT'); 126513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 127513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (e.keyCode == 17 || e.ctrlKey) { 128513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch modifiers.push('CTRL'); 129513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 130513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (e.keyCode == 18 || e.altKey) { 131513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch modifiers.push('ALT'); 132513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 133513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return modifiers.sort(); 134513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 135513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 136513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 137513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns an ID of the key. 138513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 139513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction keyId(identifier, i) { 140513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return identifier + '-key-' + i; 141513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 142513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 143513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 144513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns an ID of the text on the key. 145513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 146513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction keyTextId(identifier, i) { 147513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return identifier + '-key-text-' + i; 148513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 149513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 150513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 151513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns an ID of the shortcut text. 152513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 153513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction shortcutTextId(identifier, i) { 154513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return identifier + '-shortcut-text-' + i; 155513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 156513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 157513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 158513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns true if |list| contains |e|. 159513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 160513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction contains(list, e) { 161513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return list.indexOf(e) != -1; 162513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 163513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 164513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 165513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns a list of the class names corresponding to the identifier and 166513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * modifiers. 167513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 168513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getKeyClasses(identifier, modifiers) { 169513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var classes = ['keyboard-overlay-key']; 170513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch for (var i = 0; i < modifiers.length; ++i) { 171513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch classes.push(MODIFIER_TO_CLASS[modifiers[i]]); 172513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 173513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 174513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || 175513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch (identifier == '1D' && contains(modifiers, 'CTRL')) || 176513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch (identifier == '38' && contains(modifiers, 'ALT'))) { 177513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch classes.push('pressed'); 178513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch classes.push(IDENTIFIER_TO_CLASS[identifier]); 179513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 180513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return classes; 181513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 182513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 183513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 184513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns true if a character is a ASCII character. 185513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 186513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction isAscii(c) { 187513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var charCode = c.charCodeAt(0); 188513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return 0x00 <= charCode && charCode <= 0x7F; 189513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 190513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 191513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 192513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns a label of the key. 193513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 194513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getKeyLabel(keyData, modifiers) { 195513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!keyData) { 196513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return ''; 197513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 198513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (keyData.label in LABEL_TO_KEY_TEXT) { 199513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return LABEL_TO_KEY_TEXT[keyData.label]; 200513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 201513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyLabel = ''; 202513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch for (var j = 1; j <= 9; j++) { 203513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var pos = keyData['p' + j]; 204513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!pos) { 205513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch continue; 206513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 207513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (LABEL_TO_KEY_TEXT[pos]) { 208513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return LABEL_TO_KEY_TEXT[pos]; 209513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 210513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyLabel = hex2char(pos); 211513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!keyLabel) { 212513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch continue; 213513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 214513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (isAscii(keyLabel) && 215513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch getShortcutData()[getAction(keyLabel, modifiers)]) { 216513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch break; 217513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 218513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 219513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return keyLabel; 220513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 221513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 222513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 223513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns a normalized string used for a key of shortcutData. 224513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 225513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getAction(keycode, modifiers) { 226513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return [keycode].concat(modifiers).join(' '); 227513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 228513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 229513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 230513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Returns a text which displayed on a key. 231513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 232513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction getKeyTextValue(keyData) { 233513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (LABEL_TO_KEY_TEXT[keyData.label]) { 234513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return LABEL_TO_KEY_TEXT[keyData.label]; 235513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 236513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 237513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var chars = []; 238513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch for (var j = 1; j <= 9; ++j) { 239513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var pos = keyData['p' + j]; 240513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (LABEL_TO_KEY_TEXT[pos]) { 241513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return LABEL_TO_KEY_TEXT[pos]; 242513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 243513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (pos && pos.length > 0) { 244513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch chars.push(hex2char(pos)); 245513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 246513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 247513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch return chars.join(' '); 248513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 249513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 250513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 251513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Updates the whole keyboard. 252513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 253513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction update(e) { 254513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var modifiers = getModifiers(e); 255513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var instructions = document.getElementById('instructions'); 256513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (modifiers.length == 0) { 257513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.visibility = 'visible'; 258513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } else { 259513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.visibility = 'hidden'; 260513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 261513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 262513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyboardGlyphData = getKeyboardGlyphData(); 263513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var shortcutData = getShortcutData(); 264513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var layout = getLayouts()[keyboardGlyphData.layoutName]; 265513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch for (var i = 0; i < layout.length; ++i) { 266513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var identifier = layout[i][0]; 267513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyData = keyboardGlyphData.keys[identifier]; 268513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var classes = getKeyClasses(identifier, modifiers, keyData); 269513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyLabel = getKeyLabel(keyData, modifiers); 270513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var shortcutId = shortcutData[getAction(keyLabel, modifiers)]; 271513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (shortcutId) { 272513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch classes.push('is-shortcut'); 273513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 274513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 275513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var key = document.getElementById(keyId(identifier, i)); 276513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.className = classes.join(' '); 277513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 278513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (!keyData) { 279513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch continue; 280513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 281513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 282513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyText = document.getElementById(keyTextId(identifier, i)); 283513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyTextValue = getKeyTextValue(keyData); 284513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (keyTextValue) { 285513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.style.visibility = 'visible'; 286513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } else { 287513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.style.visibility = 'hidden'; 288513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 289513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.textContent = keyTextValue; 290513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 291513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var shortcutText = document.getElementById(shortcutTextId(identifier, i)); 292513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (shortcutId) { 293513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.style.visibility = 'visible'; 294513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.textContent = templateData[shortcutId]; 295513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } else { 296513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.style.visibility = 'hidden'; 297513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 298513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 299513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (keyData.format) { 300513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var format = keyData.format; 301513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch if (format == 'left' || format == 'right') { 302513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.style.textAlign = format; 303513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.style.textAlign = format; 304513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 305513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 306513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 307513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 308513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 309513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 310513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * A callback furnction for the onkeydown event. 311513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 312513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction keydown(e) { 313201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch if (!getKeyboardOverlayId()) { 314201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch return; 315201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch } 316513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch update(e); 317513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 318513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 319513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 320513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * A callback furnction for the onkeyup event. 321513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 322513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction keyup(e) { 323201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch if (!getKeyboardOverlayId()) { 324201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch return; 325201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch } 326513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch update(); 327513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 328513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 329513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 330513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * Initializes the layout of the keys. 331513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 332513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction initLayout() { 333513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var layout = getLayouts()[getKeyboardGlyphData().layoutName]; 334513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyboard = document.body; 335513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var minX = window.innerWidth; 336513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var maxX = 0; 337513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var minY = window.innerHeight; 338513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var maxY = 0; 339513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var multiplier = 1.38 * window.innerWidth / BASE_KEYBOARD.width; 340513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyMargin = 7; 341513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var offsetX = 10; 342513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var offsetY = 7; 343513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch for (var i = 0; i < layout.length; i++) { 344513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var array = layout[i]; 345513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var identifier = array[0]; 346513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var x = Math.round((array[1] + offsetX) * multiplier); 347513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var y = Math.round((array[2] + offsetY) * multiplier); 348513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var w = Math.round((array[3] - keyMargin) * multiplier); 349513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var h = Math.round((array[4] - keyMargin) * multiplier); 350513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 351513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var key = document.createElement('div'); 352513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.id = keyId(identifier, i); 353513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.className = 'keyboard-overlay-key'; 354513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.style.left = x + 'px'; 355513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.style.top = y + 'px'; 356513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.style.width = w + 'px'; 357513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.style.height = h + 'px'; 358513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 359513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var keyText = document.createElement('div'); 360513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.id = keyTextId(identifier, i); 361513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.className = 'keyboard-overlay-key-text'; 362513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyText.style.visibility = 'hidden'; 363513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.appendChild(keyText); 364513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 365513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var shortcutText = document.createElement('div'); 366513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.id = shortcutTextId(identifier, i); 367513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.className = 'keyboard-overlay-shortcut-text'; 368513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch shortcutText.style.visilibity = 'hidden'; 369513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch key.appendChild(shortcutText); 370513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyboard.appendChild(key); 371513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 372513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch minX = Math.min(minX, x); 373513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch maxX = Math.max(maxX, x + w); 374513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch minY = Math.min(minY, y); 375513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch maxY = Math.max(maxY, y + h); 376513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch } 377513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 378513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var width = maxX - minX + 1; 379513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch var height = maxY - minY + 1; 380513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyboard.style.width = (width + 2 * (minX + 1)) + 'px'; 381513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyboard.style.height = (height + 2 * (minY + 1)) + 'px'; 382513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 38372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen var instructions = document.createElement('div'); 384513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.id = 'instructions'; 385513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.className = 'keyboard-overlay-instructions'; 386513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.left = ((BASE_INSTRUCTIONS.left - BASE_KEYBOARD.left) * 387513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch width / BASE_KEYBOARD.width + minX) + 'px'; 388513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * 389513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch height / BASE_KEYBOARD.height + minY) + 'px'; 390513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.width = (width * BASE_INSTRUCTIONS.width / 391513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch BASE_KEYBOARD.width) + 'px'; 392513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.style.height = (height * BASE_INSTRUCTIONS.height / 393513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch BASE_KEYBOARD.height) + 'px'; 394513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 39572a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen var instructionsText = document.createElement('div'); 396513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructionsText.id = 'instructions-text'; 397513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructionsText.className = 'keyboard-overlay-instructions-text'; 398513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructionsText.innerHTML = templateData.keyboardOverlayInstructions; 399513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch instructions.appendChild(instructionsText); 40072a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen var instructionsHideText = document.createElement('div'); 40172a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen instructionsHideText.id = 'instructions-hide-text'; 40272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; 40372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen instructionsHideText.innerHTML = templateData.keyboardOverlayInstructionsHide; 40472a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen instructions.appendChild(instructionsHideText); 405513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch keyboard.appendChild(instructions); 406513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 407513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 408513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch/** 409513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch * A callback function for the onload event of the body element. 410513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch */ 411513209b27ff55e2841eac0e4120199c23acce758Ben Murdochfunction init() { 412513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch document.addEventListener('keydown', keydown); 413513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch document.addEventListener('keyup', keyup); 414201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch chrome.send('getKeyboardOverlayId'); 415201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch} 416201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch 417201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch/** 418201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch * Initializes the global keyboad overlay ID and the layout of keys. 419201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch * Called after sending the 'getKeyboardOverlayId' message. 420201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch */ 421201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdochfunction initKeyboardOverlayId(overlayId) { 42272a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen // Libcros returns an empty string when it cannot find the keyboard overlay ID 42372a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen // corresponding to the current input method. 42472a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen // In such a case, fallback to the default ID (en_US). 42572a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen if (overlayId) { 42672a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen keyboardOverlayId = overlayId; 42772a454cd3513ac24fbdd0e0cb9ad70b86a99b801Kristian Monsen } 428201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch while(document.body.firstChild) { 429201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch document.body.removeChild(document.body.firstChild); 430201ade2fbba22bfb27ae029f4d23fca6ded109a0Ben Murdoch } 431513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch initLayout(); 432513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch update(); 433513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch} 434513209b27ff55e2841eac0e4120199c23acce758Ben Murdoch 435513209b27ff55e2841eac0e4120199c23acce758Ben Murdochdocument.addEventListener('DOMContentLoaded', init); 436