@syncfusion/ej2-layouts
Version:
A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.
1,107 lines • 139 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 __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, Property, NotifyPropertyChanges, isUndefined } from '@syncfusion/ej2-base';
import { Collection, Draggable, isNullOrUndefined, append, setValue } from '@syncfusion/ej2-base';
import { Event, formatUnit, ChildProperty, compile, closest, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
import { setStyleAttribute as setStyle, addClass, detach, removeClass, EventHandler, Browser, extend } from '@syncfusion/ej2-base';
// constant class definitions
var preventSelect = 'e-prevent';
var dragging = 'e-dragging';
var dragRestrict = 'e-drag-restrict';
var drag = 'e-drag';
var resize = 'e-resize';
var resizeicon = 'e-dl-icon';
var responsive = 'e-responsive';
var east = 'e-east';
var west = 'e-west';
var north = 'e-north';
var south = 'e-south';
var single = 'e-single';
var double = 'e-double';
var northEast = 'e-north-east';
var southEast = 'e-south-east';
var northWest = 'e-north-west';
var southWest = 'e-south-west';
var panel = 'e-panel';
var panelContent = 'e-panel-content';
var panelContainer = 'e-panel-container';
var disable = 'e-disabled';
var header = 'e-panel-header';
var panelTransition = 'e-panel-transition';
/**
* Defines the panel of the DashboardLayout component.
*/
var Panel = /** @class */ (function (_super) {
__extends(Panel, _super);
function Panel() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('')
], Panel.prototype, "id", void 0);
__decorate([
Property('')
], Panel.prototype, "cssClass", void 0);
__decorate([
Property('')
], Panel.prototype, "header", void 0);
__decorate([
Property('')
], Panel.prototype, "content", void 0);
__decorate([
Property(true)
], Panel.prototype, "enabled", void 0);
__decorate([
Property(0)
], Panel.prototype, "row", void 0);
__decorate([
Property(0)
], Panel.prototype, "col", void 0);
__decorate([
Property(1)
], Panel.prototype, "sizeX", void 0);
__decorate([
Property(1)
], Panel.prototype, "sizeY", void 0);
__decorate([
Property(1)
], Panel.prototype, "minSizeY", void 0);
__decorate([
Property(1)
], Panel.prototype, "minSizeX", void 0);
__decorate([
Property(null)
], Panel.prototype, "maxSizeY", void 0);
__decorate([
Property(null)
], Panel.prototype, "maxSizeX", void 0);
__decorate([
Property(1000)
], Panel.prototype, "zIndex", void 0);
return Panel;
}(ChildProperty));
export { Panel };
/**
* The DashboardLayout is a grid structured layout control, that helps to create a dashboard with panels.
* Panels hold the UI components or data to be visualized with flexible options like resize, reorder, drag-n-drop, remove and add,
* that allows users to easily place the panels at a desired position within the grid layout.
* ```html
* <div id="default-layout">
* ```
* ```typescript
* <script>
* let dashBoardObject : DashboardLayout = new DashboardLayout();
* dashBoardObject.appendTo('#default-layout');
* </script>
* ```
*/
var DashboardLayout = /** @class */ (function (_super) {
__extends(DashboardLayout, _super);
function DashboardLayout(options, element) {
var _this = _super.call(this, options, element) || this;
_this.rows = 1;
_this.panelID = 0;
_this.movePanelCalled = false;
_this.resizeCalled = false;
_this.mOffX = 0;
_this.mOffY = 0;
_this.maxTop = 9999;
_this.maxRows = 100;
_this.mouseX = 0;
_this.mouseY = 0;
_this.minTop = 0;
_this.minLeft = 0;
_this.isInlineRendering = false;
_this.removeAllCalled = false;
// to check whether removePanel is executed in mobile device
_this.isPanelRemoved = false;
// to maintain sizeY in mobile device
_this.panelsSizeY = 0;
_this.resizeHeight = false;
_this.eventVar = false;
setValue('mergePersistData', _this.mergePersistPanelData, _this);
return _this;
}
/**
* Initialize the event handler
*
* @private
*/
DashboardLayout.prototype.preRender = function () {
this.panelCollection = [];
this.sortedArray = [];
this.gridPanelCollection = [];
this.overlapElement = [];
this.overlapElementClone = [];
this.overlapSubElementClone = [];
this.collisionChecker = {};
this.dragCollection = [];
this.elementRef = { top: '', left: '', height: '', width: '' };
this.dimensions = [];
this.allItems = [];
this.oldRowCol = {};
this.availableClasses = [];
this.setOldRowCol();
this.calculateCellSize();
this.contentTemplateChild = [].slice.call(this.element.children);
};
DashboardLayout.prototype.setOldRowCol = function () {
for (var i = 0; i < this.panels.length; i++) {
if (!this.panels[i].id) {
this.panelPropertyChange(this.panels[i], { id: 'layout_' + this.panelID.toString() });
this.panelID = this.panelID + 1;
}
this.oldRowCol[this.panels[i].id] = { row: this.panels[i].row, col: this.panels[i].col };
}
};
DashboardLayout.prototype.createPanelElement = function (cssClass, idValue) {
var ele = this.createElement('div');
if (cssClass && cssClass.length > 0) {
addClass([ele], cssClass);
}
if (idValue) {
ele.setAttribute('id', idValue);
}
return ele;
};
/**
* To Initialize the control rendering.
*
* @returns void
* @private
*/
DashboardLayout.prototype.render = function () {
this.element.setAttribute('role', 'list');
this.initialize();
this.isRenderComplete = true;
if (this.showGridLines && !this.checkMediaQuery()) {
this.initGridLines();
}
this.updateDragArea();
this.renderComplete();
this.renderReactTemplates();
};
DashboardLayout.prototype.initGridLines = function () {
this.table = document.createElement('table');
var tbody = document.createElement('tbody');
this.table.classList.add('e-dashboard-gridline-table');
this.table.setAttribute('role', 'presentation');
for (var i = 0; i < this.maxRow(); i++) {
var tr = document.createElement('tr');
for (var j = 0; j < this.columns; j++) {
var td = document.createElement('td');
td.classList.add('e-dashboard-gridline');
this.setAttributes({ value: { row: i.toString(), col: j.toString(), sizeX: '1', sizeY: '1' } }, td);
this.setPanelPosition(td, i, j);
this.setHeightAndWidth(td, { row: i, col: j, sizeX: 1, sizeY: 1 });
tr.appendChild(td);
}
tbody.appendChild(tr);
}
this.table.appendChild(tbody);
this.element.appendChild(this.table);
this.renderReactTemplates();
};
DashboardLayout.prototype.initialize = function () {
this.updateRowHeight();
if (this.element.childElementCount > 0 && this.element.querySelectorAll('.e-panel').length > 0) {
var panelElements = [];
this.setProperties({ panels: [] }, true);
this.isInlineRendering = true;
for (var i = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
panelElements.push((this.element.querySelectorAll('.e-panel')[i]));
}
for (var i = 0; i < panelElements.length; i++) {
var panelElement = panelElements[i];
if (this.enableRtl) {
addClass([panelElement], 'e-rtl');
}
this.getInlinePanels(panelElement);
this.maxCol();
this.maxRow();
}
for (var i = 0; i < this.panels.length; i++) {
var panelElement = this.element.querySelector('#' + this.panels[i].id);
this.setMinMaxValues(this.panels[i]);
if (this.maxColumnValue < this.panels[i].col ||
this.maxColumnValue < (this.panels[i].col + this.panels[i].sizeX)) {
var colValue = this.maxColumnValue - this.panels[i].sizeX;
this.panelPropertyChange(this.panels[i], { col: colValue < 0 ? 0 : colValue });
}
this.setXYAttributes(panelElement, this.panels[i]);
var panel_1 = this.renderPanels(panelElement, this.panels[i], this.panels[i].id, false);
this.panelCollection.push(panel_1);
this.setHeightAndWidth(panelElement, this.panels[i]);
this.tempObject = this;
if (this.mediaQuery && !window.matchMedia('(' + this.mediaQuery + ')').matches) {
this.setPanelPosition(panelElement, this.panels[i].row, this.panels[i].col);
this.mainElement = panelElement;
this.updatePanelLayout(panelElement, this.panels[i]);
this.mainElement = null;
}
this.setClasses([panelElement]);
}
this.updateOldRowColumn();
if (this.checkMediaQuery()) {
this.checkMediaQuerySizing();
}
}
else {
this.renderDashBoardCells(this.panels);
}
if (this.allowDragging && (this.mediaQuery ? !window.matchMedia('(' + this.mediaQuery + ')').matches : true)) {
this.enableDraggingContent(this.panelCollection);
}
this.sortedPanel();
this.bindEvents();
this.updatePanels();
this.updateCloneArrayObject();
this.checkColumnValue = this.maxColumnValue;
if (!(this.checkMediaQuery())) {
this.panelResponsiveUpdate();
}
this.setEnableRtl();
};
DashboardLayout.prototype.checkMediaQuery = function () {
return (this.mediaQuery && window.matchMedia('(' + this.mediaQuery + ')').matches);
};
DashboardLayout.prototype.calculateCellSize = function () {
this.cellSize = [];
if ((this.checkMediaQuery())) {
this.cellSize[1] = this.element.parentElement
&& ((this.element.parentElement.offsetWidth)) / this.cellAspectRatio;
}
else {
this.cellSize[0] = this.element.parentElement &&
((this.element.parentElement.offsetWidth));
if (!isNullOrUndefined(this.cellSpacing)) {
this.cellSize[0] = this.element.parentElement
&& ((this.element.parentElement.offsetWidth - ((this.maxCol() - 1) * this.cellSpacing[0]))
/ (this.maxCol()));
}
this.cellSize[1] = this.cellSize[0] / this.cellAspectRatio;
}
};
DashboardLayout.prototype.maxRow = function (recheck) {
var maxRow = 1;
if (this.rows > 1 && isNullOrUndefined(recheck)) {
maxRow = this.rows;
return maxRow;
}
for (var i = 0; i < this.panels.length; i++) {
if (this.panels[i].sizeY + this.panels[i].row > maxRow) {
maxRow = this.panels[i].sizeY + this.panels[i].row;
}
}
if (this.panels.length === 0) {
maxRow = this.columns;
}
return maxRow;
};
DashboardLayout.prototype.maxCol = function () {
var maxCol = 1;
maxCol = this.columns;
this.maxColumnValue = maxCol;
return maxCol;
};
DashboardLayout.prototype.updateOldRowColumn = function () {
for (var i = 0; i < this.panels.length; i++) {
var id = this.panels[i].id;
if (this.element.querySelector('[id=\'' + id + '\']')) {
var row = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-row'), 10);
var col = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-col'), 10);
this.oldRowCol[this.panels[i].id] = { row: row, col: col };
}
else {
continue;
}
}
};
DashboardLayout.prototype.createSubElement = function (cssClass, idValue, className) {
var element = this.createElement('div');
if (className) {
addClass([element], [className]);
}
if (cssClass && cssClass.length > 0) {
addClass([element], cssClass);
}
if (idValue) {
element.setAttribute('id', idValue);
}
return element;
};
DashboardLayout.prototype.templateParser = function (template) {
if (template) {
try {
if (typeof template !== 'function' && document.querySelectorAll(template).length) {
return compile(document.querySelector(template).innerHTML.trim());
}
else {
return compile(template);
}
}
catch (error) {
var sanitizedValue = SanitizeHtmlHelper.sanitize(template);
return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
}
}
return undefined;
};
DashboardLayout.prototype.renderTemplate = function (content, appendElement, type, isStringTemplate, prop) {
var templateFn = this.templateParser(content);
var templateElements = [];
if ((content[0] === '.' || content[0] === '#') &&
document.querySelector(content).tagName !== 'SCRIPT') {
var eleVal = document.querySelector(content);
if (!isNullOrUndefined(eleVal)) {
if (eleVal.style.display === 'none') {
eleVal.style.removeProperty('display');
}
if (eleVal.getAttribute('style') === '') {
eleVal.removeAttribute('style');
}
appendElement.appendChild(eleVal);
return;
}
else {
content = content.trim();
}
}
else {
var compilerFn = templateFn({}, this, prop, type, isStringTemplate, null, appendElement);
if (compilerFn) {
for (var _i = 0, compilerFn_1 = compilerFn; _i < compilerFn_1.length; _i++) {
var item = compilerFn_1[_i];
templateElements.push(item);
}
append([].slice.call(templateElements), appendElement);
}
}
};
DashboardLayout.prototype.renderPanels = function (cellElement, panelModel, panelId, isStringTemplate) {
addClass([cellElement], [panel, panelTransition]);
cellElement.setAttribute('role', 'listitem');
if (this.allowDragging) {
cellElement.setAttribute('aria-grabbed', 'false');
}
var cssClass = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
this.panelContent = cellElement.querySelector('.e-panel-container') ?
cellElement.querySelector('.e-panel-container') :
this.createSubElement(cssClass, cellElement.id + '_content', panelContainer);
cellElement.appendChild(this.panelContent);
if (!panelModel.enabled) {
this.disablePanel(cellElement);
}
if (panelModel.header) {
var headerTemplateElement = cellElement.querySelector('.e-panel-header') ?
cellElement.querySelector('.e-panel-header') : this.createSubElement([], cellElement.id + 'template', '');
addClass([headerTemplateElement], [header]);
if (!cellElement.querySelector('.e-panel-header')) {
var id = this.element.id + 'HeaderTemplate' + panelId;
this.renderTemplate(panelModel.header, headerTemplateElement, id, isStringTemplate, 'header');
this.panelContent.appendChild(headerTemplateElement);
this.renderReactTemplates();
}
}
if (panelModel.content) {
var cssClass_1 = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
this.panelBody = cellElement.querySelector('.e-panel-content') ? cellElement.querySelector('.e-panel-content') :
this.createSubElement(cssClass_1, cellElement.id + '_body', panelContent);
var headerHeight = this.panelContent.querySelector('.e-panel-header') ?
window.getComputedStyle(this.panelContent.querySelector('.e-panel-header')).height : '0px';
var contentHeightValue = 'calc( 100% - ' + headerHeight + ')';
setStyle(this.panelBody, { height: contentHeightValue });
if (!cellElement.querySelector('.e-panel-content')) {
var id = this.element.id + 'ContentTemplate' + panelId;
this.renderTemplate(panelModel.content, this.panelBody, id, isStringTemplate, 'content');
this.panelContent.appendChild(this.panelBody);
this.renderReactTemplates();
}
}
return cellElement;
};
DashboardLayout.prototype.disablePanel = function (panelElement) {
addClass([panelElement], [disable]);
};
DashboardLayout.prototype.getInlinePanels = function (panelElement) {
var model = {
sizeX: panelElement.hasAttribute('data-sizex') ? parseInt(panelElement.getAttribute('data-sizex'), 10) : 1,
sizeY: panelElement.hasAttribute('data-sizey') ? parseInt(panelElement.getAttribute('data-sizey'), 10) : 1,
minSizeX: panelElement.hasAttribute('data-minsizex') ? parseInt(panelElement.getAttribute('data-minsizex'), 10) : 1,
minSizeY: panelElement.hasAttribute('data-minsizey') ? parseInt(panelElement.getAttribute('data-minsizey'), 10) : 1,
maxSizeX: panelElement.hasAttribute('data-maxsizex') ? parseInt(panelElement.getAttribute('data-maxsizex'), 10) : null,
maxSizeY: panelElement.hasAttribute('data-maxsizey') ? parseInt(panelElement.getAttribute('data-maxsizey'), 10) : null,
row: panelElement.hasAttribute('data-row') ? parseInt(panelElement.getAttribute('data-row'), 10) : 0,
col: panelElement.hasAttribute('data-col') ? parseInt(panelElement.getAttribute('data-col'), 10) : 0,
id: panelElement.getAttribute('id'),
zIndex: panelElement.hasAttribute('data-zindex') ? parseInt(panelElement.getAttribute('data-zIndex'), 10) : 1000,
header: panelElement.querySelector('.e-panel-header') && '.e-panel-header',
content: panelElement.querySelector('.e-panel-content') && '.e-panel-content'
};
if (!model.id) {
model.id = 'layout_' + this.panelID.toString();
panelElement.setAttribute('id', model.id);
this.panelID = this.panelID + 1;
}
if (isUndefined(model.enabled)) {
model.enabled = true;
}
panelElement.style.zIndex = '' + model.zIndex;
var panelProp = new Panel(this, 'panels', model, true);
this.panels.push(panelProp);
this.oldRowCol[model.id] = { row: model.row, col: model.col };
};
DashboardLayout.prototype.resizeEvents = function () {
if (this.allowResizing) {
var panelElements = this.element.querySelectorAll('.e-panel .e-panel-container .e-resize');
for (var i = 0; i < panelElements.length; i++) {
var eventName = (Browser.info.name === 'msie') ? 'mousedown pointerdown' : 'mousedown';
EventHandler.add(panelElements[i], eventName, this.downResizeHandler, this);
if (Browser.info.name !== 'msie') {
EventHandler.add(panelElements[i], 'touchstart', this.touchDownResizeHandler, this);
}
}
}
};
DashboardLayout.prototype.bindEvents = function () {
this.refreshListener = this.refresh.bind(this);
EventHandler.add(window, 'resize', this.refreshListener);
this.resizeEvents();
};
DashboardLayout.prototype.downResizeHandler = function (e) {
var el = closest((e.currentTarget), '.e-panel');
for (var i = 0; this.panels.length > i; i++) {
if (this.panels[i].enabled && this.panels[i].id === el.id) {
this.downHandler(e);
this.lastMouseX = e.pageX;
this.lastMouseY = e.pageY;
var moveEventName = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
var upEventName = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
if (!this.isMouseMoveBound) {
EventHandler.add(document, moveEventName, this.moveResizeHandler, this);
this.isMouseMoveBound = true;
}
if (!this.isMouseUpBound) {
EventHandler.add(document, upEventName, this.upResizeHandler, this);
this.isMouseUpBound = true;
}
}
}
};
DashboardLayout.prototype.downHandler = function (e) {
this.resizeCalled = false;
this.panelsInitialModel = this.cloneModels(this.panels);
var el = closest((e.currentTarget), '.e-panel');
var args = { event: e, element: el, isInteracted: true };
this.trigger('resizeStart', args);
this.downTarget = e.currentTarget;
this.shadowEle = document.createElement('div');
this.shadowEle.classList.add('e-holder');
addClass([this.element], [preventSelect]);
this.element.appendChild(this.shadowEle);
this.renderReactTemplates();
this.elementX = parseFloat(el.style.left);
this.elementY = parseFloat(el.style.top);
this.elementWidth = el.offsetWidth;
this.elementHeight = el.offsetHeight;
this.originalWidth = this.getCellInstance(el.id).sizeX;
this.originalHeight = this.getCellInstance(el.id).sizeY;
this.previousRow = this.getCellInstance(el.id).row;
};
DashboardLayout.prototype.touchDownResizeHandler = function (e) {
this.downHandler(e);
this.lastMouseX = e.changedTouches[0].pageX;
this.lastMouseY = e.changedTouches[0].pageY;
if (!this.isMouseMoveBound) {
EventHandler.add(document, 'touchmove', this.touchMoveResizeHandler, this);
this.isMouseMoveBound = true;
}
if (!this.isMouseUpBound) {
EventHandler.add(document, 'touchend', this.upResizeHandler, this);
this.isMouseUpBound = true;
}
};
DashboardLayout.prototype.getCellSize = function () {
return [this.cellSize[0], this.cellSize[1]];
};
DashboardLayout.prototype.updateMaxTopLeft = function (e) {
this.moveTarget = this.downTarget;
var el = closest((this.moveTarget), '.e-panel');
var args = { event: e, element: el, isInteracted: true };
this.trigger('resize', args);
};
DashboardLayout.prototype.updateResizeElement = function (el) {
this.maxLeft = this.element.offsetWidth - 1;
this.maxTop = this.cellSize[1] * this.maxRows - 1;
removeClass([el], 'e-panel-transition');
addClass([el], [dragging]);
var handleArray = [east, west, north, south, southEast, northEast, northWest, southWest];
for (var i = 0; i < this.moveTarget.classList.length; i++) {
if (handleArray.indexOf(this.moveTarget.classList[i]) !== -1) {
this.handleClass = (this.moveTarget.classList[i]);
}
}
};
DashboardLayout.prototype.moveResizeHandler = function (e) {
this.updateMaxTopLeft(e);
var el = closest((this.moveTarget), '.e-panel');
if (this.lastMouseX === e.pageX || this.lastMouseY === e.pageY) {
return;
}
this.updateResizeElement(el);
var panelModel = this.getCellInstance(el.getAttribute('id'));
this.mouseX = e.pageX;
this.mouseY = e.pageY;
var diffY = this.mouseY - this.lastMouseY + this.mOffY;
var diffX = this.mouseX - this.lastMouseX + this.mOffX;
this.mOffX = this.mOffY = 0;
this.lastMouseY = this.mouseY;
this.lastMouseX = this.mouseX;
this.resizingPanel(el, panelModel, diffX, diffY);
};
DashboardLayout.prototype.touchMoveResizeHandler = function (e) {
this.updateMaxTopLeft(e);
var el = closest((this.moveTarget), '.e-panel');
if (this.lastMouseX === e.changedTouches[0].pageX || this.lastMouseY === e.changedTouches[0].pageY) {
return;
}
this.updateResizeElement(el);
var panelModel = this.getCellInstance(el.getAttribute('id'));
this.mouseX = e.changedTouches[0].pageX;
this.mouseY = e.changedTouches[0].pageY;
var diffX = this.mouseX - this.lastMouseX + this.mOffX;
var diffY = this.mouseY - this.lastMouseY + this.mOffY;
this.mOffX = this.mOffY = 0;
this.lastMouseX = this.mouseX;
this.lastMouseY = this.mouseY;
this.resizingPanel(el, panelModel, diffX, diffY);
};
/* istanbul ignore next */
DashboardLayout.prototype.resizingPanel = function (el, panelModel, currentX, currentY) {
var oldSizeX = this.getCellInstance(el.id).sizeX;
var oldSizeY = this.getCellInstance(el.id).sizeY;
var dY = currentY;
var dX = currentX;
if (this.handleClass.indexOf('north') >= 0) {
if (this.elementHeight - dY < this.getMinHeight(panelModel)) {
currentY = this.elementHeight - this.getMinHeight(panelModel);
this.mOffY = dY - currentY;
}
else if (panelModel.maxSizeY && this.elementHeight - dY > this.getMaxHeight(panelModel)) {
currentY = this.elementHeight - this.getMaxHeight(panelModel);
this.mOffY = dY - currentY;
}
else if (this.elementY + dY < this.minTop) {
currentY = this.minTop - this.elementY;
this.mOffY = dY - currentY;
}
this.elementY += currentY;
this.elementHeight -= currentY;
}
if (this.handleClass.indexOf('south') >= 0) {
if (this.elementHeight + dY < this.getMinHeight(panelModel)) {
currentY = this.getMinHeight(panelModel) - this.elementHeight;
this.mOffY = dY - currentY;
}
else if (panelModel.maxSizeY && this.elementHeight + dY > this.getMaxHeight(panelModel)) {
currentY = this.getMaxHeight(panelModel) - this.elementHeight;
this.mOffY = dY - currentY;
}
this.elementHeight += currentY;
}
if (this.handleClass.indexOf('west') >= 0) {
if (this.elementWidth - dX < this.getMinWidth(panelModel)) {
currentX = this.elementWidth - this.getMinWidth(panelModel);
this.mOffX = dX - currentX;
}
else if (panelModel.maxSizeX && this.elementWidth - dX > this.getMaxWidth(panelModel)) {
currentX = this.elementWidth - this.getMaxWidth(panelModel);
this.mOffX = dX - currentX;
}
else if (this.elementX + dX < this.minLeft) {
currentX = this.minLeft - this.elementX;
this.mOffX = dX - currentX;
}
this.elementX += currentX;
this.elementWidth -= currentX;
}
if (this.handleClass.indexOf('east') >= 0) {
if (this.elementWidth + dX < this.getMinWidth(panelModel)) {
currentX = this.getMinWidth(panelModel) - this.elementWidth;
this.mOffX = dX - currentX;
}
else if (panelModel.maxSizeX && this.elementWidth + dX > this.getMaxWidth(panelModel)) {
currentX = this.getMaxWidth(panelModel) - this.elementWidth;
this.mOffX = dX - currentX;
}
var initialWidth = this.elementWidth;
this.elementWidth += currentX;
var newSizeX = this.pixelsToColumns(this.elementWidth - (panelModel.sizeX) * this.cellSpacing[1], true);
if (this.columns < panelModel.col + newSizeX) {
this.elementWidth = initialWidth;
}
}
el.style.top = this.elementY + 'px';
el.style.left = this.elementX + 'px';
el.style.width = this.elementWidth + 'px';
el.style.height = this.elementHeight + 'px';
var item = this.getResizeRowColumn(panelModel);
if (item.col + item.sizeX > this.columns) {
this.panelPropertyChange(item, { sizeX: item.sizeX - 1 });
}
this.shadowEle.style.top = ((item.row * this.getCellSize()[1] + (item.row * this.cellSpacing[1]))) + 'px';
if (this.handleClass.indexOf('west') >= 0) {
this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col - 1) * this.cellSpacing[0])) + 'px';
}
else {
this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col) * this.cellSpacing[0])) + 'px';
}
this.shadowEle.style.height = ((item.sizeY * (this.getCellSize()[1] + (this.cellSpacing[1])))) + 'px';
this.shadowEle.style.width = ((item.sizeX * (this.getCellSize()[0] + (this.cellSpacing[0])))) + 'px';
if (oldSizeX !== item.sizeX || oldSizeY !== item.sizeY) {
oldSizeX = item.sizeX;
oldSizeY = item.sizeY;
var model = this.getCellInstance(el.id);
var value = {
attributes: {
row: model.row.toString(),
col: model.col.toString(),
sizeX: model.sizeX.toString(),
sizeY: model.sizeY.toString()
}
};
this.setAttributes(value, el);
this.mainElement = el;
this.checkCollision = [];
this.updatePanelLayout(el, this.getCellInstance(el.id));
this.updateOldRowColumn();
this.sortedPanel();
}
};
DashboardLayout.prototype.upResizeHandler = function (e) {
if (isNullOrUndefined(this.downTarget)) {
return;
}
this.upTarget = this.downTarget;
var el = closest((this.upTarget), '.e-panel');
var args = { event: e, element: el, isInteracted: true };
if (el) {
addClass([el], 'e-panel-transition');
var moveEventName = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
var upEventName = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
EventHandler.remove(document, moveEventName, this.moveResizeHandler);
EventHandler.remove(document, upEventName, this.upResizeHandler);
if (Browser.info.name !== 'msie') {
EventHandler.remove(document, 'touchmove', this.touchMoveResizeHandler);
EventHandler.remove(document, 'touchend', this.upResizeHandler);
}
this.isMouseUpBound = false;
this.isMouseMoveBound = false;
if (this.shadowEle) {
detach(this.shadowEle);
}
this.shadowEle = null;
var panelModel = this.getCellInstance(el.getAttribute('id'));
this.setPanelPosition(el, panelModel.row, panelModel.col);
this.setHeightAndWidth(el, panelModel);
}
removeClass([el], [dragging]);
this.trigger('resizeStop', args);
this.resizeCalled = false;
this.lastMouseX = this.lastMouseY = undefined;
this.mOffX = this.mOffY = 0;
this.mainElement = null;
if (this.allowFloating) {
this.moveItemsUpwards();
}
this.updatePanels();
this.updateCloneArrayObject();
this.checkForChanges(true);
};
DashboardLayout.prototype.getResizeRowColumn = function (item) {
var isChanged = false;
var col = item.col;
if (['e-west', 'e-south-west'].indexOf(this.handleClass) !== -1) {
col = this.pixelsToColumns(this.elementX, false);
}
var row = item.row;
if (['e-north'].indexOf(this.handleClass) !== -1) {
row = this.pixelsToRows(this.elementY, false);
if (this.previousRow !== row) {
this.previousRow = row;
isChanged = true;
}
}
var sizeX = item.sizeX;
if (['e-north', 'e-south'].indexOf(this.handleClass) === -1) {
sizeX = this.pixelsToColumns(this.elementWidth - (sizeX) * this.cellSpacing[1], true);
}
var sizeY = item.sizeY;
if (['e-east', 'e-west'].indexOf(this.handleClass) === -1) {
if (this.handleClass === 'e-north' ? isChanged : true) {
sizeY = this.pixelsToRows(this.elementHeight - (sizeY) * this.cellSpacing[0], true);
}
}
if (item.col + sizeX > this.columns) {
item.sizeX = sizeX - 1;
}
var canOccupy = row > -1 && col > -1 && sizeX + col <= this.maxCol() && sizeY + row <= this.maxRow();
if (canOccupy && (this.collisions(row, col, sizeX, sizeY, this.getPanelBase(item.id)).length === 0)
|| this.allowPushing !== false) {
this.panelPropertyChange(item, { row: row, col: col, sizeX: sizeX, sizeY: sizeY });
}
return item;
};
DashboardLayout.prototype.pixelsToColumns = function (pixels, isCeil) {
if (isCeil) {
return Math.ceil(pixels / this.cellSize[0]);
}
else {
return Math.floor(pixels / (this.cellSize[0] + this.cellSpacing[0]));
}
};
DashboardLayout.prototype.pixelsToRows = function (pixels, isCeil) {
if (isCeil) {
return Math.round(pixels / this.cellSize[1]);
}
else {
return Math.round(pixels / (this.cellSize[1] + this.cellSpacing[0]));
}
};
DashboardLayout.prototype.getMinWidth = function (item) {
return (((item.minSizeX) * this.getCellSize()[0]) + (item.minSizeX - 1) * this.cellSpacing[0]);
};
DashboardLayout.prototype.getMaxWidth = function (item) {
return (item.maxSizeX) * this.getCellSize()[0];
};
DashboardLayout.prototype.getMinHeight = function (item) {
return (((item.minSizeY) * this.getCellSize()[1]) + (item.minSizeY - 1) * this.cellSpacing[1]);
};
DashboardLayout.prototype.getMaxHeight = function (item) {
return (item.maxSizeY) * this.getCellSize()[1];
};
DashboardLayout.prototype.sortedPanel = function () {
this.sortedArray = [];
for (var i = 0, l = this.panelCollection.length; i < l; ++i) {
this.sortItem(this.panelCollection[i]);
}
};
DashboardLayout.prototype.moveItemsUpwards = function () {
if (this.allowFloating === false) {
return;
}
for (var rowIndex = 0, l = this.sortedArray.length; rowIndex < l; ++rowIndex) {
var columns = this.sortedArray[rowIndex];
if (!columns) {
continue;
}
for (var colIndex = 0, len = columns.length; colIndex < len; ++colIndex) {
var item = columns[colIndex];
if (item) {
this.moveItemUpwards(item);
}
}
}
this.updateGridLines();
};
DashboardLayout.prototype.moveItemUpwards = function (item) {
if (this.allowFloating === false || item === this.mainElement) {
return;
}
var colIndex = this.getCellInstance(item.id).col;
var sizeY = parseInt(item.getAttribute('data-sizeY'), 10);
var sizeX = parseInt(item.getAttribute('data-sizeX'), 10);
var availableRow = null;
var availableColumn = null;
var rowIndex = parseInt(item.getAttribute('data-row'), 10) - 1;
while (rowIndex > -1) {
var items = this.collisions(rowIndex, colIndex, sizeX, sizeY, item);
if (items.length !== 0) {
break;
}
availableRow = rowIndex;
availableColumn = colIndex;
--rowIndex;
}
if (availableRow !== null) {
this.sortItem(item, availableRow, availableColumn);
}
};
DashboardLayout.prototype.sortItem = function (item, rowValue, columnValue) {
this.overlapElement = [];
var column = parseInt(item.getAttribute('data-col'), 10);
var row = parseInt(item.getAttribute('data-row'), 10);
if (!this.sortedArray[row]) {
this.sortedArray[row] = [];
}
this.sortedArray[row][column] = item;
if (item !== undefined && rowValue !== undefined && columnValue !== undefined) {
if (this.oldRowCol[item.id] !== undefined && this.oldRowCol[item.id].row !== null &&
typeof this.oldRowCol[item.id].col !== 'undefined') {
{
var oldRow = this.sortedArray[this.oldRowCol[item.id].row];
if (this.oldRowCol[item.id] && oldRow[this.oldRowCol[item.id].col] === item) {
delete oldRow[this.oldRowCol[item.id].col];
this.updateOldRowColumn();
this.sortedPanel();
}
}
}
this.oldRowCol[item.id].row = rowValue;
this.oldRowCol[item.id].row = columnValue;
if (!this.sortedArray[row]) {
this.sortedArray[row] = [];
}
this.sortedArray[row][column] = item;
if (this.allItems.indexOf(item) === -1) {
this.allItems.push(item);
}
this.panelPropertyChange(this.getCellInstance(item.id), { row: rowValue, col: columnValue });
var panelModel = this.getCellInstance(item.id);
this.setAttributes({ value: { col: panelModel.col.toString(), row: panelModel.row.toString() } }, item);
this.updateLayout(item, this.getCellInstance(item.id));
}
};
DashboardLayout.prototype.updateLayout = function (element, panelModel) {
this.setPanelPosition(element, panelModel.row, panelModel.col);
this.setHeightAndWidth(element, panelModel);
this.updateRowHeight();
this.sortedPanel();
};
DashboardLayout.prototype.refresh = function () {
this.panelsSizeY = 0;
this.updateDragArea();
if (this.checkMediaQuery()) {
this.checkMediaQuerySizing();
}
else {
if (this.element.classList.contains(responsive)) {
removeClass([this.element], [responsive]);
var internalPanels = this.element.querySelectorAll(((this.element.id) ? '#' + this.element.id + ' > ' : '') + '.e-panel');
for (var i = 0; i < internalPanels.length; i++) {
var ele = internalPanels[i];
var cellInstance = this.getCellInstance(ele.id);
var row = parseInt(ele.getAttribute('data-row'), 10);
var col = parseInt(ele.getAttribute('data-col'), 10);
this.panelPropertyChange(cellInstance, { row: row, col: col });
this.setHeightAndWidth(ele, this.getCellInstance(ele.id));
this.setPanelPosition(ele, row, col);
this.updateRowHeight();
}
}
this.panelResponsiveUpdate();
this.updateGridLines();
}
if (!isNullOrUndefined(this.panelCollection)) {
this.removeResizeClasses(this.panelCollection);
this.setClasses(this.panelCollection);
}
this.resizeEvents();
if (!isNullOrUndefined(this.panelCollection)) {
this.checkDragging(this.dragCollection);
}
};
DashboardLayout.prototype.updateGridLines = function () {
if (this.element.querySelector('.e-dashboard-gridline-table')) {
if (this.table) {
detach(this.table);
}
this.initGridLines();
}
};
DashboardLayout.prototype.checkDragging = function (dragCollection) {
if (this.checkMediaQuery() || !this.allowDragging) {
for (var i = 0; i < dragCollection.length; i++) {
dragCollection[i].destroy();
}
}
else {
for (var i = 0; i < dragCollection.length; i++) {
dragCollection[i].destroy();
}
this.enableDraggingContent(this.panelCollection);
}
};
DashboardLayout.prototype.sortPanels = function () {
var model = [];
var _loop_1 = function (row) {
var _loop_2 = function (col) {
this_1.panels.filter(function (panel) {
if (panel.row === row && panel.col === col) {
model.push(panel);
}
});
};
for (var col = 0; col < this_1.columns; col++) {
_loop_2(col);
}
};
var this_1 = this;
for (var row = 0; row <= this.rows; row++) {
_loop_1(row);
}
return model;
};
DashboardLayout.prototype.checkMediaQuerySizing = function () {
addClass([this.element], [responsive]);
var updatedPanel;
if (this.isPanelRemoved && this.panels) {
updatedPanel = this.panels;
}
else {
updatedPanel = this.sortPanels();
}
this.updatedRows = updatedPanel.length;
for (var i = 0; i < updatedPanel.length; i++) {
var panelElement = document.getElementById(updatedPanel[i].id);
var updatedHeight = void 0;
if (panelElement) {
setStyle(panelElement, { 'width': '100%' });
panelElement.style.height = ' ' + ((this.element.parentElement
&& this.element.parentElement.offsetWidth / this.cellAspectRatio) * updatedPanel[i].sizeY) + 'px';
if (updatedPanel[i].sizeY > 1) {
updatedHeight = ((this.element.parentElement
&& this.element.parentElement.offsetWidth / this.cellAspectRatio) * updatedPanel[i].sizeY) +
parseInt((Math.round(updatedPanel[i].sizeY / 2) * this.cellSpacing[1]).toString(), 10);
panelElement.style.height = '' + updatedHeight + 'px';
}
this.resizeHeight = true;
this.panelPropertyChange(updatedPanel[i], { row: i, col: 0 });
this.setPanelPosition(panelElement, updatedPanel[i].row, updatedPanel[i].col);
this.panelsSizeY = this.panelsSizeY + updatedPanel[i].sizeY;
if (!isNullOrUndefined(this.panelCollection)) {
this.setClasses(this.panelCollection);
this.removeResizeClasses(this.panelCollection);
}
if (!isNullOrUndefined(this.dragCollection)) {
this.checkDragging(this.dragCollection);
}
}
}
this.updateRowHeight();
};
DashboardLayout.prototype.panelResponsiveUpdate = function () {
this.element.classList.add('e-responsive');
this.calculateCellSize();
for (var i = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
var ele = this.element.querySelectorAll('.e-panel')[i];
var panelModel = this.getCellInstance(ele.id);
this.setHeightAndWidth(ele, panelModel);
}
for (var i = 0; i < this.panels.length; i++) {
this.setPanelPosition(document.getElementById(this.panels[i].id), this.panels[i].row, this.panels[i].col);
}
this.updateRowHeight();
};
DashboardLayout.prototype.updateRowHeight = function () {
this.getRowColumn();
this.setHeightWidth();
};
DashboardLayout.prototype.setHeightWidth = function () {
var heightValue;
if (isNullOrUndefined(this.cellSpacing) || (this.panels.length === 0 && this.panelCollection &&
this.panelCollection.length === 0)) {
return;
}
if (this.checkMediaQuery()) {
var entirePanelsY = 0;
for (var i = 0; i < this.panels.length; i++) {
if (this.panels[i].sizeY) {
entirePanelsY += this.panels[i].sizeY;
}
}
heightValue = ((entirePanelsY) *
(this.element.parentElement && ((this.element.parentElement.offsetWidth)) / this.cellAspectRatio) +
(entirePanelsY - 1) * this.cellSpacing[1]) + 'px';
}
else {
heightValue = ((this.maxRow()) *
(this.cellSize[0] / this.cellAspectRatio) + (this.maxRow() - 1) * this.cellSpacing[1]) + 'px';
}
setStyle(this.element, { 'height': heightValue });
var widthValue = window.getComputedStyle(this.element).width;
setStyle(this.element, { 'width': widthValue });
};
DashboardLayout.prototype.setEmptyLayoutHeight = function () {
this.element.style.removeProperty('height');
this.element.style.removeProperty('width');
};
DashboardLayout.prototype.setHeightAndWidth = function (panelElement, panelModel) {
setStyle(panelElement, { 'height': formatUnit(this.setXYDimensions(panelModel)[0]) });
setStyle(panelElement, { 'width': formatUnit(this.setXYDimensions(panelModel)[1]) });
};
DashboardLayout.prototype.renderCell = function (panel, isStringTemplate, index) {
var cellElement;
this.dimensions = this.setXYDimensions(panel);
if (isUndefined(panel.enabled)) {
panel.enabled = true;
}
if (this.contentTemplateChild.length > 0 && !isNullOrUndefined(index)) {
cellElement = this.contentTemplateChild[index];
if (panel.cssClass) {
addClass([cellElement], [panel.cssClass]);
}
if (panel.id) {
cellElement.setAttribute('id', panel.id);
}
}
else {
cellElement = this.createPanelElement(panel.cssClass ? panel.cssClass.split(' ') : null, panel.id);
}
cellElement.style.zIndex = '' + panel.zIndex;
this.element.appendChild(cellElement);
this.renderReactTemplates();
var dashBoardCell = this.renderPanels(cellElement, panel, panel.id, isStringTemplate);
this.panelCollection.push(dashBoardCell);
this.setXYAttributes(cellElement, panel);
this.setHeightAndWidth(cellElement, panel);
return cellElement;
};
DashboardLayout.prototype.setPanelPosition = function (cellElement, row, col) {
if (!cellElement) {
return;
}
if (this.checkMediaQuery()) {
this.calculateCellSize();
}
var heightValue = this.getCellSize()[1];
var widthValue = this.getCellSize()[0];
var left = col === 0 ? 0 : (((col) * ((widthValue) + this.cellSpacing[0])));
var top = row === 0 ? 0 : (((row) * ((heightValue) + this.cellSpacing[1])));
if (this.checkMediaQuery()) {
top = row === 0 ? 0 : ((this.panelsSizeY) * ((heightValue) + this.cellSpacing[1]));
}
setStyle(cellElement, { 'left': left + 'px', 'top': top + 'px' });
};
DashboardLayout.prototype.getRowColumn = function () {
this.rows = null;
if (this.element.querySelectorAll('.e-panel').length > 0 && !this.updatedRows) {
var panelElements = this.element.querySelectorAll('.e-panel');
for (var i = 0; i < panelElements.length; i++) {
var panelElement = panelElements[i];
var rowValue = parseInt(panelElement.getAttribute('data-row'), 10);
var xValue = parseInt(panelElement.getAttribute('data-sizeY'), 10);
this.rows = Math.max(this.rows, (rowValue + xValue));
}
}
else {
if (this.updatedRows) {
this.rows = th