projects / roojs1 / blob
? search:


0a1a6e36b7ce68f150c5049294bd6e1e07499756
[roojs1] / docs / src / Roo_KeyNav.js.html
1 <html><head><title>/home/edward/gitlive/roojs1/Roo/KeyNav.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
2  * Based on:
3  * Ext JS Library 1.1.1
4  * Copyright(c) 2006-2007, Ext JS, LLC.
5  *
6  * Originally Released Under LGPL - original licence link has changed is not relivant.
7  *
8  * Fork - LGPL
9  * &lt;script type=&quot;text/javascript&quot;&gt;
10  */
11
12
13 /**
14  * @class Roo.KeyNav
15  * &lt;p&gt;Provides a convenient wrapper for normalized keyboard navigation.  KeyNav allows you to bind
16  * navigation keys to function calls that will get called when the keys are pressed, providing an easy
17  * way to implement custom navigation schemes for any UI component.&lt;/p&gt;
18  * &lt;p&gt;The following are all of the possible keys that can be implemented: enter, left, right, up, down, tab, esc,
19  * pageUp, pageDown, del, home, end.  Usage:&lt;/p&gt;
20  &lt;pre&gt;&lt;code&gt;
21 var nav = new Roo.KeyNav(&quot;my-element&quot;, {
22     &quot;left&quot; : function(e){
23         this.moveLeft(e.ctrlKey);
24     },
25     &quot;right&quot; : function(e){
26         this.moveRight(e.ctrlKey);
27     },
28     &quot;enter&quot; : function(e){
29         this.save();
30     },
31     scope : this
32 });
33 &lt;/code&gt;&lt;/pre&gt;
34  * @constructor
35  * @param {String/HTMLElement/Roo.Element} el The element to bind to
36  * @param {Object} config The config
37  */
38 </span><span class="jsdoc-var">Roo.KeyNav </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
39     </span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">el</span><span class="jsdoc-syntax">);
40     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
41     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
42         </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
43         </span><span class="jsdoc-var">this.enable</span><span class="jsdoc-syntax">();
44     }
45 };
46
47 </span><span class="jsdoc-var">Roo.KeyNav.prototype </span><span class="jsdoc-syntax">= {
48     </span><span class="jsdoc-comment">/**
49      * @cfg {Boolean} disabled
50      * True to disable this KeyNav instance (defaults to false)
51      */
52     </span><span class="jsdoc-var">disabled </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
53     </span><span class="jsdoc-comment">/**
54      * @cfg {String} defaultEventAction
55      * The method to call on the {@link Roo.EventObject} after this KeyNav intercepts a key.  Valid values are
56      * {@link Roo.EventObject#stopEvent}, {@link Roo.EventObject#preventDefault} and
57      * {@link Roo.EventObject#stopPropagation} (defaults to 'stopEvent')
58      */
59     </span><span class="jsdoc-var">defaultEventAction</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;stopEvent&quot;</span><span class="jsdoc-syntax">,
60     </span><span class="jsdoc-comment">/**
61      * @cfg {Boolean} forceKeyDown
62      * Handle the keydown event instead of keypress (defaults to false).  KeyNav automatically does this for IE since
63      * IE does not propagate special keys on keypress, but setting this to true will force other browsers to also
64      * handle keydown instead of keypress.
65      */
66     </span><span class="jsdoc-var">forceKeyDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
67
68     </span><span class="jsdoc-comment">// private
69     </span><span class="jsdoc-var">prepareEvent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
70         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
71         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyToHandler</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">];
72         </span><span class="jsdoc-comment">//if(h &amp;&amp; this[h]){
73         //    e.stopPropagation();
74         //}
75         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&gt;= 37 &amp;&amp; </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">&lt;= 40){
76             </span><span class="jsdoc-var">e.stopEvent</span><span class="jsdoc-syntax">();
77         }
78     },
79
80     </span><span class="jsdoc-comment">// private
81     </span><span class="jsdoc-var">relay </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
82         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">();
83         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.keyToHandler</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">];
84         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">]){
85             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.doRelay</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">], </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">) !== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
86                 </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.defaultEventAction</span><span class="jsdoc-syntax">]();
87             }
88         }
89     },
90
91     </span><span class="jsdoc-comment">// private
92     </span><span class="jsdoc-var">doRelay </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">hname</span><span class="jsdoc-syntax">){
93         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">h.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.scope </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
94     },
95
96     </span><span class="jsdoc-comment">// possible handlers
97     </span><span class="jsdoc-var">enter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
98     </span><span class="jsdoc-var">left </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
99     </span><span class="jsdoc-var">right </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
100     </span><span class="jsdoc-var">up </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
101     </span><span class="jsdoc-var">down </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
102     </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
103     </span><span class="jsdoc-var">esc </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
104     </span><span class="jsdoc-var">pageUp </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
105     </span><span class="jsdoc-var">pageDown </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
106     </span><span class="jsdoc-var">del </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
107     </span><span class="jsdoc-var">home </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
108     </span><span class="jsdoc-var">end </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
109
110     </span><span class="jsdoc-comment">// quick lookup hash
111     </span><span class="jsdoc-var">keyToHandler </span><span class="jsdoc-syntax">: {
112         37 : </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">,
113         39 : </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">,
114         38 : </span><span class="jsdoc-string">&quot;up&quot;</span><span class="jsdoc-syntax">,
115         40 : </span><span class="jsdoc-string">&quot;down&quot;</span><span class="jsdoc-syntax">,
116         33 : </span><span class="jsdoc-string">&quot;pageUp&quot;</span><span class="jsdoc-syntax">,
117         34 : </span><span class="jsdoc-string">&quot;pageDown&quot;</span><span class="jsdoc-syntax">,
118         46 : </span><span class="jsdoc-string">&quot;del&quot;</span><span class="jsdoc-syntax">,
119         36 : </span><span class="jsdoc-string">&quot;home&quot;</span><span class="jsdoc-syntax">,
120         35 : </span><span class="jsdoc-string">&quot;end&quot;</span><span class="jsdoc-syntax">,
121         13 : </span><span class="jsdoc-string">&quot;enter&quot;</span><span class="jsdoc-syntax">,
122         27 : </span><span class="jsdoc-string">&quot;esc&quot;</span><span class="jsdoc-syntax">,
123         9  : </span><span class="jsdoc-string">&quot;tab&quot;
124     </span><span class="jsdoc-syntax">},
125
126         </span><span class="jsdoc-comment">/**
127          * Enable this KeyNav
128          */
129         </span><span class="jsdoc-var">enable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
130                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
131             </span><span class="jsdoc-comment">// ie won't do special keys on keypress, no one else will repeat keys with keydown
132             // the EventObject will normalize Safari automatically
133             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.forceKeyDown </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isAir</span><span class="jsdoc-syntax">){
134                 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
135             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
136                 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prepareEvent</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
137                 </span><span class="jsdoc-var">this.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">,  </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
138             }
139                     </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
140                 }
141         },
142
143         </span><span class="jsdoc-comment">/**
144          * Disable this KeyNav
145          */
146         </span><span class="jsdoc-var">disable</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
147                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.disabled</span><span class="jsdoc-syntax">){
148                     </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.forceKeyDown </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isAir</span><span class="jsdoc-syntax">){
149                 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">);
150             }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
151                 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keydown&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.prepareEvent</span><span class="jsdoc-syntax">);
152                 </span><span class="jsdoc-var">this.el.un</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">&quot;keypress&quot;</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.relay</span><span class="jsdoc-syntax">);
153             }
154                     </span><span class="jsdoc-var">this.disabled </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
155                 }
156         }
157 };</span></code></body></html>
RooJS - Version 1