@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,083 lines (1,082 loc) • 116 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;
};
import { Component, Property, setStyleAttribute, ChildProperty, compile } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, addClass, Collection, isNullOrUndefined } from '@syncfusion/ej2-base';
import { Event, EventHandler, selectAll, removeClass, select, Browser, detach, formatUnit } from '@syncfusion/ej2-base';
import { SanitizeHtmlHelper, extend } from '@syncfusion/ej2-base';
var ROOT = 'e-splitter';
var HORIZONTAL_PANE = 'e-splitter-horizontal';
var VERTICAL_PANE = 'e-splitter-vertical';
var PANE = 'e-pane';
var SPLIT_H_PANE = 'e-pane-horizontal';
var SPLIT_V_PANE = 'e-pane-vertical';
var SPLIT_BAR = 'e-split-bar';
var SPLIT_H_BAR = 'e-split-bar-horizontal';
var SPLIT_V_BAR = 'e-split-bar-vertical';
var STATIC_PANE = 'e-static-pane';
var SCROLL_PANE = 'e-scrollable';
var RESIZE_BAR = 'e-resize-handler';
var RESIZABLE_BAR = 'e-resizable-split-bar';
var SPLIT_BAR_HOVER = 'e-split-bar-hover';
var SPLIT_BAR_ACTIVE = 'e-split-bar-active';
var HIDE_HANDLER = 'e-hide-handler';
var SPLIT_TOUCH = 'e-splitter-touch';
var DISABLED = 'e-disabled';
var RTL = 'e-rtl';
var E_ICONS = 'e-icons';
var COLLAPSIBLE = 'e-collapsible';
var NAVIGATE_ARROW = 'e-navigate-arrow';
var ARROW_RIGHT = 'e-arrow-right';
var ARROW_LEFT = 'e-arrow-left';
var ARROW_UP = 'e-arrow-up';
var ARROW_DOWN = 'e-arrow-down';
var HIDE_ICON = 'e-icon-hidden';
var EXPAND_PANE = 'e-expanded';
var COLLAPSE_PANE = 'e-collapsed';
var PANE_HIDDEN = 'e-pane-hidden';
var RESIZABLE_PANE = 'e-resizable';
var LAST_BAR = 'e-last-bar';
var BAR_SIZE_DEFAULT = 1;
/**
* Interface to configure pane properties such as its content, size, min, max, resizable, collapsed and collapsible.
*/
var PaneProperties = /** @class */ (function (_super) {
__extends(PaneProperties, _super);
function PaneProperties() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property()
], PaneProperties.prototype, "size", void 0);
__decorate([
Property(false)
], PaneProperties.prototype, "collapsible", void 0);
__decorate([
Property(false)
], PaneProperties.prototype, "collapsed", void 0);
__decorate([
Property(true)
], PaneProperties.prototype, "resizable", void 0);
__decorate([
Property(null)
], PaneProperties.prototype, "min", void 0);
__decorate([
Property(null)
], PaneProperties.prototype, "max", void 0);
__decorate([
Property()
], PaneProperties.prototype, "content", void 0);
__decorate([
Property('')
], PaneProperties.prototype, "cssClass", void 0);
return PaneProperties;
}(ChildProperty));
export { PaneProperties };
/**
* Splitter is a layout user interface (UI) control that has resizable and collapsible split panes.
* The container can be split into multiple panes, which are oriented horizontally or vertically.
* The separator (divider) splits the panes and resizes and expands/collapses the panes.
* The splitter is placed inside the split pane to make a nested layout user interface.
*
* ```html
* <div id="splitter">
* <div> Left Pane </div>
* <div> Center Pane </div>
* <div> Right Pane </div>
* </div>
* ```
* ```typescript
* <script>
* var splitterObj = new Splitter({ width: '300px', height: '200px'});
* splitterObj.appendTo('#splitter');
* </script>
* ```
*/
var Splitter = /** @class */ (function (_super) {
__extends(Splitter, _super);
/**
* Initializes a new instance of the Splitter class.
*
* @param options - Specifies Splitter model properties as options.
* @param element - Specifies the element that is rendered as an Splitter.
*/
function Splitter(options, element) {
var _this = _super.call(this, options, element) || this;
_this.needsID = true;
return _this;
}
/**
* Gets called when the model property changes.The data that describes the old and new values of the property that changed.
*
* @param {SplitterModel} newProp - specifies the new property
* @param {SplitterModel} oldProp - specifies the old property
* @returns {void}
* @private
*/
Splitter.prototype.onPropertyChanged = function (newProp, oldProp) {
if (!this.element.classList.contains(ROOT)) {
return;
}
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'height':
this.setSplitterSize(this.element, newProp.height, 'height');
break;
case 'width':
this.setSplitterSize(this.element, newProp.width, 'width');
break;
case 'cssClass':
this.setCssClass(this.element, newProp.cssClass);
break;
case 'enabled':
this.isEnabled(this.enabled);
break;
case 'enableReversePanes':
this.setReversePane();
break;
case 'separatorSize':
this.setSeparatorSize(newProp.separatorSize);
break;
case 'orientation':
this.changeOrientation(newProp.orientation);
break;
case 'paneSettings': {
if (!(newProp.paneSettings instanceof Array && oldProp.paneSettings instanceof Array)) {
var paneCounts = Object.keys(newProp.paneSettings);
var isPaneContentChanged = paneCounts.some(function (count) {
return !isNullOrUndefined(newProp.paneSettings[count].content);
});
if (this.isReact && isPaneContentChanged) {
var cPaneCount = 0;
for (var k = 0; k < this.paneSettings.length; k++) {
if (typeof (this.paneSettings[k].content) === 'function') {
cPaneCount = cPaneCount + 1;
}
}
var hasAllContent = cPaneCount === this.paneSettings.length;
if (hasAllContent) {
this.clearTemplate();
}
}
for (var i = 0; i < paneCounts.length; i++) {
var index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
var changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
for (var j = 0; j < changedPropsCount; j++) {
var property = Object.keys(newProp.paneSettings[index])[j];
switch (property) {
case 'content': {
var newValue = Object(newProp.paneSettings[index])["" + property];
if (!isNullOrUndefined(newValue)) {
this.allPanes[index].innerHTML = '';
this.setTemplate(newValue, this.allPanes[index]);
}
break;
}
case 'resizable': {
var newVal = Object(newProp.paneSettings[index])["" + property];
this.resizableModel(index, newVal);
break;
}
case 'collapsible':
this.collapsibleModelUpdate(index);
break;
case 'collapsed':
if (newProp.paneSettings[index].collapsed) {
this.isCollapsed(index);
}
else {
this.collapsedOnchange(index);
}
break;
case 'cssClass':
this.setCssClass(this.allPanes[index], newProp.paneSettings[index].cssClass);
break;
case 'size': {
var newValSize = Object(newProp.paneSettings[index])["" + property];
if (newValSize !== '' && !isNullOrUndefined(newValSize)) {
this.updatePaneSize(newValSize, index);
}
break;
}
}
}
}
}
else {
this.clearTemplate();
this.destroyPaneSettings();
this.allBars = [];
this.allPanes = [];
this.createSplitPane(this.element);
this.addSeparator(this.element);
this.getPanesDimensions();
this.setRTL(this.enableRtl);
this.isCollapsed();
}
break;
}
case 'enableRtl':
this.setRTL(newProp.enableRtl);
break;
}
}
};
Splitter.prototype.updatePaneSize = function (newValSize, index) {
this.allPanes[index].style.flexBasis = newValSize;
var flexPaneIndexes = [];
var staticPaneWidth;
var flexCount = 0;
for (var i = 0; i < this.allPanes.length; i++) {
if (!this.paneSettings[i].size && !(this.allPanes[i].innerText === '')) {
flexPaneIndexes[flexCount] = i;
flexCount++;
}
else if (this.paneSettings[i].size) {
staticPaneWidth = this.orientation === 'Horizontal' ? this.allPanes[index].offsetWidth : this.allPanes[index].offsetHeight;
}
}
staticPaneWidth = this.orientation === 'Horizontal' ? (this.allBars[0].offsetWidth * this.allBars.length) + staticPaneWidth :
(this.allBars[0].offsetHeight * this.allBars.length) + staticPaneWidth;
var flexPaneWidth = (this.orientation === 'Horizontal' ? this.element.offsetWidth : this.element.offsetHeight)
- staticPaneWidth - (this.border * 2);
var avgDiffWidth = flexPaneWidth / flexPaneIndexes.length;
for (var j = 0; j < flexPaneIndexes.length; j++) {
if (this.allPanes[flexPaneIndexes[j]].style.flexBasis !== '') {
this.allPanes[flexPaneIndexes[j]].style.flexBasis = avgDiffWidth + 'px';
}
}
this.allPanes[index].classList.add(STATIC_PANE);
};
Splitter.prototype.initializeValues = function () {
this.allPanes = [];
this.paneOrder = [];
this.separatorOrder = [];
this.allBars = [];
this.previousCoordinates = {};
this.currentCoordinates = {};
this.updatePrePaneInPercentage = false;
this.updateNextPaneInPercentage = false;
this.panesDimensions = [];
this.border = 0;
this.validDataAttributes = ['data-size', 'data-min', 'data-max', 'data-collapsible',
'data-resizable', 'data-content', 'data-collapsed'];
this.validElementAttributes = ['data-orientation', 'data-width', 'data-height'];
this.iconsDelay = 300;
this.templateElement = [];
this.collapseFlag = false;
this.expandFlag = true;
};
Splitter.prototype.preRender = function () {
this.initializeValues();
this.onReportWindowSize = this.reportWindowSize.bind(this);
this.onMouseMoveHandler = this.onMouseMove.bind(this);
this.onMouseUpHandler = this.onMouseUp.bind(this);
this.onTouchMoveHandler = this.onMouseMove.bind(this);
this.onTouchEndHandler = this.onMouseUp.bind(this);
this.wrapper = this.element.cloneNode(true);
this.wrapperParent = this.element.parentElement;
removeClass([this.wrapper], ['e-control', 'e-lib', ROOT]);
var orientation = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
addClass([this.element], orientation);
var name = Browser.info.name;
var css = (name === 'msie') ? 'e-ie' : '';
this.setCssClass(this.element, css);
if (Browser.isDevice) {
addClass([this.element], SPLIT_TOUCH);
}
};
Splitter.prototype.getPersistData = function () {
return this.addOnPersist(['paneSettings']);
};
/**
* Returns the current module name.
*
* @returns {string} - returns the string value
* @private
*/
Splitter.prototype.getModuleName = function () {
return 'splitter';
};
/**
* To Initialize the control rendering
*
* @returns {void}
* @private
*/
Splitter.prototype.render = function () {
this.checkDataAttributes();
this.setCssClass(this.element, this.cssClass);
this.isEnabled(this.enabled);
this.setDimension(this.getHeight(this.element), this.getWidth(this.element));
this.createSplitPane(this.element);
this.addSeparator(this.element);
this.getPanesDimensions();
this.setPaneSettings();
this.setRTL(this.enableRtl);
if (this.enableReversePanes) {
this.setReversePane();
}
this.collapseFlag = true;
this.isCollapsed();
this.collapseFlag = false;
EventHandler.add(document, 'touchstart click', this.onDocumentClick, this);
this.renderComplete();
this.element.ownerDocument.defaultView.addEventListener('resize', this.onReportWindowSize, true);
EventHandler.add(this.element, 'keydown', this.onMove, this);
};
Splitter.prototype.onDocumentClick = function (e) {
if (!e.target.classList.contains(SPLIT_BAR) && !isNullOrUndefined(this.currentSeparator)) {
this.currentSeparator.classList.remove(SPLIT_BAR_HOVER);
this.currentSeparator.classList.remove(SPLIT_BAR_ACTIVE);
}
};
Splitter.prototype.checkPaneSize = function (e) {
var prePaneSize = this.orientation === 'Horizontal' ? this.previousPane.offsetWidth : this.previousPane.offsetHeight;
var nextPaneSize = this.orientation === 'Horizontal' ? this.nextPane.offsetWidth : this.nextPane.offsetHeight;
var splitBarSize = isNullOrUndefined(this.separatorSize) ? BAR_SIZE_DEFAULT : this.separatorSize;
if ((this.previousPane.style.flexBasis.indexOf('%') > 0 || this.previousPane.style.flexBasis.indexOf('p') > 0 || this.nextPane.style.flexBasis.indexOf('%') > 0)) {
var previousFlexBasis = this.updatePaneFlexBasis(this.previousPane);
var nextFlexBasis = this.updatePaneFlexBasis(this.nextPane);
this.totalPercent = previousFlexBasis + nextFlexBasis;
this.totalWidth = this.convertPercentageToPixel(this.totalPercent + '%');
if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
(this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) <
this.convertPercentageToPixel((nextFlexBasis - 1) + '%'))) {
this.previousPane.style.flexBasis = (previousFlexBasis + 1) + '%';
this.nextPane.style.flexBasis = (nextFlexBasis - 1) + '%';
}
else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
(this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) <
this.convertPercentageToPixel((previousFlexBasis - 1) + '%'))) {
this.previousPane.style.flexBasis = (previousFlexBasis - 1) + '%';
this.nextPane.style.flexBasis = (nextFlexBasis + 1) + '%';
}
}
}
else {
this.totalWidth = (this.orientation === 'Horizontal') ? this.previousPane.offsetWidth + this.nextPane.offsetWidth :
this.previousPane.offsetHeight + this.nextPane.offsetHeight;
if (e.type === 'keydown' && (!isNullOrUndefined(e.keyCode))) {
if ((e.keyCode === 39 || (e.keyCode === 40)) && nextPaneSize > 0 &&
(this.getMinInPixel(this.paneSettings[this.nextPaneIndex].min) < (nextPaneSize + splitBarSize))) {
this.addStaticPaneClass();
this.previousPane.style.flexBasis = (prePaneSize + splitBarSize) + 'px';
this.nextPane.style.flexBasis = (nextPaneSize < splitBarSize) ? '0px' :
(nextPaneSize - splitBarSize) + 'px';
}
else if ((e.keyCode === 37 || (e.keyCode === 38)) && prePaneSize > 0 &&
(this.getMinInPixel(this.paneSettings[this.prevPaneIndex].min) < (prePaneSize - splitBarSize))) {
this.addStaticPaneClass();
this.previousPane.style.flexBasis = (prePaneSize < splitBarSize) ? '0px' :
(prePaneSize - splitBarSize) + 'px';
this.nextPane.style.flexBasis = (nextPaneSize + splitBarSize) + 'px';
}
}
}
};
Splitter.prototype.onMove = function (event) {
if (this.allPanes.length > 1) {
var index = this.getSeparatorIndex(this.currentSeparator);
var isPrevpaneCollapsed = this.previousPane.classList.contains(COLLAPSE_PANE);
var isPrevpaneExpanded = this.previousPane.classList.contains(EXPAND_PANE);
var isNextpaneCollapsed = this.nextPane.classList.contains(COLLAPSE_PANE);
if (((this.orientation !== 'Horizontal' && event.keyCode === 38) || (this.orientation === 'Horizontal' &&
event.keyCode === 39) ||
(this.orientation === 'Horizontal' && event.keyCode === 37) || (this.orientation !== 'Horizontal' && event.keyCode === 40))
&& (!isPrevpaneExpanded && !isNextpaneCollapsed && !isPrevpaneCollapsed || (isPrevpaneExpanded) && !isNextpaneCollapsed) &&
document.activeElement.classList.contains(SPLIT_BAR) && (this.paneSettings[index].resizable &&
this.paneSettings[index + 1].resizable)) {
event.preventDefault();
this.checkPaneSize(event);
this.triggerResizing(event);
}
else if (event.keyCode === 13 && this.paneSettings[index].collapsible &&
document.activeElement.classList.contains(SPLIT_BAR) && this.currentSeparator.classList.contains(SPLIT_BAR_ACTIVE)) {
if (!this.previousPane.classList.contains(COLLAPSE_PANE)) {
this.collapse(index);
addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
}
else {
this.expand(index);
addClass([this.currentSeparator], SPLIT_BAR_ACTIVE);
}
}
}
};
Splitter.prototype.getMinInPixel = function (minValue) {
if (isNullOrUndefined(minValue)) {
return 0;
}
var paneMinRange = this.convertPixelToNumber(minValue.toString());
if (minValue.indexOf('%') > 0) {
paneMinRange = this.convertPercentageToPixel(minValue);
}
var min = this.convertPixelToNumber((paneMinRange).toString());
return min;
};
/**
* @param {string} value - specifies the string value
* @returns {string} returns the string
* @hidden
*/
Splitter.prototype.sanitizeHelper = function (value) {
if (this.enableHtmlSanitizer) {
var item = SanitizeHtmlHelper.beforeSanitize();
var beforeEvent = {
cancel: false,
helper: null
};
extend(item, item, beforeEvent);
this.trigger('beforeSanitizeHtml', item);
if (item.cancel && !isNullOrUndefined(item.helper)) {
value = item.helper(value);
}
else if (!item.cancel) {
value = SanitizeHtmlHelper.serializeValue(item, value);
}
}
return value;
};
Splitter.prototype.checkDataAttributes = function () {
var api;
var value;
// Element values
for (var dataIndex = 0; dataIndex < this.validElementAttributes.length; dataIndex++) {
value = this.element.getAttribute(this.validElementAttributes[dataIndex]);
if (!isNullOrUndefined(value)) {
api = this.removeDataPrefix(this.validElementAttributes[dataIndex]);
// eslint-disable-next-line
this[api] = value;
}
}
// Pane values
for (var paneIndex = 0; paneIndex < this.element.children.length; paneIndex++) {
for (var dataAttr = 0; dataAttr < this.validDataAttributes.length; dataAttr++) {
value = this.element.children[paneIndex].getAttribute(this.validDataAttributes[dataAttr]);
if (!isNullOrUndefined(value)) {
api = this.removeDataPrefix(this.validDataAttributes[dataAttr]);
value = (api === 'collapsible' || api === 'resizable') ? (value === 'true') : value;
if (isNullOrUndefined(this.paneSettings[paneIndex])) {
this.paneSettings[paneIndex] = {
size: '',
min: null,
max: null,
content: '',
resizable: true,
collapsible: false,
collapsed: false
};
}
// eslint-disable-next-line
var paneAPI = this.paneSettings[paneIndex][api];
if (api === 'resizable' || api === 'collapsible' || api === 'collapsed') {
// eslint-disable-next-line
this.paneSettings[paneIndex][api] = value;
}
if (isNullOrUndefined(paneAPI) || paneAPI === '') {
// eslint-disable-next-line
this.paneSettings[paneIndex][api] = value;
}
}
}
}
};
Splitter.prototype.destroyPaneSettings = function () {
[].slice.call(this.element.children).forEach(function (el) {
detach(el);
});
this.restoreElem();
};
Splitter.prototype.setPaneSettings = function () {
var childCount = this.allPanes.length;
var paneCollection = [];
var paneValue = {
size: '',
min: null,
max: null,
content: '',
resizable: true,
collapsed: false,
collapsible: false,
cssClass: ''
};
for (var i = 0; i < childCount; i++) {
if (isNullOrUndefined(this.paneSettings[i])) {
paneCollection[i] = paneValue;
}
else {
paneCollection[i] = this.paneSettings[i];
}
}
this.setProperties({ 'paneSettings': paneCollection }, true);
};
Splitter.prototype.checkArrow = function (paneIndex, targetArrow) {
return (this.allBars[paneIndex].querySelector('.' + NAVIGATE_ARROW + '.' + targetArrow));
};
Splitter.prototype.removeDataPrefix = function (attribute) {
return attribute.slice(attribute.lastIndexOf('-') + 1);
};
Splitter.prototype.setRTL = function (rtl) {
if (rtl) {
addClass([this.element], RTL);
}
else {
removeClass([this.element], RTL);
}
};
Splitter.prototype.setReversePane = function () {
this.allPanes = this.allPanes.reverse();
this.allBars = this.allBars.reverse();
addClass([this.allBars[this.allBars.length - 1]], LAST_BAR);
removeClass([this.allBars[0]], LAST_BAR);
this.setProperties({ 'paneSettings': this.paneSettings.reverse() }, true);
if (this.enableReversePanes) {
this.element.setAttribute('dir', 'rtl');
}
else {
this.element.removeAttribute('dir');
}
};
Splitter.prototype.setSplitterSize = function (element, size, property) {
var style = property === 'width' ? { 'width': formatUnit(size) } : { 'height': formatUnit(size) };
setStyleAttribute(element, style);
};
Splitter.prototype.getPanesDimensions = function () {
for (var index = 0; index < this.allPanes.length; index++) {
if (this.orientation === 'Horizontal') {
this.panesDimensions.push(this.allPanes[index].getBoundingClientRect().width);
}
else {
this.panesDimensions.push(this.allPanes[index].getBoundingClientRect().height);
}
}
};
Splitter.prototype.setCssClass = function (element, className) {
if (className) {
addClass([element], className.split(className.indexOf(',') > -1 ? ',' : ' '));
}
};
Splitter.prototype.hideResizer = function (target) {
addClass([select('.' + RESIZE_BAR, target)], HIDE_HANDLER);
};
Splitter.prototype.showResizer = function (target) {
if (!isNullOrUndefined(this.previousPane) && this.previousPane.classList.contains(RESIZABLE_PANE) &&
!isNullOrUndefined(this.nextPane) && this.nextPane.classList.contains(RESIZABLE_PANE)) {
removeClass([select('.' + RESIZE_BAR, target)], HIDE_HANDLER);
}
};
Splitter.prototype.resizableModel = function (index, newVal) {
var paneIndex = (index === (this.allBars.length)) ? (index - 1) : index;
var i = index;
EventHandler.remove(this.allBars[paneIndex], 'mousedown', this.onMouseDown);
if (newVal) {
EventHandler.add(this.allBars[paneIndex], 'mousedown', this.onMouseDown, this);
if (this.isResizable()) {
this.showResizer(this.allBars[paneIndex]);
removeClass([select('.' + RESIZE_BAR, this.allBars[paneIndex])], HIDE_HANDLER);
this.allBars[paneIndex].classList.add(RESIZABLE_BAR);
if (index === (this.allBars.length)) {
this.allPanes[index].classList.add(RESIZABLE_PANE);
}
else {
this.allPanes[paneIndex].classList.add(RESIZABLE_PANE);
}
this.updateResizablePanes(i);
}
}
else {
this.updateResizablePanes(i);
this.hideResizer(this.allBars[paneIndex]);
this.allBars[paneIndex].classList.remove(RESIZABLE_BAR);
if (index === (this.allBars.length)) {
this.allPanes[index].classList.remove(RESIZABLE_PANE);
}
else {
this.allPanes[paneIndex].classList.remove(RESIZABLE_PANE);
}
}
};
Splitter.prototype.collapsibleModelUpdate = function (index) {
var paneIndex = index === (this.allBars.length) ? (index - 1) : index;
var arrow2 = (this.orientation === 'Horizontal')
? this.checkArrow(paneIndex, ARROW_LEFT) : this.checkArrow(paneIndex, ARROW_UP);
var arrow1 = (this.orientation === 'Horizontal')
? this.checkArrow(paneIndex, ARROW_RIGHT) : this.checkArrow(paneIndex, ARROW_DOWN);
this.paneCollapsible(this.allPanes[index], index);
this.updateCollapseIcons(paneIndex, arrow1, arrow2);
};
Splitter.prototype.collapseArrow = function (barIndex, arrow) {
return selectAll('.' + arrow, this.allBars[barIndex])[0];
};
Splitter.prototype.updateIsCollapsed = function (index, collapseArrow, lastBarArrow) {
if (!isNullOrUndefined(index)) {
var targetEle = void 0;
var lastBarIndex = (index === this.allBars.length);
var barIndex = lastBarIndex ? index - 1 : index;
if (!lastBarIndex && this.allPanes[index + 1].classList.contains(COLLAPSE_PANE) && index !== 0) {
targetEle = this.collapseArrow(barIndex - 1, lastBarArrow);
}
else {
targetEle = (lastBarIndex) ? this.collapseArrow(barIndex, lastBarArrow) : this.collapseArrow(barIndex, collapseArrow);
}
targetEle.click();
}
};
Splitter.prototype.isCollapsed = function (index) {
var _this = this;
if (!isNullOrUndefined(index) && this.paneSettings[index].collapsed
&& isNullOrUndefined(this.allPanes[index].classList.contains(COLLAPSE_PANE))) {
return;
}
this.expandFlag = false;
if (!isNullOrUndefined(index)) {
this.collapseFlag = true;
var targetEle = void 0;
var lastBarIndex = (index === this.allBars.length);
var barIndex = lastBarIndex ? index - 1 : index;
if (!lastBarIndex && this.allPanes[index + 1].classList.contains(COLLAPSE_PANE) && index !== 0) {
targetEle = this.collapseArrow(barIndex - 1, this.targetArrows().lastBarArrow);
}
else {
targetEle = (lastBarIndex) ? this.collapseArrow(barIndex, this.targetArrows().lastBarArrow) :
this.collapseArrow(barIndex, this.targetArrows().collapseArrow);
}
var event_1 = { target: targetEle };
var eventArgs = this.beforeAction(event_1);
this.trigger('beforeCollapse', eventArgs, function (beforeCollapseArgs) {
if (!beforeCollapseArgs.cancel) {
var collapsedindex = [];
collapsedindex[0] = index;
var j = 1;
for (var i = 0; i < _this.allPanes.length; i++) {
if (_this.allPanes[i].classList.contains(COLLAPSE_PANE)) {
collapsedindex[j] = i;
j++;
}
}
collapsedindex = collapsedindex.sort();
_this.updateIsCollapsed(index, _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
for (var i = 0; i < collapsedindex.length; i++) {
if (!_this.allPanes[collapsedindex[i]].classList.contains(COLLAPSE_PANE)) {
_this.updateIsCollapsed(collapsedindex[i], _this.targetArrows().collapseArrow, _this.targetArrows().lastBarArrow);
}
}
for (var i = collapsedindex.length; i > 0; i--) {
if (!_this.allPanes[collapsedindex[i - 1]].classList.contains(COLLAPSE_PANE)) {
var targetArrow = _this.targetArrows();
_this.updateIsCollapsed(collapsedindex[i - 1], targetArrow.collapseArrow, targetArrow.lastBarArrow);
}
}
var collapseEventArgs = _this.afterAction(event_1);
_this.trigger('collapsed', collapseEventArgs);
_this.collapseFlag = false;
}
});
}
else {
for (var m = 0; m < this.allPanes.length; m++) {
if (!isNullOrUndefined(this.paneSettings[m]) && this.paneSettings[m].collapsed) {
this.updateIsCollapsed(m, this.targetArrows().collapseArrow, this.targetArrows().lastBarArrow);
}
}
for (var m = this.allPanes.length - 1; m >= 0; m--) {
if (!isNullOrUndefined(this.paneSettings[m]) && this.paneSettings[m].collapsed &&
!this.allPanes[m].classList.contains(COLLAPSE_PANE)) {
var collapseArrow = this.orientation === 'Horizontal' ? ARROW_RIGHT : ARROW_DOWN;
if (m !== 0) {
var targetEle = this.collapseArrow(m - 1, collapseArrow);
targetEle.click();
}
if (!this.nextPane.classList.contains(COLLAPSE_PANE)) {
var targetEle = this.collapseArrow(m - 1, collapseArrow);
targetEle.click();
}
}
}
}
this.expandFlag = true;
};
Splitter.prototype.targetArrows = function () {
this.splitterProperty();
return {
collapseArrow: (this.orientation === 'Horizontal') ? ARROW_LEFT : ARROW_UP,
lastBarArrow: (this.orientation === 'Vertical') ? ARROW_DOWN : ARROW_RIGHT
};
};
Splitter.prototype.collapsedOnchange = function (index) {
if (!isNullOrUndefined(this.paneSettings[index]) && !isNullOrUndefined(this.paneSettings[index].collapsed)
&& this.allPanes[index].classList.contains(COLLAPSE_PANE)) {
this.updateIsCollapsed(index, this.targetArrows().lastBarArrow, this.targetArrows().collapseArrow);
}
};
Splitter.prototype.isEnabled = function (enabled) {
if (enabled) {
removeClass([this.element], DISABLED);
}
else {
addClass([this.element], DISABLED);
}
};
Splitter.prototype.setSeparatorSize = function (size) {
var sizeValue = isNullOrUndefined(size) ? 'auto' : size + 'px';
var separator = this.orientation === 'Horizontal' ? SPLIT_H_BAR : SPLIT_V_BAR;
for (var index = 0; index < this.allBars.length; index++) {
var splitBar = selectAll('.' + separator, this.element)[index];
var resizeBar = selectAll('.' + RESIZE_BAR, splitBar)[0];
if (this.orientation === 'Horizontal') {
splitBar.style.width = sizeValue;
if (!isNullOrUndefined(resizeBar)) {
resizeBar.style.width = sizeValue;
}
}
else {
splitBar.style.height = sizeValue;
if (!isNullOrUndefined(resizeBar)) {
resizeBar.style.height = sizeValue;
}
}
}
};
Splitter.prototype.changeOrientation = function (orientation) {
var isVertical = orientation === 'Vertical';
this.element.classList.remove(isVertical ? HORIZONTAL_PANE : VERTICAL_PANE);
this.element.classList.add(isVertical ? VERTICAL_PANE : HORIZONTAL_PANE);
for (var index = 0; index < this.allPanes.length; index++) {
this.allPanes[index].classList.remove(isVertical ? SPLIT_H_PANE : SPLIT_V_PANE);
this.allPanes[index].classList.add(isVertical ? SPLIT_V_PANE : SPLIT_H_PANE);
}
for (var index = 0; index < this.allBars.length; index++) {
detach(this.allBars[index]);
}
this.allBars = [];
this.addSeparator(this.element);
};
Splitter.prototype.checkSplitPane = function (currentBar, elementIndex) {
var paneEle = this.collectPanes(currentBar.parentElement.children)[elementIndex];
return paneEle;
};
Splitter.prototype.collectPanes = function (childNodes) {
var elements = [];
for (var i = 0; i < childNodes.length; i++) {
if (childNodes[i].classList.contains(PANE)) {
elements.push(childNodes[i]);
}
}
return elements;
};
Splitter.prototype.getPrevPane = function (order) {
return this.enableReversePanes ? this.getOrderPane(order + 1) : this.getOrderPane(order - 1);
};
Splitter.prototype.getNextPane = function (order) {
return this.enableReversePanes ? this.getOrderPane(order - 1) : this.getOrderPane(order + 1);
};
Splitter.prototype.getOrderPane = function (order) {
var pane;
for (var i = 0; i < this.element.children.length; i++) {
if (parseInt(this.element.children[i].style.order, 10) === order) {
pane = this.element.children[i];
}
}
return pane;
};
Splitter.prototype.getOrderIndex = function (order, type) {
var index;
var panes;
if (type === 'pane') {
panes = this.allPanes;
}
else {
panes = this.allBars;
}
for (var i = 0; i < panes.length; i++) {
if (parseInt(panes[i].style.order, 10) === order) {
index = i;
}
}
return index;
};
Splitter.prototype.updateSeparatorSize = function (resizeHanlder) {
var sizeValue = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
if (this.orientation === 'Horizontal') {
resizeHanlder.style.width = sizeValue;
}
else {
resizeHanlder.style.height = sizeValue;
}
};
Splitter.prototype.addResizeHandler = function (currentBar) {
var resizeHanlder = this.createElement('div');
addClass([resizeHanlder], [RESIZE_BAR, E_ICONS]);
this.updateSeparatorSize(resizeHanlder);
currentBar.appendChild(resizeHanlder);
};
Splitter.prototype.getHeight = function (target) {
var height = this.height;
height = target.style.height !== '' && this.height === '100%' ? target.style.height : this.height;
return height;
};
Splitter.prototype.getWidth = function (target) {
var width = this.width;
width = target.style.width !== '' && this.width === '100%' ? target.style.width : this.width;
return width;
};
Splitter.prototype.setDimension = function (height, width) {
setStyleAttribute(this.element, { 'height': height, 'width': width });
};
Splitter.prototype.updateCollapseIcons = function (index, arrow1, arrow2) {
if (!isNullOrUndefined(this.paneSettings[index])) {
if (!isNullOrUndefined(this.paneSettings[index].collapsible)) {
if (this.paneSettings[index].collapsible) {
removeClass([arrow2], [HIDE_ICON]);
}
else {
addClass([arrow2], [HIDE_ICON]);
}
if (!isNullOrUndefined(this.paneSettings[index + 1])) {
if (this.paneSettings[index + 1].collapsible) {
removeClass([arrow1], [HIDE_ICON]);
}
else {
addClass([arrow1], [HIDE_ICON]);
}
}
if (!isNullOrUndefined(this.paneSettings[index + 1])) {
if ((this.paneSettings[index + 1].collapsible)) {
if (this.paneSettings[index + 1].collapsible) {
removeClass([arrow1], [HIDE_ICON]);
}
else {
addClass([arrow1], [HIDE_ICON]);
}
}
}
}
}
};
Splitter.prototype.updateIconClass = function () {
if (this.orientation === 'Horizontal') {
this.leftArrow = ARROW_LEFT;
this.rightArrow = ARROW_RIGHT;
}
else {
this.leftArrow = ARROW_UP;
this.rightArrow = ARROW_DOWN;
}
};
Splitter.prototype.createSeparator = function (i) {
var separator = this.createElement('div');
this.allBars.push(separator);
var arrow1 = this.createElement('button');
var arrow2 = this.createElement('button');
arrow1.setAttribute('tabindex', '-1');
arrow2.setAttribute('tabindex', '-1');
arrow1.setAttribute('aria-label', 'Toggle navigation');
arrow2.setAttribute('aria-label', 'Toggle navigation');
arrow1.setAttribute('type', 'button');
arrow2.setAttribute('type', 'button');
var size = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
var proxy = null || this;
if (this.orientation === 'Horizontal') {
this.updateIconClass();
addClass([arrow2], [NAVIGATE_ARROW, ARROW_LEFT, HIDE_ICON]);
addClass([arrow1], [NAVIGATE_ARROW, ARROW_RIGHT, HIDE_ICON]);
addClass([separator], [SPLIT_BAR, SPLIT_H_BAR]);
separator.style.width = size;
}
else {
addClass([arrow1], [NAVIGATE_ARROW, ARROW_DOWN, HIDE_ICON]);
addClass([arrow2], [NAVIGATE_ARROW, ARROW_UP, HIDE_ICON]);
addClass([separator], [SPLIT_BAR, SPLIT_V_BAR]);
this.updateIconClass();
separator.style.height = size;
}
this.addMouseActions(separator);
separator.appendChild(arrow2);
this.addResizeHandler(separator);
separator.appendChild(arrow1);
this.updateCollapseIcons(i, arrow1, arrow2);
separator.setAttribute('tabindex', '-1');
separator.setAttribute('aria-hidden', 'true');
if (this.enableReversePanes) {
separator.setAttribute('dir', 'ltr');
}
else {
separator.removeAttribute('dir');
}
separator.addEventListener('focus', function () {
separator.classList.add(SPLIT_BAR_ACTIVE);
proxy.currentSeparator = separator;
proxy.getPaneDetails();
});
separator.addEventListener('blur', function () {
separator.classList.remove(SPLIT_BAR_ACTIVE);
});
return separator;
};
Splitter.prototype.updateResizablePanes = function (index) {
this.getPaneDetails();
if (this.isResizable()) {
this.allPanes[index].classList.add(RESIZABLE_PANE);
}
else {
this.allPanes[index].classList.remove(RESIZABLE_PANE);
}
};
Splitter.prototype.addSeparator = function (target) {
var childCount = this.allPanes.length;
var clonedEle = target.children;
var separator;
for (var i = 0; i < childCount; i++) {
if (i < childCount - 1) {
separator = this.createSeparator(i);
setStyleAttribute(separator, { 'order': (i * 2) + 1 });
this.separatorOrder.push((i * 2) + 1);
clonedEle[i].parentNode.appendChild(separator);
this.currentSeparator = separator;
separator.setAttribute('role', 'separator');
separator.setAttribute('aria-valuenow', i.toString());
if (!isNullOrUndefined(this.orientation)) {
separator.setAttribute('aria-orientation', this.orientation.toLowerCase());
}
this.wireClickEvents();
if (!isNullOrUndefined(separator)) {
if (this.isResizable()) {
EventHandler.add(separator, 'mousedown', this.onMouseDown, this);
var eventName = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';
EventHandler.add(separator, eventName, this.onMouseDown, this);
separator.classList.add(RESIZABLE_BAR);
this.updateResizablePanes(i);
}
else {
addClass([select('.' + RESIZE_BAR, separator)], HIDE_HANDLER);
}
}
}
else {
if (separator) {
addClass([separator], LAST_BAR);
}
if (childCount > 1) {
this.updateResizablePanes(i);
}
}
}
if (Browser.info.name === 'msie') {
var allBar = this.element.querySelectorAll('.e-splitter .e-resize-handler');
for (var i = 0; i < allBar.length; i++) {
var sepSize = isNullOrUndefined(this.separatorSize) ? 1 : this.separatorSize;
allBar[i].style.paddingLeft = sepSize / 2 + 'px';
allBar[i].style.paddingRight = sepSize / 2 + 'px';
}
}
};
Splitter.prototype.isResizable = function () {
var resizable = false;
if ((!isNullOrUndefined(this.paneSettings[this.getPreviousPaneIndex()]) &&
this.paneSettings[this.getPreviousPaneIndex()].resizable &&
!isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()]) &&
this.paneSettings[this.getNextPaneIndex()].resizable) ||
isNullOrUndefined(this.paneSettings[this.getNextPaneIndex()])) {
resizable = true;
}
return resizable;
};
Splitter.prototype.addMouseActions = function (separator) {
var _this = this;
var sTout;
var hoverTimeOut;
separator.addEventListener('mouseenter', function () {
/* istanbul ignore next */
sTout = setTimeout(function () {
addClass([separator], [SPLIT_BAR_HOVER]);
}, _this.iconsDelay);
});
separator.addEventListener('mouseleave', function () {
clearTimeout(sTout);
removeClass([separator], [SPLIT_BAR_HOVER]);
});
separator.addEventListener('mouseout', function () {
clearTimeout(hoverTimeOut);
});
separator.addEventListener('mouseover', function () {
/* istanbul ignore next */
hoverTimeOut = setTimeout(function () {
addClass([separator], [SPLIT_BAR_HOVER]);
});
});
};
Splitter.prototype.getEventType = function (e) {
return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';
};
Splitter.prototype.updateCurrentSeparator = function (target) {
this.currentSeparator = this.isSeparator(target) ? target.parentElement : target;
};
Splitter.prototype.isSeparator = function (target) {
return (target.classList.contains(SPLIT_BAR) ? false : true);
};
Splitter.prototype.isMouseEvent = function (e) {
var isMouse = false;
if (this.getEventType(e.type) === 'mouse' || (!isNullOrUndefined(e.pointerType) &&
this.getEventType(e.pointerType) === 'mouse')) {
isMouse = true;
}
return isMouse;
};
Splitter.prototype.updateCursorPosition = function (e, type) {
if (this.isMouseEvent(e)) {
this.changeCoordinates({ x: e.pageX, y: e.pageY }, type);
}
else {
var eventType = Browser.info.name !== 'msie' ? e.touches[0] : e;
this.changeCoordinates({ x: eventType.pageX, y: eventType.pageY }, type);
}
};
Splitter.prototype.changeCoordinates = function (coordinates, type) {
if (type === 'previous') {
this.previousCoordinates = coordinates;
}
else {
this.currentCoordinates = coordinates;
}
};
Splitter.prototype.reportWindowSize = function () {
var _this = this;
var paneCount = this.allPanes.length;
if (!document.body.contains(this.element)) {
document.defaultView.removeEventListener('resize', this.onReportWindowSize);
return;
}
for (var i = 0; i < paneCount; i++) {
if (isNullOrUndefined(this.paneSettings[i].size)) {
this.allPanes[i].classList.remove(STATIC_PANE);
}
if (paneCount - 1 === i) {
var staticPaneCount = this.element.querySelectorAll('.' + STATIC_PANE).length;
if (staticPaneCount === paneCount) {
if (this.allPanes[i].style.flexBasis === '') {
removeClass([this.allPanes[i]], STATIC_PANE);
}
}
}
}
if (paneCount > 0) {
setTimeout(function () {