Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(210)

Side by Side Diff: chrome/browser/resources/chromeos/keyboard_overlay.js

Issue 11415124: Add keyboard overlay help for the Search key as a Function key extended keyboard shortcuts. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: forlanding Created 8 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
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
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
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
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
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
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);
OLDNEW
« no previous file with comments | « chrome/browser/resources/chromeos/keyboard_overlay.css ('k') | chrome/browser/ui/webui/chromeos/keyboard_overlay_ui.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698