all files / actions/ keyboard.js

96.49% Statements 165/171
87.79% Branches 115/131
100% Functions 20/20
96.34% Lines 158/164
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   88×                                   88× 88× 88×         88×   40× 40× 40×     40× 40× 40× 40×                           14× 14×                                       10×                                                         40× 2496× 40× 40× 361× 361×     14×   14× 14×   14×   14×   14×     14× 20×       14×           44× 44× 44× 108×   44× 44× 225×   44× 44× 961×   87×        
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);
                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);
                    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;
});