| 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276 | 1×
1×
1×
1×
208×
208×
208×
208×
208×
1×
40×
40×
40×
40×
40×
40×
40×
8×
8×
8×
2×
2×
3×
3×
2×
2×
2×
14×
14×
2×
2×
1×
1×
1×
1×
1×
1×
1×
1×
2×
7×
7×
2×
1×
2×
2×
7×
3×
1×
7×
1×
1×
7×
2×
2×
2×
2×
1×
3×
1×
1×
1×
1×
1×
3×
3×
3×
3×
3×
3×
3×
10×
1×
2×
2×
1×
1×
1×
1×
8×
2×
1×
1×
1×
1×
1×
1×
1×
2×
6×
2×
2×
2×
8×
4×
4×
2×
2×
4×
4×
4×
4×
1×
4×
1×
1×
1×
1×
1×
1×
1×
45×
2796×
45×
45×
361×
361×
1×
14×
2×
14×
14×
1×
14×
4×
14×
1×
14×
2×
2×
2×
14×
6×
6×
6×
5×
20×
6×
6×
6×
14×
1×
1×
1×
1×
1×
48×
48×
48×
108×
48×
48×
225×
48×
48×
981×
1×
206×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../base/css-constant"], function (require, exports, ej2_base_1, cls) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Keyboard = (function () {
function Keyboard(parent) {
this.keyConfigs = {
firstCardSelection: '36',
lastCardSelection: '35',
upArrow: '38',
downArrow: '40',
rightArrow: '39',
leftArrow: '37',
multiSelectionEnter: 'ctrl+13',
multiSelectionSpace: 'ctrl+32',
multiSelectionByUpArrow: 'shift+38',
multiSelectionByDownArrow: 'shift+40',
shiftTab: 'shift+tab',
enter: '13',
tab: 'tab',
delete: '46',
escape: '27',
space: '32'
};
this.parent = parent;
this.parent.element.tabIndex = this.parent.element.tabIndex === -1 ? 0 : this.parent.element.tabIndex;
this.keyboardModule = new ej2_base_1.KeyboardEvents(this.parent.element, {
keyAction: this.keyActionHandler.bind(this),
keyConfigs: this.keyConfigs,
eventName: 'keydown'
});
this.multiSelection = false;
}
Keyboard.prototype.keyActionHandler = function (e) {
var _this = this;
var selectedCard = this.parent.element.querySelectorAll("." + cls.CARD_CLASS + "." + cls.CARD_SELECTION_CLASS).item(0);
Iif (!selectedCard && !ej2_base_1.closest(document.activeElement, "." + cls.ROOT_CLASS)) {
return;
}
var contentCell;
var selectedCards;
var selectedCardsData = [];
switch (e.action) {
case 'upArrow':
case 'downArrow':
case 'multiSelectionByUpArrow':
case 'multiSelectionByDownArrow':
e.preventDefault();
this.processUpDownArrow(e.action, selectedCard);
break;
case 'rightArrow':
case 'leftArrow':
this.processLeftRightArrow(e);
break;
case 'firstCardSelection':
case 'lastCardSelection':
this.processCardSelection(e.action, selectedCard);
break;
case 'multiSelectionEnter':
case 'multiSelectionSpace':
Eif (document.activeElement) {
this.parent.actionModule.cardSelection(document.activeElement, true, false);
}
break;
case 'space':
case 'enter':
this.processEnter(e, selectedCard);
break;
case 'escape':
Eif (document.activeElement.classList.contains(cls.CARD_CLASS) ||
document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
if (document.activeElement.classList.contains(cls.CARD_SELECTION_CLASS)) {
ej2_base_1.removeClass([document.activeElement], cls.CARD_SELECTION_CLASS);
document.activeElement.focus();
}
else {
var ele = ej2_base_1.closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
var cards = [].slice.call(ele.querySelectorAll('.' + cls.CARD_CLASS));
ej2_base_1.removeClass(cards, cls.CARD_SELECTION_CLASS);
ele.focus();
this.cardTabIndexRemove();
this.addRemoveTabIndex('Add');
}
}
break;
case 'tab':
case 'shiftTab':
contentCell = ej2_base_1.closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
if (document.activeElement.classList.contains(cls.CARD_CLASS)) {
if (!document.activeElement.nextElementSibling && e.action === 'tab') {
e.preventDefault();
}
Eif (!document.activeElement.previousElementSibling && contentCell.querySelector('.' + cls.SHOW_ADD_BUTTON)
&& e.action === 'tab') {
ej2_base_1.addClass([contentCell.querySelector('.' + cls.SHOW_ADD_BUTTON)], cls.SHOW_ADD_FOCUS);
}
}
if (document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
if ((!contentCell.querySelector('.' + cls.CARD_CLASS) && e.action === 'tab') || e.action === 'shiftTab') {
e.preventDefault();
}
}
if (document.activeElement.classList.contains(cls.ROOT_CLASS)) {
this.cardTabIndexRemove();
this.parent.keyboardModule.addRemoveTabIndex('Add');
}
break;
case 'delete':
selectedCards = [].slice.call(this.parent.element.querySelectorAll("." + cls.CARD_CLASS + "." + cls.CARD_SELECTION_CLASS));
selectedCards.forEach(function (selected) { selectedCardsData.push(_this.parent.getCardDetails(selected)); });
this.parent.crudModule.deleteCard(selectedCardsData);
break;
}
};
Keyboard.prototype.processCardSelection = function (action, selectedCard) {
if (selectedCard) {
ej2_base_1.removeClass([selectedCard], cls.CARD_SELECTION_CLASS);
Iif (this.parent.enableVirtualization) {
this.parent.virtualLayoutModule.disableAttributeSelection(selectedCard);
}
else {
this.parent.layoutModule.disableAttributeSelection(selectedCard);
}
var selection = this.parent.actionModule.selectionArray;
selection.splice(selection.indexOf(selectedCard.getAttribute('data-id')), 1);
}
this.cardTabIndexRemove();
var cards = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CARD_CLASS));
var element = action === 'firstCardSelection' ? cards[0] : cards[cards.length - 1];
this.parent.actionModule.cardSelection(element, false, false);
this.addRemoveTabIndex('Remove');
element.focus();
var card = [].slice.call(ej2_base_1.closest(element, '.' + cls.CONTENT_CELLS_CLASS).querySelectorAll('.' + cls.CARD_CLASS));
card.forEach(function (element) { element.setAttribute('tabindex', '0'); });
};
Keyboard.prototype.processLeftRightArrow = function (e) {
Eif (document.activeElement.classList.contains(cls.CONTENT_CELLS_CLASS)) {
if (e.action === 'rightArrow' && document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus();
}
else Eif (e.action === 'leftArrow' && document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus();
}
}
};
Keyboard.prototype.processUpDownArrow = function (action, selectedCard) {
if (action === 'upArrow' && document.activeElement) {
if (document.activeElement.classList.contains(cls.CARD_CLASS) && document.activeElement.previousElementSibling) {
document.activeElement.previousElementSibling.focus();
}
else Eif (document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
document.activeElement.setAttribute('tabindex', '-1');
ej2_base_1.removeClass([document.activeElement], cls.SHOW_ADD_FOCUS);
var cell = ej2_base_1.closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
Eif (cell.querySelectorAll('.' + cls.CARD_CLASS).length > 0) {
[].slice.call(cell.querySelectorAll('.' + cls.CARD_CLASS)).slice(-1)[0].focus();
}
}
this.removeSelection();
}
else if (action === 'downArrow' && document.activeElement &&
document.activeElement.classList.contains(cls.CARD_CLASS)) {
Eif (document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus();
}
else if (ej2_base_1.closest(document.activeElement, '.' + cls.CARD_WRAPPER_CLASS).nextElementSibling) {
var ele = ej2_base_1.closest(document.activeElement, '.' + cls.CARD_WRAPPER_CLASS).nextElementSibling;
ele.setAttribute('tabindex', '0');
ej2_base_1.addClass([ele], cls.SHOW_ADD_FOCUS);
ele.focus();
}
this.removeSelection();
}
if ((action === 'multiSelectionByUpArrow' || action === 'multiSelectionByDownArrow')
&& selectedCard && this.parent.cardSettings.selectionType === 'Multiple') {
var card = void 0;
if (action === 'multiSelectionByUpArrow') {
card = document.activeElement.previousElementSibling;
}
else {
card = document.activeElement.nextElementSibling;
}
Eif (card) {
this.parent.actionModule.cardSelection(card, false, true);
card.focus();
this.multiSelection = true;
}
}
};
Keyboard.prototype.removeSelection = function () {
if (this.multiSelection) {
var cards = this.parent.getSelectedCards();
Eif (cards.length > 0) {
ej2_base_1.removeClass(cards, cls.CARD_SELECTION_CLASS);
Iif (this.parent.enableVirtualization) {
this.parent.virtualLayoutModule.disableAttributeSelection(cards);
}
else {
this.parent.layoutModule.disableAttributeSelection(cards);
}
}
this.multiSelection = false;
}
};
Keyboard.prototype.cardTabIndexRemove = function () {
var cards = [].slice.call(this.parent.element.querySelectorAll('.' + cls.CARD_CLASS));
cards.forEach(function (card) { card.setAttribute('tabindex', '-1'); });
var addButton = [].slice.call(this.parent.element.querySelectorAll('.' + cls.SHOW_ADD_BUTTON));
addButton.forEach(function (add) {
add.setAttribute('tabindex', '-1');
ej2_base_1.removeClass([add], cls.SHOW_ADD_FOCUS);
});
};
Keyboard.prototype.processEnter = function (e, selectedCard) {
if (e.action === 'space') {
e.preventDefault();
}
var element = (e.target);
if (element.classList.contains(cls.HEADER_ICON_CLASS)) {
this.parent.actionModule.columnExpandCollapse(e);
}
if (element.classList.contains(cls.SWIMLANE_ROW_EXPAND_CLASS) || element.classList.contains(cls.SWIMLANE_ROW_COLLAPSE_CLASS)) {
this.parent.actionModule.rowExpandCollapse(e);
}
if (document.activeElement.classList.contains(cls.CARD_CLASS)) {
this.parent.actionModule.cardSelection(document.activeElement, false, false);
}
if (document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
Eif (!this.parent.dialogModule.dialogObj) {
this.parent.actionModule.addButtonClick(document.activeElement);
}
document.activeElement.focus();
}
if (element.classList.contains(cls.CONTENT_CELLS_CLASS)) {
var cards = [].slice.call(element.querySelectorAll('.' + cls.CARD_CLASS));
this.addRemoveTabIndex('Remove');
if (cards.length > 0) {
element.querySelector('.' + cls.CARD_CLASS).focus();
cards.forEach(function (element) { element.setAttribute('tabindex', '0'); });
}
Eif (element.querySelector('.' + cls.SHOW_ADD_BUTTON)) {
element.querySelector('.' + cls.SHOW_ADD_BUTTON).setAttribute('tabindex', '0');
element.querySelector('.' + cls.SHOW_ADD_BUTTON).focus();
}
}
if (selectedCard === document.activeElement && this.parent.element.querySelectorAll('.' + cls.CARD_SELECTION_CLASS).length === 1) {
this.parent.activeCardData = {
data: this.parent.getCardDetails(selectedCard), element: selectedCard
};
Eif (!this.parent.dialogModule.dialogObj) {
this.parent.dialogModule.openDialog('Edit', this.parent.getCardDetails(selectedCard));
}
selectedCard.focus();
}
};
Keyboard.prototype.addRemoveTabIndex = function (action) {
var attribute = action === 'Add' ? '0' : '-1';
var headerIcon = [].slice.call(this.parent.element.querySelectorAll('.' + cls.HEADER_ICON_CLASS));
if (headerIcon.length > 0) {
headerIcon.forEach(function (element) { element.setAttribute('tabindex', attribute); });
}
var swimlaneIcon = [].slice.call(this.parent.element.querySelectorAll('.' + cls.SWIMLANE_ROW_EXPAND_CLASS));
if (swimlaneIcon.length > 0) {
swimlaneIcon.forEach(function (element) { element.setAttribute('tabindex', attribute); });
}
var className = '.' + cls.CONTENT_ROW_CLASS + ':not(.' + cls.SWIMLANE_ROW_CLASS + ') .' + cls.CONTENT_CELLS_CLASS;
var contentCell = [].slice.call(this.parent.element.querySelectorAll(className));
contentCell.forEach(function (element) { element.setAttribute('tabindex', attribute); });
};
Keyboard.prototype.destroy = function () {
this.keyboardModule.destroy();
};
return Keyboard;
}());
exports.Keyboard = Keyboard;
});
|