--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><div id="cls-Ext.KeyMap"></div>/**\r
+ * @class Ext.KeyMap\r
+ * Handles mapping keys to actions for an element. One key map can be used for multiple actions.\r
+ * The constructor accepts the same config object as defined by {@link #addBinding}.\r
+ * If you bind a callback function to a KeyMap, anytime the KeyMap handles an expected key\r
+ * combination it will call the function with this signature (if the match is a multi-key\r
+ * combination the callback will still be called only once): (String key, Ext.EventObject e)\r
+ * A KeyMap can also handle a string representation of keys.<br />\r
+ * Usage:\r
+ <pre><code>\r
+// map one key by key code\r
+var map = new Ext.KeyMap("my-element", {\r
+ key: 13, // or Ext.EventObject.ENTER\r
+ fn: myHandler,\r
+ scope: myObject\r
+});\r
+\r
+// map multiple keys to one action by string\r
+var map = new Ext.KeyMap("my-element", {\r
+ key: "a\r\n\t",\r
+ fn: myHandler,\r
+ scope: myObject\r
+});\r
+\r
+// map multiple keys to multiple actions by strings and array of codes\r
+var map = new Ext.KeyMap("my-element", [\r
+ {\r
+ key: [10,13],\r
+ fn: function(){ alert("Return was pressed"); }\r
+ }, {\r
+ key: "abc",\r
+ fn: function(){ alert('a, b or c was pressed'); }\r
+ }, {\r
+ key: "\t",\r
+ ctrl:true,\r
+ shift:true,\r
+ fn: function(){ alert('Control + shift + tab was pressed.'); }\r
+ }\r
+]);\r
+</code></pre>\r
+ * <b>Note: A KeyMap starts enabled</b>\r
+ * @constructor\r
+ * @param {Mixed} el The element to bind to\r
+ * @param {Object} config The config (see {@link #addBinding})\r
+ * @param {String} eventName (optional) The event to bind to (defaults to "keydown")\r
+ */\r
+Ext.KeyMap = function(el, config, eventName){\r
+ this.el = Ext.get(el);\r
+ this.eventName = eventName || "keydown";\r
+ this.bindings = [];\r
+ if(config){\r
+ this.addBinding(config);\r
+ }\r
+ this.enable();\r
+};\r
+\r
+Ext.KeyMap.prototype = {\r
+ <div id="prop-Ext.KeyMap-stopEvent"></div>/**\r
+ * True to stop the event from bubbling and prevent the default browser action if the\r
+ * key was handled by the KeyMap (defaults to false)\r
+ * @type Boolean\r
+ */\r
+ stopEvent : false,\r
+\r
+ <div id="method-Ext.KeyMap-addBinding"></div>/**\r
+ * Add a new binding to this KeyMap. The following config object properties are supported:\r
+ * <pre>\r
+Property Type Description\r
+---------- --------------- ----------------------------------------------------------------------\r
+key String/Array A single keycode or an array of keycodes to handle\r
+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)\r
+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)\r
+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)\r
+handler Function The function to call when KeyMap finds the expected key combination\r
+fn Function Alias of handler (for backwards-compatibility)\r
+scope Object The scope of the callback function\r
+stopEvent Boolean True to stop the event from bubbling and prevent the default browser action if the key was handled by the KeyMap (defaults to false)\r
+</pre>\r
+ *\r
+ * Usage:\r
+ * <pre><code>\r
+// Create a KeyMap\r
+var map = new Ext.KeyMap(document, {\r
+ key: Ext.EventObject.ENTER,\r
+ fn: handleKey,\r
+ scope: this\r
+});\r
+\r
+//Add a new binding to the existing KeyMap later\r
+map.addBinding({\r
+ key: 'abc',\r
+ shift: true,\r
+ fn: handleKey,\r
+ scope: this\r
+});\r
+</code></pre>\r
+ * @param {Object/Array} config A single KeyMap config or an array of configs\r
+ */\r
+ addBinding : function(config){\r
+ if(Ext.isArray(config)){\r
+ Ext.each(config, function(c){\r
+ this.addBinding(c);\r
+ }, this);\r
+ return;\r
+ }\r
+ var keyCode = config.key,\r
+ fn = config.fn || config.handler,\r
+ scope = config.scope;\r
+\r
+ if (config.stopEvent) {\r
+ this.stopEvent = config.stopEvent; \r
+ } \r
+\r
+ if(typeof keyCode == "string"){\r
+ var ks = [];\r
+ var keyString = keyCode.toUpperCase();\r
+ for(var j = 0, len = keyString.length; j < len; j++){\r
+ ks.push(keyString.charCodeAt(j));\r
+ }\r
+ keyCode = ks;\r
+ }\r
+ var keyArray = Ext.isArray(keyCode);\r
+ \r
+ var handler = function(e){\r
+ if(this.checkModifiers(config, e)){\r
+ var k = e.getKey();\r
+ if(keyArray){\r
+ for(var i = 0, len = keyCode.length; i < len; i++){\r
+ if(keyCode[i] == k){\r
+ if(this.stopEvent){\r
+ e.stopEvent();\r
+ }\r
+ fn.call(scope || window, k, e);\r
+ return;\r
+ }\r
+ }\r
+ }else{\r
+ if(k == keyCode){\r
+ if(this.stopEvent){\r
+ e.stopEvent();\r
+ }\r
+ fn.call(scope || window, k, e);\r
+ }\r
+ }\r
+ }\r
+ };\r
+ this.bindings.push(handler);\r
+ },\r
+ \r
+ // private\r
+ checkModifiers: function(config, e){\r
+ var val, key, keys = ['shift', 'ctrl', 'alt'];\r
+ for (var i = 0, len = keys.length; i < len; ++i){\r
+ key = keys[i];\r
+ val = config[key];\r
+ if(!(val === undefined || (val === e[key + 'Key']))){\r
+ return false;\r
+ }\r
+ }\r
+ return true;\r
+ },\r
+\r
+ <div id="method-Ext.KeyMap-on"></div>/**\r
+ * Shorthand for adding a single key listener\r
+ * @param {Number/Array/Object} key Either the numeric key code, array of key codes or an object with the\r
+ * following options:\r
+ * {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}\r
+ * @param {Function} fn The function to call\r
+ * @param {Object} scope (optional) The scope of the function\r
+ */\r
+ on : function(key, fn, scope){\r
+ var keyCode, shift, ctrl, alt;\r
+ if(typeof key == "object" && !Ext.isArray(key)){\r
+ keyCode = key.key;\r
+ shift = key.shift;\r
+ ctrl = key.ctrl;\r
+ alt = key.alt;\r
+ }else{\r
+ keyCode = key;\r
+ }\r
+ this.addBinding({\r
+ key: keyCode,\r
+ shift: shift,\r
+ ctrl: ctrl,\r
+ alt: alt,\r
+ fn: fn,\r
+ scope: scope\r
+ });\r
+ },\r
+\r
+ // private\r
+ handleKeyDown : function(e){\r
+ if(this.enabled){ //just in case\r
+ var b = this.bindings;\r
+ for(var i = 0, len = b.length; i < len; i++){\r
+ b[i].call(this, e);\r
+ }\r
+ }\r
+ },\r
+\r
+ <div id="method-Ext.KeyMap-isEnabled"></div>/**\r
+ * Returns true if this KeyMap is enabled\r
+ * @return {Boolean}\r
+ */\r
+ isEnabled : function(){\r
+ return this.enabled;\r
+ },\r
+\r
+ <div id="method-Ext.KeyMap-enable"></div>/**\r
+ * Enables this KeyMap\r
+ */\r
+ enable: function(){\r
+ if(!this.enabled){\r
+ this.el.on(this.eventName, this.handleKeyDown, this);\r
+ this.enabled = true;\r
+ }\r
+ },\r
+\r
+ <div id="method-Ext.KeyMap-disable"></div>/**\r
+ * Disable this KeyMap\r
+ */\r
+ disable: function(){\r
+ if(this.enabled){\r
+ this.el.removeListener(this.eventName, this.handleKeyDown, this);\r
+ this.enabled = false;\r
+ }\r
+ },\r
+ \r
+ <div id="method-Ext.KeyMap-setDisabled"></div>/**\r
+ * Convenience function for setting disabled/enabled by boolean.\r
+ * @param {Boolean} disabled\r
+ */\r
+ setDisabled : function(disabled){\r
+ this[disabled ? "disable" : "enable"]();\r
+ }\r
+};</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff