keynav.js
2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
Ext.require([
'Ext.XTemplate',
'Ext.util.KeyNav',
'Ext.fx.*'
]);
Ext.define('Board', {
constructor: function(size, activeCls){
this.size = size;
this.activeCls = activeCls;
},
render: function(el){
el = Ext.get(el);
var tpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="square">{.}</div>',
'<tpl if="xindex % ' + this.size + ' === 0"><div class="x-clear"></div></tpl>',
'</tpl>'),
data = [],
i = 0,
max = this.size * this.size;
for (; i < max; ++i) {
data.push(i + 1);
}
tpl.append(el, data);
this.cells = el.select('.square');
},
getIndex: function(xy){
return this.size * xy[0] + xy[1];
},
constrain: function(x, y) {
x = Ext.Number.constrain(x, 0, this.size - 1);
y = Ext.Number.constrain(y, 0, this.size - 1);
return [x, y];
},
setActive: function(x, y) {
var xy = this.constrain(x, y),
cell = this.cells.item(this.getIndex(xy));
cell.radioCls(this.activeCls);
this.active = xy;
},
setActiveCls: function(activeCls){
this.cells.removeCls(this.activeCls);
this.activeCls = activeCls;
var active = this.active;
this.setActive(active[0], active[1]);
},
highlightActive: function(){
var cell = this.cells.item(this.getIndex(this.active));
Ext.create('Ext.fx.Anim', {
target: cell,
duration: 1000,
alternate: true,
iterations: 2,
to: {
backgroundColor: '#FFFF00'
},
callback: function(){
cell.setStyle('background-color', '');
}
});
},
moveUp: function(){
var active = this.active;
this.setActive(active[0] - 1, active[1]);
},
moveDown: function(){
var active = this.active;
this.setActive(active[0] + 1, active[1]);
},
moveLeft: function(){
var active = this.active;
this.setActive(active[0], active[1] - 1);
},
moveRight: function(){
var active = this.active;
this.setActive(active[0], active[1] + 1);
}
});
Ext.onReady(function(){
var cls = 'active-green';
var board = new Board(4, cls);
board.render('board');
board.setActive(0, 0);
var nav = Ext.create('Ext.util.KeyNav', Ext.getDoc(), {
scope: board,
left: board.moveLeft,
up: board.moveUp,
right: board.moveRight,
down: board.moveDown,
space: board.highlightActive,
home: function(){
cls = Ext.String.toggle(cls, 'active-green', 'active-red');
board.setActiveCls(cls);
}
});
});