UNPKG

devextreme

Version:

HTML5 JavaScript Component Suite for Responsive Web Development

1,174 lines • 128 kB
/** * DevExtreme (esm/ui/scheduler/workspaces/ui.scheduler.work_space.js) * Version: 21.1.4 * Build date: Mon Jun 21 2021 * * Copyright (c) 2012 - 2021 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import _extends from "@babel/runtime/helpers/esm/extends"; import $ from "../../../core/renderer"; import domAdapter from "../../../core/dom_adapter"; import eventsEngine from "../../../events/core/events_engine"; import { data as elementData } from "../../../core/element_data"; import dateUtils from "../../../core/utils/date"; import { getWindow, hasWindow } from "../../../core/utils/window"; import { getPublicElement } from "../../../core/element"; import { extend } from "../../../core/utils/extend"; import { each } from "../../../core/utils/iterator"; import { getBoundingRect, getElementsFromPoint } from "../../../core/utils/position"; import messageLocalization from "../../../localization/message"; import dateLocalization from "../../../localization/date"; import { noop } from "../../../core/utils/common"; import { isDefined } from "../../../core/utils/type"; import { addNamespace, isMouseEvent } from "../../../events/utils/index"; import pointerEvents from "../../../events/pointer"; import errors from "../../widget/ui.errors"; import { name as clickEventName } from "../../../events/click"; import { name as contextMenuEventName } from "../../../events/contextmenu"; import { enter as dragEventEnter, leave as dragEventLeave, drop as dragEventDrop } from "../../../events/drag"; import Scrollable from "../../scroll_view/ui.scrollable"; import HorizontalGroupedStrategy from "./ui.scheduler.work_space.grouped.strategy.horizontal"; import VerticalGroupedStrategy from "./ui.scheduler.work_space.grouped.strategy.vertical"; import tableCreatorModule from "../table_creator"; var { tableCreator: tableCreator } = tableCreatorModule; import VerticalShader from "../shaders/ui.scheduler.current_time_shader.vertical"; import AppointmentDragBehavior from "../appointmentDragBehavior"; import { APPOINTMENT_SETTINGS_KEY, FIXED_CONTAINER_CLASS, VIRTUAL_CELL_CLASS } from "../constants"; import timeZoneUtils from "../utils.timeZone"; import WidgetObserver from "../base/widgetObserver"; import { resetPosition, locate } from "../../../animation/translator"; import VirtualScrollingDispatcher from "./ui.scheduler.virtual_scrolling"; import ViewDataProvider from "./view_data_provider"; import dxrDateTableLayout from "../../../renovation/ui/scheduler/workspaces/base/date_table/layout.j"; import dxrAllDayPanelLayout from "../../../renovation/ui/scheduler/workspaces/base/date_table/all_day_panel/layout.j"; import dxrAllDayPanelTitle from "../../../renovation/ui/scheduler/workspaces/base/date_table/all_day_panel/title.j"; import dxrTimePanelTableLayout from "../../../renovation/ui/scheduler/workspaces/base/time_panel/layout.j"; import dxrGroupPanel from "../../../renovation/ui/scheduler/workspaces/base/group_panel/group_panel.j"; import dxrDateHeader from "../../../renovation/ui/scheduler/workspaces/base/header_panel/layout.j"; import VirtualSelectionState from "./virtual_selection_state"; import { cache } from "./cache"; import { isDateInRange } from "./utils/base"; var abstract = WidgetObserver.abstract; var toMs = dateUtils.dateToMilliseconds; var COMPONENT_CLASS = "dx-scheduler-work-space"; var GROUPED_WORKSPACE_CLASS = "dx-scheduler-work-space-grouped"; var VERTICAL_GROUPED_WORKSPACE_CLASS = "dx-scheduler-work-space-vertical-grouped"; var WORKSPACE_VERTICAL_GROUP_TABLE_CLASS = "dx-scheduler-work-space-vertical-group-table"; var WORKSPACE_WITH_BOTH_SCROLLS_CLASS = "dx-scheduler-work-space-both-scrollbar"; var WORKSPACE_WITH_COUNT_CLASS = "dx-scheduler-work-space-count"; var WORKSPACE_WITH_GROUP_BY_DATE_CLASS = "dx-scheduler-work-space-group-by-date"; var WORKSPACE_WITH_ODD_CELLS_CLASS = "dx-scheduler-work-space-odd-cells"; var TIME_PANEL_CLASS = "dx-scheduler-time-panel"; var TIME_PANEL_CELL_CLASS = "dx-scheduler-time-panel-cell"; var TIME_PANEL_ROW_CLASS = "dx-scheduler-time-panel-row"; var ALL_DAY_PANEL_CLASS = "dx-scheduler-all-day-panel"; var ALL_DAY_TABLE_CLASS = "dx-scheduler-all-day-table"; var ALL_DAY_CONTAINER_CLASS = "dx-scheduler-all-day-appointments"; var ALL_DAY_TITLE_CLASS = "dx-scheduler-all-day-title"; var ALL_DAY_TITLE_HIDDEN_CLASS = "dx-scheduler-all-day-title-hidden"; var ALL_DAY_TABLE_CELL_CLASS = "dx-scheduler-all-day-table-cell"; var ALL_DAY_TABLE_ROW_CLASS = "dx-scheduler-all-day-table-row"; var WORKSPACE_WITH_ALL_DAY_CLASS = "dx-scheduler-work-space-all-day"; var WORKSPACE_WITH_COLLAPSED_ALL_DAY_CLASS = "dx-scheduler-work-space-all-day-collapsed"; var WORKSPACE_WITH_MOUSE_SELECTION_CLASS = "dx-scheduler-work-space-mouse-selection"; var HORIZONTAL_SIZES_CLASS = "dx-scheduler-cell-sizes-horizontal"; var VERTICAL_SIZES_CLASS = "dx-scheduler-cell-sizes-vertical"; var HEADER_PANEL_CLASS = "dx-scheduler-header-panel"; var HEADER_PANEL_CELL_CLASS = "dx-scheduler-header-panel-cell"; var HEADER_ROW_CLASS = "dx-scheduler-header-row"; var GROUP_ROW_CLASS = "dx-scheduler-group-row"; var GROUP_HEADER_CLASS = "dx-scheduler-group-header"; var GROUP_HEADER_CONTENT_CLASS = "dx-scheduler-group-header-content"; var DATE_TABLE_CLASS = "dx-scheduler-date-table"; var DATE_TABLE_CELL_CLASS = "dx-scheduler-date-table-cell"; var DATE_TABLE_ROW_CLASS = "dx-scheduler-date-table-row"; var DATE_TABLE_FOCUSED_CELL_CLASS = "dx-scheduler-focused-cell"; var VIRTUAL_ROW_CLASS = "dx-scheduler-virtual-row"; var DATE_TABLE_DROPPABLE_CELL_CLASS = "dx-scheduler-date-table-droppable-cell"; var SCHEDULER_HEADER_SCROLLABLE_CLASS = "dx-scheduler-header-scrollable"; var SCHEDULER_SIDEBAR_SCROLLABLE_CLASS = "dx-scheduler-sidebar-scrollable"; var SCHEDULER_DATE_TABLE_SCROLLABLE_CLASS = "dx-scheduler-date-table-scrollable"; var SCHEDULER_WORKSPACE_DXPOINTERDOWN_EVENT_NAME = addNamespace(pointerEvents.down, "dxSchedulerWorkSpace"); var DragEventNames = { ENTER: addNamespace(dragEventEnter, "dxSchedulerDateTable"), DROP: addNamespace(dragEventDrop, "dxSchedulerDateTable"), LEAVE: addNamespace(dragEventLeave, "dxSchedulerDateTable") }; var SCHEDULER_CELL_DXCLICK_EVENT_NAME = addNamespace(clickEventName, "dxSchedulerDateTable"); var SCHEDULER_CELL_DXPOINTERDOWN_EVENT_NAME = addNamespace(pointerEvents.down, "dxSchedulerDateTable"); var SCHEDULER_CELL_DXPOINTERUP_EVENT_NAME = addNamespace(pointerEvents.up, "dxSchedulerDateTable"); var SCHEDULER_CELL_DXPOINTERMOVE_EVENT_NAME = addNamespace(pointerEvents.move, "dxSchedulerDateTable"); var CELL_DATA = "dxCellData"; var DATE_TABLE_CELL_BORDER = 1; var DATE_TABLE_MIN_CELL_WIDTH = 75; var DAY_MS = toMs("day"); var HOUR_MS = toMs("hour"); var DRAG_AND_DROP_SELECTOR = ".".concat(DATE_TABLE_CLASS, " td, .").concat(ALL_DAY_TABLE_CLASS, " td"); var CELL_SELECTOR = ".".concat(DATE_TABLE_CELL_CLASS, ", .").concat(ALL_DAY_TABLE_CELL_CLASS); class ScrollSemaphore { constructor() { this.counter = 0 } isFree() { return 0 === this.counter } take() { this.counter++ } release() { this.counter--; if (this.counter < 0) { this.counter = 0 } } } var formatWeekday = function(date) { return dateLocalization.getDayNames("abbreviated")[date.getDay()] }; class SchedulerWorkSpace extends WidgetObserver { get viewDataProvider() { if (!this._viewDataProvider) { this._viewDataProvider = new ViewDataProvider(this) } return this._viewDataProvider } get cache() { return cache } get virtualSelectionState() { if (!this._virtualSelectionState) { this._virtualSelectionState = new VirtualSelectionState(this.viewDataProvider) } return this._virtualSelectionState } get isAllDayPanelVisible() { return this._isShowAllDayPanel() && this.supportAllDayRow() } get isDateAndTimeView() { return true } get verticalGroupTableClass() { return WORKSPACE_VERTICAL_GROUP_TABLE_CLASS } get viewDirection() { return "vertical" } get renovatedHeaderPanelComponent() { return dxrDateHeader } _supportedKeys() { var clickHandler = function(e) { e.preventDefault(); e.stopPropagation(); if (this._selectedCells && this._selectedCells.length) { var $itemElement = $(this.option("focusedElement")); var $cellElement = $($itemElement.length ? $itemElement : this._selectedCells); e.target = this._selectedCells; this._showPopup = true; this._cellClickAction({ event: e, cellElement: $(this._selectedCells), cellData: this.getCellData($cellElement) }) } }; var arrowPressHandler = function(e, cell) { e.preventDefault(); e.stopPropagation(); this._moveToCell(cell, e.shiftKey) }; return extend(super._supportedKeys(), { enter: clickHandler, space: clickHandler, downArrow: function(e) { var $cell = this._getCellFromNextRow("next", e.shiftKey); arrowPressHandler.call(this, e, $cell) }, upArrow: function(e) { var $cell = this._getCellFromNextRow("prev", e.shiftKey); arrowPressHandler.call(this, e, $cell) }, rightArrow: function(e) { var $rightCell = this._getCellFromNextColumn("next", e.shiftKey); arrowPressHandler.call(this, e, $rightCell) }, leftArrow: function(e) { var $leftCell = this._getCellFromNextColumn("prev", e.shiftKey); arrowPressHandler.call(this, e, $leftCell) } }) } _dispose() { var _this$virtualScrollin; super._dispose(); null === (_this$virtualScrollin = this.virtualScrollingDispatcher) || void 0 === _this$virtualScrollin ? void 0 : _this$virtualScrollin.dispose() } _isRTL() { return this.option("rtlEnabled") } _getFocusedCell() { return this._$focusedCell || this._$dateTable.find("." + DATE_TABLE_CELL_CLASS).eq(0) } _getAllFocusedCells() { return this._selectedCells || this._$dateTable.find("." + DATE_TABLE_CELL_CLASS).eq(0) } _getCellFromNextRow(direction) { var $currentCell = this._$focusedCell; if (isDefined($currentCell)) { var cellIndex = $currentCell.index(); var $row = $currentCell.parent(); var $cell = $row[direction]().children().eq(cellIndex); $cell = this._checkForViewBounds($cell); return $cell } } _checkForViewBounds($item) { if (!$item.length) { $item = this._$focusedCell } return $item } _getCellFromNextColumn(direction, isMultiSelection) { var $focusedCell = this._$focusedCell; if (!isDefined($focusedCell)) { return } var $nextCell; var $row = $focusedCell.parent(); var nextColumnDirection = direction; var isDirectionNext = "next" === direction; var previousColumnDirection = isDirectionNext ? "prev" : "next"; var isRTL = this._isRTL(); var groupCount = this._getGroupCount(); var isHorizontalGrouping = this._isHorizontalGroupedWorkSpace(); var isGroupedByDate = this.isGroupedByDate(); var totalCellCount = this._getTotalCellCount(groupCount); var rowCellCount = isMultiSelection && !isGroupedByDate ? this._getCellCount() : totalCellCount; var lastIndexInRow = rowCellCount - 1; var currentIndex = $focusedCell.index(); var step = isGroupedByDate && isMultiSelection ? groupCount : 1; var isEdgeCell = this._isEdgeCell(isHorizontalGrouping ? totalCellCount - 1 : lastIndexInRow, currentIndex, step, direction); var sign = isRTL ? 1 : -1; var directionSign = isDirectionNext ? 1 : -1; var resultingSign = sign * directionSign; if (isEdgeCell || isMultiSelection && this._isGroupEndCell($focusedCell, direction)) { var nextIndex = currentIndex - resultingSign * step + resultingSign * rowCellCount; var rowDirection = isRTL ? previousColumnDirection : nextColumnDirection; $nextCell = $row[rowDirection]().children().eq(nextIndex); $nextCell = this._checkForViewBounds($nextCell) } else { $nextCell = $row.children().eq(currentIndex - resultingSign * step) } return $nextCell } _isEdgeCell(lastIndexInRow, cellIndex, step, direction) { var isRTL = this._isRTL(); var isDirectionNext = "next" === direction; var rightEdgeCellIndex = isRTL ? 0 : lastIndexInRow; var leftEdgeCellIndex = isRTL ? lastIndexInRow : 0; var edgeCellIndex = isDirectionNext ? rightEdgeCellIndex : leftEdgeCellIndex; var isNextCellGreaterThanEdge = cellIndex + step > edgeCellIndex; var isNextCellLessThanEdge = cellIndex - step < edgeCellIndex; var isRightEdgeCell = isRTL ? isNextCellLessThanEdge : isNextCellGreaterThanEdge; var isLeftEdgeCell = isRTL ? isNextCellGreaterThanEdge : isNextCellLessThanEdge; return isDirectionNext ? isRightEdgeCell : isLeftEdgeCell } _isGroupEndCell($cell, direction) { if (this.isGroupedByDate()) { return false } var isDirectionNext = "next" === direction; var cellsInRow = this._getCellCount(); var currentCellIndex = $cell.index(); var result = currentCellIndex % cellsInRow; var endCell = isDirectionNext ? cellsInRow - 1 : 0; var startCell = isDirectionNext ? 0 : cellsInRow - 1; return this._isRTL() ? result === startCell : result === endCell } _moveToCell($cell, isMultiSelection) { isMultiSelection = isMultiSelection && this.option("allowMultipleCellSelection"); this._setSelectedAndFocusedCells($cell, isMultiSelection); this._dateTableScrollable.scrollToElement($cell) } _setSelectedAndFocusedCells($cell, isMultiSelection) { if (!isDefined($cell) || !$cell.length) { return } var updateViewData = this.isVirtualScrolling(); var $correctedCell = $cell; if (isMultiSelection) { $correctedCell = this._correctCellForGroup($cell) } if ($correctedCell.hasClass(DATE_TABLE_FOCUSED_CELL_CLASS)) { return } this._setSelectedCells($correctedCell, isMultiSelection); this._setFocusedCell($correctedCell, updateViewData) } _setFocusedCell($cell) { var updateViewData = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : false; this._releaseFocusedCell(); var $correctedCell = $cell; if (updateViewData) { var { rowIndex: rowIndex, columnIndex: columnIndex } = this._getCoordinatesByCell($cell); var isAllDayCell = this._hasAllDayClass($cell); this.virtualSelectionState.setFocusedCell(rowIndex, columnIndex, isAllDayCell); var focusedCell = this.virtualSelectionState.getFocusedCell(); var { cellData: cellData, coordinates: coordinates } = focusedCell; var { allDay: allDay } = cellData; $correctedCell = allDay && !this._isVerticalGroupedWorkSpace() ? this._dom_getAllDayPanelCell(coordinates.cellIndex) : this._dom_getDateCell(coordinates) } this._toggleFocusedCellClass(true, $correctedCell); this._$focusedCell = $correctedCell } _setSelectedCells($firstCell, isMultiSelection) { this._releaseSelectedCells(); this._selectedCells = []; if (this.isVirtualScrolling()) { this._setSelectedCellsInVirtualMode($firstCell, isMultiSelection) } else { this._setSelectedCellsInStandardMode($firstCell, isMultiSelection) } var $selectedCells = $(this._selectedCells); this._toggleFocusClass(true, $selectedCells); this.setAria("label", "Add appointment", $selectedCells); var selectedCellData = this.getSelectedCellData().map(_ref => { var { startDate: startDate, endDate: endDate, allDay: allDay, groups: groups, groupIndex: groupIndex } = _ref; return { startDate: startDate, endDate: endDate, allDay: allDay, groups: groups, groupIndex: groupIndex || 0 } }); this.option("selectedCellData", selectedCellData); this._selectionChangedAction({ selectedCellData: selectedCellData }) } _setSelectedCellsInStandardMode($firstCell, isMultiSelection) { if (isMultiSelection) { var $previousCell = this._$prevCell; var orientation = "day" === this.option("type") && (!this.option("groups").length || "vertical" === this.option("groupOrientation")) ? "vertical" : "horizontal"; var $targetCells = this._getCellsBetween($firstCell, $previousCell, orientation); this._selectedCells = $targetCells.toArray() } else { this._selectedCells = [$firstCell.get(0)]; this._$prevCell = $firstCell } } _setSelectedCellsInVirtualMode($firstCell, isMultiSelection) { if (isMultiSelection) { var { rowIndex: firstRow, columnIndex: firstColumn } = this._getCoordinatesByCell($firstCell); var isFirstAllDay = this._hasAllDayClass($firstCell); var firstCell = { rowIndex: firstRow, columnIndex: firstColumn, allDay: isFirstAllDay }; this.virtualSelectionState.setSelectedCells(firstCell) } else { this._selectedCells = [$firstCell.get(0)]; this._$prevCell = $firstCell; var { rowIndex: rowIndex, columnIndex: columnIndex } = this._getCoordinatesByCell($firstCell); var isAllDayCell = this._hasAllDayClass($firstCell); var _firstCell = { rowIndex: rowIndex, columnIndex: columnIndex, allDay: isAllDayCell }; this.virtualSelectionState.setSelectedCells(_firstCell, _firstCell) } this._setSelectedCellsByCellData(this.virtualSelectionState.getSelectedCells()) } _correctCellForGroup($cell) { if (this.isVirtualScrolling()) { var isVirtualCell = $cell.hasClass(VIRTUAL_CELL_CLASS); if (isVirtualCell) { return this._$focusedCell } var cellData = this.getCellData($cell); var isValidFocusedCell = this.virtualSelectionState.isValidFocusedCell(cellData); return isValidFocusedCell ? $cell : this._$focusedCell } var $focusedCell = this._$focusedCell; var cellGroupIndex = this._getGroupIndexByCell($cell); var focusedCellGroupIndex = this._getGroupIndexByCell($focusedCell); var isDifferentTables = this._hasAllDayClass($cell) !== this._hasAllDayClass($focusedCell); return focusedCellGroupIndex !== cellGroupIndex || isDifferentTables ? $focusedCell : $cell } _getCellsBetween($first, $last, direction) { var isAllDayTable = this._hasAllDayClass($last); var $cells = this._getCells(isAllDayTable, direction); var firstIndex = $cells.index($first); var lastIndex = $cells.index($last); if (firstIndex > lastIndex) { var buffer = firstIndex; firstIndex = lastIndex; lastIndex = buffer } $cells = $cells.slice(firstIndex, lastIndex + 1); if (this._getGroupCount() > 1) { var result = []; var focusedGroupIndex = this._getGroupIndexByCell($first); each($cells, function(_, cell) { var groupIndex = this._getGroupIndexByCell($(cell)); if (focusedGroupIndex === groupIndex) { result.push(cell) } }.bind(this)); $cells = $(result) } return $cells } _hasAllDayClass($cell) { return $cell.hasClass(ALL_DAY_TABLE_CELL_CLASS) } _getGroupIndexByCell($cell) { if (this.isVirtualScrolling()) { var { rowIndex: rowIndex, columnIndex: columnIndex } = this._getCoordinatesByCell($cell); var isAllDayCell = $cell.hasClass(ALL_DAY_TABLE_CELL_CLASS); return this.viewDataProvider.getCellData(rowIndex, columnIndex, isAllDayCell).groupIndex } return this._groupedStrategy.getGroupIndexByCell($cell) } _toggleFocusedCellClass(isFocused, $element) { var $focusTarget = $element && $element.length ? $element : this._focusTarget(); $focusTarget.toggleClass(DATE_TABLE_FOCUSED_CELL_CLASS, isFocused) } _releaseSelectedAndFocusedCells() { this._releaseFocusedCell(); this._releaseSelectedCells(); this.option("selectedCellData", []) } _releaseFocusedCell() { var $cell = this._$focusedCell; if (isDefined($cell) && $cell.length) { this._toggleFocusedCellClass(false, $cell); this.setAria("label", void 0, $cell) } } _releaseSelectedCells() { var $cells = $(this._selectedCells); if (isDefined($cells) && $cells.length) { this._toggleFocusClass(false, $cells); this.setAria("label", void 0, $cells) } } _focusInHandler(e) { if ($(e.target).is(this._focusTarget()) && false !== this._isCellClick) { delete this._isCellClick; delete this._contextMenuHandled; super._focusInHandler.apply(this, arguments); var $cell = this._getFocusedCell(); this._setSelectedAndFocusedCells($cell) } } _focusOutHandler() { super._focusOutHandler.apply(this, arguments); if (!this._contextMenuHandled) { var _this$virtualSelectio; this._releaseSelectedAndFocusedCells(); null === (_this$virtualSelectio = this.virtualSelectionState) || void 0 === _this$virtualSelectio ? void 0 : _this$virtualSelectio.releaseSelectedAndFocusedCells() } } _focusTarget() { return this.$element() } _getDefaultOptions() { return extend(super._getDefaultOptions(), { currentDate: new Date, intervalCount: 1, startDate: null, firstDayOfWeek: void 0, startDayHour: 0, endDayHour: 24, hoursInterval: .5, activeStateEnabled: true, hoverStateEnabled: true, groups: [], showAllDayPanel: true, allDayExpanded: false, onCellClick: null, crossScrollingEnabled: false, dataCellTemplate: null, timeCellTemplate: null, resourceCellTemplate: null, dateCellTemplate: null, allowMultipleCellSelection: true, indicatorTime: new Date, indicatorUpdateInterval: 5 * toMs("minute"), shadeUntilCurrentTime: true, groupOrientation: "horizontal", selectedCellData: [], groupByDate: false, scrolling: { mode: "standard" }, renovateRender: true, height: void 0, draggingMode: "outlook" }) } _optionChanged(args) { switch (args.name) { case "startDayHour": case "endDayHour": this.invoke("validateDayHours"); this._cleanWorkSpace(); break; case "dateCellTemplate": case "resourceCellTemplate": case "dataCellTemplate": case "timeCellTemplate": case "hoursInterval": case "firstDayOfWeek": case "currentDate": case "startDate": this._cleanWorkSpace(); break; case "groups": this._cleanView(); this._removeAllDayElements(); this._initGrouping(); this.repaint(); break; case "groupOrientation": this._initGroupedStrategy(); this._createAllDayPanelElements(); this._removeAllDayElements(); this._cleanWorkSpace(); this._toggleGroupByDateClass(); break; case "showAllDayPanel": if (this._isVerticalGroupedWorkSpace()) { this._cleanView(); this._removeAllDayElements(); this._initGrouping(); this.repaint() } else if (!this.isRenovatedRender()) { this._toggleAllDayVisibility(true) } else { this.renderRWorkspace() } break; case "allDayExpanded": this._changeAllDayVisibility(); this._attachTablesEvents(); this.headerPanelOffsetRecalculate(); this._updateScrollable(); break; case "onSelectionChanged": this._createSelectionChangedAction(); break; case "onCellClick": this._createCellClickAction(); break; case "onCellContextMenu": this._attachContextMenuEvent(); break; case "intervalCount": this._cleanWorkSpace(); this._toggleWorkSpaceCountClass(); this._toggleFixedScrollableClass(); break; case "groupByDate": this._cleanWorkSpace(); this._toggleGroupByDateClass(); break; case "crossScrollingEnabled": this._toggleHorizontalScrollClass(); this._dateTableScrollable.option(this._dateTableScrollableConfig()); break; case "width": super._optionChanged(args); this._dimensionChanged(); break; case "allowMultipleCellSelection": case "selectedCellData": break; case "scrolling": if (this._isVirtualModeOn()) { if (!this.option("renovateRender")) { this.option("renovateRender", true) } else { this.repaint() } } else { this.option("renovateRender", false) } break; case "renovateRender": this.repaint(); break; default: super._optionChanged(args) } } _cleanWorkSpace() { var _this$virtualScrollin2; this._cleanView(); this._toggleGroupedClass(); this._toggleWorkSpaceWithOddCells(); null === (_this$virtualScrollin2 = this.virtualScrollingDispatcher) || void 0 === _this$virtualScrollin2 ? void 0 : _this$virtualScrollin2.updateDimensions(true); this._renderView(); this.option("crossScrollingEnabled") && this._setTableSizes(); this.cache.clear() } _init() { this._headerSemaphore = new ScrollSemaphore; this._sideBarSemaphore = new ScrollSemaphore; this._dataTableSemaphore = new ScrollSemaphore; this._viewDataProvider = null; this._virtualSelectionState = null; this._activeStateUnit = CELL_SELECTOR; this._maxAllowedVerticalPosition = []; this._maxAllowedPosition = []; super._init(); this._initGrouping(); this._toggleHorizontalScrollClass(); this._toggleWorkSpaceCountClass(); this._toggleGroupByDateClass(); this._toggleWorkSpaceWithOddCells(); this.$element().addClass(COMPONENT_CLASS).addClass(this._getElementClass()) } _initGrouping() { this._initGroupedStrategy(); this._toggleGroupingDirectionClass(); this._toggleGroupByDateClass() } _initGroupedStrategy() { var strategyName = this.option("groups").length ? this.option("groupOrientation") : this._getDefaultGroupStrategy(); var Strategy = "vertical" === strategyName ? VerticalGroupedStrategy : HorizontalGroupedStrategy; this._groupedStrategy = new Strategy(this) } _getDefaultGroupStrategy() { return "horizontal" } _isVerticalGroupedWorkSpace() { return !!this.option("groups").length && "vertical" === this.option("groupOrientation") } _isHorizontalGroupedWorkSpace() { return !!this.option("groups").length && "horizontal" === this.option("groupOrientation") } _toggleHorizontalScrollClass() { this.$element().toggleClass(WORKSPACE_WITH_BOTH_SCROLLS_CLASS, this.option("crossScrollingEnabled")) } _toggleGroupByDateClass() { this.$element().toggleClass(WORKSPACE_WITH_GROUP_BY_DATE_CLASS, this.isGroupedByDate()) } _toggleWorkSpaceCountClass() { this.$element().toggleClass(WORKSPACE_WITH_COUNT_CLASS, this._isWorkSpaceWithCount()) } _isWorkSpaceWithCount() { return this.option("intervalCount") > 1 } _toggleWorkSpaceWithOddCells() { this.$element().toggleClass(WORKSPACE_WITH_ODD_CELLS_CLASS, this._isWorkspaceWithOddCells()) } _isWorkspaceWithOddCells() { return .5 === this.option("hoursInterval") && !this.isVirtualScrolling() } _toggleGroupingDirectionClass() { this.$element().toggleClass(VERTICAL_GROUPED_WORKSPACE_CLASS, this._isVerticalGroupedWorkSpace()) } _getRealGroupOrientation() { return this._isVerticalGroupedWorkSpace() ? "vertical" : "horizontal" } _getTimePanelClass() { return TIME_PANEL_CLASS } _getDateTableClass() { return DATE_TABLE_CLASS } _getDateTableRowClass() { return DATE_TABLE_ROW_CLASS } _getDateTableCellClass(i, j) { var cellClass = DATE_TABLE_CELL_CLASS + " " + HORIZONTAL_SIZES_CLASS + " " + VERTICAL_SIZES_CLASS; return this._needApplyLastGroupCellClass() ? this._groupedStrategy.addAdditionalGroupCellClasses(cellClass, j + 1, i, j) : cellClass } _needApplyLastGroupCellClass() { return true } _getGroupRowClass() { return GROUP_ROW_CLASS } _getGroupHeaderClass(i) { var cellClass = GROUP_HEADER_CLASS; return this._groupedStrategy.addAdditionalGroupCellClasses(cellClass, i + 1) } _getGroupHeaderContentClass() { return GROUP_HEADER_CONTENT_CLASS } _initWorkSpaceUnits() { this._$headerPanel = $("<table>"); this._$thead = $("<thead>").appendTo(this._$headerPanel); this._$fixedContainer = $("<div>").addClass(FIXED_CONTAINER_CLASS); this._$allDayContainer = $("<div>").addClass(ALL_DAY_CONTAINER_CLASS); this._initAllDayPanelElements(); if (this.isRenovatedRender()) { this.createRAllDayPanelElements() } else { this._createAllDayPanelElements() } this._$timePanel = $("<table>").addClass(this._getTimePanelClass()); this._$dateTable = $("<table>"); this._$groupTable = $("<div>").addClass(WORKSPACE_VERTICAL_GROUP_TABLE_CLASS) } _initAllDayPanelElements() { this._allDayTitles = []; this._allDayTables = []; this._allDayPanels = [] } createRAllDayPanelElements() { this._$allDayPanel = $("<div>"); this._$allDayTitle = $("<div>").appendTo(this.$element()) } _createAllDayPanelElements() { var groupCount = this._getGroupCount(); if (this._isVerticalGroupedWorkSpace() && 0 !== groupCount) { for (var i = 0; i < groupCount; i++) { var $allDayTitle = $("<div>").addClass(ALL_DAY_TITLE_CLASS).text(messageLocalization.format("dxScheduler-allDay")); this._allDayTitles.push($allDayTitle); this._$allDayTable = $("<table>"); this._allDayTables.push(this._$allDayTable); this._$allDayPanel = $("<div>").addClass(ALL_DAY_PANEL_CLASS).append(this._$allDayTable); this._allDayPanels.push(this._$allDayPanel) } } else { this._$allDayTitle = $("<div>").addClass(ALL_DAY_TITLE_CLASS).text(messageLocalization.format("dxScheduler-allDay")).appendTo(this.$element()); this._$allDayTable = $("<table>"); this._$allDayPanel = $("<div>").addClass(ALL_DAY_PANEL_CLASS).append(this._$allDayTable) } } _initDateTableScrollable() { var $dateTableScrollable = $("<div>").addClass(SCHEDULER_DATE_TABLE_SCROLLABLE_CLASS); this._dateTableScrollable = this._createComponent($dateTableScrollable, Scrollable, this._dateTableScrollableConfig()) } _dateTableScrollableConfig() { var config = { useKeyboard: false, bounceEnabled: false, updateManually: true }; if (this._needCreateCrossScrolling()) { config = extend(config, this._createCrossScrollingConfig()) } return config } _createCrossScrollingConfig() { var config = {}; config.direction = "both"; config.onScroll = e => { this._dataTableSemaphore.take(); this._sideBarSemaphore.isFree() && this._sidebarScrollable && this._sidebarScrollable.scrollTo({ top: e.scrollOffset.top }); this._headerSemaphore.isFree() && this._headerScrollable && this._headerScrollable.scrollTo({ left: e.scrollOffset.left }); this._dataTableSemaphore.release() }; config.onEnd = () => { this.notifyObserver("updateResizableArea", {}) }; return config } _createWorkSpaceElements() { if (this.option("crossScrollingEnabled")) { this._createWorkSpaceScrollableElements() } else { this._createWorkSpaceStaticElements() } } _createWorkSpaceStaticElements() { if (this._isVerticalGroupedWorkSpace()) { this._dateTableScrollable.$content().append(this._$allDayContainer, this._$groupTable, this._$timePanel, this._$dateTable); this.$element().append(this._$fixedContainer, this._$headerPanel, this._dateTableScrollable.$element()) } else { this._dateTableScrollable.$content().append(this._$timePanel, this._$dateTable); this.$element().append(this._$fixedContainer, this._$headerPanel, this._$allDayContainer, this._$allDayPanel, this._dateTableScrollable.$element()) } } _createWorkSpaceScrollableElements() { this.$element().append(this._$fixedContainer); this._createHeaderScrollable(); this._createSidebarScrollable(); this.$element().append(this._dateTableScrollable.$element()); this._headerScrollable.$content().append(this._$headerPanel); this._dateTableScrollable.$content().append(this._$dateTable); if (this._isVerticalGroupedWorkSpace()) { this._dateTableScrollable.$content().prepend(this._$allDayContainer); this._sidebarScrollable.$content().append(this._$groupTable, this._$timePanel) } else { this._headerScrollable.$content().append(this._$allDayContainer, this._$allDayPanel) } this._sidebarScrollable.$content().append(this._$timePanel) } _createHeaderScrollable() { var $headerScrollable = $("<div>").addClass(SCHEDULER_HEADER_SCROLLABLE_CLASS).appendTo(this.$element()); this._headerScrollable = this._createComponent($headerScrollable, Scrollable, this._headerScrollableConfig()) } _headerScrollableConfig() { var config = { useKeyboard: false, showScrollbar: false, direction: "horizontal", useNative: false, updateManually: true, bounceEnabled: false, onScroll: e => { this._headerSemaphore.take(); this._dataTableSemaphore.isFree() && this._dateTableScrollable.scrollTo({ left: e.scrollOffset.left }); this._headerSemaphore.release() } }; return config } _createSidebarScrollable() { var $timePanelScrollable = $("<div>").addClass(SCHEDULER_SIDEBAR_SCROLLABLE_CLASS).appendTo(this.$element()); this._sidebarScrollable = this._createComponent($timePanelScrollable, Scrollable, { useKeyboard: false, showScrollbar: false, direction: "vertical", useNative: false, updateManually: true, bounceEnabled: false, onScroll: e => { this._sideBarSemaphore.take(); this._dataTableSemaphore.isFree() && this._dateTableScrollable.scrollTo({ top: e.scrollOffset.top }); this._sideBarSemaphore.release() } }) } _visibilityChanged(visible) { this.cache.clear(); if (visible) { this._updateGroupTableHeight() } if (visible && this._needCreateCrossScrolling()) { this._setTableSizes() } } _attachTableClasses() { this._addTableClass(this._$dateTable, this._getDateTableClass()); if (this._isVerticalGroupedWorkSpace()) { var groupCount = this._getGroupCount(); for (var i = 0; i < groupCount; i++) { this._addTableClass(this._allDayTables[i], ALL_DAY_TABLE_CLASS) } } else { this._addTableClass(this._$allDayTable, ALL_DAY_TABLE_CLASS) } } _attachHeaderTableClasses() { this._addTableClass(this._$headerPanel, HEADER_PANEL_CLASS) } _addTableClass($el, className) { $el && !$el.hasClass(className) && $el.addClass(className) } _setTableSizes() { this._attachTableClasses(); var cellWidth = this.getCellWidth(); if (cellWidth < this.getCellMinWidth()) { cellWidth = this.getCellMinWidth() } var minWidth = this.getWorkSpaceMinWidth(); var groupCount = this._getGroupCount(); var totalCellCount = this._getTotalCellCount(groupCount); var width = cellWidth * totalCellCount; if (width < minWidth) { width = minWidth } this._$headerPanel.width(width); this._$dateTable.width(width); this._$allDayTable && this._$allDayTable.width(width); this._attachHeaderTableClasses(); this._updateGroupTableHeight() } getWorkSpaceMinWidth() { return this._groupedStrategy.getWorkSpaceMinWidth() } _dimensionChanged() { if (this.option("crossScrollingEnabled")) { this._setTableSizes() } this.headerPanelOffsetRecalculate(); this.cache.clear(); this._cleanAllowedPositions() } _needCreateCrossScrolling() { return this.option("crossScrollingEnabled") } _getElementClass() { return noop() } _getRowCount() { return noop() } _getRowCountWithAllDayRows() { var allDayRowCount = this._isShowAllDayPanel() ? 1 : 0; return this._getRowCount() + allDayRowCount } _getCellCount() { return noop() } _initMarkup() { this.cache.clear(); this._initWorkSpaceUnits(); this._initDateTableScrollable(); this._createWorkSpaceElements(); this._initVirtualScrolling(); super._initMarkup(); if (!this.option("crossScrollingEnabled")) { this._attachTableClasses(); this._attachHeaderTableClasses() } this._toggleGroupedClass(); this._toggleFixedScrollableClass(); this._renderView(); this._attachEvents(); this._setFocusOnCellByOption(this.option("selectedCellData")) } isRenovatedRender() { return this.renovatedRenderSupported() && this.option("renovateRender") } _isVirtualModeOn() { return "virtual" === this.option("scrolling.mode") } isVirtualScrolling() { return this.isRenovatedRender() && this._isVirtualModeOn() } _initVirtualScrolling() { if (this.virtualScrollingDispatcher) { this.virtualScrollingDispatcher.dispose(); this.virtualScrollingDispatcher = null } if (this.isVirtualScrolling()) { this.virtualScrollingDispatcher = new VirtualScrollingDispatcher(this) } } _render() { super._render(); this._renderDateTimeIndication(); this._setIndicationUpdateInterval() } _toggleGroupedClass() { this.$element().toggleClass(GROUPED_WORKSPACE_CLASS, this._getGroupCount() > 0) } _toggleFixedScrollableClass() { return noop() } _renderView() { this._setFirstViewDate(); if (this.isRenovatedRender()) { if (this._isVerticalGroupedWorkSpace()) { this.renderRGroupPanel() } } else { this._applyCellTemplates(this._renderGroupHeader()) } if (this.isRenovatedRender()) { this.renderRWorkspace() } else { this._renderDateHeader(); this._renderTimePanel(); this._renderGroupAllDayPanel(); this._renderDateTable(); this._renderAllDayPanel() } this._updateGroupTableHeight(); this._shader = new VerticalShader(this) } onDataSourceChanged() {} preRenderAppointments(options) { this.option("allDayExpanded", options.allDayExpanded) } isGroupedAllDayPanel() { return this._isShowAllDayPanel() && this._isVerticalGroupedWorkSpace() } generateRenderOptions(isProvideVirtualCellsWidth) { var _this$_getToday; var groupCount = this._getGroupCount(); var verticalGroupCount = !this._isVerticalGroupedWorkSpace() ? 1 : groupCount; var horizontalGroupCount = this._isVerticalGroupedWorkSpace() ? 1 : groupCount; var allDayElements = this._insertAllDayRowsIntoDateTable() ? this._allDayTitles : void 0; var rowCountInGroup = this._getRowCount(); var cellCount = this._getTotalCellCount(groupCount); var rowCount = this._getTotalRowCount(groupCount, this._isVerticalGroupedWorkSpace()); var groupOrientation = groupCount > 0 ? this.option("groupOrientation") : this._getDefaultGroupStrategy(); var options = { horizontalGroupCount: horizontalGroupCount, verticalGroupCount: verticalGroupCount, rowCountInGroup: rowCountInGroup, cellCount: cellCount, cellCountInGroupRow: this._getCellCount(), cellDataGetters: [this._getCellData.bind(this)], allDayElements: allDayElements, startRowIndex: 0, startCellIndex: 0, groupOrientation: groupOrientation, rowCount: rowCount, totalRowCount: rowCount, totalCellCount: cellCount, groupCount: groupCount, getDateHeaderText: this._getHeaderText.bind(this), getDateHeaderDate: this._getDateByIndex.bind(this), getTimeCellDate: this._getTimeCellDate.bind(this), today: null === (_this$_getToday = this._getToday) || void 0 === _this$_getToday ? void 0 : _this$_getToday.call(this), groupByDate: this.isGroupedByDate(), groupsList: this._getAllGroups(), isHorizontalGrouping: this._isHorizontalGroupedWorkSpace(), isVerticalGrouping: this._isVerticalGroupedWorkSpace(), isProvideVirtualCellsWidth: isProvideVirtualCellsWidth }; if (this.isVirtualScrolling()) { extend(options, this.virtualScrollingDispatcher.getRenderState()) } return options } renovatedRenderSupported() { return false } renderRWorkspace() { var _this$virtualScrollin3; var isGenerateNewViewData = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : true; this._cleanAllowedPositions(); this.viewDataProvider.update(isGenerateNewViewData); this.renderRHeaderPanel(); this.renderRTimeTable(); this.renderRDateTable(); this.renderRAllDayPanel(); this.updateRSelection(); null === (_this$virtualScrollin3 = this.virtualScrollingDispatcher) || void 0 === _this$virtualScrollin3 ? void 0 : _this$virtualScrollin3.updateDimensions() } renderRDateTable() { this.renderRComponent(this._$dateTable, dxrDateTableLayout, "renovatedDateTable", this._getRDateTableProps()) } renderRGroupPanel() { var options = { groups: this.option("groups"), groupOrientation: this.option("groupOrientation"), groupByDate: this.isGroupedByDate(), resourceCellTemplate: this.option("resourceCellTemplate"), className: this.verticalGroupTableClass, baseColSpan: this.isGroupedByDate() ? 1 : this._getCellCount(), columnCountPerGroup: this._getCellCount() }; if (this.option("groups").length) { this._attachGroupCountAttr(); this.renderRComponent(this._getGroupHeaderContainer(), dxrGroupPanel, "renovatedGroupPanel", options) } else { this._detachGroupCountAttr() } } renderRAllDayPanel() { var visible = this._isShowAllDayPanel() && !this.isGroupedAllDayPanel(); if (this.supportAllDayRow() && !this._isVerticalGroupedWorkSpace()) { this._toggleAllDayVisibility(false); var groupCount = this._getGroupCount(); var cellCount = this._getTotalCellCount(groupCount); var options = { viewData: this.viewDataProvider.viewData, visible: visible, dataCellTemplate: this.option("dataCellTemplate"), startCellIndex: 0, cellCount: cellCount }; if (this.isVirtualScrolling()) { var { horizontalVirtualScrolling: horizontalVirtualScrolling } = this.virtualScrollingDispatcher; var renderState = null === horizontalVirtualScrolling || void 0 === horizontalVirtualScrolling ? void 0 : horizontalVirtualScrolling.getRenderState(); extend(options, _extends({}, renderState)) } this.renderRComponent(this._$allDayPanel, dxrAllDayPanelLayout, "renovatedAllDayPanel", options); this.renderRComponent(this._$allDayTitle, dxrAllDayPanelTitle, "renovatedAllDayPanelTitle", { visible: visible }); this._$allDayTable = this.renovatedAllDayPanel.$element().find(".".concat(ALL_DAY_TABLE_CLASS)) } this._toggleAllDayVisibility(true) } renderRTimeTable() { this.renderRComponent(this._$timePanel, dxrTimePanelTableLayout, "renovatedTimePanel", { timePanelData: this.viewDataProvider.timePanelData, timeCellTemplate: this.option("timeCellTemplate"), groupOrientation: this.option("groupOrientation") }) } renderRHeaderPanel() { var isRenderDateHeader = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : true; if (this.option("gr