| 1 | define(["dojo/_base/array", "dojo/_base/lang", "dojo/_base/event", "dojo/_base/declare", "dojo/on", "dojo/keys", "dojo/dom-attr", |
|---|
| 2 | "./_utils", "dijit/_FocusMixin"], |
|---|
| 3 | function(arr, lang, event, declare, on, keys, domAttr, utils, _FocusMixin){ |
|---|
| 4 | |
|---|
| 5 | return declare("dojox.treemap.Keyboard", _FocusMixin, { |
|---|
| 6 | // summary: |
|---|
| 7 | // Specializes TreeMap to support keyboard navigation and accessibility. |
|---|
| 8 | |
|---|
| 9 | // tabIndex: String |
|---|
| 10 | // Order fields are traversed when user hits the tab key |
|---|
| 11 | tabIndex: "0", |
|---|
| 12 | _setTabIndexAttr: "domNode", |
|---|
| 13 | |
|---|
| 14 | constructor: function(){ |
|---|
| 15 | }, |
|---|
| 16 | |
|---|
| 17 | postCreate: function(){ |
|---|
| 18 | this.inherited(arguments); |
|---|
| 19 | this.own(on(this.domNode, "keydown", lang.hitch(this, this._onKeyDown))); |
|---|
| 20 | this.own(on(this.domNode, "mousedown", lang.hitch(this, this._onMouseDown))); |
|---|
| 21 | }, |
|---|
| 22 | |
|---|
| 23 | createRenderer: function(item, level, kind){ |
|---|
| 24 | var renderer = this.inherited(arguments); |
|---|
| 25 | // on Firefox we need a tabindex on sub divs to let the keyboard event be dispatched |
|---|
| 26 | // put -1 so that it is not tablable |
|---|
| 27 | domAttr.set(renderer, "tabindex", "-1"); |
|---|
| 28 | return renderer; |
|---|
| 29 | }, |
|---|
| 30 | |
|---|
| 31 | _onMouseDown: function(e){ |
|---|
| 32 | this.domNode.focus(); |
|---|
| 33 | }, |
|---|
| 34 | |
|---|
| 35 | _onKeyDown: function(e){ |
|---|
| 36 | var selected = this.get("selectedItem"); |
|---|
| 37 | if(!selected){ |
|---|
| 38 | // nothing selected selected we can't navigate |
|---|
| 39 | return; |
|---|
| 40 | } |
|---|
| 41 | var renderer = this.itemToRenderer[this.getIdentity(selected)]; |
|---|
| 42 | var parent = renderer.parentItem; |
|---|
| 43 | var children, childrenI, selectedI; |
|---|
| 44 | // we also need items to be sorted out |
|---|
| 45 | if(e.keyCode != keys.UP_ARROW && e.keyCode != keys.NUMPAD_MINUS && |
|---|
| 46 | e.keyCode != keys.NUMPAD_PLUS){ |
|---|
| 47 | children = (e.keyCode == keys.DOWN_ARROW)?selected.children:parent.children; |
|---|
| 48 | if(children){ |
|---|
| 49 | childrenI = utils.initElements(children, lang.hitch(this, |
|---|
| 50 | this._computeAreaForItem)).elements; |
|---|
| 51 | selectedI = childrenI[arr.indexOf(children, selected)]; |
|---|
| 52 | childrenI.sort(function(a, b){ |
|---|
| 53 | return b.size - a.size; |
|---|
| 54 | }); |
|---|
| 55 | }else{ |
|---|
| 56 | return; |
|---|
| 57 | } |
|---|
| 58 | } |
|---|
| 59 | var newSelected; |
|---|
| 60 | switch(e.keyCode){ |
|---|
| 61 | case keys.LEFT_ARROW: |
|---|
| 62 | newSelected = children[childrenI[Math.max(0, arr.indexOf(childrenI, selectedI)-1)].index]; |
|---|
| 63 | break; |
|---|
| 64 | case keys.RIGHT_ARROW: |
|---|
| 65 | newSelected = children[childrenI[Math.min(childrenI.length-1, arr.indexOf(childrenI, selectedI)+1)].index]; |
|---|
| 66 | break; |
|---|
| 67 | case keys.DOWN_ARROW: |
|---|
| 68 | newSelected = children[childrenI[0].index]; |
|---|
| 69 | break; |
|---|
| 70 | case keys.UP_ARROW: |
|---|
| 71 | newSelected = parent; |
|---|
| 72 | break; |
|---|
| 73 | // TODO |
|---|
| 74 | //case "+": |
|---|
| 75 | case keys.NUMPAD_PLUS: |
|---|
| 76 | if(!this._isLeaf(selected) && this.drillDown){ |
|---|
| 77 | this.drillDown(renderer); |
|---|
| 78 | event.stop(e); |
|---|
| 79 | } |
|---|
| 80 | break; |
|---|
| 81 | // TODO |
|---|
| 82 | //case "-": |
|---|
| 83 | case keys.NUMPAD_MINUS: |
|---|
| 84 | if(!this._isLeaf(selected) && this.drillUp){ |
|---|
| 85 | this.drillUp(renderer); |
|---|
| 86 | event.stop(e); |
|---|
| 87 | } |
|---|
| 88 | break; |
|---|
| 89 | } |
|---|
| 90 | if(newSelected){ |
|---|
| 91 | if(!this._isRoot(newSelected)){ |
|---|
| 92 | this.set("selectedItem", newSelected); |
|---|
| 93 | event.stop(e); |
|---|
| 94 | } |
|---|
| 95 | } |
|---|
| 96 | } |
|---|
| 97 | }); |
|---|
| 98 | }); |
|---|
