OLD | NEW |
1 /* Copyright (c) 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright (c) 2014 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 | 5 |
6 /** | 6 /** |
7 * @constructor | 7 * @constructor |
8 * @param {HTMLElement} parentDiv | 8 * @param {HTMLElement} parentDiv |
9 */ | 9 */ |
10 var ChordTracker = function(parentDiv) { | 10 var ChordTracker = function(parentDiv) { |
11 this.parentDiv_ = parentDiv; | 11 this.parentDiv_ = parentDiv; |
12 this.currentDiv_ = null; | 12 this.currentDiv_ = null; |
13 this.pressedKeys_ = {}; | 13 this.pressedKeys_ = {}; |
14 }; | 14 }; |
15 | 15 |
16 /** | 16 /** |
17 * @param {Event} event The keyup or keydown event. | 17 * @param {number} keyCode |
| 18 * @param {string} title |
| 19 * @return {void} |
18 */ | 20 */ |
19 ChordTracker.prototype.addKeyEvent = function(event) { | 21 ChordTracker.prototype.addKeyUpEvent = function(keyCode, title) { |
20 this.begin_(); | 22 var text = this.keyName_(keyCode); |
21 var span = document.createElement('span'); | 23 var span = this.addSpanElement_('key-up', text, title); |
22 span.title = this.makeTitle_(event); | 24 delete this.pressedKeys_[keyCode]; |
23 if (event.type == 'keydown') { | |
24 span.classList.add('key-down'); | |
25 this.pressedKeys_[event.keyCode] = span; | |
26 } else { | |
27 span.classList.add('key-up'); | |
28 delete this.pressedKeys_[event.keyCode]; | |
29 } | |
30 span.innerText = this.keyName_(event.keyCode); | |
31 this.currentDiv_.appendChild(span); | |
32 if (!this.keysPressed_()) { | 25 if (!this.keysPressed_()) { |
33 this.end_(); | 26 this.end_(); |
34 } | 27 } |
35 }; | 28 }; |
36 | 29 |
| 30 /** |
| 31 * @param {number} keyCode |
| 32 * @param {string} title |
| 33 * @return {void} |
| 34 */ |
| 35 ChordTracker.prototype.addKeyDownEvent = function(keyCode, title) { |
| 36 var text = this.keyName_(keyCode); |
| 37 var span = this.addSpanElement_('key-down', text, title); |
| 38 this.pressedKeys_[keyCode] = span; |
| 39 }; |
| 40 |
| 41 /** |
| 42 * @param {string} characterText |
| 43 * @param {string} title |
| 44 * @return {void} |
| 45 */ |
| 46 ChordTracker.prototype.addCharEvent = function(characterText, title) { |
| 47 this.addSpanElement_('char-event', characterText, title); |
| 48 }; |
| 49 |
| 50 /** |
| 51 * @return {void} |
| 52 */ |
37 ChordTracker.prototype.releaseAllKeys = function() { | 53 ChordTracker.prototype.releaseAllKeys = function() { |
38 this.end_(); | 54 this.end_(); |
39 for (var i in this.pressedKeys_) { | 55 for (var i in this.pressedKeys_) { |
40 this.pressedKeys_[i].classList.add('unreleased'); | 56 this.pressedKeys_[i].classList.add('unreleased'); |
41 } | 57 } |
42 this.pressedKeys_ = {}; | 58 this.pressedKeys_ = {}; |
43 } | 59 } |
44 | 60 |
45 /** | 61 /** |
46 * @private | 62 * @private |
| 63 * @param {string} className |
| 64 * @param {string} text |
| 65 * @param {string} title |
| 66 */ |
| 67 ChordTracker.prototype.addSpanElement_ = function(className, text, title) { |
| 68 this.begin_(); |
| 69 var span = document.createElement('span'); |
| 70 span.classList.add(className); |
| 71 span.innerText = text; |
| 72 span.title = title; |
| 73 this.currentDiv_.appendChild(span); |
| 74 return span; |
| 75 } |
| 76 |
| 77 /** |
| 78 * @private |
47 */ | 79 */ |
48 ChordTracker.prototype.begin_ = function() { | 80 ChordTracker.prototype.begin_ = function() { |
49 if (this.currentDiv_) { | 81 if (this.currentDiv_) { |
50 return; | 82 return; |
51 } | 83 } |
52 this.currentDiv_ = document.createElement('div'); | 84 this.currentDiv_ = document.createElement('div'); |
53 this.currentDiv_.classList.add('chord-div'); | 85 this.currentDiv_.classList.add('chord-div'); |
54 this.parentDiv_.appendChild(this.currentDiv_); | 86 this.parentDiv_.appendChild(this.currentDiv_); |
55 }; | 87 }; |
56 | 88 |
(...skipping 29 matching lines...) Expand all Loading... |
86 * @private | 118 * @private |
87 */ | 119 */ |
88 ChordTracker.prototype.keyName_ = function(keyCode) { | 120 ChordTracker.prototype.keyName_ = function(keyCode) { |
89 var result = keyboardMap[keyCode]; | 121 var result = keyboardMap[keyCode]; |
90 if (!result) { | 122 if (!result) { |
91 result = '<' + keyCode + '>'; | 123 result = '<' + keyCode + '>'; |
92 } | 124 } |
93 return result; | 125 return result; |
94 }; | 126 }; |
95 | 127 |
96 /** | |
97 * @param {Event} event The keyup or keydown event. | |
98 * @private | |
99 */ | |
100 ChordTracker.prototype.makeTitle_ = function(event) { | |
101 return 'type: ' + event.type + '\n' + | |
102 'alt: ' + event.altKey + '\n' + | |
103 'shift: ' + event.shiftKey + '\n' + | |
104 'control: ' + event.controlKey + '\n' + | |
105 'meta: ' + event.metaKey + '\n' + | |
106 'charCode: ' + event.charCode + '\n' + | |
107 'keyCode: ' + event.keyCode + '\n' + | |
108 'keyIdentifier: ' + event.keyIdentifier + '\n' + | |
109 'repeat: ' + event.repeat + '\n'; | |
110 }; | |
OLD | NEW |