3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 Ext.a11y.Frame = Ext.extend(Object, {
\r
13 constructor: function(size, color){
\r
14 this.setSize(size || 1);
\r
15 this.setColor(color || '15428B');
\r
19 if (!this.initialized) {
\r
24 this.ct = Ext.DomHelper.append(document.body, {
\r
25 cls: 'x-a11y-focusframe'
\r
28 for (i = 0; i < 4; i++) {
\r
29 s = Ext.DomHelper.append(this.ct, {
\r
30 cls: 'x-a11y-focusframe-side',
\r
31 style: 'background-color: #' + this.color
\r
33 s.visibilityMode = Ext.Element.DISPLAY;
\r
37 this.frameTask = new Ext.util.DelayedTask(function(el){
\r
38 var newEl = Ext.get(el);
\r
39 if (newEl != this.curEl) {
\r
40 var w = newEl.getWidth();
\r
41 var h = newEl.getHeight();
\r
42 this.sides[0].show().setSize(w, this.size).anchorTo(el, 'tl', [0, -1]);
\r
43 this.sides[2].show().setSize(w, this.size).anchorTo(el, 'bl', [0, -1]);
\r
44 this.sides[1].show().setSize(this.size, h).anchorTo(el, 'tr', [-1, 0]);
\r
45 this.sides[3].show().setSize(this.size, h).anchorTo(el, 'tl', [-1, 0]);
\r
50 this.unframeTask = new Ext.util.DelayedTask(function(){
\r
51 if (this.initialized) {
\r
52 this.sides[0].hide();
\r
53 this.sides[1].hide();
\r
54 this.sides[2].hide();
\r
55 this.sides[3].hide();
\r
59 this.initialized = true;
\r
63 frame: function(el){
\r
65 this.unframeTask.cancel();
\r
66 this.frameTask.delay(2, false, false, [el]);
\r
69 unframe: function(){
\r
71 this.unframeTask.delay(2);
\r
74 setSize: function(size){
\r
78 setColor: function(color){
\r
83 Ext.a11y.FocusFrame = new Ext.a11y.Frame(2, '15428B');
\r
84 Ext.a11y.RelayFrame = new Ext.a11y.Frame(1, '6B8CBF');
\r
86 Ext.a11y.Focusable = Ext.extend(Ext.util.Observable, {
\r
87 constructor: function(el, relayTo, noFrame, frameEl){
\r
88 Ext.a11y.Focusable.superclass.constructor.call(this);
\r
90 this.addEvents('focus', 'blur', 'left', 'right', 'up', 'down', 'esc', 'enter', 'space');
\r
92 if (el instanceof Ext.Component) {
\r
94 this.setComponent(el);
\r
97 this.el = Ext.get(el);
\r
98 this.setComponent(null);
\r
101 this.setRelayTo(relayTo)
\r
102 this.setNoFrame(noFrame);
\r
103 this.setFrameEl(frameEl);
\r
107 Ext.a11y.FocusMgr.register(this);
\r
111 this.el.dom.tabIndex = '1';
\r
112 this.el.addClass('x-a11y-focusable');
\r
114 focus: this.onFocus,
\r
116 keydown: this.onKeyDown,
\r
121 setRelayTo: function(relayTo){
\r
122 this.relayTo = relayTo ? Ext.a11y.FocusMgr.get(relayTo) : null;
\r
125 setNoFrame: function(noFrame){
\r
126 this.noFrame = (noFrame === true) ? true : false;
\r
129 setFrameEl: function(frameEl){
\r
130 this.frameEl = frameEl && Ext.get(frameEl) || this.el;
\r
133 setComponent: function(cmp){
\r
134 this.component = cmp || null;
\r
137 onKeyDown: function(e, t){
\r
138 var k = e.getKey(), SK = Ext.a11y.Focusable.SpecialKeys, ret, tf;
\r
140 tf = (t !== this.el.dom) ? Ext.a11y.FocusMgr.get(t, true) : this;
\r
142 // this can happen when you are on a focused item within a panel body
\r
143 // that is not a Ext.a11y.Focusable
\r
144 tf = Ext.a11y.FocusMgr.get(Ext.fly(t).parent('.x-a11y-focusable'));
\r
147 if (SK[k] !== undefined) {
\r
148 ret = this.fireEvent(SK[k], e, t, tf, this);
\r
150 if (ret === false || this.fireEvent('keydown', e, t, tf, this) === false) {
\r
156 this.el.dom.focus();
\r
160 this.el.dom.blur();
\r
163 onFocus: function(e, t){
\r
164 this.el.addClass('x-a11y-focused');
\r
165 if (this.relayTo) {
\r
166 this.relayTo.el.addClass('x-a11y-focused-relay');
\r
167 if (!this.relayTo.noFrame) {
\r
168 Ext.a11y.FocusFrame.frame(this.relayTo.frameEl);
\r
170 if (!this.noFrame) {
\r
171 Ext.a11y.RelayFrame.frame(this.frameEl);
\r
175 if (!this.noFrame) {
\r
176 Ext.a11y.FocusFrame.frame(this.frameEl);
\r
180 this.fireEvent('focus', e, t, this);
\r
183 onBlur: function(e, t){
\r
184 if (this.relayTo) {
\r
185 this.relayTo.el.removeClass('x-a11y-focused-relay');
\r
186 Ext.a11y.RelayFrame.unframe();
\r
188 this.el.removeClass('x-a11y-focused');
\r
189 Ext.a11y.FocusFrame.unframe();
\r
190 this.fireEvent('blur', e, t, this);
\r
193 destroy: function(){
\r
194 this.el.un('keydown', this.onKeyDown);
\r
195 this.el.un('focus', this.onFocus);
\r
196 this.el.un('blur', this.onBlur);
\r
197 this.el.removeClass('x-a11y-focusable');
\r
198 this.el.removeClass('x-a11y-focused');
\r
199 if (this.relayTo) {
\r
200 this.relayTo.el.removeClass('x-a11y-focused-relay');
\r
205 Ext.a11y.FocusItem = Ext.extend(Object, {
\r
206 constructor: function(el, enableTabbing){
\r
207 Ext.a11y.FocusItem.superclass.constructor.call(this);
\r
209 this.el = Ext.get(el);
\r
210 this.fi = new Ext.a11y.Focusable(el);
\r
211 this.fi.setComponent(this);
\r
213 this.fi.on('tab', this.onTab, this);
\r
215 this.enableTabbing = enableTabbing === true ? true : false;
\r
218 getEnterItem: function(){
\r
219 if (this.enableTabbing) {
\r
220 var items = this.getFocusItems();
\r
221 if (items && items.length) {
\r
227 getFocusItems: function(){
\r
228 if (this.enableTabbing) {
\r
229 return this.el.query('a, button, input, select');
\r
234 onTab: function(e, t){
\r
235 var items = this.getFocusItems(), i;
\r
237 if (items && items.length && (i = items.indexOf(t)) !== -1) {
\r
238 if (e.shiftKey && i > 0) {
\r
240 items[i - 1].focus();
\r
241 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
\r
245 if (!e.shiftKey && i < items.length - 1) {
\r
247 items[i + 1].focus();
\r
248 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
\r
255 if (this.enableTabbing) {
\r
256 var items = this.getFocusItems();
\r
257 if (items && items.length) {
\r
259 Ext.a11y.FocusFrame.frame.defer(20, Ext.a11y.FocusFrame, [this.el]);
\r
271 Ext.a11y.FocusMgr = function(){
\r
272 var all = new Ext.util.MixedCollection();
\r
275 register: function(f){
\r
276 all.add(f.el && Ext.id(f.el), f);
\r
279 unregister: function(f){
\r
283 get: function(el, noCreate){
\r
284 return all.get(Ext.id(el)) || (noCreate ? false : new Ext.a11y.Focusable(el));
\r
291 Ext.a11y.Focusable.SpecialKeys = {};
\r
292 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.LEFT] = 'left';
\r
293 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.RIGHT] = 'right';
\r
294 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.DOWN] = 'down';
\r
295 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.UP] = 'up';
\r
296 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ESC] = 'esc';
\r
297 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.ENTER] = 'enter';
\r
298 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.SPACE] = 'space';
\r
299 Ext.a11y.Focusable.SpecialKeys[Ext.EventObjectImpl.prototype.TAB] = 'tab';
\r
301 // we use the new observeClass method to fire our new initFocus method on components
\r
302 Ext.util.Observable.observeClass(Ext.Component);
\r
303 Ext.Component.on('render', function(cmp){
\r
307 Ext.override(Ext.Component, {
\r
308 initFocus: Ext.emptyFn,
\r
309 initARIA: Ext.emptyFn
\r
312 Ext.override(Ext.Container, {
\r
317 initFocus: function(){
\r
318 if (!this.fi && !this.noFocus) {
\r
319 this.fi = new Ext.a11y.Focusable(this);
\r
321 this.mon(this.fi, {
\r
322 focus: this.onFocus,
\r
325 enter: this.onEnter,
\r
331 this.isFocusable = false;
\r
334 this.on('show', function(){
\r
335 this.isFocusable = true;
\r
337 this.on('hide', function(){
\r
338 this.isFocusable = false;
\r
351 var eitem = this.getEnterItem();
\r
357 onFocus: Ext.emptyFn,
\r
358 onBlur: Ext.emptyFn,
\r
360 onTab: function(e, t, tf){
\r
361 var rf = tf.relayTo || tf;
\r
362 if (rf.component && rf.component !== this) {
\r
364 var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
\r
369 onEnter: function(e, t, tf){
\r
370 // check to see if enter is pressed while "on" the panel
\r
371 if (tf.component && tf.component === this) {
\r
375 e.stopPropagation();
\r
378 onEsc: function(e, t){
\r
379 e.preventDefault();
\r
381 // check to see if esc is pressed while "inside" the panel
\r
382 // or while "on" the panel
\r
383 if (t === this.el.dom) {
\r
384 // "on" the panel, check if this panel has an owner panel and focus that
\r
385 // we dont stop the event in this case so that this same check will be
\r
386 // done for this ownerCt
\r
387 if (this.ownerCt) {
\r
388 this.ownerCt.focus();
\r
392 // we were inside the panel when esc was pressed,
\r
393 // so go back "on" the panel
\r
394 if (this.ownerCt && this.ownerCt.isFocusable) {
\r
395 var si = this.ownerCt.getFocusItems();
\r
397 if (si && si.getCount() > 1) {
\r
405 getFocusItems: function(){
\r
406 return this.items &&
\r
407 this.items.filterBy(function(o){
\r
408 return o.isFocusable;
\r
413 getEnterItem: function(){
\r
414 var ci = this.getFocusItems(), length = ci ? ci.getCount() : 0;
\r
416 if (length === 1) {
\r
417 return ci.first().getEnterItem && ci.first().getEnterItem() || ci.first();
\r
419 else if (length > 1) {
\r
424 getNextFocus: function(current){
\r
425 var items = this.getFocusItems(), next = current, i = items.indexOf(current), length = items.getCount();
\r
427 if (i === length - 1) {
\r
428 next = items.first();
\r
431 next = items.get(i + 1);
\r
436 getPreviousFocus: function(current){
\r
437 var items = this.getFocusItems(), prev = current, i = items.indexOf(current), length = items.getCount();
\r
440 prev = items.last();
\r
443 prev = items.get(i - 1);
\r
448 getFocusable : function() {
\r
453 Ext.override(Ext.Panel, {
\r
455 * @cfg {Boolean} enableTabbing <tt>true</tt> to enable tabbing. Default is <tt>false</tt>.
\r
457 getFocusItems: function(){
\r
458 // items gets all the items inside the body
\r
459 var items = Ext.Panel.superclass.getFocusItems.call(this), bodyFocus = null;
\r
462 items = new Ext.util.MixedCollection();
\r
463 this.bodyFocus = this.bodyFocus || new Ext.a11y.FocusItem(this.body, this.enableTabbing);
\r
464 items.add('body', this.bodyFocus);
\r
466 // but panels can also have tbar, bbar, fbar
\r
467 if (this.tbar && this.topToolbar) {
\r
468 items.insert(0, this.topToolbar);
\r
470 if (this.bbar && this.bottomToolbar) {
\r
471 items.add(this.bottomToolbar);
\r
474 items.add(this.fbar);
\r
481 Ext.override(Ext.TabPanel, {
\r
483 initFocus: function(){
\r
484 Ext.TabPanel.superclass.initFocus.call(this);
\r
485 this.mon(this.fi, {
\r
487 right: this.onRight,
\r
492 onLeft: function(e){
\r
493 if (!this.activeTab) {
\r
497 var prev = this.items.itemAt(this.items.indexOf(this.activeTab) - 1);
\r
499 this.setActiveTab(prev);
\r
504 onRight: function(e){
\r
505 if (!this.activeTab) {
\r
509 var next = this.items.itemAt(this.items.indexOf(this.activeTab) + 1);
\r
511 this.setActiveTab(next);
\r
517 Ext.override(Ext.tree.TreeNodeUI, {
\r
520 this.node.getOwnerTree().bodyFocus.focus();
\r
524 Ext.override(Ext.tree.TreePanel, {
\r
526 afterRender : function(){
\r
527 Ext.tree.TreePanel.superclass.afterRender.call(this);
\r
528 this.root.render();
\r
529 if(!this.rootVisible){
\r
530 this.root.renderChildren();
\r
532 this.bodyFocus = new Ext.a11y.FocusItem(this.body.down('.x-tree-root-ct'));
\r
533 this.bodyFocus.fi.setFrameEl(this.body);
\r
537 Ext.override(Ext.grid.GridPanel, {
\r
538 initFocus: function(){
\r
539 Ext.grid.GridPanel.superclass.initFocus.call(this);
\r
540 this.bodyFocus = new Ext.a11y.FocusItem(this.view.focusEl);
\r
541 this.bodyFocus.fi.setFrameEl(this.body);
\r
545 Ext.override(Ext.Button, {
\r
549 initFocus: function(){
\r
550 Ext.Button.superclass.initFocus.call(this);
\r
551 this.fi = this.fi || new Ext.a11y.Focusable(this.btnEl, null, null, this.el);
\r
552 this.fi.setComponent(this);
\r
554 this.mon(this.fi, {
\r
555 focus: this.onFocus,
\r
561 this.mon(this.fi, 'down', this.showMenu, this);
\r
562 this.on('menuhide', this.focus, this);
\r
566 this.isFocusable = false;
\r
569 this.on('show', function(){
\r
570 this.isFocusable = true;
\r
572 this.on('hide', function(){
\r
573 this.isFocusable = false;
\r
585 onFocus: function(){
\r
586 if (!this.disabled) {
\r
587 this.el.addClass("x-btn-focus");
\r
591 onBlur: function(){
\r
592 this.el.removeClass("x-btn-focus");
\r
596 Ext.override(Ext.Toolbar, {
\r
597 initFocus: function(){
\r
598 Ext.Toolbar.superclass.initFocus.call(this);
\r
599 this.mon(this.fi, {
\r
601 right: this.onRight,
\r
605 this.on('focus', this.onButtonFocus, this, {
\r
611 var item = Ext.Toolbar.superclass.add.apply(this, arguments);
\r
612 if(!item || !item.events) {
\r
615 if (item.rendered && item.fi !== undefined) {
\r
616 item.fi.setRelayTo(this.el);
\r
617 this.relayEvents(item.fi, ['focus']);
\r
620 item.on('render', function(){
\r
621 if (item.fi !== undefined) {
\r
622 item.fi.setRelayTo(this.el);
\r
623 this.relayEvents(item.fi, ['focus']);
\r
632 onFocus: function(){
\r
633 var items = this.getFocusItems();
\r
634 if (items && items.getCount() > 0) {
\r
635 if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
\r
636 this.lastFocus.focus();
\r
639 items.first().focus();
\r
644 onButtonFocus: function(e, t, tf){
\r
645 this.lastFocus = tf.component || null;
\r
648 onLeft: function(e, t, tf){
\r
650 this.getPreviousFocus(tf.component).focus();
\r
653 onRight: function(e, t, tf){
\r
655 this.getNextFocus(tf.component).focus();
\r
658 getEnterItem: Ext.emptyFn,
\r
659 onTab: Ext.emptyFn,
\r
663 Ext.override(Ext.menu.BaseItem, {
\r
664 initFocus: function(){
\r
665 this.fi = new Ext.a11y.Focusable(this, this.parentMenu && this.parentMenu.el || null, true);
\r
669 Ext.override(Ext.menu.Menu, {
\r
670 initFocus: function(){
\r
671 this.fi = new Ext.a11y.Focusable(this);
\r
672 this.focusEl = this.fi;
\r
676 Ext.a11y.WindowMgr = new Ext.WindowGroup();
\r
678 Ext.apply(Ext.WindowMgr, {
\r
679 bringToFront: function(win){
\r
680 Ext.a11y.WindowMgr.bringToFront.call(this, win);
\r
690 Ext.override(Ext.Window, {
\r
691 initFocus: function(){
\r
692 Ext.Window.superclass.initFocus.call(this);
\r
693 this.on('beforehide', function(){
\r
694 Ext.a11y.RelayFrame.unframe();
\r
695 Ext.a11y.FocusFrame.unframe();
\r
700 Ext.override(Ext.form.Field, {
\r
704 initFocus: function(){
\r
705 this.fi = this.fi || new Ext.a11y.Focusable(this, null, true);
\r
707 Ext.form.Field.superclass.initFocus.call(this);
\r
710 this.isFocusable = false;
\r
713 this.on('show', function(){
\r
714 this.isFocusable = true;
\r
716 this.on('hide', function(){
\r
717 this.isFocusable = false;
\r
722 Ext.override(Ext.FormPanel, {
\r
723 initFocus: function(){
\r
724 Ext.FormPanel.superclass.initFocus.call(this);
\r
725 this.on('focus', this.onFieldFocus, this, {
\r
731 createForm: function(){
\r
732 delete this.initialConfig.listeners;
\r
733 var form = new Ext.form.BasicForm(null, this.initialConfig);
\r
734 form.afterMethod('add', this.formItemAdd, this);
\r
738 formItemAdd: function(item){
\r
739 item.on('render', function(field){
\r
740 field.fi.setRelayTo(this.el);
\r
741 this.relayEvents(field.fi, ['focus']);
\r
747 onFocus: function(){
\r
748 var items = this.getFocusItems();
\r
749 if (items && items.getCount() > 0) {
\r
750 if (this.lastFocus && items.indexOf(this.lastFocus) !== -1) {
\r
751 this.lastFocus.focus();
\r
754 items.first().focus();
\r
759 onFieldFocus: function(e, t, tf){
\r
760 this.lastFocus = tf.component || null;
\r
763 onTab: function(e, t, tf){
\r
764 if (tf.relayTo.component === this) {
\r
765 var item = e.shiftKey ? this.getPreviousFocus(tf.component) : this.getNextFocus(tf.component);
\r
773 Ext.FormPanel.superclass.onTab.apply(this, arguments);
\r
776 getNextFocus: function(current){
\r
777 var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
\r
779 return (i < length - 1) ? items.get(i + 1) : false;
\r
782 getPreviousFocus: function(current){
\r
783 var items = this.getFocusItems(), i = items.indexOf(current), length = items.getCount();
\r
785 return (i > 0) ? items.get(i - 1) : false;
\r
789 Ext.override(Ext.Viewport, {
\r
790 initFocus: function(){
\r
791 Ext.Viewport.superclass.initFocus.apply(this);
\r
792 this.mon(Ext.get(document), 'focus', this.focus, this);
\r
793 this.mon(Ext.get(document), 'blur', this.blur, this);
\r
794 this.fi.setNoFrame(true);
\r
797 onTab: function(e, t, tf, f){
\r
801 items = this.getFocusItems();
\r
802 if (items && items.getCount() > 0) {
\r
803 items.first().focus();
\r
807 var rf = tf.relayTo || tf;
\r
808 var item = e.shiftKey ? this.getPreviousFocus(rf.component) : this.getNextFocus(rf.component);
\r