@syncfusion/ej2-gantt
Version:
Essential JS 2 Gantt Component
136 lines (135 loc) • 6.39 kB
JavaScript
import { createElement, formatUnit, remove, isNullOrUndefined, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
import * as cls from '../base/css-constants';
var EventMarker = /** @class */ (function () {
function EventMarker(gantt) {
this.parent = gantt;
this.eventMarkersContainer = null;
}
/**
* @returns {void} .
* @private
*/
EventMarker.prototype.renderEventMarkers = function () {
if (this.parent.eventMarkers && this.parent.eventMarkers.length > 0) {
if (!this.parent.ganttChartModule.chartBodyContent.contains(this.eventMarkersContainer)) {
this.eventMarkersContainer = createElement('div', {
className: cls.eventMarkersContainer
});
this.eventMarkersContainer.setAttribute('role', 'term');
this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
}
this.eventMarkersContainer.innerHTML = '';
this.getEventMarkersElements(this.eventMarkersContainer);
}
else {
this.removeContainer();
}
};
/**
* @returns {void} .
* @private
*/
EventMarker.prototype.removeContainer = function () {
if (this.eventMarkersContainer) {
remove(this.eventMarkersContainer);
this.eventMarkersContainer = null;
}
};
/**
* Method to get event markers as html string
*
* @param {HTMLElement} container .
* @returns {void} .
*/
EventMarker.prototype.getEventMarkersElements = function (container) {
var left;
var eventMarkerElement;
var spanElement;
var rightArrow;
var top;
var eventMarkerCollection = [];
for (var i = 0; i < this.parent.eventMarkers.length; i++) {
if (!isNullOrUndefined(this.parent.eventMarkers[i].day)) {
this.parent['isFromEventMarker'] = true;
left = this.parent.dataOperation.getTaskLeft(this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true), false, this.parent.defaultCalendarContext, true);
top = this.parent.eventMarkers[i]['properties'].top;
var heightException = true;
if (this.parent.ganttHeight) {
heightException = parseFloat(top) <= (this.parent.ganttHeight - 155);
}
var markerTop = (top && parseFloat(top) >= 0 && heightException && top.includes('px')) ? top : '50px';
if (!top && document.body.className.includes('e-bigger')) {
markerTop = parseFloat(markerTop) + 15 + "px";
}
this.parent['isFromEventMarker'] = false;
eventMarkerCollection.push({ id: i, left: left, label: this.parent.eventMarkers[i].label,
date: this.parent.dateValidationModule.getDateFromFormat(this.parent.eventMarkers[i].day, true),
top: markerTop });
var align = void 0;
if (this.parent.enableRtl) {
align = "right:" + left + "px;";
}
else {
align = "left:" + left + "px;";
}
eventMarkerElement = createElement('div', {
className: cls.eventMarkersChild, styles: align + " height:100%;",
id: 'stripline' + i
});
if (this.parent.eventMarkers[i].label) {
spanElement = createElement('div', {
className: cls.eventMarkersSpan
});
var property = this.parent.disableHtmlEncode ? 'textContent' : 'innerHTML';
spanElement[property] = this.parent.eventMarkers[i].label;
if (this.parent.enableHtmlSanitizer && typeof (spanElement[property]) === 'string') {
spanElement[property] = SanitizeHtmlHelper.sanitize(spanElement[property]);
}
if (this.parent.enableRtl) {
spanElement.style.right = '5px';
}
else {
spanElement.style.left = '5px';
}
spanElement.style.setProperty('top', markerTop, 'important');
eventMarkerElement.appendChild(spanElement);
rightArrow = createElement('div', {
className: 'e-gantt-right-arrow'
});
var rightArrowTop = parseFloat(spanElement.style.top) < 10
? parseFloat(spanElement.style.top) - 1
: parseFloat(spanElement.style.top);
if (document.body.className.includes('e-bigger')) {
rightArrow.style.setProperty('top', rightArrowTop + 8 + "px", 'important');
}
else {
rightArrow.style.setProperty('top', rightArrowTop + 10 + "px", 'important');
}
eventMarkerElement.appendChild(rightArrow);
}
if (this.parent.eventMarkers[i].cssClass) {
eventMarkerElement.classList.add(this.parent.eventMarkers[i].cssClass);
}
eventMarkerElement.setAttribute('tabindex', '-1');
eventMarkerElement.setAttribute('aria-label', this.parent.localeObj.getConstant('eventMarkers') + ' '
+ (typeof this.parent.eventMarkers[i].day === 'string' ?
this.parent.eventMarkers[i].day :
this.parent.getFormatedDate(this.parent.eventMarkers[i].day))
+ ' ' + this.parent.eventMarkers[i].label);
container.appendChild(eventMarkerElement);
}
}
this.parent.eventMarkerColloction = eventMarkerCollection;
};
/**
* @returns {void} .
* @private
*/
EventMarker.prototype.updateContainerHeight = function () {
if (this.eventMarkersContainer) {
this.eventMarkersContainer.style.height = formatUnit(this.parent.getContentHeight());
}
};
return EventMarker;
}());
export { EventMarker };