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 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
114 */ | 116 */ |
115 function getLayouts() { | 117 function getLayouts() { |
116 return keyboardOverlayData['layouts']; | 118 return keyboardOverlayData['layouts']; |
117 } | 119 } |
118 | 120 |
119 /** | 121 /** |
120 * Returns shortcut data. | 122 * Returns shortcut data. |
121 * @return {Object} Keyboard shortcut data. | 123 * @return {Object} Keyboard shortcut data. |
122 */ | 124 */ |
123 function getShortcutData() { | 125 function getShortcutData() { |
124 return keyboardOverlayData['shortcut']; | 126 var data = keyboardOverlayData['shortcut']; |
127 | |
128 var searchKeyIsModifier = | |
129 loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true'; | |
130 if (searchKeyIsModifier) { | |
131 // TODO(mazda): Clean this up and move these out to the data js. | |
132 var searchModifierRemoveShortcuts = { | |
133 'backspace<>ALT': 'keyboardOverlayDelete', | |
134 'down<>ALT': 'keyboardOverlayPageDown', | |
135 'down<>ALT<>CTRL': 'keyboardOverlayEnd', | |
136 'up<>ALT': 'keyboardOverlayPageUp', | |
137 'up<>ALT<>CTRL': 'keyboardOverlayHome' | |
138 }; | |
139 var searchModifierAddShortcuts = { | |
140 '1<>SEARCH': 'keyboardOverlayF1', | |
141 '2<>SEARCH': 'keyboardOverlayF2', | |
142 '3<>SEARCH': 'keyboardOverlayF3', | |
143 '4<>SEARCH': 'keyboardOverlayF4', | |
144 '5<>SEARCH': 'keyboardOverlayF5', | |
145 '6<>SEARCH': 'keyboardOverlayF6', | |
146 '7<>SEARCH': 'keyboardOverlayF7', | |
147 '8<>SEARCH': 'keyboardOverlayF8', | |
148 '9<>SEARCH': 'keyboardOverlayF9', | |
149 '0<>SEARCH': 'keyboardOverlayF10', | |
150 '-<>SEARCH': 'keyboardOverlayF11', | |
151 '=<>SEARCH': 'keyboardOverlayF12', | |
152 'backspace<>SEARCH': 'keyboardOverlayDelete', | |
153 'down<>SEARCH': 'keyboardOverlayPageDown', | |
154 'right<>SEARCH': 'keyboardOverlayEnd', | |
155 'up<>SEARCH': 'keyboardOverlayPageUp', | |
156 'left<>SEARCH': 'keyboardOverlayHome' | |
157 }; | |
158 | |
159 for (var key in searchModifierRemoveShortcuts) | |
160 delete data[key]; | |
161 for (var key in searchModifierAddShortcuts) | |
162 data[key] = searchModifierAddShortcuts[key]; | |
163 } | |
164 | |
165 return data; | |
mazda
2012/11/28 21:23:09
I think it's better to cache the result because ge
danakj
2012/11/28 21:30:38
Ah, okay. Done!
| |
125 } | 166 } |
126 | 167 |
127 /** | 168 /** |
128 * Returns the keyboard overlay ID. | 169 * Returns the keyboard overlay ID. |
129 * @return {string} Keyboard overlay ID. | 170 * @return {string} Keyboard overlay ID. |
130 */ | 171 */ |
131 function getKeyboardOverlayId() { | 172 function getKeyboardOverlayId() { |
132 return keyboardOverlayId; | 173 return keyboardOverlayId; |
133 } | 174 } |
134 | 175 |
(...skipping 21 matching lines...) Expand all Loading... | |
156 } else if (n <= 0x10FFFF) { | 197 } else if (n <= 0x10FFFF) { |
157 n -= 0x10000; | 198 n -= 0x10000; |
158 result += (String.fromCharCode(0xD800 | (n >> 10)) + | 199 result += (String.fromCharCode(0xD800 | (n >> 10)) + |
159 String.fromCharCode(0xDC00 | (n & 0x3FF))); | 200 String.fromCharCode(0xDC00 | (n & 0x3FF))); |
160 } else { | 201 } else { |
161 console.error('hex2Char error: Code point out of range :' + hex); | 202 console.error('hex2Char error: Code point out of range :' + hex); |
162 } | 203 } |
163 return result; | 204 return result; |
164 } | 205 } |
165 | 206 |
207 var searchIsPressed = false; | |
208 | |
166 /** | 209 /** |
167 * Returns a list of modifiers from the key event. | 210 * Returns a list of modifiers from the key event. |
168 * @param {Event} e The key event. | 211 * @param {Event} e The key event. |
169 * @return {Array} List of modifiers based on key event. | 212 * @return {Array} List of modifiers based on key event. |
170 */ | 213 */ |
171 function getModifiers(e) { | 214 function getModifiers(e) { |
172 if (!e) | 215 if (!e) |
173 return []; | 216 return []; |
174 | 217 |
175 var isKeyDown = (e.type == 'keydown'); | 218 var isKeyDown = (e.type == 'keydown'); |
176 var keyCodeToModifier = { | 219 var keyCodeToModifier = { |
177 16: 'SHIFT', | 220 16: 'SHIFT', |
178 17: 'CTRL', | 221 17: 'CTRL', |
179 18: 'ALT', | 222 18: 'ALT', |
223 91: 'SEARCH', | |
180 }; | 224 }; |
181 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; | 225 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; |
182 var isPressed = {'SHIFT': e.shiftKey, 'CTRL': e.ctrlKey, 'ALT': e.altKey}; | 226 var isPressed = { |
183 // if e.keyCode is one of Shift, Ctrl and Alt, isPressed should | 227 'SHIFT': e.shiftKey, |
184 // be changed because the key currently pressed | 228 'CTRL': e.ctrlKey, |
185 // does not affect the values of e.shiftKey, e.ctrlKey and e.altKey | 229 'ALT': e.altKey, |
230 'SEARCH': searchIsPressed | |
231 }; | |
186 if (modifierWithKeyCode) | 232 if (modifierWithKeyCode) |
187 isPressed[modifierWithKeyCode] = isKeyDown; | 233 isPressed[modifierWithKeyCode] = isKeyDown; |
188 | 234 |
235 searchIsPressed = isPressed['SEARCH']; | |
236 | |
189 // make the result array | 237 // make the result array |
190 return ['SHIFT', 'CTRL', 'ALT'].filter( | 238 return ['SHIFT', 'CTRL', 'ALT', 'SEARCH'].filter( |
191 function(modifier) { | 239 function(modifier) { |
192 return isPressed[modifier]; | 240 return isPressed[modifier]; |
193 }).sort(); | 241 }).sort(); |
194 } | 242 } |
195 | 243 |
196 /** | 244 /** |
197 * Returns an ID of the key. | 245 * Returns an ID of the key. |
198 * @param {string} identifier Key identifier. | 246 * @param {string} identifier Key identifier. |
199 * @param {number} i Key number. | 247 * @param {number} i Key number. |
200 * @return {string} Key ID. | 248 * @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. | 289 * @return {Array} List of class names corresponding to specified params. |
242 */ | 290 */ |
243 function getKeyClasses(identifier, modifiers) { | 291 function getKeyClasses(identifier, modifiers) { |
244 var classes = ['keyboard-overlay-key']; | 292 var classes = ['keyboard-overlay-key']; |
245 for (var i = 0; i < modifiers.length; ++i) { | 293 for (var i = 0; i < modifiers.length; ++i) { |
246 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); | 294 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); |
247 } | 295 } |
248 | 296 |
249 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || | 297 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || |
250 (identifier == '1D' && contains(modifiers, 'CTRL')) || | 298 (identifier == '1D' && contains(modifiers, 'CTRL')) || |
251 (identifier == '38' && contains(modifiers, 'ALT'))) { | 299 (identifier == '38' && contains(modifiers, 'ALT')) || |
300 (identifier == 'E0 5B' && contains(modifiers, 'SEARCH'))) { | |
252 classes.push('pressed'); | 301 classes.push('pressed'); |
253 classes.push(IDENTIFIER_TO_CLASS[identifier]); | 302 classes.push(IDENTIFIER_TO_CLASS[identifier]); |
254 } | 303 } |
255 return classes; | 304 return classes; |
256 } | 305 } |
257 | 306 |
258 /** | 307 /** |
259 * Returns true if a character is a ASCII character. | 308 * Returns true if a character is a ASCII character. |
260 * @param {string} c A character to be checked. | 309 * @param {string} c A character to be checked. |
261 * @return {boolean} True if the character is an ASCII character. | 310 * @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) * | 557 instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * |
509 height / BASE_KEYBOARD.height + minY) + 'px'; | 558 height / BASE_KEYBOARD.height + minY) + 'px'; |
510 instructions.style.width = (width * BASE_INSTRUCTIONS.width / | 559 instructions.style.width = (width * BASE_INSTRUCTIONS.width / |
511 BASE_KEYBOARD.width) + 'px'; | 560 BASE_KEYBOARD.width) + 'px'; |
512 instructions.style.height = (height * BASE_INSTRUCTIONS.height / | 561 instructions.style.height = (height * BASE_INSTRUCTIONS.height / |
513 BASE_KEYBOARD.height) + 'px'; | 562 BASE_KEYBOARD.height) + 'px'; |
514 | 563 |
515 var instructionsText = document.createElement('div'); | 564 var instructionsText = document.createElement('div'); |
516 instructionsText.id = 'instructions-text'; | 565 instructionsText.id = 'instructions-text'; |
517 instructionsText.className = 'keyboard-overlay-instructions-text'; | 566 instructionsText.className = 'keyboard-overlay-instructions-text'; |
518 instructionsText.innerHTML = | 567 var searchKeyIsModifier = |
519 loadTimeData.getString('keyboardOverlayInstructions'); | 568 loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true'; |
569 if (searchKeyIsModifier) { | |
570 instructionsText.innerHTML = | |
571 loadTimeData.getString('keyboardOverlayInstructionsWithSearch'); | |
572 } else { | |
573 instructionsText.innerHTML = | |
574 loadTimeData.getString('keyboardOverlayInstructions'); | |
575 } | |
520 instructions.appendChild(instructionsText); | 576 instructions.appendChild(instructionsText); |
521 var instructionsHideText = document.createElement('div'); | 577 var instructionsHideText = document.createElement('div'); |
522 instructionsHideText.id = 'instructions-hide-text'; | 578 instructionsHideText.id = 'instructions-hide-text'; |
523 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; | 579 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; |
524 instructionsHideText.innerHTML = | 580 instructionsHideText.innerHTML = |
525 loadTimeData.getString('keyboardOverlayInstructionsHide'); | 581 loadTimeData.getString('keyboardOverlayInstructionsHide'); |
526 instructions.appendChild(instructionsHideText); | 582 instructions.appendChild(instructionsHideText); |
527 var learnMoreLinkText = document.createElement('div'); | 583 var learnMoreLinkText = document.createElement('div'); |
528 learnMoreLinkText.id = 'learn-more-text'; | 584 learnMoreLinkText.id = 'learn-more-text'; |
529 learnMoreLinkText.className = 'keyboard-overlay-learn-more-text'; | 585 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. | 655 * Handles click events of the learn more link. |
600 * @param {Event} e Mouse click event. | 656 * @param {Event} e Mouse click event. |
601 */ | 657 */ |
602 function learnMoreClicked(e) { | 658 function learnMoreClicked(e) { |
603 chrome.send('openLearnMorePage'); | 659 chrome.send('openLearnMorePage'); |
604 chrome.send('DialogClose'); | 660 chrome.send('DialogClose'); |
605 e.preventDefault(); | 661 e.preventDefault(); |
606 } | 662 } |
607 | 663 |
608 document.addEventListener('DOMContentLoaded', init); | 664 document.addEventListener('DOMContentLoaded', init); |
OLD | NEW |