Chromium Code Reviews| 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 var mergeData = searchKeyIsModifier ? | |
| 131 keyboardOverlayData['searchModifierShortcuts'] : | |
| 132 keyboardOverlayData['noSearchModifierShortcuts']; | |
| 133 for (var key in mergeData) | |
| 134 data[key] = mergeData[key]; | |
| 135 return data; | |
| 125 } | 136 } |
| 126 | 137 |
| 127 /** | 138 /** |
| 128 * Returns the keyboard overlay ID. | 139 * Returns the keyboard overlay ID. |
| 129 * @return {string} Keyboard overlay ID. | 140 * @return {string} Keyboard overlay ID. |
| 130 */ | 141 */ |
| 131 function getKeyboardOverlayId() { | 142 function getKeyboardOverlayId() { |
| 132 return keyboardOverlayId; | 143 return keyboardOverlayId; |
| 133 } | 144 } |
| 134 | 145 |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 156 } else if (n <= 0x10FFFF) { | 167 } else if (n <= 0x10FFFF) { |
| 157 n -= 0x10000; | 168 n -= 0x10000; |
| 158 result += (String.fromCharCode(0xD800 | (n >> 10)) + | 169 result += (String.fromCharCode(0xD800 | (n >> 10)) + |
| 159 String.fromCharCode(0xDC00 | (n & 0x3FF))); | 170 String.fromCharCode(0xDC00 | (n & 0x3FF))); |
| 160 } else { | 171 } else { |
| 161 console.error('hex2Char error: Code point out of range :' + hex); | 172 console.error('hex2Char error: Code point out of range :' + hex); |
| 162 } | 173 } |
| 163 return result; | 174 return result; |
| 164 } | 175 } |
| 165 | 176 |
| 177 var searchIsPressed = false; | |
| 178 | |
| 166 /** | 179 /** |
| 167 * Returns a list of modifiers from the key event. | 180 * Returns a list of modifiers from the key event. |
| 168 * @param {Event} e The key event. | 181 * @param {Event} e The key event. |
| 169 * @return {Array} List of modifiers based on key event. | 182 * @return {Array} List of modifiers based on key event. |
| 170 */ | 183 */ |
| 171 function getModifiers(e) { | 184 function getModifiers(e) { |
| 172 if (!e) | 185 if (!e) |
| 173 return []; | 186 return []; |
| 174 | 187 |
| 175 var isKeyDown = (e.type == 'keydown'); | 188 var isKeyDown = (e.type == 'keydown'); |
| 176 var keyCodeToModifier = { | 189 var keyCodeToModifier = { |
| 177 16: 'SHIFT', | 190 16: 'SHIFT', |
| 178 17: 'CTRL', | 191 17: 'CTRL', |
| 179 18: 'ALT', | 192 18: 'ALT', |
| 193 91: 'SEARCH', | |
| 180 }; | 194 }; |
| 181 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; | 195 var modifierWithKeyCode = keyCodeToModifier[e.keyCode]; |
| 182 var isPressed = {'SHIFT': e.shiftKey, 'CTRL': e.ctrlKey, 'ALT': e.altKey}; | 196 var isPressed = { |
| 183 // if e.keyCode is one of Shift, Ctrl and Alt, isPressed should | 197 'SHIFT': e.shiftKey, |
| 184 // be changed because the key currently pressed | 198 'CTRL': e.ctrlKey, |
| 185 // does not affect the values of e.shiftKey, e.ctrlKey and e.altKey | 199 'ALT': e.altKey, |
| 200 'SEARCH': searchIsPressed | |
| 201 }; | |
| 186 if (modifierWithKeyCode) | 202 if (modifierWithKeyCode) |
| 187 isPressed[modifierWithKeyCode] = isKeyDown; | 203 isPressed[modifierWithKeyCode] = isKeyDown; |
| 188 | 204 |
| 205 searchIsPressed = isPressed['SEARCH']; | |
| 206 | |
| 189 // make the result array | 207 // make the result array |
| 190 return ['SHIFT', 'CTRL', 'ALT'].filter( | 208 return ['SHIFT', 'CTRL', 'ALT', 'SEARCH'].filter( |
| 191 function(modifier) { | 209 function(modifier) { |
| 192 return isPressed[modifier]; | 210 return isPressed[modifier]; |
| 193 }).sort(); | 211 }).sort(); |
| 194 } | 212 } |
| 195 | 213 |
| 196 /** | 214 /** |
| 197 * Returns an ID of the key. | 215 * Returns an ID of the key. |
| 198 * @param {string} identifier Key identifier. | 216 * @param {string} identifier Key identifier. |
| 199 * @param {number} i Key number. | 217 * @param {number} i Key number. |
| 200 * @return {string} Key ID. | 218 * @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. | 259 * @return {Array} List of class names corresponding to specified params. |
| 242 */ | 260 */ |
| 243 function getKeyClasses(identifier, modifiers) { | 261 function getKeyClasses(identifier, modifiers) { |
| 244 var classes = ['keyboard-overlay-key']; | 262 var classes = ['keyboard-overlay-key']; |
| 245 for (var i = 0; i < modifiers.length; ++i) { | 263 for (var i = 0; i < modifiers.length; ++i) { |
| 246 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); | 264 classes.push(MODIFIER_TO_CLASS[modifiers[i]]); |
| 247 } | 265 } |
| 248 | 266 |
| 249 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || | 267 if ((identifier == '2A' && contains(modifiers, 'SHIFT')) || |
| 250 (identifier == '1D' && contains(modifiers, 'CTRL')) || | 268 (identifier == '1D' && contains(modifiers, 'CTRL')) || |
| 251 (identifier == '38' && contains(modifiers, 'ALT'))) { | 269 (identifier == '38' && contains(modifiers, 'ALT')) || |
| 270 (identifier == 'E0 5B' && contains(modifiers, 'SEARCH'))) { | |
| 252 classes.push('pressed'); | 271 classes.push('pressed'); |
| 253 classes.push(IDENTIFIER_TO_CLASS[identifier]); | 272 classes.push(IDENTIFIER_TO_CLASS[identifier]); |
| 254 } | 273 } |
| 255 return classes; | 274 return classes; |
| 256 } | 275 } |
| 257 | 276 |
| 258 /** | 277 /** |
| 259 * Returns true if a character is a ASCII character. | 278 * Returns true if a character is a ASCII character. |
| 260 * @param {string} c A character to be checked. | 279 * @param {string} c A character to be checked. |
| 261 * @return {boolean} True if the character is an ASCII character. | 280 * @return {boolean} True if the character is an ASCII character. |
| (...skipping 243 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 505 instructions.className = 'keyboard-overlay-instructions'; | 524 instructions.className = 'keyboard-overlay-instructions'; |
| 506 instructions.style.left = ((BASE_INSTRUCTIONS.left - BASE_KEYBOARD.left) * | 525 instructions.style.left = ((BASE_INSTRUCTIONS.left - BASE_KEYBOARD.left) * |
| 507 width / BASE_KEYBOARD.width + minX) + 'px'; | 526 width / BASE_KEYBOARD.width + minX) + 'px'; |
| 508 instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * | 527 instructions.style.top = ((BASE_INSTRUCTIONS.top - BASE_KEYBOARD.top) * |
| 509 height / BASE_KEYBOARD.height + minY) + 'px'; | 528 height / BASE_KEYBOARD.height + minY) + 'px'; |
| 510 instructions.style.width = (width * BASE_INSTRUCTIONS.width / | 529 instructions.style.width = (width * BASE_INSTRUCTIONS.width / |
| 511 BASE_KEYBOARD.width) + 'px'; | 530 BASE_KEYBOARD.width) + 'px'; |
| 512 instructions.style.height = (height * BASE_INSTRUCTIONS.height / | 531 instructions.style.height = (height * BASE_INSTRUCTIONS.height / |
| 513 BASE_KEYBOARD.height) + 'px'; | 532 BASE_KEYBOARD.height) + 'px'; |
| 514 | 533 |
| 534 var searchKeyIsModifier = | |
|
mazda
2012/11/28 05:25:18
Please move this just before line 540.
danakj
2012/11/28 21:11:24
Done.
| |
| 535 loadTimeData.getString('keyboardSearchKeyActsAsFunctionKey') == 'true'; | |
| 536 | |
| 515 var instructionsText = document.createElement('div'); | 537 var instructionsText = document.createElement('div'); |
| 516 instructionsText.id = 'instructions-text'; | 538 instructionsText.id = 'instructions-text'; |
| 517 instructionsText.className = 'keyboard-overlay-instructions-text'; | 539 instructionsText.className = 'keyboard-overlay-instructions-text'; |
| 518 instructionsText.innerHTML = | 540 if (searchKeyIsModifier) |
|
mazda
2012/11/28 05:25:18
if (searchKeyIsModifier) {
...
} else {
...
}
danakj
2012/11/28 21:11:24
Done.
| |
| 519 loadTimeData.getString('keyboardOverlayInstructions'); | 541 instructionsText.innerHTML = |
| 542 loadTimeData.getString('keyboardOverlayInstructionsWithSearch'); | |
| 543 else | |
| 544 instructionsText.innerHTML = | |
| 545 loadTimeData.getString('keyboardOverlayInstructions'); | |
| 520 instructions.appendChild(instructionsText); | 546 instructions.appendChild(instructionsText); |
| 521 var instructionsHideText = document.createElement('div'); | 547 var instructionsHideText = document.createElement('div'); |
| 522 instructionsHideText.id = 'instructions-hide-text'; | 548 instructionsHideText.id = 'instructions-hide-text'; |
| 523 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; | 549 instructionsHideText.className = 'keyboard-overlay-instructions-hide-text'; |
| 524 instructionsHideText.innerHTML = | 550 instructionsHideText.innerHTML = |
| 525 loadTimeData.getString('keyboardOverlayInstructionsHide'); | 551 loadTimeData.getString('keyboardOverlayInstructionsHide'); |
| 526 instructions.appendChild(instructionsHideText); | 552 instructions.appendChild(instructionsHideText); |
| 527 var learnMoreLinkText = document.createElement('div'); | 553 var learnMoreLinkText = document.createElement('div'); |
| 528 learnMoreLinkText.id = 'learn-more-text'; | 554 learnMoreLinkText.id = 'learn-more-text'; |
| 529 learnMoreLinkText.className = 'keyboard-overlay-learn-more-text'; | 555 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. | 625 * Handles click events of the learn more link. |
| 600 * @param {Event} e Mouse click event. | 626 * @param {Event} e Mouse click event. |
| 601 */ | 627 */ |
| 602 function learnMoreClicked(e) { | 628 function learnMoreClicked(e) { |
| 603 chrome.send('openLearnMorePage'); | 629 chrome.send('openLearnMorePage'); |
| 604 chrome.send('DialogClose'); | 630 chrome.send('DialogClose'); |
| 605 e.preventDefault(); | 631 e.preventDefault(); |
| 606 } | 632 } |
| 607 | 633 |
| 608 document.addEventListener('DOMContentLoaded', init); | 634 document.addEventListener('DOMContentLoaded', init); |
| OLD | NEW |