182 lines
No EOL
6.7 KiB
HTML
182 lines
No EOL
6.7 KiB
HTML
<html><head><title>KeyMap.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>KeyMap.js</h1><pre class="highlighted"><code><i>/**
|
|
* @class Ext.KeyMap
|
|
* Handles mapping keys to actions <b>for</b> an element. One key map can be used <b>for</b> multiple actions.
|
|
* The constructor accepts the same config object as defined by {@link #addBinding}.
|
|
* If you bind a callback <b>function</b> to a KeyMap, anytime the KeyMap handles an expected key
|
|
* combination it will call the <b>function</b> with <b>this</b> signature (<b>if</b> the match is a multi-key
|
|
* combination the callback will still be called only once): (String key, Ext.EventObject e)
|
|
* A KeyMap can also handle a string representation of keys.<br />
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// map one key by key code</i>
|
|
<b>var</b> map = <b>new</b> Ext.KeyMap("my-element", {
|
|
key: 13, <i>// or Ext.EventObject.ENTER</i>
|
|
fn: myHandler,
|
|
scope: myObject
|
|
});
|
|
|
|
<i>// map multiple keys to one action by string</i>
|
|
<b>var</b> map = <b>new</b> Ext.KeyMap("my-element", {
|
|
key: "a\r\n\t",
|
|
fn: myHandler,
|
|
scope: myObject
|
|
});
|
|
|
|
<i>// map multiple keys to multiple actions by strings and array of codes</i>
|
|
<b>var</b> map = <b>new</b> Ext.KeyMap("my-element", [
|
|
{
|
|
key: [10,13],
|
|
fn: <b>function</b>(){ alert("Return was pressed"); }
|
|
}, {
|
|
key: "abc",
|
|
fn: <b>function</b>(){ alert('a, b or c was pressed'); }
|
|
}, {
|
|
key: "\t",
|
|
ctrl:true,
|
|
shift:true,
|
|
fn: <b>function</b>(){ alert('Control + shift + tab was pressed.'); }
|
|
}
|
|
]);
|
|
</code></pre>
|
|
* <b>Note: A KepMap starts enabled</b>
|
|
* @constructor
|
|
* @param {String/HTMLElement/Ext.Element} el The element to bind to
|
|
* @param {Object} config The config
|
|
* @param {String} eventName (optional) The event to bind to (defaults to "keydown")
|
|
*/</i>
|
|
Ext.KeyMap = <b>function</b>(el, config, eventName){
|
|
<b>this</b>.el = Ext.get(el);
|
|
<b>this</b>.eventName = eventName || "keydown";
|
|
<b>this</b>.bindings = [];
|
|
<b>if</b>(config instanceof Array){
|
|
<b>for</b>(var i = 0, len = config.length; i < len; i++){
|
|
<b>this</b>.addBinding(config[i]);
|
|
}
|
|
}<b>else</b>{
|
|
<b>this</b>.addBinding(config);
|
|
}
|
|
<b>this</b>.keyDownDelegate = Ext.EventManager.wrap(<b>this</b>.handleKeyDown, <b>this</b>, true);
|
|
<b>this</b>.enable();
|
|
};
|
|
|
|
Ext.KeyMap.prototype = {
|
|
<i>/**
|
|
* True to stop the event from bubbling and prevent the <b>default</b> browser action <b>if</b> the
|
|
* key was handled by the KeyMap (defaults to false)
|
|
* @type Boolean
|
|
*/</i>
|
|
stopEvent : false,
|
|
|
|
<i>/**
|
|
* Add a <b>new</b> binding to <b>this</b> KeyMap. The following config object properties are supported:
|
|
* <pre>
|
|
Property Type Description
|
|
---------- --------------- ----------------------------------------------------------------------
|
|
key String/Array A single keycode or an array of keycodes to handle
|
|
shift Boolean True to handle key only when shift is pressed (defaults to false)
|
|
ctrl Boolean True to handle key only when ctrl is pressed (defaults to false)
|
|
alt Boolean True to handle key only when alt is pressed (defaults to false)
|
|
fn Function The <b>function</b> to call when KeyMap finds the expected key combination
|
|
scope Object The scope of the callback <b>function</b>
|
|
</pre>
|
|
*
|
|
* Usage:
|
|
* <pre><code>
|
|
<i>// Create a KeyMap</i>
|
|
<b>var</b> map = <b>new</b> Ext.KeyMap(document, {
|
|
key: Ext.EventObject.ENTER,
|
|
fn: handleKey,
|
|
scope: <b>this</b>
|
|
});
|
|
|
|
<i>//Add a <b>new</b> binding to the existing KeyMap later</i>
|
|
map.addBinding({
|
|
key: 'abc',
|
|
shift: true,
|
|
fn: handleKey,
|
|
scope: <b>this</b>
|
|
});
|
|
</code></pre>
|
|
* @param {Object} config A single KeyMap config
|
|
*/</i>
|
|
addBinding : <b>function</b>(config){
|
|
<b>var</b> keyCode = config.key,
|
|
shift = config.shift,
|
|
ctrl = config.ctrl,
|
|
alt = config.alt,
|
|
fn = config.fn,
|
|
scope = config.scope;
|
|
<b>if</b>(typeof keyCode == "string"){
|
|
<b>var</b> ks = [];
|
|
<b>var</b> keyString = keyCode.toUpperCase();
|
|
<b>for</b>(var j = 0, len = keyString.length; j < len; j++){
|
|
ks.push(keyString.charCodeAt(j));
|
|
}
|
|
keyCode = ks;
|
|
}
|
|
<b>var</b> keyArray = keyCode instanceof Array;
|
|
<b>var</b> handler = <b>function</b>(e){
|
|
<b>if</b>((!shift || e.shiftKey) && (!ctrl || e.ctrlKey) && (!alt || e.altKey)){
|
|
<b>var</b> k = e.getKey();
|
|
<b>if</b>(keyArray){
|
|
<b>for</b>(var i = 0, len = keyCode.length; i < len; i++){
|
|
<b>if</b>(keyCode[i] == k){
|
|
<b>if</b>(this.stopEvent){
|
|
e.stopEvent();
|
|
}
|
|
fn.call(scope || window, k, e);
|
|
<b>return</b>;
|
|
}
|
|
}
|
|
}<b>else</b>{
|
|
<b>if</b>(k == keyCode){
|
|
<b>if</b>(this.stopEvent){
|
|
e.stopEvent();
|
|
}
|
|
fn.call(scope || window, k, e);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
<b>this</b>.bindings.push(handler);
|
|
},
|
|
|
|
<i>// private</i>
|
|
handleKeyDown : <b>function</b>(e){
|
|
<b>if</b>(this.enabled){ <i>//just <b>in</b> case</i>
|
|
<b>var</b> b = <b>this</b>.bindings;
|
|
<b>for</b>(var i = 0, len = b.length; i < len; i++){
|
|
b[i].call(<b>this</b>, e);
|
|
}
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> this KepMap is enabled
|
|
* @<b>return</b> {Boolean}
|
|
*/</i>
|
|
isEnabled : <b>function</b>(){
|
|
<b>return</b> this.enabled;
|
|
},
|
|
|
|
<i>/**
|
|
* Enable <b>this</b> KeyMap
|
|
*/</i>
|
|
enable: <b>function</b>(){
|
|
<b>if</b>(!<b>this</b>.enabled){
|
|
<b>this</b>.el.on(<b>this</b>.eventName, <b>this</b>.keyDownDelegate);
|
|
<b>this</b>.enabled = true;
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Disable <b>this</b> KeyMap
|
|
*/</i>
|
|
disable: <b>function</b>(){
|
|
<b>if</b>(this.enabled){
|
|
<b>this</b>.el.removeListener(<b>this</b>.eventName, <b>this</b>.keyDownDelegate);
|
|
<b>this</b>.enabled = false;
|
|
}
|
|
}
|
|
};</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |