OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 <include src="keyboard_overlay_data.js"/> | 5 <include src="keyboard_overlay_data.js"/> |
6 <include src="keyboard_overlay_accessibility_helper.js"/> | 6 <include src="keyboard_overlay_accessibility_helper.js"/> |
7 | 7 |
8 var BASE_KEYBOARD = { | 8 var BASE_KEYBOARD = { |
9 top: 0, | 9 top: 0, |
10 left: 0, | 10 left: 0, |
11 width: 1237, | 11 width: 1237, |
12 height: 514 | 12 height: 514 |
13 }; | 13 }; |
14 | 14 |
15 var BASE_INSTRUCTIONS = { | 15 var BASE_INSTRUCTIONS = { |
16 top: 194, | 16 top: 194, |
17 left: 370, | 17 left: 370, |
18 width: 498, | 18 width: 498, |
19 height: 142 | 19 height: 142 |
20 }; | 20 }; |
21 | 21 |
22 var MODIFIER_TO_CLASS = { | 22 var MODIFIER_TO_CLASS = { |
23 'SHIFT': 'modifier-shift', | 23 'SHIFT': 'modifier-shift', |
24 'CTRL': 'modifier-ctrl', | 24 'CTRL': 'modifier-ctrl', |
25 'ALT': 'modifier-alt' | 25 'ALT': 'modifier-alt', |
| 26 'SEARCH': 'modifier-search' |
26 }; | 27 }; |
27 | 28 |
28 var IDENTIFIER_TO_CLASS = { | 29 var IDENTIFIER_TO_CLASS = { |
29 '2A': 'is-shift', | 30 '2A': 'is-shift', |
30 '1D': 'is-ctrl', | 31 '1D': 'is-ctrl', |
31 '38': 'is-alt' | 32 '38': 'is-alt', |
| 33 'E0 5B': 'is-search' |
32 }; | 34 }; |
33 | 35 |
34 var LABEL_TO_IDENTIFIER = { | 36 var LABEL_TO_IDENTIFIER = { |
35 'search': 'E0 5B', | 37 'search': 'E0 5B', |
36 'ctrl': '1D', | 38 'ctrl': '1D', |
37 'alt': '38', | 39 'alt': '38', |
38 'caps lock': '3A', | 40 'caps lock': '3A', |
39 'disabled': 'DISABLED' | 41 'disabled': 'DISABLED' |
40 }; | 42 }; |
41 | 43 |
(...skipping 67 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
109 var identifierMap = {}; | 111 var identifierMap = {}; |
110 | 112 |
111 /** | 113 /** |
112 * Returns layouts data. | 114 * Returns layouts data. |
113 * @return {Object} Keyboard layout data. | 115 * @return {Object} Keyboard layout data. |
114 */ | 116 */ |
115 function getLayouts() { | 117 function getLayouts() { |
116 return keyboardOverlayData['layouts']; | 118 return keyboardOverlayData['layouts']; |
117 } | 119 } |
118 | 120 |
| 121 // Cache the shortcut data after it is constructed. |
| 122 var shortcutDataCache; |
| 123 |
119 /** | 124 /** |
120 * Returns shortcut data. | 125 * Returns shortcut data. |
121 * @return {Object} Keyboard shortcut data. | 126 * @return {Object} Keyboard shortcut data. |
122 */ | 127 */ |
123 function getShortcutData() { | 128 function getShortcutData() { |
124 return keyboardOverlayData['shortcut']; | 129 if (shortcutDataCache) |
| 130 return shortcutDataCache; |
| 131 |
| 132 shortcutDataCache = keyboardOverlayData['shortcut']; |
| 133 |
| 134 var searchKeyIsModifier = |
| 135 loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true'; |
| 136 if (searchKeyIsModifier) { |
| 137 // TODO(mazda): Clean this up and move these out to the data js. |
| 138 var searchModifierRemoveShortcuts = { |
| 139 'backspace<>ALT': 'keyboardOverlayDelete', |
| 140 'down<>ALT': 'keyboardOverlayPageDown', |
| 141 'down<>ALT<>CTRL': 'keyboardOverlayEnd', |
| 142 'up<>ALT': 'keyboardOverlayPageUp', |
| 143 'up<>ALT<>CTRL': 'keyboardOverlayHome' |
| 144 }; |
| 145 var searchModifierAddShortcuts = { |
| 146 '1<>SEARCH': 'keyboardOverlayF1', |
| 147 '2<>SEARCH': 'keyboardOverlayF2', |
| 148 '3<>SEARCH': 'keyboardOverlayF3', |
| 149 '4<>SEARCH': 'keyboardOverlayF4', |
| 150 '5<>SEARCH': 'keyboardOverlayF5', |
| 151 '6<>SEARCH': 'keyboardOverlayF6', |
| 152 '7<>SEARCH': 'keyboardOverlayF7', |
| 153 '8<>SEARCH': 'keyboardOverlayF8', |
| 154 '9<>SEARCH': 'keyboardOverlayF9', |
| 155 '0<>SEARCH': 'keyboardOverlayF10', |
| 156 '-<>SEARCH': 'keyboardOverlayF11', |
| 157 '=<>SEARCH': 'keyboardOverlayF12', |
| 158 'backspace<>SEARCH': 'keyboardOverlayDelete', |
| 159 'down<>SEARCH': 'keyboardOverlayPageDown', |
| 160 'right<>SEARCH': 'keyboardOverlayEnd', |
| 161 'up<>SEARCH': 'keyboardOverlayPageUp', |
| 162 'left<>SEARCH': 'keyboardOverlayHome' |
| 163 }; |
| 164 |
| 165 for (var key in searchModifierRemoveShortcuts) |
| 166 delete shortcutDataCache[key]; |
| 167 for (var key in searchModifierAddShortcuts) |
| 168 shortcutDataCache[key] = searchModifierAddShortcuts[key]; |
| 169 } |
| 170 |
| 171 return shortcutDataCache; |
125 } | 172 } |
126 | 173 |
127 /** | 174 /** |
128 * Returns the keyboard overlay ID. | 175 * Returns the keyboard overlay ID. |
129 * @return {string} Keyboard overlay ID. | 176 * @return {string} Keyboard overlay ID. |
130 */ | 177 */ |
131 function getKeyboardOverlayId() { | 178 function getKeyboardOverlayId() { |
132 return keyboardOverlayId; | 179 return keyboardOverlayId; |
133 } | 180 } |
134 | 181 |
(...skipping 21 matching lines...) Expand all Loading... |
156 } else if (n <= 0x10FFFF) { | 203 } else if (n <= 0x10FFFF) { |
157 n -= 0x10000; | 204 n -= 0x10000; |
158 result += (String.fromCharCode(0xD800 | (n >> 10)) + | 205 result += (String.fromCharCode(0xD800 | (n >> 10)) + |
159 String.fromCharCode(0xDC00 | (n & 0x3FF))); | 206 String.fromCharCode(0xDC00 | (n & 0x3FF))); |
160 } else { | 207 } else { |
161 console.error('hex2Char error: Code point out of range :' + hex); | 208 console.error('hex2Char error: Code point out of range :' + hex); |
162 } | 209 } |
163 return result; | 210 return result; |
164 } | 211 } |
165 | 212 |
| 213 var searchIsPressed = false; |
| 214 |
166 /** | 215 /** |
167 * Returns a list of modifiers from the key event. | 216 * Returns a list of modifiers from the key event. |
168 * @param {Event} e The key event. | 217 * @param {Event} e The key event. |
169 * @return {Array} List of modifiers based on key event. | 218 * @return {Array} List of modifiers based on key event. |
170 */ | 219 */ |
171 function getModifiers(e) { | 220 function getModifiers(e) { |
172 if (!e) | 221 if (!e) |
173 return []; | 222 return []; |
174 | 223 |
175 var isKeyDown = (e.type == 'keydown'); | 224 var isKeyDown = (e.type == 'keydown'); |
176 var keyCodeToModifier = { | 225 var keyCodeToModifier = { |
177 16: 'SHIFT', | 226 16: 'SHIFT', |
178 17: 'CTRL', | 227 17: 'CTRL', |
179 18: 'ALT', | 228 18: 'ALT', |
| 229 91: 'SEARCH', |
180 }; | 230 }; |
181 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; | 231 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; |
182 var isPressed = {'SHIFT': e.shiftKey, 'CTRL': e.ctrlKey, 'ALT': e.altKey}; | 232 var isPressed = { |
183 // if e.keyCode is one of Shift, Ctrl and Alt, isPressed should | 233 'SHIFT': e.shiftKey, |
184 // be changed because the key currently pressed | 234 'CTRL': e.ctrlKey, |
185 // does not affect the values of e.shiftKey, e.ctrlKey and e.altKey | 235 'ALT': e.altKey, |
| 236 'SEARCH': searchIsPressed |
| 237 }; |
186 if (modifierWithKeyCode) | 238 if (modifierWithKeyCode) |
187 isPressed[modifierWithKeyCode] = isKeyDown; | 239 isPressed[modifierWithKeyCode] = isKeyDown; |
188 | 240 |
| 241 searchIsPressed = isPressed['SEARCH']; |
| 242 |
189 // make the result array | 243 // make the result array |
190 return ['SHIFT', 'CTRL', 'ALT'].filter( | 244 return ['SHIFT', 'CTRL', 'ALT', 'SEARCH'].filter( |
191 function(modifier) { | 245 function(modifier) { |
192 return isPressed[modifier]; | 246 return isPressed[modifier]; |
193 }).sort(); | 247 }).sort(); |
194 } | 248 } |
195 | 249 |
196 /** | 250 /** |
197 * Returns an ID of the key. | 251 * Returns an ID of the key. |
198 * @param {string} identifier Key identifier. | 252 * @param {string} identifier Key identifier. |
199 * @param {number} i Key number. | 253 * @param {number} i Key number. |
200 * @return {string} Key ID. | 254 * @return {string} Key ID. |
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
241 * @return {Array} List of class names corresponding to specified params. | 295 * @return {Array} List of class names corresponding to specified params. |
242 */ | 296 */ |
243 function getKeyClasses(identifier, modifiers) { | 297 function getKeyClasses(identifier, modifiers) { |
244 var classes = ['keyboard-overlay-key']; | 298 var classes = ['keyboard-overlay-key']; |
245 for (var i = 0; i < modifiers.length; ++i) { | 299 for (var i = 0; i < modifiers.length; ++i) { |
246 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); | 300 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); |
247 } | 301 } |
248 | 302 |
249 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || | 303 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || |
250 (identifier == '1D' && contains(modifiers, 'CTRL')) || | 304 (identifier == '1D' && contains(modifiers, 'CTRL')) || |
251 (identifier == '38' && contains(modifiers, 'ALT'))) { | 305 (identifier == '38' && contains(modifiers, 'ALT')) || |
| 306 (identifier == 'E0 5B' && contains(modifiers, 'SEARCH'))) { |
252 classes.push('pressed'); | 307 classes.push('pressed'); |
253 classes.push(IDENTIFIER_TO_CLASS[identifier]); | 308 classes.push(IDENTIFIER_TO_CLASS[identifier]); |
254 } | 309 } |
255 return classes; | 310 return classes; |
256 } | 311 } |
257 | 312 |
258 /** | 313 /** |
259 * Returns true if a character is a ASCII character. | 314 * Returns true if a character is a ASCII character. |
260 * @param {string} c A character to be checked. | 315 * @param {string} c A character to be checked. |
261 * @return {boolean} True if the character is an ASCII character. | 316 * @return {boolean} True if the character is an ASCII character. |
(...skipping 246 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
508 instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * | 563 instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * |
509 height / BASE_KEYBOARD.height + minY) + 'px'; | 564 height / BASE_KEYBOARD.height + minY) + 'px'; |
510 instructions.style.width = (width * BASE_INSTRUCTIONS.width / | 565 instructions.style.width = (width * BASE_INSTRUCTIONS.width / |
511 BASE_KEYBOARD.width) + 'px'; | 566 BASE_KEYBOARD.width) + 'px'; |
512 instructions.style.height = (height * BASE_INSTRUCTIONS.height / | 567 instructions.style.height = (height * BASE_INSTRUCTIONS.height / |
513 BASE_KEYBOARD.height) + 'px'; | 568 BASE_KEYBOARD.height) + 'px'; |
514 | 569 |
515 var instructionsText = document.createElement('div'); | 570 var instructionsText = document.createElement('div'); |
516 instructionsText.id = 'instructions-text'; | 571 instructionsText.id = 'instructions-text'; |
517 instructionsText.className = 'keyboard-overlay-instructions-text'; | 572 instructionsText.className = 'keyboard-overlay-instructions-text'; |
518 instructionsText.innerHTML = | 573 var searchKeyIsModifier = |
519 loadTimeData.getString('keyboardOverlayInstructions'); | 574 loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true'; |
| 575 if (searchKeyIsModifier) { |
| 576 instructionsText.innerHTML = |
| 577 loadTimeData.getString('keyboardOverlayInstructionsWithSearch'); |
| 578 } else { |
| 579 instructionsText.innerHTML = |
| 580 loadTimeData.getString('keyboardOverlayInstructions'); |
| 581 } |
520 instructions.appendChild(instructionsText); | 582 instructions.appendChild(instructionsText); |
521 var instructionsHideText = document.createElement('div'); | 583 var instructionsHideText = document.createElement('div'); |
522 instructionsHideText.id = 'instructions-hide-text'; | 584 instructionsHideText.id = 'instructions-hide-text'; |
523 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; | 585 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; |
524 instructionsHideText.innerHTML = | 586 instructionsHideText.innerHTML = |
525 loadTimeData.getString('keyboardOverlayInstructionsHide'); | 587 loadTimeData.getString('keyboardOverlayInstructionsHide'); |
526 instructions.appendChild(instructionsHideText); | 588 instructions.appendChild(instructionsHideText); |
527 var learnMoreLinkText = document.createElement('div'); | 589 var learnMoreLinkText = document.createElement('div'); |
528 learnMoreLinkText.id = 'learn-more-text'; | 590 learnMoreLinkText.id = 'learn-more-text'; |
529 learnMoreLinkText.className = 'keyboard-overlay-learn-more-text'; | 591 learnMoreLinkText.className = 'keyboard-overlay-learn-more-text'; |
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
599 * Handles click events of the learn more link. | 661 * Handles click events of the learn more link. |
600 * @param {Event} e Mouse click event. | 662 * @param {Event} e Mouse click event. |
601 */ | 663 */ |
602 function learnMoreClicked(e) { | 664 function learnMoreClicked(e) { |
603 chrome.send('openLearnMorePage'); | 665 chrome.send('openLearnMorePage'); |
604 chrome.send('DialogClose'); | 666 chrome.send('DialogClose'); |
605 e.preventDefault(); | 667 e.preventDefault(); |
606 } | 668 } |
607 | 669 |
608 document.addEventListener('DOMContentLoaded', init); | 670 document.addEventListener('DOMContentLoaded', init); |
OLD | NEW |