@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.
896 lines (895 loc) • 45.9 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { isNullOrUndefined, extend, EventHandler, formatUnit, Browser } from '@syncfusion/ej2-base';
import { createElement, remove, addClass, removeClass, append, prepend } from '@syncfusion/ej2-base';
import { ViewBase } from './view-base';
import { VerticalEvent } from '../event-renderer/vertical-view';
import { MonthEvent } from '../event-renderer/month';
import * as util from '../base/util';
import * as event from '../base/constant';
import * as cls from '../base/css-constant';
/**
* vertical view
*/
var VerticalView = /** @class */ (function (_super) {
__extends(VerticalView, _super);
function VerticalView(parent) {
var _this = _super.call(this, parent) || this;
_this.viewClass = 'e-day-view';
_this.isInverseTableSelect = true;
_this.baseCssClass = 'e-vertical-view';
_this.appointment = null;
return _this;
}
VerticalView.prototype.getModuleName = function () {
return 'verticalView';
};
VerticalView.prototype.addEventListener = function () {
this.parent.on(event.scrollUiUpdate, this.scrollUiUpdate, this);
this.parent.on(event.dataReady, this.renderEvents, this);
};
VerticalView.prototype.removeEventListener = function () {
if (this.parent) {
this.parent.off(event.scrollUiUpdate, this.scrollUiUpdate);
this.parent.off(event.dataReady, this.renderEvents);
}
};
VerticalView.prototype.renderEvents = function () {
this.appointment = this.parent.activeViewOptions.timeScale.enable ?
new VerticalEvent(this.parent) : new MonthEvent(this.parent);
this.appointment.renderAppointments();
this.parent.notify(event.eventsLoaded, {});
};
VerticalView.prototype.onContentScroll = function (e) {
this.parent.removeNewEventElement();
var target = e.target;
this.parent.notify(event.virtualScroll, e);
this.scrollLeftPanel(target);
this.scrollTopPanel(target);
if (!this.parent.isAdaptive) {
this.parent.uiStateValues.top = target.scrollTop;
}
this.parent.uiStateValues.left = target.scrollLeft;
if (!isNullOrUndefined(this.parent.quickPopup) && !this.parent.uiStateValues.isTapHold) {
this.parent.quickPopup.quickPopupHide();
}
this.setPersistence();
};
VerticalView.prototype.onAdaptiveMove = function (e) {
if (this.parent.uiStateValues.action) {
e.preventDefault();
}
};
VerticalView.prototype.onAdaptiveScroll = function (e) {
if (this.parent && !this.parent.isDestroyed) {
this.parent.removeNewEventElement();
this.parent.uiStateValues.top = e.target.scrollTop;
}
};
VerticalView.prototype.scrollLeftPanel = function (target) {
var leftPanel = this.getLeftPanelElement();
if (!isNullOrUndefined(leftPanel)) {
leftPanel.scrollTop = target.scrollTop;
}
};
VerticalView.prototype.scrollUiUpdate = function (args) {
if (!this.parent) {
return;
}
var dateHeader = this.parent.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);
var headerBarHeight = this.getHeaderBarHeight();
var timeCells = this.getLeftPanelElement();
var content = this.getScrollableElement();
var header = this.getDatesHeaderElement();
var scrollerHeight = this.parent.element.offsetHeight - headerBarHeight - header.offsetHeight;
this.setContentHeight(content, timeCells, scrollerHeight);
this.setColWidth(content);
var scrollBarWidth = util.getScrollBarWidth();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.firstElementChild.style[args.cssProperties.rtlBorder] = '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.style[args.cssProperties.rtlPadding] = '';
var isDateHeaderScroll = this.parent.enableAllDayScroll ? !((content.offsetWidth - content.clientWidth) <=
(dateHeader.offsetWidth - dateHeader.clientWidth) && dateHeader.classList.contains('e-all-day-scroll')) : true;
if (content.offsetWidth - content.clientWidth > 0 && isDateHeaderScroll) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.firstElementChild.style[args.cssProperties.border] = scrollBarWidth > 0 ? '1px' : '0px';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.style[args.cssProperties.padding] = scrollBarWidth > 0 ? scrollBarWidth - 1 + 'px' : '0px';
}
else {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.firstElementChild.style[args.cssProperties.border] = '';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
header.style[args.cssProperties.padding] = '';
}
if (!args.isPreventScrollUpdate) {
if (this.parent.uiStateValues.isInitial) {
if (this.parent.currentView.indexOf('Timeline') > -1) {
content.scrollTop = this.parent.uiStateValues.top;
}
this.scrollToWorkHour();
this.parent.uiStateValues.isInitial = false;
}
else {
if (timeCells) {
timeCells.scrollTop = this.parent.uiStateValues.top;
}
content.scrollTop = this.parent.uiStateValues.top;
content.scrollLeft = this.parent.uiStateValues.left;
}
}
if (this.parent.activeViewOptions.timeScale.enable) {
this.highlightCurrentTime();
}
this.retainScrollPosition();
if (!isNullOrUndefined(timeCells) && !isNullOrUndefined(content) && timeCells.scrollTop !== content.scrollTop) {
timeCells.scrollTop = content.scrollTop;
}
};
VerticalView.prototype.setContentHeight = function (element, leftPanelElement, height) {
if (this.parent.isAdaptive && !this.isTimelineView()) {
element.style.height = (this.parent.height === 'auto') ? 'auto' : formatUnit(height);
}
else {
if (!isNullOrUndefined(leftPanelElement)) {
leftPanelElement.style.height = (this.parent.height === 'auto') ? 'auto'
: formatUnit(height - this.getScrollXIndent(element));
}
element.style.height = (this.parent.height === 'auto') ? 'auto' : formatUnit(height);
}
};
VerticalView.prototype.scrollToWorkHour = function () {
if (this.parent.workHours.highlight) {
var firstWorkHourCell = this.element.querySelector('.' + cls.WORK_HOURS_CLASS);
if (firstWorkHourCell) {
this.getScrollableElement().scrollTop = firstWorkHourCell.offsetTop;
this.parent.uiStateValues.top = firstWorkHourCell.offsetTop;
this.parent.uiStateValues.left = 0;
}
}
};
VerticalView.prototype.scrollToHour = function (hour, scrollDate) {
var date = this.parent.getStartEndTime(hour);
if (!isNullOrUndefined(scrollDate)) {
var headerElement = this.element.querySelector('.' + cls.HEADER_CELLS_CLASS + '[data-date="' + new Date(util.resetTime(scrollDate)).getTime() + '"]');
if (headerElement) {
if (this.parent.enableRtl) {
var conWrap = this.element.querySelector('.' + cls.CONTENT_TABLE_CLASS);
this.getScrollableElement().scrollLeft = -(conWrap.offsetWidth - headerElement.offsetLeft - headerElement.offsetWidth);
}
else {
this.getScrollableElement().scrollLeft = headerElement.offsetLeft;
}
}
}
if (isNullOrUndefined(date)) {
return;
}
this.getScrollableElement().scrollTop = this.getTopFromDateTime(date);
};
VerticalView.prototype.scrollToDate = function (scrollDate) {
this.scrollToHour(null, scrollDate);
};
VerticalView.prototype.generateColumnLevels = function () {
var level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
var columnLevels = [];
if (this.parent.activeViewOptions.group.resources.length > 0) {
columnLevels = this.parent.resourceBase.generateResourceLevels(level);
if (this.parent.activeViewOptions.group.hideNonWorkingDays) {
while (columnLevels[0].length === 0) {
this.parent.setProperties({ selectedDate: this.parent.activeView.getNextPreviousDate(this.previousNextAction) }, true);
this.parent.activeView.getRenderDates();
if (this.parent.headerModule) {
this.parent.headerModule.setCalendarDate(this.parent.selectedDate);
this.parent.headerModule.updateDateRange();
}
level = this.getDateSlots(this.renderDates, this.parent.activeViewOptions.workDays);
columnLevels = this.parent.resourceBase.generateResourceLevels(level);
}
}
if (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0) {
var resourceLevel = this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex];
var resStartHour = resourceLevel.resourceData[resourceLevel.resource.startHourField];
var resEndHour = resourceLevel.resourceData[resourceLevel.resource.endHourField];
var dateSlots = this.getDateSlots(resourceLevel.renderDates, resourceLevel.workDays, resStartHour, resEndHour);
columnLevels = [dateSlots];
}
}
else {
columnLevels.push(level);
}
this.colLevels = columnLevels;
return columnLevels;
};
// eslint-disable-next-line max-len
VerticalView.prototype.getDateSlots = function (renderDates, workDays, workStartHour, workEndHour) {
if (workStartHour === void 0) { workStartHour = this.parent.workHours.start; }
if (workEndHour === void 0) { workEndHour = this.parent.workHours.end; }
var dateCol = [];
var start = this.parent.getStartEndTime(workStartHour);
var end = this.parent.getStartEndTime(workEndHour);
for (var _i = 0, renderDates_1 = renderDates; _i < renderDates_1.length; _i++) {
var col = renderDates_1[_i];
var classList = [cls.HEADER_CELLS_CLASS];
if (this.isCurrentDate(col)) {
classList.push(cls.CURRENT_DAY_CLASS);
}
dateCol.push({
date: col, type: 'dateHeader', className: classList, colSpan: 1,
workDays: workDays, startHour: new Date(+start), endHour: new Date(+end)
});
}
return dateCol;
};
VerticalView.prototype.isWorkHourRange = function (date) {
return (this.getStartHour().getTime() <= date.getTime()) && (this.getEndHour().getTime() >= date.getTime());
};
VerticalView.prototype.highlightCurrentTime = function () {
var _this = this;
if (this.parent.activeViewOptions.headerRows.length > 0 &&
this.parent.activeViewOptions.headerRows.slice(-1)[0].option !== 'Hour') {
return;
}
var currentDate = this.parent.getCurrentTime();
if (this.parent.showTimeIndicator && this.isWorkHourRange(currentDate)) {
var currentDateIndex = this.getCurrentTimeIndicatorIndex();
if (currentDateIndex.length > 0 && !isNullOrUndefined(this.element.querySelector('.' + cls.WORK_CELLS_CLASS))) {
this.changeCurrentTimePosition();
if (isNullOrUndefined(this.currentTimeIndicatorTimer)) {
var interval = util.MS_PER_MINUTE - ((currentDate.getSeconds() * 1000) + currentDate.getMilliseconds());
if (interval <= (util.MS_PER_MINUTE - 1000)) {
window.setTimeout(function () {
if (!isNullOrUndefined(_this.currentTimeIndicatorTimer)) {
_this.clearCurrentTimeIndicatorTimer();
_this.changeCurrentTimePosition();
_this.updateCurrentTimeIndicatorTimer();
}
}, interval);
}
this.updateCurrentTimeIndicatorTimer();
}
}
else {
this.clearCurrentTimeIndicatorTimer();
}
}
else {
this.clearCurrentTimeIndicatorTimer();
}
};
VerticalView.prototype.getCurrentTimeIndicatorIndex = function () {
var currentDateIndex = [];
if (!isNullOrUndefined(this.parent.resourceBase) && (this.parent.activeViewOptions.group.resources.length > 0) &&
!this.parent.uiStateValues.isGroupAdaptive) {
var count = 0;
var currentDate = util.resetTime(this.parent.getCurrentTime());
if (this.parent.virtualScrollModule && this.parent.activeViewOptions.allowVirtualScrolling &&
this.parent.activeViewOptions.group.byDate) {
for (var _i = 0, _a = this.parent.resourceBase.expandedResources; _i < _a.length; _i++) {
var resource = _a[_i];
if (util.resetTime(resource.date).getTime() === currentDate.getTime()) {
currentDateIndex.push(count);
}
count += 1;
}
}
else {
for (var _b = 0, _c = this.parent.resourceBase.renderedResources; _b < _c.length; _b++) {
var resource = _c[_b];
var index = this.parent.getIndexOfDate(resource.renderDates, currentDate);
if (index >= 0) {
var resIndex = this.parent.activeViewOptions.group.byDate ?
(this.parent.resourceBase.lastResourceLevel.length * index) + count : count + index;
currentDateIndex.push(resIndex);
}
count += this.parent.activeViewOptions.group.byDate ? 1 : resource.renderDates.length;
}
}
}
else {
var renderDates = (this.parent.uiStateValues.isGroupAdaptive && this.parent.resourceBase.lastResourceLevel.length > 0)
? this.parent.resourceBase.lastResourceLevel[this.parent.uiStateValues.groupIndex].renderDates : this.renderDates;
var index = this.parent.getIndexOfDate(renderDates, util.resetTime(this.parent.getCurrentTime()));
if (index >= 0) {
currentDateIndex.push(index);
}
}
return currentDateIndex;
};
VerticalView.prototype.clearCurrentTimeIndicatorTimer = function () {
if (!isNullOrUndefined(this.currentTimeIndicatorTimer)) {
window.clearInterval(this.currentTimeIndicatorTimer);
this.currentTimeIndicatorTimer = null;
this.removeCurrentTimeIndicatorElements();
}
};
VerticalView.prototype.updateCurrentTimeIndicatorTimer = function () {
var _this = this;
this.currentTimeIndicatorTimer = window.setInterval(function () { _this.changeCurrentTimePosition(); }, util.MS_PER_MINUTE);
};
VerticalView.prototype.removeCurrentTimeIndicatorElements = function () {
var queryString = '.' + cls.PREVIOUS_TIMELINE_CLASS + ',.' + cls.CURRENT_TIMELINE_CLASS + ',.' + cls.CURRENT_TIME_CLASS;
var timeIndicator = [].slice.call(this.element.querySelectorAll(queryString));
for (var _i = 0, timeIndicator_1 = timeIndicator; _i < timeIndicator_1.length; _i++) {
var indicator = timeIndicator_1[_i];
remove(indicator);
}
};
VerticalView.prototype.changeCurrentTimePosition = function () {
if (!this.parent || this.parent && this.parent.isDestroyed) {
this.parent = null;
return;
}
this.removeCurrentTimeIndicatorElements();
var currentDateIndex = this.getCurrentTimeIndicatorIndex();
var firstRow = this.parent.getContentTable().rows[0];
var top = this.getTopFromDateTime(this.parent.getCurrentTime());
var topInPx = formatUnit(top);
var rowIndex = Math.floor(top / firstRow.cells[0].offsetHeight);
var timeCellsWrap = this.getLeftPanelElement();
var timeTrs = [].slice.call(timeCellsWrap.querySelectorAll('tr'));
if (isNullOrUndefined(rowIndex) || isNaN(rowIndex) || rowIndex === timeTrs.length) {
return;
}
var curTimeWrap = [].slice.call(this.element.querySelectorAll('.' + cls.TIMELINE_WRAPPER_CLASS));
for (var i = 0, length_1 = currentDateIndex[0]; i < length_1; i++) {
curTimeWrap[parseInt(i.toString(), 10)].appendChild(createElement('div', { className: cls.PREVIOUS_TIMELINE_CLASS, styles: 'top:' + topInPx }));
}
for (var _i = 0, currentDateIndex_1 = currentDateIndex; _i < currentDateIndex_1.length; _i++) {
var day = currentDateIndex_1[_i];
if (curTimeWrap.length > day) {
curTimeWrap[parseInt(day.toString(), 10)].appendChild(createElement('div', {
className: cls.CURRENT_TIMELINE_CLASS, styles: 'top:' + topInPx
}));
}
}
var currentTimeEle = createElement('div', {
innerHTML: this.parent.getTimeString(this.parent.getCurrentTime()),
className: cls.CURRENT_TIME_CLASS,
styles: 'top:' + topInPx
});
if (rowIndex <= timeTrs.length) {
removeClass(timeCellsWrap.querySelectorAll('.' + cls.HIDE_CHILDS_CLASS), cls.HIDE_CHILDS_CLASS);
if (timeTrs[parseInt(rowIndex.toString(), 10)]) {
addClass([timeTrs[parseInt(rowIndex.toString(), 10)].lastElementChild], cls.HIDE_CHILDS_CLASS);
}
prepend([currentTimeEle], timeCellsWrap);
currentTimeEle.style.top = formatUnit(currentTimeEle.offsetTop - (currentTimeEle.offsetHeight / 2));
}
};
VerticalView.prototype.getTopFromDateTime = function (date) {
var startHour = this.getStartEndHours(this.parent.activeViewOptions.startHour);
var endHour = this.getStartEndHours(this.parent.activeViewOptions.endHour);
var diffInMinutes = ((date.getHours() - startHour.getHours()) * 60) + (date.getMinutes() - startHour.getMinutes());
var hoursRange = util.getStartEndHours(util.resetTime(new Date(date.getTime())), startHour, endHour);
var totalMinutes = (hoursRange.endHour.getTime() - hoursRange.startHour.getTime()) / util.MS_PER_MINUTE;
var timescaleInterval = this.parent.activeViewOptions.timeScale.interval;
var interval = 0;
if (startHour.getHours() === 0 && startHour.getMinutes() === 0 && endHour.getHours() === 0 && endHour.getMinutes() === 0) {
interval = timescaleInterval;
}
else {
interval = (this.parent.activeViewOptions.timeScale.slotCount !== 1) ? timescaleInterval :
(timescaleInterval > totalMinutes ? totalMinutes : timescaleInterval);
}
return (diffInMinutes * this.getWorkCellHeight() * this.parent.activeViewOptions.timeScale.slotCount) / interval;
};
VerticalView.prototype.getWorkCellHeight = function () {
return parseFloat(this.parent.getElementHeight(this.element.querySelector('.' + cls.WORK_CELLS_CLASS)).toFixed(2));
};
VerticalView.prototype.getTdContent = function (date, type, groupIndex) {
var cntEle;
var wrapper = createElement('div');
var templateName = '';
var templateId = this.parent.element.id + '_';
switch (type) {
case 'dateHeader':
if (this.parent.activeViewOptions.dateHeaderTemplate) {
templateName = 'dateHeaderTemplate';
var args = { date: date, type: type };
var viewName = this.parent.activeViewOptions.dateHeaderTemplateName;
cntEle = [].slice.call(this.parent.getDateHeaderTemplate()(args, this.parent, templateName, templateId + viewName + templateName, false, undefined, undefined, this.parent.root));
}
else {
wrapper.innerHTML = this.parent.activeView.isTimelineView() ?
"<span class=\"e-header-date e-navigate\">" + this.getTimelineDate(date) + "</span>" :
"<div class=\"e-header-day\">" + util.capitalizeFirstWord(this.getDayName(date), 'single') + "</div>" +
("<div class=\"e-header-date e-navigate\" role=\"link\">" + this.getDate(date) + "</div>");
cntEle = [].slice.call(wrapper.childNodes);
}
break;
case 'majorSlot':
if (this.parent.activeViewOptions.timeScale.majorSlotTemplate) {
templateName = 'majorSlotTemplate';
var args = { date: date, type: type };
cntEle = [].slice.call(this.parent.getMajorSlotTemplate()(args, this.parent, templateName, templateId + templateName, false, undefined, undefined, this.parent.root));
}
else {
wrapper.innerHTML = "<span>" + this.getTime(date) + "</span>";
cntEle = [].slice.call(wrapper.childNodes);
}
break;
case 'minorSlot':
if (this.parent.activeViewOptions.timeScale.minorSlotTemplate) {
templateName = 'minorSlotTemplate';
var args = { date: date, type: type };
cntEle = [].slice.call(this.parent.getMinorSlotTemplate()(args, this.parent, templateName, templateId + templateName, false, undefined, undefined, this.parent.root));
}
else {
cntEle = [].slice.call(wrapper.childNodes);
}
break;
case 'alldayCells':
if (this.parent.activeViewOptions.cellTemplate) {
var viewName = this.parent.activeViewOptions.cellTemplateName;
templateName = 'cellTemplate';
var args = { date: date, type: type, groupIndex: groupIndex };
cntEle = [].slice.call(this.parent.getCellTemplate()(args, this.parent, templateName, templateId + viewName + templateName, false, undefined, undefined, this.parent.root));
}
break;
}
return cntEle;
};
VerticalView.prototype.refreshHeader = function () {
remove(this.element.querySelector('tbody tr'));
this.renderHeader();
this.parent.notify(event.contentReady, {});
var dateHeader = this.element.querySelector('.' + cls.DATE_HEADER_WRAP_CLASS);
if (dateHeader) {
dateHeader.scrollLeft = this.parent.uiStateValues.left;
}
};
VerticalView.prototype.renderLayout = function (type) {
this.setPanel(createElement('div', { className: cls.TABLE_WRAP_CLASS }));
var clsList = [this.baseCssClass, this.viewClass];
clsList.push(type);
if (this.parent.activeViewOptions.group.byDate) {
clsList.push('e-by-date');
}
if (!this.parent.activeViewOptions.timeScale.enable) {
addClass([this.element], [cls.TIMESCALE_DISABLE, this.viewClass]);
}
if (this.parent.activeViewOptions.allowVirtualScrolling && !this.parent.uiStateValues.isGroupAdaptive) {
clsList.push(cls.VIRTUAL_SCROLL_CLASS);
}
if (this.parent.rowAutoHeight && this.parent.eventSettings.ignoreWhitespace) {
clsList.push(cls.IGNORE_WHITESPACE);
}
this.renderPanel(type);
addClass([this.element], clsList);
this.element.appendChild(this.createTableLayout(cls.OUTER_TABLE_CLASS));
this.element.querySelector('table').setAttribute('role', 'presentation');
this.colLevels = this.generateColumnLevels();
this.renderHeader();
this.renderContent();
if (this.parent.uiStateValues.isGroupAdaptive && !this.parent.element.querySelector('.' + cls.RESOURCE_TOOLBAR_CONTAINER)) {
this.renderResourceMobileLayout();
}
this.parent.notify(event.contentReady, {});
};
VerticalView.prototype.renderHeader = function () {
var tr = createElement('tr');
var dateTd = createElement('td');
dateTd.appendChild(this.renderDatesHeader());
if (this.parent.activeViewOptions.timeScale.enable) {
var indentTd = createElement('td', { className: cls.LEFT_INDENT_CLASS });
indentTd.appendChild(this.renderLeftIndent());
tr.appendChild(indentTd);
}
tr.appendChild(dateTd);
prepend([tr], this.element.querySelector('tbody'));
};
VerticalView.prototype.renderContent = function () {
if (this.parent.activeViewOptions.group.resources.length > 0) {
this.parent.resourceBase.renderedResources = extend([], this.parent.resourceBase.lastResourceLevel, null, true);
}
var tr = createElement('tr');
var workTd = createElement('td');
if (this.parent.isAdaptive) {
workTd.setAttribute('colspan', (this.parent.activeViewOptions.timeScale.enable ? '2' : '1'));
var scrollContainer = createElement('div', { className: cls.SCROLL_CONTAINER_CLASS });
if (this.parent.activeViewOptions.timeScale.enable) {
scrollContainer.appendChild(this.renderTimeCells());
}
scrollContainer.appendChild(this.renderContentArea());
workTd.appendChild(scrollContainer);
EventHandler.add(scrollContainer, 'scroll', this.onAdaptiveScroll, this);
EventHandler.add(scrollContainer, Browser.touchMoveEvent, this.onAdaptiveMove, this);
tr.appendChild(workTd);
}
else {
var levels = this.colLevels.slice(0);
if (this.parent.virtualScrollModule) {
this.resetColLevels();
}
var wrap = this.renderContentArea();
workTd.appendChild(wrap);
if (this.parent.activeViewOptions.timeScale.enable) {
var timesTd = createElement('td');
timesTd.appendChild(this.renderTimeCells());
tr.appendChild(timesTd);
}
tr.appendChild(workTd);
if (this.parent.virtualScrollModule) {
this.colLevels = levels;
this.parent.virtualScrollModule.renderVirtualTrack(wrap);
}
}
this.element.querySelector('tbody').appendChild(tr);
};
VerticalView.prototype.renderLeftIndent = function () {
var wrap = createElement('div', { className: cls.LEFT_INDENT_WRAP_CLASS });
var tbl = this.createTableLayout();
var trEle = createElement('tr');
var rowCount = this.colLevels.length;
var nth;
for (var i = 0; i < rowCount; i++) {
var ntr_1 = trEle.cloneNode();
var data_1 = { className: [(this.colLevels[parseInt(i.toString(), 10)][0] && this.colLevels[parseInt(i.toString(), 10)][0].className[0])], type: 'emptyCells' };
if (this.parent.activeViewOptions.showWeekNumber && data_1.className.indexOf(cls.HEADER_CELLS_CLASS) !== -1) {
data_1.className.push(cls.WEEK_NUMBER_CLASS);
var weekNo = this.parent.getWeekNumberContent(this.renderDates);
data_1.template = [createElement('span', {
innerHTML: '' + weekNo,
attrs: { title: this.parent.localeObj.getConstant('week') + ' ' + weekNo }
})];
}
nth = this.createTd(data_1);
this.parent.renderHeaderIndentTemplate(data_1, nth);
ntr_1.appendChild(nth);
tbl.querySelector('tbody').appendChild(ntr_1);
}
var ntr = trEle.cloneNode();
var appointmentExpandCollapse = createElement('div', {
attrs: {
'tabindex': '0', 'role': 'button',
title: this.parent.localeObj.getConstant('expandAllDaySection'), 'aria-disabled': 'false',
'aria-label': this.parent.localeObj.getConstant('expandAllDaySection')
},
className: cls.ALLDAY_APPOINTMENT_SECTION_CLASS + ' ' + cls.APPOINTMENT_ROW_EXPAND_CLASS + ' ' +
cls.ICON + ' ' + cls.DISABLE_CLASS
});
var data = { className: [cls.ALLDAY_CELLS_CLASS], type: 'emptyCells' };
nth = this.createTd(data);
nth.appendChild(appointmentExpandCollapse);
this.parent.renderHeaderIndentTemplate(data, nth);
ntr.appendChild(nth);
tbl.querySelector('tbody').appendChild(ntr);
wrap.appendChild(tbl);
return wrap;
};
VerticalView.prototype.renderDatesHeader = function () {
var container = createElement('div', { className: cls.DATE_HEADER_CONTAINER_CLASS });
var wrap = createElement('div', { className: cls.DATE_HEADER_WRAP_CLASS });
container.appendChild(wrap);
var tbl = this.createTableLayout();
var trEle = createElement('tr', { className: cls.HEADER_ROW_CLASS });
var rowCount = this.colLevels.length;
var lastLevel = this.colLevels[rowCount - 1];
for (var i = 0; i < rowCount; i++) {
var ntr = trEle.cloneNode();
var level = this.colLevels[parseInt(i.toString(), 10)];
for (var j = 0; j < level.length; j++) {
ntr.appendChild(this.createTd(level[parseInt(j.toString(), 10)]));
}
tbl.querySelector('tbody').appendChild(ntr);
}
this.createAllDayRow(tbl, lastLevel);
this.createColGroup(tbl, lastLevel);
wrap.appendChild(tbl);
return container;
};
VerticalView.prototype.createAllDayRow = function (table, tdData) {
var ntr = createElement('tr', { className: cls.ALLDAY_ROW_CLASS });
for (var j = 0; j < tdData.length; j++) {
var td = extend({}, tdData[parseInt(j.toString(), 10)]);
td.className = [cls.ALLDAY_CELLS_CLASS];
td.type = 'alldayCells';
var ntd = this.createTd(td);
ntd.setAttribute('data-date', td.date.getTime().toString());
if (!isNullOrUndefined(td.groupIndex)) {
ntd.setAttribute('data-group-index', '' + td.groupIndex);
}
else if (this.parent.uiStateValues.isGroupAdaptive) {
ntd.setAttribute('data-group-index', '' + this.parent.uiStateValues.groupIndex);
}
this.wireCellEvents(ntd);
ntr.appendChild(ntd);
}
table.querySelector('tbody').appendChild(ntr);
var thead = createElement('thead');
thead.appendChild(this.parent.eventBase.createEventWrapper('allDay'));
prepend([thead], table);
};
VerticalView.prototype.createTd = function (td) {
var tdEle = createElement('td');
this.addAttributes(td, tdEle);
if (td.date && td.type) {
var ele = this.getTdContent(td.date, td.type, td.groupIndex);
if (ele && ele.length) {
append(ele, tdEle);
}
}
if (!this.parent.isMinMaxDate(util.resetTime(new Date('' + td.date)))) {
addClass([tdEle], cls.DISABLE_DATES);
}
if (td.type === 'resourceHeader') {
this.setResourceHeaderContent(tdEle, td);
}
if (td.type === 'dateHeader' && td.className.indexOf(cls.HEADER_CELLS_CLASS) >= 0) {
tdEle.setAttribute('data-date', td.date.getTime().toString());
if (!isNullOrUndefined(td.groupIndex)) {
tdEle.setAttribute('data-group-index', '' + td.groupIndex);
}
this.wireMouseEvents(tdEle);
}
var args = { elementType: td.type, element: tdEle, date: td.date, groupIndex: td.groupIndex };
this.parent.trigger(event.renderCell, args);
return tdEle;
};
VerticalView.prototype.wireCellEvents = function (element) {
EventHandler.add(element, 'mousedown', this.parent.workCellAction.cellMouseDown, this.parent.workCellAction);
this.wireMouseEvents(element);
};
VerticalView.prototype.wireMouseEvents = function (element) {
EventHandler.add(element, 'click', this.parent.workCellAction.cellClick, this.parent.workCellAction);
if (!this.parent.isAdaptive) {
EventHandler.add(element, 'dblclick', this.parent.workCellAction.cellDblClick, this.parent.workCellAction);
}
};
VerticalView.prototype.renderTimeCells = function () {
var _this = this;
var wrap = createElement('div', { className: cls.TIME_CELLS_WRAP_CLASS });
var tbl = this.createTableLayout();
var trEle = createElement('tr');
var handler = function (r) {
r.type = r.first ? 'majorSlot' : 'minorSlot';
r.className = r.last ? [cls.TIME_CELLS_CLASS, cls.TIME_SLOT_CLASS] : [cls.TIME_SLOT_CLASS];
var ntr = trEle.cloneNode();
var data = { date: r.date, type: r.type, className: r.className };
ntr.appendChild(_this.createTd(data));
tbl.querySelector('tbody').appendChild(ntr);
return r;
};
this.getTimeSlotRows(handler);
wrap.appendChild(tbl);
return wrap;
};
VerticalView.prototype.renderContentArea = function () {
var wrap = createElement('div', { className: cls.CONTENT_WRAP_CLASS });
var tbl = this.createTableLayout(cls.CONTENT_TABLE_CLASS);
this.setAriaAttributes(tbl);
this.addAutoHeightClass(tbl);
this.renderContentTable(tbl);
this.createColGroup(tbl, this.colLevels.slice(-1)[0]);
wrap.appendChild(tbl);
this.wireCellEvents(tbl.querySelector('tbody'));
EventHandler.add(wrap, 'scroll', this.onContentScroll, this);
EventHandler.add(wrap, Browser.touchMoveEvent, this.onAdaptiveMove, this);
return wrap;
};
VerticalView.prototype.renderContentTable = function (table) {
var tBody = table.querySelector('tbody');
append(this.getContentRows(), tBody);
this.renderContentTableHeader(table);
};
VerticalView.prototype.getContentRows = function () {
var _this = this;
var rows = [];
var tr = createElement('tr');
var td = createElement('td');
var existingGroupIndices = this.getGroupIndices();
var handler = function (r) {
var ntr = tr.cloneNode();
for (var _i = 0, _a = _this.colLevels[_this.colLevels.length - 1]; _i < _a.length; _i++) {
var tdData = _a[_i];
var isAllowTdCreation = true;
if (_this.parent.virtualScrollModule && _this.parent.activeViewOptions.group.resources.length > 0) {
if (existingGroupIndices.indexOf(tdData.groupIndex) > -1) {
isAllowTdCreation = false;
}
}
if (isAllowTdCreation) {
var ntd = _this.createContentTd(tdData, r, td);
ntr.appendChild(ntd);
}
}
rows.push(ntr);
return r;
};
this.getTimeSlotRows(handler);
return rows;
};
VerticalView.prototype.createContentTd = function (tdData, r, td) {
var ntd = td.cloneNode();
if (tdData.colSpan) {
ntd.setAttribute('colspan', tdData.colSpan.toString());
}
var clsName = this.getContentTdClass(r);
var cellDate = util.resetTime(tdData.date);
if (!this.parent.isMinMaxDate(cellDate)) {
clsName.push(cls.DISABLE_DATES);
}
cellDate = new Date(cellDate.setHours(r.date.getHours(), r.date.getMinutes(), r.date.getSeconds(), r.date.getMilliseconds()));
var type = 'workCells';
if (tdData.className.indexOf(cls.RESOURCE_PARENT_CLASS) !== -1) {
clsName.push(cls.RESOURCE_GROUP_CELLS_CLASS);
type = 'resourceGroupCells';
}
if (this.parent.workHours.highlight && ((this.parent.activeViewOptions.timeScale.enable &&
this.isWorkHour(cellDate, tdData.startHour, tdData.endHour, tdData.workDays)) ||
(!this.parent.activeViewOptions.timeScale.enable && this.isWorkDay(cellDate, tdData.workDays)))) {
clsName.push(cls.WORK_HOURS_CLASS);
}
addClass([ntd], clsName);
if (this.parent.activeViewOptions.cellTemplate) {
var args_1 = { date: cellDate, type: type, groupIndex: tdData.groupIndex };
var scheduleId = this.parent.element.id + '_';
var viewName = this.parent.activeViewOptions.cellTemplateName;
var templateId = scheduleId + viewName + 'cellTemplate';
var tooltipTemplate = [].slice.call(this.parent.getCellTemplate()(args_1, this.parent, 'cellTemplate', templateId, false, undefined, undefined, this.parent.root));
append(tooltipTemplate, ntd);
}
ntd.setAttribute('data-date', cellDate.getTime().toString());
var skeleton = 'full';
if (!this.parent.activeViewOptions.timeScale.enable) {
var announcementText = this.parent.globalize.formatDate(tdData.date, { skeleton: skeleton, calendar: this.parent.getCalendarMode() });
ntd.setAttribute('aria-label', announcementText);
}
else {
var startDateText = this.parent.globalize.formatDate(cellDate, {
type: 'dateTime', skeleton: skeleton, calendar: this.parent.getCalendarMode()
});
var endDateText = this.parent.globalize.formatDate(this.getEndDateFromStartDate(cellDate), {
type: 'dateTime', skeleton: skeleton, calendar: this.parent.getCalendarMode()
});
ntd.setAttribute('aria-label', startDateText + ' ' + this.parent.localeObj.getConstant('endAt') + ' ' + endDateText);
}
if (!isNullOrUndefined(tdData.groupIndex) || this.parent.uiStateValues.isGroupAdaptive) {
var groupIndex = this.parent.uiStateValues.isGroupAdaptive ? this.parent.uiStateValues.groupIndex :
tdData.groupIndex;
ntd.setAttribute('data-group-index', '' + groupIndex);
}
var args = { elementType: type, element: ntd, date: cellDate, groupIndex: tdData.groupIndex };
this.parent.trigger(event.renderCell, args);
return ntd;
};
VerticalView.prototype.getContentTdClass = function (r) {
return r.last ? [cls.WORK_CELLS_CLASS] : [cls.WORK_CELLS_CLASS, cls.ALTERNATE_CELLS_CLASS];
};
VerticalView.prototype.renderContentTableHeader = function (table) {
var thead = createElement('thead');
thead.appendChild(this.parent.eventBase.createEventWrapper());
if (this.parent.activeViewOptions.timeScale.enable) {
thead.appendChild(this.parent.eventBase.createEventWrapper('timeIndicator'));
}
prepend([thead], table);
};
VerticalView.prototype.getScrollableElement = function () {
if (this.parent.isAdaptive && !this.isTimelineView()) {
return this.element.querySelector('.' + cls.SCROLL_CONTAINER_CLASS);
}
else {
return this.getContentAreaElement();
}
};
VerticalView.prototype.getLeftPanelElement = function () {
return this.element.querySelector('.' + cls.TIME_CELLS_WRAP_CLASS);
};
VerticalView.prototype.getEndDateFromStartDate = function (start) {
var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
var end = new Date(start.getTime());
end.setMilliseconds(end.getMilliseconds() + msInterval);
return end;
};
VerticalView.prototype.getStartEndHours = function (startEndTime) {
if (!isNullOrUndefined(startEndTime) && startEndTime !== '') {
var startEndDate = new Date(2000, 0, 0, 0);
var timeString = startEndTime.split(':');
if (timeString.length === 2) {
startEndDate.setHours(parseInt(timeString[0], 10), parseInt(timeString[1], 10), 0);
}
return startEndDate;
}
return new Date(2000, 0, 0, 0);
};
VerticalView.prototype.getTimeSlotRows = function (handler) {
var rows = [];
var startHour = this.getStartEndHours(this.parent.activeViewOptions.startHour);
var endHour = this.getStartEndHours(this.parent.activeViewOptions.endHour);
var msMajorInterval = this.parent.activeViewOptions.timeScale.interval * util.MS_PER_MINUTE;
var msInterval = msMajorInterval / this.parent.activeViewOptions.timeScale.slotCount;
var length = Math.round(util.MS_PER_DAY / msInterval);
var msStartHour = startHour.getTime();
var msEndHour = endHour.getTime();
if (msStartHour !== msEndHour) {
var milliSeconds = (startHour.getTimezoneOffset() !== endHour.getTimezoneOffset()) ?
(msEndHour - msStartHour) - 3600000 : (msEndHour - msStartHour);
length = Math.round(milliSeconds / msInterval);
}
if (!this.parent.activeViewOptions.timeScale.enable) {
length = 1;
}
var start = this.parent.getStartEndTime(this.parent.workHours.start);
var end = this.parent.getStartEndTime(this.parent.workHours.end);
for (var i = 0; i < length; i++) {
var dt = new Date(msStartHour + (msInterval * i));
if (util.isDaylightSavingTime(dt) || new Date(msStartHour).getTimezoneOffset() !== dt.getTimezoneOffset()) {
var timeOffset = new Date(msStartHour).getTimezoneOffset() - dt.getTimezoneOffset();
dt = new Date(dt.getTime() - (1000 * 60 * timeOffset));
}
var majorTickDivider = i % (msMajorInterval / msInterval);
var row = {
date: new Date('' + dt),
startHour: start,
endHour: end,
first: (majorTickDivider === 0),
middle: (majorTickDivider < this.parent.activeViewOptions.timeScale.slotCount - 1),
last: (majorTickDivider === this.parent.activeViewOptions.timeScale.slotCount - 1),
type: ''
};
if (handler) {
handler(row);
}
rows.push(row);
}
return rows;
};
VerticalView.prototype.getAdjustedDate = function (startTime) {
if (!this.parent.activeViewOptions.timeScale.enable) {
return new Date(startTime.setHours(0, 0, 0, 0));
}
else {
var timeSlots = this.getTimeSlotRows();
var startDate = new Date(new Date(timeSlots[0].date.getTime()).
setHours(startTime.getHours(), startTime.getMinutes(), startTime.getMilliseconds()));
for (var i = 0; i < timeSlots.length; i++) {
if (timeSlots[parseInt(i.toString(), 10)].date.getTime() > startDate.getTime()) {
startTime.setHours(timeSlots[i - 1].date.getHours(), timeSlots[i - 1].date.getMinutes(), timeSlots[i - 1].date.getMilliseconds());
return new Date(startTime);
}
}
}
return null;
};
VerticalView.prototype.destroy = function () {
if (!this.parent || this.parent && this.parent.isDestroyed) {
this.parent = null;
return;
}
this.clearCurrentTimeIndicatorTimer();
if (this.element) {
if (this.appointment) {
this.appointment.destroy();
this.appointment = null;
}
var contentScrollableEle = this.getContentAreaElement();
if (contentScrollableEle) {
EventHandler.remove(contentScrollableEle, 'scroll', this.onContentScroll);
EventHandler.remove(contentScrollableEle, Browser.touchMoveEvent, this.onAdaptiveMove);
}
if (this.parent.resourceBase) {
this.parent.resourceBase.destroy();
}
if (this.parent.scheduleTouchModule) {
this.parent.scheduleTouchModule.resetValues();
}
_super.prototype.destroy.call(this);
}
};
return VerticalView;
}(ViewBase));
export { VerticalView };