@syncfusion/ej2-kanban
Version:
The Kanban board is an efficient way to visualize the workflow at each stage along its path to completion. The most important features available are Swim lane, filtering, and editing.
283 lines (282 loc) • 13.7 kB
JavaScript
/* eslint-disable @typescript-eslint/no-explicit-any */
import { KeyboardEvents, addClass, removeClass, closest } from '@syncfusion/ej2-base';
import * as cls from '../base/css-constant';
/**
* Kanban keyboard module
*/
var Keyboard = /** @class */ (function () {
/**
* Constructor for keyboard module
*
* @param {Kanban} parent Accepts the kanban instance
*/
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 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);
if (!selectedCard && !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':
if (document.activeElement) {
this.parent.actionModule.cardSelection(document.activeElement, true, false);
}
break;
case 'space':
case 'enter':
this.processEnter(e, selectedCard);
break;
case 'escape':
if (document.activeElement.classList.contains(cls.CARD_CLASS) ||
document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
if (document.activeElement.classList.contains(cls.CARD_SELECTION_CLASS)) {
removeClass([document.activeElement], cls.CARD_SELECTION_CLASS);
document.activeElement.focus();
}
else {
var ele = closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
var cards = [].slice.call(ele.querySelectorAll('.' + cls.CARD_CLASS));
removeClass(cards, cls.CARD_SELECTION_CLASS);
ele.focus();
this.cardTabIndexRemove();
this.addRemoveTabIndex('Add');
}
}
break;
case 'tab':
case 'shiftTab':
contentCell = closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
if (document.activeElement.classList.contains(cls.CARD_CLASS)) {
if (!document.activeElement.nextElementSibling && e.action === 'tab') {
e.preventDefault();
}
if (!document.activeElement.previousElementSibling && contentCell.querySelector('.' + cls.SHOW_ADD_BUTTON)
&& e.action === 'tab') {
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) {
removeClass([selectedCard], cls.CARD_SELECTION_CLASS);
if (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(closest(element, '.' + cls.CONTENT_CELLS_CLASS).querySelectorAll('.' + cls.CARD_CLASS));
card.forEach(function (element) { element.setAttribute('tabindex', '0'); });
};
Keyboard.prototype.processLeftRightArrow = function (e) {
if (document.activeElement.classList.contains(cls.CONTENT_CELLS_CLASS)) {
if (e.action === 'rightArrow' && document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus();
}
else if (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 if (document.activeElement.classList.contains(cls.SHOW_ADD_BUTTON)) {
document.activeElement.setAttribute('tabindex', '-1');
removeClass([document.activeElement], cls.SHOW_ADD_FOCUS);
var cell = closest(document.activeElement, '.' + cls.CONTENT_CELLS_CLASS);
if (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)) {
if (document.activeElement.nextElementSibling) {
document.activeElement.nextElementSibling.focus();
}
else if (closest(document.activeElement, '.' + cls.CARD_WRAPPER_CLASS).nextElementSibling) {
var ele = closest(document.activeElement, '.' + cls.CARD_WRAPPER_CLASS).nextElementSibling;
ele.setAttribute('tabindex', '0');
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;
}
if (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();
if (cards.length > 0) {
removeClass(cards, cls.CARD_SELECTION_CLASS);
if (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');
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)) {
if (!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'); });
}
if (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
};
if (!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;
}());
export { Keyboard };