UNPKG

@syncfusion/ej2-schedule

Version:

Flexible scheduling library with more built-in features and enhanced customization options similar to outlook and google calendar, allowing the users to plan and manage their appointments with efficient data-binding support.

954 lines 77.4 kB
var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; /* eslint-disable @typescript-eslint/no-explicit-any */ import { KeyboardEvents, closest, EventHandler, extend, Browser } from '@syncfusion/ej2-base'; import { isNullOrUndefined, addClass, removeClass } from '@syncfusion/ej2-base'; import * as event from '../base/constant'; import * as util from '../base/util'; import * as cls from '../base/css-constant'; import { cellSelect } from '../base/constant'; /** * Keyboard interaction */ var KeyboardInteraction = /** @class */ (function () { function KeyboardInteraction(parent) { this.selectedCells = []; this.isCutContentPasted = false; this.isCutAction = false; this.keyConfigs = { downArrow: 'downarrow', upArrow: 'uparrow', rightArrow: 'rightarrow', leftArrow: 'leftarrow', shiftDownArrow: 'shift+downarrow', shiftUpArrow: 'shift+uparrow', shiftRightArrow: 'shift+rightarrow', shiftLeftArrow: 'shift+leftarrow', ctrlLeftArrow: 'ctrl+leftarrow', ctrlRightArrow: 'ctrl+rightarrow', altOne: 'alt+1', altTwo: 'alt+2', altThree: 'alt+3', altFour: 'alt+4', altFive: 'alt+5', altSix: 'alt+6', altSeven: 'alt+7', altEight: 'alt+8', altNine: 'alt+9', enter: 'enter', escape: 'escape', delete: 'delete', backspace: 'backspace', home: 'home', pageUp: 'pageup', pageDown: 'pagedown', tab: 'tab', shiftTab: 'shift+tab', ctrlShiftUpArrow: 'ctrl+shift+uparrow', ctrlShiftDownArrow: 'ctrl+shift+downarrow', ctrlShiftLeftArrow: 'ctrl+shift+leftarrow', ctrlShiftRightArrow: 'ctrl+shift+rightarrow', shiftAltY: 'shift+alt+y', shiftAltN: 'shift+alt+n', cut: 'ctrl+x', copy: 'ctrl+c', cmdCut: 'cmd+x', cmdCopy: 'cmd+c' }; 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.addEventListener(); this.createClipboardElement(); } KeyboardInteraction.prototype.keyActionHandler = function (e) { var target = e.target; if (e.action === 'home' && target && ['INPUT', 'TEXTAREA', 'SELECT'].indexOf(target.tagName) > -1 && target.closest('.e-quick-popup-wrapper')) { return; } switch (e.action) { case 'downArrow': case 'shiftDownArrow': this.processDown(e, e.shiftKey); break; case 'upArrow': case 'shiftUpArrow': this.processUp(e, e.shiftKey); break; case 'leftArrow': case 'shiftLeftArrow': this.processLeft(e, e.shiftKey); break; case 'rightArrow': case 'shiftRightArrow': this.processRight(e, e.shiftKey); break; case 'ctrlLeftArrow': this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), e); if (this.parent.headerModule) { this.parent.headerModule.element.querySelector('.e-prev button').focus(); } break; case 'ctrlRightArrow': this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e); if (this.parent.headerModule) { this.parent.headerModule.element.querySelector('.e-next button').focus(); } break; case 'altOne': case 'altTwo': case 'altThree': case 'altFour': case 'altFive': case 'altSix': case 'altSeven': case 'altEight': case 'altNine': this.processViewNavigation(e); break; case 'enter': this.processEnter(e); break; case 'home': this.focusFirstCell(); break; case 'tab': case 'shiftTab': this.processTab(e, e.shiftKey); break; case 'delete': case 'backspace': this.processDelete(e); break; case 'ctrlShiftUpArrow': case 'ctrlShiftDownArrow': case 'ctrlShiftLeftArrow': case 'ctrlShiftRightArrow': this.processCtrlShiftNavigationArrows(e); break; case 'escape': this.processEscape(e); break; case 'fTwelve': if (this.parent.allowInline && this.parent.inlineModule) { e.preventDefault(); this.processFTwelve(e); } break; case 'shiftAltY': this.parent.changeDate(new Date(), e); break; case 'shiftAltN': if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda' || this.parent.currentView === 'Year') { return; } this.processShiftAltN(e); break; case 'cut': case 'cmdCut': if (e.ctrlKey || e.metaKey) { this.processClipboardAction(true, undefined, e); } break; case 'copy': case 'cmdCopy': if (e.ctrlKey || e.metaKey) { this.processClipboardAction(false, undefined, e); } break; } }; KeyboardInteraction.prototype.processShiftAltN = function (e) { var selectedCells = this.parent.getSelectedCells(); var target = e.target; var cellData = extend({}, null, true); if (selectedCells.length > 0 && (closest(target, '.' + cls.WORK_CELLS_CLASS) || closest(target, '.' + cls.ALLDAY_CELLS_CLASS) || closest(target, '.' + cls.HEADER_CELLS_CLASS))) { cellData = this.getSelectedElements(target); } else if (closest(target, '.' + cls.APPOINTMENT_CLASS) && !isNullOrUndefined(this.parent.activeEventData.event)) { var event_1 = this.parent.activeEventData.event; cellData.startTime = event_1.StartTime; cellData.endTime = event_1.EndTime; cellData.isAllDay = event_1.IsAllDay; } else { var workHour = this.parent.getStartEndTime(this.parent.workHours.start); var slotInterval = this.parent.activeViewOptions.timeScale.interval / this.parent.activeViewOptions.timeScale.slotCount; cellData.startTime = new Date(this.parent.selectedDate); cellData.startTime.setHours(workHour.getHours(), workHour.getMinutes(), 0, 0); cellData.endTime = new Date(cellData.startTime.getTime() + slotInterval * 60000); } var args = extend(cellData, { cancel: false, event: e }); if (args != null) { this.parent.eventWindow.openEditor(args, 'Add'); } }; KeyboardInteraction.prototype.processFTwelve = function (e) { var target = e.target; if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { this.parent.activeCellsData = this.getSelectedElements(target); var args = extend(this.parent.activeCellsData, { cancel: false, event: e }); var inlineArgs = { element: args.element, groupIndex: args.groupIndex, type: 'Cell' }; this.parent.notify(event.inlineClick, inlineArgs); } if (target.classList.contains(cls.APPOINTMENT_CLASS)) { target.click(); return; } }; KeyboardInteraction.prototype.addEventListener = function () { this.parent.on(event.cellMouseDown, this.onCellMouseDown, this); if (this.parent.allowClipboard) { this.parent.on(event.documentPaste, this.pasteHandler, this); } }; KeyboardInteraction.prototype.removeEventListener = function () { this.parent.off(event.cellMouseDown, this.onCellMouseDown); this.parent.off(event.documentPaste, this.pasteHandler); }; KeyboardInteraction.prototype.onCellMouseDown = function (e) { if (e.event.shiftKey) { return; } this.initialTarget = this.getClosestCell(e.event); if (this.parent.activeViewOptions.readonly || this.parent.currentView === 'MonthAgenda' || !this.initialTarget) { return; } if (e.event.target.classList.contains(cls.WORK_CELLS_CLASS) && e.event.which !== 3) { this.parent.removeSelectedClass(); EventHandler.add(this.parent.getContentTable(), 'mousemove', this.onMouseSelection, this); EventHandler.add(this.parent.getContentTable(), 'mouseup mouseleave', this.onMoveUp, this); } if (e.event.target.classList.contains(cls.ALLDAY_CELLS_CLASS) && e.event.which !== 3) { this.parent.removeSelectedClass(); var allDayRow = this.parent.getAllDayRow(); EventHandler.add(allDayRow, 'mousemove', this.onMouseSelection, this); EventHandler.add(allDayRow, 'mouseup mouseleave', this.onMoveUp, this); } }; KeyboardInteraction.prototype.onMouseSelection = function (e) { var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS)); addClass(appointments, 'e-allow-select'); var selectionEdges = this.parent.boundaryValidation(e.pageY, e.pageX); if (selectionEdges.bottom || selectionEdges.top || selectionEdges.left || selectionEdges.right) { var parent_1 = this.parent.element.querySelector('.' + cls.CONTENT_WRAP_CLASS); var yInBounds = parent_1.offsetHeight <= parent_1.scrollHeight && parent_1.scrollTop >= 0 && parent_1.scrollTop + parent_1.offsetHeight <= parent_1.scrollHeight; var xInBounds = parent_1.offsetWidth <= parent_1.scrollWidth && parent_1.scrollLeft >= 0 && parent_1.scrollLeft + parent_1.offsetWidth <= parent_1.scrollWidth; if (yInBounds && (selectionEdges.top || selectionEdges.bottom)) { parent_1.scrollTop += selectionEdges.top ? -e.target.offsetHeight : e.target.offsetHeight; } if (xInBounds && (selectionEdges.left || selectionEdges.right)) { parent_1.scrollLeft += selectionEdges.left ? -e.target.offsetWidth : e.target.offsetWidth; } } var target = this.getClosestCell(e); if (target) { this.selectCells(true, target); } }; KeyboardInteraction.prototype.getClosestCell = function (e) { return closest(e.target, '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS); }; KeyboardInteraction.prototype.onMoveUp = function (e) { var _this = this; var appointments = [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS)); removeClass(appointments, 'e-allow-select'); EventHandler.remove(this.parent.getContentTable(), 'mousemove', this.onMouseSelection); EventHandler.remove(this.parent.getContentTable(), 'mouseup mouseleave', this.onMoveUp); if (e.target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var allDayRow = this.parent.getAllDayRow(); EventHandler.remove(allDayRow, 'mousemove', this.onMouseSelection); EventHandler.remove(allDayRow, 'mouseup mouseleave', this.onMoveUp); } if (this.isPreventAction(e)) { return; } var queryStr = '.' + cls.WORK_CELLS_CLASS + ',.' + cls.ALLDAY_CELLS_CLASS + ',.' + cls.HEADER_CELLS_CLASS; var target = closest(e.target, queryStr); if (!target) { return; } var selectedCells = this.parent.getSelectedCells(); if (selectedCells.length > 0 && selectedCells.indexOf(target) === -1) { target = selectedCells[selectedCells.length - 1]; } if (this.parent.currentView === 'TimelineYear' && target.classList.contains(cls.OTHERMONTH_CLASS)) { return; } this.parent.activeCellsData = this.getSelectedElements(target); var cellData = {}; if (this.parent.eventWindow) { this.parent.eventWindow.convertToEventData(this.parent.activeCellsData, cellData); } var args = { data: cellData, element: this.parent.activeCellsData.element, event: e, requestType: cellSelect, showQuickPopup: false }; this.parent.trigger(event.select, args, function (selectArgs) { var isPopupShow = selectArgs.showQuickPopup || _this.parent.quickInfoOnSelectionEnd; if (isPopupShow && selectedCells.length > 1) { var cellArgs = extend(_this.parent.activeCellsData, { cancel: false, event: e, name: 'cellClick' }); _this.parent.notify(event.cellClick, cellArgs); } }); }; KeyboardInteraction.prototype.processEnter = function (e) { if ((this.parent.activeViewOptions.readonly && !e.target.classList.contains(cls.APPOINTMENT_CLASS)) || this.isPreventAction(e)) { return; } if (this.parent.currentView === 'TimelineYear' && e.target.classList.contains(cls.OTHERMONTH_CLASS)) { return; } var target = e.target; if (closest(target, '.' + cls.POPUP_WRAPPER_CLASS)) { if (target.classList.contains(cls.QUICK_POPUP_EVENT_DETAILS_CLASS) || target.classList.contains(cls.EVENT_CREATE_CLASS) || target.classList.contains(cls.EDIT_EVENT_CLASS) || target.classList.contains(cls.DELETE_EVENT_CLASS) || target.classList.contains(cls.CLOSE_CLASS)) { target.click(); e.preventDefault(); } else if (target.classList.contains(cls.SUBJECT_CLASS)) { this.parent.element.querySelector('.' + cls.EVENT_CREATE_CLASS).click(); e.preventDefault(); } return; } if (target.classList.contains(cls.RESOURCE_CELLS_CLASS) && target.classList.contains(cls.RESOURCE_PARENT_CLASS)) { var resourceIcon = target.querySelector('.' + cls.RESOURCE_TREE_ICON_CLASS); if (resourceIcon) { resourceIcon.click(); } return; } if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { this.parent.activeCellsData = this.getSelectedElements(target); var args = extend(this.parent.activeCellsData, { cancel: false, event: e }); if (this.parent.allowInline) { var inlineArgs = { element: args.element, groupIndex: args.groupIndex, type: 'Cell' }; this.parent.notify(event.inlineClick, inlineArgs); } else { if (this.parent.currentView === 'Year') { target.click(); } else { this.parent.notify(event.cellClick, args); } } return; } if (target.classList.contains(cls.INLINE_SUBJECT_CLASS) && this.parent.inlineModule) { this.parent.inlineModule.inlineCrudActions(target); return; } if (target.classList.contains(cls.APPOINTMENT_CLASS) || target.classList.contains(cls.MORE_EVENT_CLOSE_CLASS) || target.classList.contains(cls.ALLDAY_APPOINTMENT_SECTION_CLASS) || target.classList.contains(cls.MORE_INDICATOR_CLASS)) { target.click(); return; } if (target.classList.contains(cls.MORE_EVENT_HEADER_DATE_CLASS)) { this.parent.setProperties({ selectedDate: this.parent.getDateFromElement(target) }, true); this.parent.changeView(this.parent.getNavigateView(), e); this.processEscape(e); return; } }; KeyboardInteraction.prototype.getSelectedElements = function (target) { var cellDetails; if (this.selectedCells.length > 1 && target.classList.contains(cls.SELECTED_CELL_CLASS)) { var start = this.parent.getCellDetails(this.selectedCells[0]); var end = this.parent.getCellDetails(this.selectedCells.slice(-1)[0]); start.endTime = end.endTime; start.element = target; cellDetails = start; } else { cellDetails = this.parent.getCellDetails(target); } return cellDetails; }; KeyboardInteraction.prototype.getCells = function (isInverseTable, start, end) { var tableEle = this.parent.getContentTable(); var isTimelineYear = this.parent.currentView === 'TimelineYear'; var query = isTimelineYear && !isInverseTable ? '.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')' : 'td'; var cells = [].slice.call(tableEle.querySelectorAll(query)); var maxRow = tableEle.rows.length; var maxColumn = tableEle.rows[0].cells.length; if (start && start.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var allDayRow = this.parent.getAllDayRow(); cells = [].slice.call(allDayRow.cells); maxRow = 1; maxColumn = allDayRow.cells.length; } var startIndex = cells.indexOf(start); var endIndex = cells.indexOf(end); var inverseCells = []; if (isInverseTable) { for (var i = 0; i < maxColumn; i++) { for (var j = 0; j < maxRow; j++) { var cell = cells[maxColumn * j + i]; if (isTimelineYear && cell.classList.contains(cls.OTHERMONTH_CLASS)) { continue; } inverseCells.push(cell); } } startIndex = inverseCells.indexOf(start); endIndex = inverseCells.indexOf(end); } if (startIndex > endIndex) { var temp = startIndex; startIndex = endIndex; endIndex = temp; } var sCells = isInverseTable ? inverseCells : cells; return sCells.slice(startIndex, endIndex + 1); }; KeyboardInteraction.prototype.focusFirstCell = function () { if (this.parent.currentView === 'Agenda') { var focusCell = this.parent.getContentTable().querySelector('.' + cls.AGENDA_CELLS_CLASS); focusCell.setAttribute('tabindex', '0'); focusCell.focus(); return; } this.parent.eventBase.removeSelectedAppointmentClass(); if (this.parent.activeView.isTimelineView() && this.parent.currentView !== 'TimelineYear') { var cell = this.parent.element.querySelector('.' + cls.CONTENT_TABLE_CLASS + ' tr:not(.' + cls.HIDDEN_CLASS + ') .' + cls.WORK_CELLS_CLASS + ':not(.' + cls.RESOURCE_GROUP_CELLS_CLASS + ')'); this.selectCells(false, cell); } else if (this.parent.currentView.indexOf('Year') > -1) { var query = '.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')' + ':not(.' + cls.RESOURCE_GROUP_CELLS_CLASS + ')'; var isVerticalYear = this.parent.currentView === 'TimelineYear' && this.parent.activeViewOptions.orientation === 'Vertical'; query += isVerticalYear ? '[data-date="' + this.parent.activeView.startDate().getTime() + '"]' : ''; this.selectCells(false, this.parent.element.querySelector(query)); } else { this.selectCells(false, this.parent.getWorkCellElements()[0]); } }; KeyboardInteraction.prototype.isInverseTableSelect = function () { return this.parent.activeView.isInverseTableSelect; }; /** * Internal method to select cells * * @param {boolean} isMultiple Accepts to select multiple cells or not * @param {HTMLTableCellElement} targetCell Accepts the target cells * @returns {void} * @private */ KeyboardInteraction.prototype.selectCells = function (isMultiple, targetCell) { var _this = this; this.parent.removeSelectedClass(); var target = (targetCell instanceof Array) ? targetCell.slice(-1)[0] : targetCell; if (isMultiple) { var initialId_1; var views_1 = ['Day', 'Week', 'WorkWeek', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth', 'TimelineYear']; var args = { element: targetCell, requestType: 'mousemove', allowMultipleRow: true }; this.parent.inlineModule.removeInlineAppointmentElement(); this.parent.trigger(event.select, args, function (selectArgs) { var allowMultipleRow = (!selectArgs.allowMultipleRow) || (!_this.parent.allowMultiRowSelection); if (allowMultipleRow) { var isTimelineYear = _this.parent.currentView === 'TimelineYear'; if (isTimelineYear && _this.parent.activeViewOptions.orientation === 'Horizontal' || _this.parent.currentView === 'Month') { var isGroupYear = isTimelineYear && _this.parent.activeViewOptions.group.resources.length > 0; target = isGroupYear ? _this.initialTarget : _this.initialTarget.parentElement.children[target.cellIndex]; } else if (views_1.indexOf(_this.parent.currentView) > -1) { target = target.parentElement.children[_this.initialTarget.cellIndex]; } } var selectedCells = _this.getCells(_this.isInverseTableSelect(), _this.initialTarget, target); if (_this.parent.activeViewOptions.group.resources.length > 0) { initialId_1 = _this.initialTarget.getAttribute('data-group-index'); var resourceSelectedCells = []; for (var _i = 0, selectedCells_1 = selectedCells; _i < selectedCells_1.length; _i++) { var cell = selectedCells_1[_i]; if (cell.getAttribute('data-group-index') === initialId_1) { resourceSelectedCells.push(cell); } } selectedCells = resourceSelectedCells; } if (!_this.parent.allowMultiCellSelection) { selectedCells = [_this.initialTarget]; } _this.selectedCells = selectedCells; if (selectedCells.length > 2 && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var allDayCells = _this.getAllDayCells(selectedCells); if (_this.parent.activeViewOptions.group.resources.length > 0) { var resourceAllDayCells = []; for (var _a = 0, allDayCells_1 = allDayCells; _a < allDayCells_1.length; _a++) { var cell = allDayCells_1[_a]; if (cell.getAttribute('data-group-index') === initialId_1) { resourceAllDayCells.push(cell); } } allDayCells = resourceAllDayCells; } selectedCells = selectedCells.concat(allDayCells); } if ((target.getAttribute('data-group-index') !== initialId_1) && _this.parent.activeViewOptions.group.resources.length > 0) { target = _this.selectedCells[_this.selectedCells.length - 1]; } _this.parent.addSelectedClass(selectedCells, target); }); } else { var args = { element: target, requestType: cellSelect }; // activeCellsData is not reset on schedule property changed(group properties) // const cellData: Record<string, any> = {}; // const cellDetails: CellClickEventArgs = this.parent.getCellDetails(target); // if (this.parent.eventWindow && cellDetails) { // if (this.parent.activeCellsData.element !== cellDetails.element) { // this.parent.activeCellsData = cellDetails; // } // this.parent.eventWindow.convertToEventData(this.parent.activeCellsData as unknown as Record<string, any>, cellData); // args.data = cellData; // } this.parent.trigger(event.select, args, function () { _this.initialTarget = target; _this.selectedCells = [target]; _this.parent.addSelectedClass([target], target); }); } }; KeyboardInteraction.prototype.selectAppointment = function (isReverse, target) { var appointments = this.getAppointmentElements(); if (appointments.length < 0) { return; } this.parent.eventBase.removeSelectedAppointmentClass(); var nextAppEle; if (target.classList.contains(cls.APPOINTMENT_CLASS)) { var targetIndex = appointments.indexOf(target); nextAppEle = appointments[(isReverse ? targetIndex - 1 : targetIndex + 1)]; } else { nextAppEle = isReverse ? appointments[appointments.length - 1] : appointments[0]; } if (nextAppEle) { this.parent.eventBase.addSelectedAppointments([nextAppEle], true); nextAppEle.focus(); addClass([nextAppEle], cls.AGENDA_SELECTED_CELL); } }; KeyboardInteraction.prototype.selectAppointmentElementFromWorkCell = function (isReverse, target) { var _this = this; this.parent.eventBase.removeSelectedAppointmentClass(); this.parent.removeSelectedClass(); if (target.classList.contains(cls.WORK_CELLS_CLASS) || target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var appointmentElements_1 = this.getUniqueAppointmentElements(); var filteredElements_1 = []; var selectedDate_1 = this.parent.getDateFromElement(target).getTime(); var selectedSeriesEvents = this.parent.eventsProcessed.filter(function (eventObject) { return (!isReverse ? (eventObject[_this.parent.eventFields.startTime].getTime() >= selectedDate_1) : (eventObject[_this.parent.eventFields.startTime].getTime() <= selectedDate_1)); }); selectedSeriesEvents.filter(function (event) { appointmentElements_1.filter(function (element) { if (JSON.stringify(event.Guid) === JSON.stringify(element.getAttribute('data-guid'))) { filteredElements_1.push(element); } }); }); if (filteredElements_1.length > 0) { var selectedElement = isReverse ? filteredElements_1[filteredElements_1.length - 1] : filteredElements_1[0]; var focusElements = this.getAppointmentElementsByGuid(selectedElement.getAttribute('data-guid')); this.parent.eventBase.addSelectedAppointments(focusElements, true); (focusElements[focusElements.length - 1]).focus(); } } }; KeyboardInteraction.prototype.getAllDayCells = function (cells) { var allDayRow = this.parent.getAllDayRow(); if (!allDayRow) { return []; } var startCell = cells[0]; var endCell = cells[cells.length - 1]; var start = this.parent.getCellDetails(startCell); var end = this.parent.getCellDetails(endCell); if (end.endTime.getTime() - start.startTime.getTime() >= util.MS_PER_DAY) { var allDayCells = [].slice.call(allDayRow.cells); return allDayCells.slice(startCell.cellIndex, endCell.cellIndex + 1); } return []; }; KeyboardInteraction.prototype.getAppointmentElements = function () { return [].slice.call(this.parent.element.querySelectorAll('.' + cls.APPOINTMENT_CLASS)); }; KeyboardInteraction.prototype.getAppointmentElementsByGuid = function (guid) { return [].slice.call(this.parent.element.querySelectorAll('div[data-guid="' + guid + '"]')); }; KeyboardInteraction.prototype.getUniqueAppointmentElements = function () { var appointments = this.getAppointmentElements(); var appointmentElements = []; appointments.map(function (value) { return value.getAttribute('data-guid'); }).filter(function (value, index, self) { if (self.indexOf(value) === index) { appointmentElements.push(appointments[parseInt(index.toString(), 10)]); } }); return appointmentElements; }; KeyboardInteraction.prototype.getWorkCellFromAppointmentElement = function (target) { var selectedObject = this.parent.eventBase.getEventByGuid(target.getAttribute('data-guid')); return this.parent.eventBase.selectWorkCellByTime([selectedObject]); }; KeyboardInteraction.prototype.processViewNavigation = function (e) { if (isNullOrUndefined(e.code)) { return; } var index = parseInt(e.code.slice(e.code.length - 1), 10) - 1; if (!isNaN(index) && !isNullOrUndefined(this.parent.views) && index < this.parent.views.length) { var view = this.parent.viewCollections[parseInt(index.toString(), 10)].option; this.parent.changeView(view, e, undefined, index); if (this.parent.headerModule) { this.parent.headerModule.element.querySelector('.e-active-view button').focus(); } } }; KeyboardInteraction.prototype.isCalendarTarget = function (e) { var keyTarget = e.currentTarget || e.target; if (keyTarget && !isNullOrUndefined(keyTarget.querySelector('.e-header-popup.e-popup-open'))) { return true; } return false; }; KeyboardInteraction.prototype.cancelUpDownAction = function (isTimelineYear) { var isVerticalYear = isTimelineYear && this.parent.activeViewOptions.orientation === 'Vertical'; var isGroup = this.parent.activeViewOptions.group.resources.length > 0; if (isVerticalYear && isGroup || isTimelineYear && this.initialTarget.classList.contains(cls.OTHERMONTH_CLASS)) { return true; } if (this.parent.activeView.isTimelineView() && !isTimelineYear || this.parent.currentView === 'MonthAgenda') { return true; } return false; }; KeyboardInteraction.prototype.processUp = function (e, isMultiple) { var isTimelineYear = this.parent.currentView === 'TimelineYear'; if (isMultiple && this.cancelUpDownAction(isTimelineYear) || (this.isCalendarTarget(e))) { return; } var target = (e.target); var selectedElements = this.parent.getSelectedCells(); var selectedEventElements = this.parent.eventBase.getSelectedAppointments(); var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS); var quickPopupWrapper = this.getQuickPopupElement(); if (selectedElements.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) { target = selectedElements[selectedElements.length - 1]; } if (selectedEventElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) && !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) && ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) { target = this.getWorkCellFromAppointmentElement(selectedEventElements[selectedEventElements.length - 1]); this.parent.eventBase.removeSelectedAppointmentClass(); } if (!target) { return; } if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) { var tableRows = this.parent.getTableRows(); var curRowIndex = tableRows.indexOf(target.parentElement); var targetCell = void 0; if (isTimelineYear && isMultiple && this.parent.activeViewOptions.group.resources.length === 0) { targetCell = this.isInverseTableSelect() ? this.getVerticalUpDownCell(tableRows, target, curRowIndex, true) : this.getHorizontalUpDownCell(tableRows, target, curRowIndex, true); } if ((curRowIndex > 0 || targetCell) && curRowIndex < tableRows.length) { targetCell = targetCell ? targetCell : (tableRows[curRowIndex - 1]).cells[target.cellIndex]; if (this.parent.currentView === 'Year' && targetCell.classList.contains(cls.OTHERMONTH_CLASS)) { if (this.parent.activeView.getStartDate().getTime() < +targetCell.getAttribute('data-date')) { targetCell = this.getYearUpDownCell(tableRows, curRowIndex - 1, target.cellIndex, true); } else { return; } } e.preventDefault(); this.selectCells(isMultiple, targetCell); } } else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') { this.selectAppointment(true, target); } }; KeyboardInteraction.prototype.processDown = function (e, isMultiple) { var isTimelineYear = this.parent.currentView === 'TimelineYear'; if (isMultiple && this.cancelUpDownAction(isTimelineYear) || (this.isCalendarTarget(e))) { return; } var target = (e.target); var selectedCells = this.parent.getSelectedCells(); var selectedElements = this.parent.eventBase.getSelectedAppointments(); var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS); var quickPopupWrapper = this.getQuickPopupElement(); if (selectedCells.length > 0 && !e.target.classList.contains(cls.WORK_CELLS_CLASS)) { target = selectedCells[selectedCells.length - 1]; } if (selectedElements.length > 0 && !moreEventWrapper.classList.contains(cls.POPUP_OPEN) && !quickPopupWrapper.classList.contains(cls.POPUP_OPEN) && ['Day', 'Week', 'WorkWeek', 'Month'].indexOf(this.parent.currentView) !== -1) { target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]); this.parent.eventBase.removeSelectedAppointmentClass(); } var tableRows = this.parent.getTableRows(); if (!target) { return; } if (target.classList.contains(cls.WORK_CELLS_CLASS) && !this.parent.element.querySelector('.' + cls.POPUP_OPEN)) { var curRowIndex = tableRows.indexOf(target.parentElement); var targetCell = void 0; if (isTimelineYear && isMultiple && this.parent.activeViewOptions.group.resources.length === 0) { targetCell = this.isInverseTableSelect() ? this.getVerticalUpDownCell(tableRows, target, curRowIndex, false) : this.getHorizontalUpDownCell(tableRows, target, curRowIndex, false); } if (curRowIndex >= 0 && ((curRowIndex < tableRows.length - 1) || targetCell)) { targetCell = targetCell ? targetCell : (tableRows[curRowIndex + 1]).cells[target.cellIndex]; if (this.parent.currentView === 'Year' && targetCell.classList.contains(cls.OTHERMONTH_CLASS)) { if (this.parent.activeView.getEndDate().getTime() > +targetCell.getAttribute('data-date')) { targetCell = this.getYearUpDownCell(tableRows, curRowIndex + 1, target.cellIndex, false); } else { return; } } e.preventDefault(); this.selectCells(isMultiple, targetCell); } } else if (this.parent.currentView === 'Agenda' || this.parent.currentView === 'MonthAgenda') { this.selectAppointment(false, target); } }; KeyboardInteraction.prototype.getYearUpDownCell = function (tableRows, rowIndex, cellIndex, isUp) { while (tableRows[parseInt(rowIndex.toString(), 10)] && tableRows[parseInt(rowIndex.toString(), 10)].cells[parseInt(cellIndex.toString(), 10)].classList.contains(cls.OTHERMONTH_CLASS)) { rowIndex = rowIndex + (isUp ? -1 : 1); } return tableRows[parseInt(rowIndex.toString(), 10)].cells[parseInt(cellIndex.toString(), 10)]; }; // eslint-disable-next-line max-len KeyboardInteraction.prototype.getHorizontalUpDownCell = function (tableRows, target, curRowIndex, isUp) { var row = tableRows[curRowIndex + (isUp ? -1 : 1)]; var cell = row ? row.cells[target.cellIndex] : target; if (cell.classList.contains(cls.OTHERMONTH_CLASS)) { var workCell = row.querySelector('.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')'); var date = new Date(+workCell.getAttribute('data-date')); var query = '[data-date="' + new Date(date.getFullYear(), date.getMonth() + 1, 0).getTime() + '"]'; cell = cell.cellIndex < workCell.cellIndex ? workCell : row.querySelector(query); } return cell; }; // eslint-disable-next-line max-len KeyboardInteraction.prototype.getVerticalUpDownCell = function (tableRows, target, curRowIndex, isUp) { var hasRow = isUp && curRowIndex > 0 || !isUp && curRowIndex < tableRows.length - 1; var targetCell = hasRow ? tableRows[curRowIndex + (isUp ? -1 : 1)].cells[target.cellIndex] : undefined; if (!targetCell || targetCell.classList.contains(cls.OTHERMONTH_CLASS)) { var column = tableRows[parseInt(curRowIndex.toString(), 10)].cells[target.cellIndex - (isUp ? 1 : -1)]; if (column) { var dateAttr = +target.getAttribute('data-date') - (isUp ? util.MS_PER_DAY : -util.MS_PER_DAY); return this.parent.getContentTable().querySelector('.' + cls.WORK_CELLS_CLASS + '[data-date="' + dateAttr + '"]'); } targetCell = target; } return targetCell; }; KeyboardInteraction.prototype.processLeftRight = function (target) { var tableEle = (this.parent.currentView === 'Year' ? target.closest('tbody') : this.parent.getContentTable()); var curRowIndex = target.parentNode.sectionRowIndex; var key = { element: tableEle, rowIndex: curRowIndex, columnIndex: target.cellIndex, maxIndex: tableEle.rows[parseInt(curRowIndex.toString(), 10)].cells.length }; return key; }; KeyboardInteraction.prototype.getQuickPopupElement = function () { return (this.parent.isAdaptive ? document.body : this.parent.element).querySelector('.' + cls.POPUP_WRAPPER_CLASS); }; KeyboardInteraction.prototype.isCancelLeftRightAction = function (e, isMultiple, isTimelineYear) { var prevent = this.parent.currentView === 'MonthAgenda' || isTimelineYear && this.initialTarget.classList.contains(cls.OTHERMONTH_CLASS); if (this.parent.currentView === 'Agenda' || (isMultiple && prevent)) { return true; } if (this.isPreventAction(e) && isMultiple) { return true; } var moreEventWrapper = this.parent.element.querySelector('.' + cls.MORE_POPUP_WRAPPER_CLASS); var quickPopupWrapper = this.getQuickPopupElement(); if (moreEventWrapper.classList.contains(cls.POPUP_OPEN) || quickPopupWrapper.classList.contains(cls.POPUP_OPEN)) { return true; } return false; }; KeyboardInteraction.prototype.processRight = function (e, isMultiple) { var isTimelineYear = this.parent.currentView === 'TimelineYear'; if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear) || (this.isCalendarTarget(e))) { return; } var selectedCells = this.parent.getSelectedCells(); var targetCell; var selectedAppointments = this.parent.eventBase.getSelectedAppointments(); var target = (e.target); if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { target = selectedCells[selectedCells.length - 1]; } if (selectedAppointments.length > 0) { target = this.getWorkCellFromAppointmentElement(selectedAppointments[selectedAppointments.length - 1]); this.parent.eventBase.removeSelectedAppointmentClass(); if (!target) { return; } } if (target.classList.contains(cls.WORK_CELLS_CLASS) && (e.target).classList.contains(cls.WORK_CELLS_CLASS)) { var key = this.processLeftRight(target); var targetDate = new Date(+target.getAttribute('data-date')); var isMonthEnd = this.parent.currentView === 'Year' && targetDate.getTime() === util.lastDateOfMonth(targetDate).getTime(); if (key.columnIndex >= 0 && key.columnIndex < key.maxIndex - 1 && !isMonthEnd) { targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex + 1], 'right'); if (isTimelineYear && isMultiple && targetCell.classList.contains(cls.OTHERMONTH_CLASS)) { targetCell = this.getTimelineYearTargetCell(key, target, true); } if (!isNullOrUndefined(targetCell)) { this.selectCells(isMultiple, targetCell); } } else if (key.columnIndex === key.maxIndex - 1 || isMonthEnd) { if (!this.isInverseTableSelect() && key.rowIndex < key.element.rows.length - 1 && !isMonthEnd) { targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex + 1].cells[0], 'right'); var changeTargetCell = isTimelineYear && isMultiple && targetCell.classList.contains(cls.OTHERMONTH_CLASS); targetCell = changeTargetCell ? this.getHorizontalLeftRightCell(key, target, true) : targetCell; if (!isNullOrUndefined(targetCell)) { this.selectCells(isMultiple, targetCell); } } else if (!isMultiple) { if (isMonthEnd && targetDate.getTime() !== this.parent.activeView.getEndDate().getTime()) { this.selectCells(isMultiple, this.parent.element.querySelector(':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + (targetDate.getTime() + util.MS_PER_DAY) + '"]')); return; } var rowIndex = this.isInverseTableSelect() ? key.rowIndex : 0; this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e); var tableEle = this.parent.getContentTable(); var cell = isMonthEnd ? tableEle.rows[parseInt(rowIndex.toString(), 10)].querySelector('.' + cls.WORK_CELLS_CLASS + ':not(.' + cls.OTHERMONTH_CLASS + ')') : tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[0]; this.selectCells(false, cell); } } } else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var curColIndex = target.cellIndex; var allDayRow = this.parent.getAllDayRow(); var maxColIndex = allDayRow.cells.length; if (curColIndex >= 0 && curColIndex < maxColIndex - 1) { this.selectCells(isMultiple, allDayRow.cells[curColIndex + 1]); } else if (curColIndex === maxColIndex - 1 && !isMultiple) { this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Next'), e); var allDayRow_1 = this.parent.getAllDayRow(); this.selectCells(false, allDayRow_1.cells[0]); } } }; KeyboardInteraction.prototype.processLeft = function (e, isMultiple) { var isTimelineYear = this.parent.currentView === 'TimelineYear'; if (this.isCancelLeftRightAction(e, isMultiple, isTimelineYear) || (this.isCalendarTarget(e))) { return; } var target = (e.target); var selectedCells = this.parent.getSelectedCells(); var targetCell; if (selectedCells.length > 0 && !target.classList.contains(cls.WORK_CELLS_CLASS) && !target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { target = selectedCells[selectedCells.length - 1]; } var selectedElements = this.parent.eventBase.getSelectedAppointments(); if (selectedElements.length > 0) { target = this.getWorkCellFromAppointmentElement(selectedElements[selectedElements.length - 1]); this.parent.eventBase.removeSelectedAppointmentClass(); if (!target) { return; } } if ((e.target).classList.contains(cls.WORK_CELLS_CLASS) && target.classList.contains(cls.WORK_CELLS_CLASS)) { var key = this.processLeftRight(target); var targetDate = new Date(+target.getAttribute('data-date')); var isMonthStart = this.parent.currentView === 'Year' && targetDate.getTime() === util.firstDateOfMonth(targetDate).getTime(); if (key.columnIndex > 0 && key.columnIndex < key.maxIndex && !isMonthStart) { targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex].cells[target.cellIndex - 1], 'left'); if (isTimelineYear && isMultiple && targetCell.classList.contains(cls.OTHERMONTH_CLASS)) { targetCell = this.getTimelineYearTargetCell(key, target, false); } if (!isNullOrUndefined(targetCell)) { this.selectCells(isMultiple, targetCell); } } else if (key.columnIndex === 0 || isMonthStart) { if (!this.isInverseTableSelect() && key.rowIndex > 0) { targetCell = this.calculateNextPrevDate(target, key.element.rows[key.rowIndex - 1].cells[key.maxIndex - 1], 'left'); var otherMonthCell = isTimelineYear && isMultiple && targetCell.classList.contains(cls.OTHERMONTH_CLASS); targetCell = otherMonthCell ? this.getHorizontalLeftRightCell(key, target, false) : targetCell; if (!isNullOrUndefined(targetCell)) { this.selectCells(isMultiple, targetCell); } } else if (!isMultiple) { if (isMonthStart && targetDate.getTime() !== this.parent.activeView.getStartDate().getTime()) { this.selectCells(isMultiple, this.parent.element.querySelector('[data-date="' + (targetDate.getTime() - util.MS_PER_DAY) + '"]')); return; } this.parent.changeDate(this.parent.activeView.getNextPreviousDate('Previous'), e); var tableEle = this.parent.getContentTable(); var rowIndex = this.isInverseTableSelect() ? key.rowIndex : tableEle.rows.length - 1; var cell = tableEle.rows[parseInt(rowIndex.toString(), 10)].cells[key.maxIndex - 1]; if (isMonthStart) { var tbody = this.parent.element.querySelectorAll('.' + cls.CONTENT_TABLE_CLASS + ' tbody'); cell = tbody.item(tbody.length - 1).querySelector(':not(.' + cls.OTHERMONTH_CLASS + ')[data-date="' + this.parent.activeView.getEndDate().getTime() + '"]'); } this.selectCells(false, cell); } } } else if (target.classList.contains(cls.ALLDAY_CELLS_CLASS)) { var curColIndex = target.cellIndex; var allDayRow = this.parent.getAllDayRow(); var maxColIndex = allDayRow.cells.length; if (curColIndex > 0 && curColIndex < maxColIndex) { this.selectCe