3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.util.KeyMap
17 * Handles mapping keys to actions for an element. One key map can be used for multiple actions.
18 * The constructor accepts the same config object as defined by {@link #addBinding}.
19 * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key
20 * combination it will call the function with this signature (if the match is a multi-key
21 * combination the callback will still be called only once): (String key, Ext.EventObject e)
22 * A KeyMap can also handle a string representation of keys. By default KeyMap starts enabled.<br />
25 // map one key by key code
26 var map = new Ext.util.KeyMap("my-element", {
27 key: 13, // or Ext.EventObject.ENTER
32 // map multiple keys to one action by string
33 var map = new Ext.util.KeyMap("my-element", {
39 // map multiple keys to multiple actions by strings and array of codes
40 var map = new Ext.util.KeyMap("my-element", [
43 fn: function(){ alert("Return was pressed"); }
46 fn: function(){ alert('a, b or c was pressed'); }
51 fn: function(){ alert('Control + shift + tab was pressed.'); }
56 Ext.define('Ext.util.KeyMap', {
57 alternateClassName: 'Ext.KeyMap',
61 * @param {String/HTMLElement/Ext.Element} el The element or its ID to bind to
62 * @param {Object} binding The binding (see {@link #addBinding})
63 * @param {String} [eventName="keydown"] The event to bind to
65 constructor: function(el, binding, eventName){
70 eventName: eventName || me.eventName,
74 me.addBinding(binding);
82 * Add a new binding to this KeyMap. The following config object properties are supported:
84 Property Type Description
85 ---------- --------------- ----------------------------------------------------------------------
86 key String/Array A single keycode or an array of keycodes to handle
87 shift Boolean True to handle key only when shift is pressed, False to handle the key only when shift is not pressed (defaults to undefined)
88 ctrl Boolean True to handle key only when ctrl is pressed, False to handle the key only when ctrl is not pressed (defaults to undefined)
89 alt Boolean True to handle key only when alt is pressed, False to handle the key only when alt is not pressed (defaults to undefined)
90 handler Function The function to call when KeyMap finds the expected key combination
91 fn Function Alias of handler (for backwards-compatibility)
92 scope Object The scope of the callback function
93 defaultEventAction String A default action to apply to the event. Possible values are: stopEvent, stopPropagation, preventDefault. If no value is set no action is performed.
99 var map = new Ext.util.KeyMap(document, {
100 key: Ext.EventObject.ENTER,
105 //Add a new binding to the existing KeyMap later
113 * @param {Object/Object[]} binding A single KeyMap config or an array of configs
115 addBinding : function(binding){
116 if (Ext.isArray(binding)) {
117 Ext.each(binding, this.addBinding, this);
121 var keyCode = binding.key,
129 if (Ext.isString(keyCode)) {
131 keyString = keyCode.toUpperCase();
133 for (i = 0, len = keyString.length; i < len; ++i){
134 keys.push(keyString.charCodeAt(i));
140 if (!Ext.isArray(keyCode)) {
145 for (i = 0, len = keyCode.length; i < len; ++i) {
147 if (Ext.isString(key)) {
148 keyCode[i] = key.toUpperCase().charCodeAt(0);
153 this.bindings.push(Ext.apply({
159 * Process any keydown events on the element
161 * @param {Ext.EventObject} event
163 handleKeyDown: function(event) {
164 if (this.enabled) { //just in case
165 var bindings = this.bindings,
167 len = bindings.length;
169 event = this.processEvent(event);
171 this.processBinding(bindings[i], event);
177 * Ugly hack to allow this class to be tested. Currently WebKit gives
178 * no way to raise a key event properly with both
180 * b) The alt/ctrl/shift modifiers
181 * So we have to simulate them here. Yuk!
182 * This is a stub method intended to be overridden by tests.
183 * More info: https://bugs.webkit.org/show_bug.cgi?id=16735
186 processEvent: function(event){
191 * Process a particular binding and fire the handler if necessary.
193 * @param {Object} binding The binding information
194 * @param {Ext.EventObject} event
196 processBinding: function(binding, event){
197 if (this.checkModifiers(binding, event)) {
198 var key = event.getKey(),
199 handler = binding.fn || binding.handler,
200 scope = binding.scope || this,
201 keyCode = binding.keyCode,
202 defaultEventAction = binding.defaultEventAction,
205 keydownEvent = new Ext.EventObjectImpl(event);
208 for (i = 0, len = keyCode.length; i < len; ++i) {
209 if (key === keyCode[i]) {
210 if (handler.call(scope, key, event) !== true && defaultEventAction) {
211 keydownEvent[defaultEventAction]();
220 * Check if the modifiers on the event match those on the binding
222 * @param {Object} binding
223 * @param {Ext.EventObject} event
224 * @return {Boolean} True if the event matches the binding
226 checkModifiers: function(binding, e){
227 var keys = ['shift', 'ctrl', 'alt'],
232 for (; i < len; ++i){
235 if (!(val === undefined || (val === e[key + 'Key']))) {
243 * Shorthand for adding a single key listener
244 * @param {Number/Number[]/Object} key Either the numeric key code, array of key codes or an object with the
246 * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}
247 * @param {Function} fn The function to call
248 * @param {Object} scope (optional) The scope (<code>this</code> reference) in which the function is executed. Defaults to the browser window.
250 on: function(key, fn, scope) {
251 var keyCode, shift, ctrl, alt;
252 if (Ext.isObject(key) && !Ext.isArray(key)) {
271 * Returns true if this KeyMap is enabled
274 isEnabled : function(){
279 * Enables this KeyMap
285 me.el.on(me.eventName, me.handleKeyDown, me);
291 * Disable this KeyMap
297 me.el.removeListener(me.eventName, me.handleKeyDown, me);
303 * Convenience function for setting disabled/enabled by boolean.
304 * @param {Boolean} disabled
306 setDisabled : function(disabled){
315 * Destroys the KeyMap instance and removes all handlers.
316 * @param {Boolean} removeEl True to also remove the attached element
318 destroy: function(removeEl){
323 if (removeEl === true) {