/** * DevExtreme (ui/calendar/ui.calendar.base_view.js) * Version: 19.1.16 * Build date: Tue Oct 18 2022 * * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ "use strict"; var _renderer = require("../../core/renderer"); var _renderer2 = _interopRequireDefault(_renderer); var _dom_adapter = require("../../core/dom_adapter"); var _dom_adapter2 = _interopRequireDefault(_dom_adapter); var _events_engine = require("../../events/core/events_engine"); var _events_engine2 = _interopRequireDefault(_events_engine); var _element_data = require("../../core/element_data"); var _element_data2 = _interopRequireDefault(_element_data); var _dom = require("../../core/utils/dom"); var _dom2 = _interopRequireDefault(_dom); var _ui = require("../widget/ui.widget"); var _ui2 = _interopRequireDefault(_ui); var _date = require("../../core/utils/date"); var _extend = require("../../core/utils/extend"); var _common = require("../../core/utils/common"); var _date_serialization = require("../../core/utils/date_serialization"); var _message = require("../../localization/message"); var _utils = require("../../events/utils"); var _click = require("../../events/click"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj } } var abstract = _ui2.default.abstract; var CALENDAR_OTHER_VIEW_CLASS = "dx-calendar-other-view"; var CALENDAR_CELL_CLASS = "dx-calendar-cell"; var CALENDAR_EMPTY_CELL_CLASS = "dx-calendar-empty-cell"; var CALENDAR_TODAY_CLASS = "dx-calendar-today"; var CALENDAR_SELECTED_DATE_CLASS = "dx-calendar-selected-date"; var CALENDAR_CONTOURED_DATE_CLASS = "dx-calendar-contoured-date"; var CALENDAR_DXCLICK_EVENT_NAME = (0, _utils.addNamespace)(_click.name, "dxCalendar"); var CALENDAR_DATE_VALUE_KEY = "dxDateValueKey"; var BaseView = _ui2.default.inherit({ _getViewName: function() { return "base" }, _getDefaultOptions: function() { return (0, _extend.extend)(this.callBase(), { date: new Date, focusStateEnabled: false, cellTemplate: null, disabledDates: null, onCellClick: null, rowCount: 3, colCount: 4, allowValueSelection: true }) }, _init: function() { this.callBase(); var value = this.option("value"); this.option("value", new Date(value)); if (!this.option("value").valueOf()) { this.option("value", new Date(0, 0, 0, 0, 0, 0)) } }, _initMarkup: function() { this.callBase(); this._renderImpl() }, _renderImpl: function() { this.$element().append(this._createTable()); this._createDisabledDatesHandler(); this._renderBody(); this._renderContouredDate(); this._renderValue(); this._renderEvents() }, _createTable: function() { this._$table = (0, _renderer2.default)(""); this.setAria({ label: (0, _message.format)("dxCalendar-ariaWidgetName"), role: "grid" }, this._$table); return this._$table }, _renderBody: function() { this.$body = (0, _renderer2.default)("").appendTo(this._$table); var rowData = { cellDate: this._getFirstCellData(), prevCellDate: null }; for (var rowIndex = 0, rowCount = this.option("rowCount"); rowIndex < rowCount; rowIndex++) { rowData.row = this._createRow(); for (var colIndex = 0, colCount = this.option("colCount"); colIndex < colCount; colIndex++) { this._renderCell(rowData, colIndex) } } }, _createRow: function() { var row = _dom_adapter2.default.createElement("tr"); this.setAria("role", "row", (0, _renderer2.default)(row)); this.$body.get(0).appendChild(row); return row }, _appendCell: function(row, cell) { if (!this._appendMethodName) { this._cacheAppendMethodName() }(0, _renderer2.default)(row)[this._appendMethodName](cell) }, _cacheAppendMethodName: function(rtlEnabled) { this._appendMethodName = (null !== rtlEnabled && void 0 !== rtlEnabled ? rtlEnabled : this.option("rtlEnabled")) ? "prepend" : "append" }, _createCell: function(cellDate) { var cell = _dom_adapter2.default.createElement("td"); var $cell = (0, _renderer2.default)(cell); cell.className = this._getClassNameByDate(cellDate); cell.setAttribute("data-value", (0, _date_serialization.serializeDate)(cellDate, (0, _date.getShortDateFormat)())); _element_data2.default.data(cell, CALENDAR_DATE_VALUE_KEY, cellDate); this.setAria({ role: "gridcell", label: this.getCellAriaLabel(cellDate) }, $cell); return { cell: cell, $cell: $cell } }, _renderCell: function(params, cellIndex) { var cellDate = params.cellDate, prevCellDate = params.prevCellDate, row = params.row; if (prevCellDate) { (0, _date.fixTimezoneGap)(prevCellDate, cellDate) } params.prevCellDate = cellDate; var _this$_createCell = this._createCell(cellDate), cell = _this$_createCell.cell, $cell = _this$_createCell.$cell; var cellTemplate = this.option("cellTemplate"); this._appendCell(row, cell); if (cellTemplate) { cellTemplate.render(this._prepareCellTemplateData(cellDate, cellIndex, $cell)) } else { cell.innerHTML = this._getCellText(cellDate) } params.cellDate = this._getNextCellData(cellDate) }, _getClassNameByDate: function(cellDate) { var className = CALENDAR_CELL_CLASS; if (this._isTodayCell(cellDate)) { className += " ".concat(CALENDAR_TODAY_CLASS) } if (this._isDateOutOfRange(cellDate) || this.isDateDisabled(cellDate)) { className += " ".concat(CALENDAR_EMPTY_CELL_CLASS) } if (this._isOtherView(cellDate)) { className += " ".concat(CALENDAR_OTHER_VIEW_CLASS) } return className }, _prepareCellTemplateData: function(cellDate, cellIndex, $cell) { return { model: { text: this._getCellText(cellDate), date: cellDate, view: this._getViewName() }, container: _dom2.default.getPublicElement($cell), index: cellIndex } }, _renderEvents: function() { var _this = this; this._createCellClickAction(); _events_engine2.default.off(this._$table, CALENDAR_DXCLICK_EVENT_NAME); _events_engine2.default.on(this._$table, CALENDAR_DXCLICK_EVENT_NAME, "td", function(e) { if (!(0, _renderer2.default)(e.currentTarget).hasClass(CALENDAR_EMPTY_CELL_CLASS)) { _this._cellClickAction({ event: e, value: (0, _renderer2.default)(e.currentTarget).data(CALENDAR_DATE_VALUE_KEY) }) } }) }, _createCellClickAction: function() { this._cellClickAction = this._createActionByOption("onCellClick") }, _createDisabledDatesHandler: function() { var disabledDates = this.option("disabledDates"); this._disabledDatesHandler = Array.isArray(disabledDates) ? this._getDefaultDisabledDatesHandler(disabledDates) : disabledDates || _common.noop }, _getDefaultDisabledDatesHandler: function(disabledDates) { return _common.noop }, _isTodayCell: abstract, _isDateOutOfRange: abstract, isDateDisabled: function(cellDate) { var dateParts = { date: cellDate, view: this._getViewName() }; return this._disabledDatesHandler(dateParts) }, _isOtherView: abstract, _getCellText: abstract, _getFirstCellData: abstract, _getNextCellData: abstract, _renderContouredDate: function(contouredDate) { if (!this.option("focusStateEnabled")) { return } contouredDate = contouredDate || this.option("contouredDate"); var $oldContouredCell = this._$table.find(".".concat(CALENDAR_CONTOURED_DATE_CLASS)); var $newContouredCell = this._getCellByDate(contouredDate); $oldContouredCell.removeClass(CALENDAR_CONTOURED_DATE_CLASS); $newContouredCell.addClass(CALENDAR_CONTOURED_DATE_CLASS) }, _dispose: function() { this._keyboardProcessor = void 0; this.callBase() }, _changeValue: function(cellDate) { if (cellDate) { var value = this.option("value"); var newValue = value ? new Date(value) : new Date; newValue.setDate(cellDate.getDate()); newValue.setMonth(cellDate.getMonth()); newValue.setFullYear(cellDate.getFullYear()); newValue.setDate(cellDate.getDate()); this.option("value", newValue) } else { this.option("value", null) } }, _renderValue: function() { if (!this.option("allowValueSelection")) { return } var value = this.option("value"); var selectedCell = this._getCellByDate(value); if (this._selectedCell) { this._selectedCell.removeClass(CALENDAR_SELECTED_DATE_CLASS) } selectedCell.addClass(CALENDAR_SELECTED_DATE_CLASS); this._selectedCell = selectedCell }, getCellAriaLabel: function(date) { return this._getCellText(date) }, _getFirstAvailableDate: function() { var date = this.option("date"); var min = this.option("min"); date = (0, _date.getFirstDateView)(this._getViewName(), date); return new Date(min && date < min ? min : date) }, _getCellByDate: abstract, isBoundary: abstract, _optionChanged: function(args) { var name = args.name, value = args.value; switch (name) { case "value": this._renderValue(); break; case "contouredDate": this._renderContouredDate(value); break; case "onCellClick": this._createCellClickAction(); break; case "disabledDates": case "cellTemplate": this._invalidate(); break; case "rtlEnabled": this._cacheAppendMethodName(value); this.callBase(args); break; default: this.callBase(args) } } }); module.exports = BaseView;