@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,108 lines (1,107 loc) • 260 kB
JavaScript
import { ChildProperty, Property, Component, isNullOrUndefined, removeClass, addClass, Browser, EventHandler, SanitizeHtmlHelper, extend, detach, formatUnit, setStyleAttribute, select, selectAll, compile, Collection, Event, NotifyPropertyChanges, setValue, append, isUndefined, closest, Draggable, getValue, getUniqueID, attributes, remove } from '@syncfusion/ej2-base';
var __decorate = (undefined && undefined.__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;
};
const ROOT = 'e-splitter';
const HORIZONTAL_PANE = 'e-splitter-horizontal';
const VERTICAL_PANE = 'e-splitter-vertical';
const PANE = 'e-pane';
const SPLIT_H_PANE = 'e-pane-horizontal';
const SPLIT_V_PANE = 'e-pane-vertical';
const SPLIT_BAR = 'e-split-bar';
const SPLIT_H_BAR = 'e-split-bar-horizontal';
const SPLIT_V_BAR = 'e-split-bar-vertical';
const STATIC_PANE = 'e-static-pane';
const SCROLL_PANE = 'e-scrollable';
const RESIZE_BAR = 'e-resize-handler';
const RESIZABLE_BAR = 'e-resizable-split-bar';
const SPLIT_BAR_HOVER = 'e-split-bar-hover';
const SPLIT_BAR_ACTIVE = 'e-split-bar-active';
const HIDE_HANDLER = 'e-hide-handler';
const SPLIT_TOUCH = 'e-splitter-touch';
const DISABLED = 'e-disabled';
const RTL = 'e-rtl';
const E_ICONS = 'e-icons';
const COLLAPSIBLE = 'e-collapsible';
const NAVIGATE_ARROW = 'e-navigate-arrow';
const ARROW_RIGHT = 'e-arrow-right';
const ARROW_LEFT = 'e-arrow-left';
const ARROW_UP = 'e-arrow-up';
const ARROW_DOWN = 'e-arrow-down';
const HIDE_ICON = 'e-icon-hidden';
const EXPAND_PANE = 'e-expanded';
const COLLAPSE_PANE = 'e-collapsed';
const PANE_HIDDEN = 'e-pane-hidden';
const RESIZABLE_PANE = 'e-resizable';
const LAST_BAR = 'e-last-bar';
const BAR_SIZE_DEFAULT = 1;
/**
* Interface to configure pane properties such as its content, size, min, max, resizable, collapsed and collapsible.
*/
class PaneProperties extends ChildProperty {
}
__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);
/**
* 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>
* ```
*/
let Splitter = class Splitter extends Component {
/**
* 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.
*/
constructor(options, element) {
super(options, element);
this.needsID = true;
}
/**
* 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
*/
onPropertyChanged(newProp, oldProp) {
if (!this.element.classList.contains(ROOT)) {
return;
}
for (const prop of Object.keys(newProp)) {
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)) {
const paneCounts = Object.keys(newProp.paneSettings);
const isPaneContentChanged = paneCounts.some((count) => !isNullOrUndefined(newProp.paneSettings[count].content));
if (this.isReact && isPaneContentChanged) {
let cPaneCount = 0;
for (let k = 0; k < this.paneSettings.length; k++) {
if (typeof (this.paneSettings[k].content) === 'function') {
cPaneCount = cPaneCount + 1;
}
}
const hasAllContent = cPaneCount === this.paneSettings.length;
if (hasAllContent) {
this.clearTemplate();
}
}
for (let i = 0; i < paneCounts.length; i++) {
const index = parseInt(Object.keys(newProp.paneSettings)[i], 10);
const changedPropsCount = Object.keys(newProp.paneSettings[index]).length;
for (let j = 0; j < changedPropsCount; j++) {
const property = Object.keys(newProp.paneSettings[index])[j];
switch (property) {
case 'content': {
const newValue = Object(newProp.paneSettings[index])[`${property}`];
if (!isNullOrUndefined(newValue)) {
this.allPanes[index].innerHTML = '';
this.setTemplate(newValue, this.allPanes[index]);
}
break;
}
case 'resizable': {
const 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': {
const 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;
}
}
}
updatePaneSize(newValSize, index) {
this.allPanes[index].style.flexBasis = newValSize;
const flexPaneIndexes = [];
let staticPaneWidth;
let flexCount = 0;
for (let 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;
const flexPaneWidth = (this.orientation === 'Horizontal' ? this.element.offsetWidth : this.element.offsetHeight)
- staticPaneWidth - (this.border * 2);
const avgDiffWidth = flexPaneWidth / flexPaneIndexes.length;
for (let 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);
}
initializeValues() {
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;
}
preRender() {
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]);
const orientation = this.orientation === 'Horizontal' ? HORIZONTAL_PANE : VERTICAL_PANE;
addClass([this.element], orientation);
const name = Browser.info.name;
const css = (name === 'msie') ? 'e-ie' : '';
this.setCssClass(this.element, css);
if (Browser.isDevice) {
addClass([this.element], SPLIT_TOUCH);
}
}
getPersistData() {
return this.addOnPersist(['paneSettings']);
}
/**
* Returns the current module name.
*
* @returns {string} - returns the string value
* @private
*/
getModuleName() {
return 'splitter';
}
/**
* To Initialize the control rendering
*
* @returns {void}
* @private
*/
render() {
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);
}
onDocumentClick(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);
}
}
checkPaneSize(e) {
const prePaneSize = this.orientation === 'Horizontal' ? this.previousPane.offsetWidth : this.previousPane.offsetHeight;
const nextPaneSize = this.orientation === 'Horizontal' ? this.nextPane.offsetWidth : this.nextPane.offsetHeight;
const 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)) {
const previousFlexBasis = this.updatePaneFlexBasis(this.previousPane);
const 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';
}
}
}
}
onMove(event) {
if (this.allPanes.length > 1) {
const index = this.getSeparatorIndex(this.currentSeparator);
const isPrevpaneCollapsed = this.previousPane.classList.contains(COLLAPSE_PANE);
const isPrevpaneExpanded = this.previousPane.classList.contains(EXPAND_PANE);
const 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);
}
}
}
}
getMinInPixel(minValue) {
if (isNullOrUndefined(minValue)) {
return 0;
}
let paneMinRange = this.convertPixelToNumber(minValue.toString());
if (minValue.indexOf('%') > 0) {
paneMinRange = this.convertPercentageToPixel(minValue);
}
const min = this.convertPixelToNumber((paneMinRange).toString());
return min;
}
/**
* @param {string} value - specifies the string value
* @returns {string} returns the string
* @hidden
*/
sanitizeHelper(value) {
if (this.enableHtmlSanitizer) {
const item = SanitizeHtmlHelper.beforeSanitize();
const 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;
}
checkDataAttributes() {
let api;
let value;
// Element values
for (let 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 (let paneIndex = 0; paneIndex < this.element.children.length; paneIndex++) {
for (let 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
let 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;
}
}
}
}
}
destroyPaneSettings() {
[].slice.call(this.element.children).forEach((el) => {
detach(el);
});
this.restoreElem();
}
setPaneSettings() {
const childCount = this.allPanes.length;
const paneCollection = [];
const paneValue = {
size: '',
min: null,
max: null,
content: '',
resizable: true,
collapsed: false,
collapsible: false,
cssClass: ''
};
for (let i = 0; i < childCount; i++) {
if (isNullOrUndefined(this.paneSettings[i])) {
paneCollection[i] = paneValue;
}
else {
paneCollection[i] = this.paneSettings[i];
}
}
this.setProperties({ 'paneSettings': paneCollection }, true);
}
checkArrow(paneIndex, targetArrow) {
return (this.allBars[paneIndex].querySelector('.' + NAVIGATE_ARROW + '.' + targetArrow));
}
removeDataPrefix(attribute) {
return attribute.slice(attribute.lastIndexOf('-') + 1);
}
setRTL(rtl) {
if (rtl) {
addClass([this.element], RTL);
}
else {
removeClass([this.element], RTL);
}
}
setReversePane() {
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');
}
}
setSplitterSize(element, size, property) {
const style = property === 'width' ? { 'width': formatUnit(size) } : { 'height': formatUnit(size) };
setStyleAttribute(element, style);
}
getPanesDimensions() {
for (let 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);
}
}
}
setCssClass(element, className) {
if (className) {
addClass([element], className.split(className.indexOf(',') > -1 ? ',' : ' '));
}
}
hideResizer(target) {
addClass([select('.' + RESIZE_BAR, target)], HIDE_HANDLER);
}
showResizer(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);
}
}
resizableModel(index, newVal) {
const paneIndex = (index === (this.allBars.length)) ? (index - 1) : index;
const 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);
}
}
}
collapsibleModelUpdate(index) {
const paneIndex = index === (this.allBars.length) ? (index - 1) : index;
const arrow2 = (this.orientation === 'Horizontal')
? this.checkArrow(paneIndex, ARROW_LEFT) : this.checkArrow(paneIndex, ARROW_UP);
const 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);
}
collapseArrow(barIndex, arrow) {
return selectAll('.' + arrow, this.allBars[barIndex])[0];
}
updateIsCollapsed(index, collapseArrow, lastBarArrow) {
if (!isNullOrUndefined(index)) {
let targetEle;
const lastBarIndex = (index === this.allBars.length);
const 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();
}
}
isCollapsed(index) {
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;
let targetEle;
const lastBarIndex = (index === this.allBars.length);
const 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);
}
const event = { target: targetEle };
const eventArgs = this.beforeAction(event);
this.trigger('beforeCollapse', eventArgs, (beforeCollapseArgs) => {
if (!beforeCollapseArgs.cancel) {
let collapsedindex = [];
collapsedindex[0] = index;
let j = 1;
for (let 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 (let 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 (let i = collapsedindex.length; i > 0; i--) {
if (!this.allPanes[collapsedindex[i - 1]].classList.contains(COLLAPSE_PANE)) {
const targetArrow = this.targetArrows();
this.updateIsCollapsed(collapsedindex[i - 1], targetArrow.collapseArrow, targetArrow.lastBarArrow);
}
}
const collapseEventArgs = this.afterAction(event);
this.trigger('collapsed', collapseEventArgs);
this.collapseFlag = false;
}
});
}
else {
for (let 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 (let m = this.allPanes.length - 1; m >= 0; m--) {
if (!isNullOrUndefined(this.paneSettings[m]) && this.paneSettings[m].collapsed &&
!this.allPanes[m].classList.contains(COLLAPSE_PANE)) {
const collapseArrow = this.orientation === 'Horizontal' ? ARROW_RIGHT : ARROW_DOWN;
if (m !== 0) {
const targetEle = this.collapseArrow(m - 1, collapseArrow);
targetEle.click();
}
if (!this.nextPane.classList.contains(COLLAPSE_PANE)) {
const targetEle = this.collapseArrow(m - 1, collapseArrow);
targetEle.click();
}
}
}
}
this.expandFlag = true;
}
targetArrows() {
this.splitterProperty();
return {
collapseArrow: (this.orientation === 'Horizontal') ? ARROW_LEFT : ARROW_UP,
lastBarArrow: (this.orientation === 'Vertical') ? ARROW_DOWN : ARROW_RIGHT
};
}
collapsedOnchange(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);
}
}
isEnabled(enabled) {
if (enabled) {
removeClass([this.element], DISABLED);
}
else {
addClass([this.element], DISABLED);
}
}
setSeparatorSize(size) {
const sizeValue = isNullOrUndefined(size) ? 'auto' : size + 'px';
const separator = this.orientation === 'Horizontal' ? SPLIT_H_BAR : SPLIT_V_BAR;
for (let index = 0; index < this.allBars.length; index++) {
const splitBar = selectAll('.' + separator, this.element)[index];
const 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;
}
}
}
}
changeOrientation(orientation) {
const isVertical = orientation === 'Vertical';
this.element.classList.remove(isVertical ? HORIZONTAL_PANE : VERTICAL_PANE);
this.element.classList.add(isVertical ? VERTICAL_PANE : HORIZONTAL_PANE);
for (let 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 (let index = 0; index < this.allBars.length; index++) {
detach(this.allBars[index]);
}
this.allBars = [];
this.addSeparator(this.element);
}
checkSplitPane(currentBar, elementIndex) {
const paneEle = this.collectPanes(currentBar.parentElement.children)[elementIndex];
return paneEle;
}
collectPanes(childNodes) {
const elements = [];
for (let i = 0; i < childNodes.length; i++) {
if (childNodes[i].classList.contains(PANE)) {
elements.push(childNodes[i]);
}
}
return elements;
}
getPrevPane(order) {
return this.enableReversePanes ? this.getOrderPane(order + 1) : this.getOrderPane(order - 1);
}
getNextPane(order) {
return this.enableReversePanes ? this.getOrderPane(order - 1) : this.getOrderPane(order + 1);
}
getOrderPane(order) {
let pane;
for (let 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;
}
getOrderIndex(order, type) {
let index;
let panes;
if (type === 'pane') {
panes = this.allPanes;
}
else {
panes = this.allBars;
}
for (let i = 0; i < panes.length; i++) {
if (parseInt(panes[i].style.order, 10) === order) {
index = i;
}
}
return index;
}
updateSeparatorSize(resizeHanlder) {
const sizeValue = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
if (this.orientation === 'Horizontal') {
resizeHanlder.style.width = sizeValue;
}
else {
resizeHanlder.style.height = sizeValue;
}
}
addResizeHandler(currentBar) {
const resizeHanlder = this.createElement('div');
addClass([resizeHanlder], [RESIZE_BAR, E_ICONS]);
this.updateSeparatorSize(resizeHanlder);
currentBar.appendChild(resizeHanlder);
}
getHeight(target) {
let height = this.height;
height = target.style.height !== '' && this.height === '100%' ? target.style.height : this.height;
return height;
}
getWidth(target) {
let width = this.width;
width = target.style.width !== '' && this.width === '100%' ? target.style.width : this.width;
return width;
}
setDimension(height, width) {
setStyleAttribute(this.element, { 'height': height, 'width': width });
}
updateCollapseIcons(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]);
}
}
}
}
}
}
updateIconClass() {
if (this.orientation === 'Horizontal') {
this.leftArrow = ARROW_LEFT;
this.rightArrow = ARROW_RIGHT;
}
else {
this.leftArrow = ARROW_UP;
this.rightArrow = ARROW_DOWN;
}
}
createSeparator(i) {
const separator = this.createElement('div');
this.allBars.push(separator);
const arrow1 = this.createElement('button');
const 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');
const size = isNullOrUndefined(this.separatorSize) ? '1px' : this.separatorSize + 'px';
const proxy = 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', () => {
separator.classList.add(SPLIT_BAR_ACTIVE);
proxy.currentSeparator = separator;
proxy.getPaneDetails();
});
separator.addEventListener('blur', () => {
separator.classList.remove(SPLIT_BAR_ACTIVE);
});
return separator;
}
updateResizablePanes(index) {
this.getPaneDetails();
if (this.isResizable()) {
this.allPanes[index].classList.add(RESIZABLE_PANE);
}
else {
this.allPanes[index].classList.remove(RESIZABLE_PANE);
}
}
addSeparator(target) {
const childCount = this.allPanes.length;
const clonedEle = target.children;
let separator;
for (let 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);
const 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') {
const allBar = this.element.querySelectorAll('.e-splitter .e-resize-handler');
for (let i = 0; i < allBar.length; i++) {
const sepSize = isNullOrUndefined(this.separatorSize) ? 1 : this.separatorSize;
allBar[i].style.paddingLeft = sepSize / 2 + 'px';
allBar[i].style.paddingRight = sepSize / 2 + 'px';
}
}
}
isResizable() {
let 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;
}
addMouseActions(separator) {
let sTout;
let hoverTimeOut;
separator.addEventListener('mouseenter', () => {
/* istanbul ignore next */
sTout = setTimeout(() => {
addClass([separator], [SPLIT_BAR_HOVER]);
}, this.iconsDelay);
});
separator.addEventListener('mouseleave', () => {
clearTimeout(sTout);
removeClass([separator], [SPLIT_BAR_HOVER]);
});
separator.addEventListener('mouseout', () => {
clearTimeout(hoverTimeOut);
});
separator.addEventListener('mouseover', () => {
/* istanbul ignore next */
hoverTimeOut = setTimeout(() => {
addClass([separator], [SPLIT_BAR_HOVER]);
});
});
}
getEventType(e) {
return (e.indexOf('mouse') > -1) ? 'mouse' : 'touch';
}
updateCurrentSeparator(target) {
this.currentSeparator = this.isSeparator(target) ? target.parentElement : target;
}
isSeparator(target) {
return (target.classList.contains(SPLIT_BAR) ? false : true);
}
isMouseEvent(e) {
let isMouse = false;
if (this.getEventType(e.type) === 'mouse' || (!isNullOrUndefined(e.pointerType) &&
this.getEventType(e.pointerType) === 'mouse')) {
isMouse = true;
}
return isMouse;
}
updateCursorPosition(e, type) {
if (this.isMouseEvent(e)) {
this.changeCoordinates({ x: e.pageX, y: e.pageY }, type);
}
else {
const eventType = Browser.info.name !== 'msie' ? e.touches[0] : e;
this.changeCoordinates({ x: eventType.pageX, y: eventType.pageY }, type);
}
}
changeCoordinates(coordinates, type) {
if (type === 'previous') {
this.previousCoordinates = coordinates;
}
else {
this.currentCoordinates = coordinates;
}
}
reportWindowSize() {
const paneCount = this.allPanes.length;
if (!document.body.contains(this.element)) {
document.defaultView.removeEventListener('resize', this.onReportWindowSize);
return;
}
for (let i = 0; i < paneCount; i++) {
if (isNullOrUndefined(this.paneSettings[i].size)) {
this.allPanes[i].classList.remove(STATIC_PANE);
}
if (paneCount - 1 === i) {
const 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(() => {
this.updateSplitterSize(true);
}, 200);
}
}
updateSplitterSize(iswindowResize) {
let totalWidth = 0;
const flexPaneIndexes = [];
let flexCount = 0;
const children = this.element.children;
for (let i = 0, len = children.length; i < len; i++) {
totalWidth += this.orientation === 'Horizontal' ? children[i].offsetWidth :
children[i].offsetHeight;
}
for (let j = 0, len = this.allBars.length; j < len; j++) {
totalWidth += this.orientation === 'Horizontal' ? parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) +
parseInt(getComputedStyle(this.allBars[j]).marginLeft, 10) :
parseInt(getComputedStyle(this.allBars[j]).marginTop, 10) +
parseInt(getComputedStyle(this.allBars[j]).marginBottom, 10);
}
const diff = this.orientation === 'Horizontal' ? this.element.offsetWidth -
((this.border * 2) + totalWidth) :
this.element.offsetHeight - ((this.border * 2) + totalWidth);
for (let i = 0, len = this.allPanes.length; i < len; i++) {
if (this.allPanes[i].innerText === '' ? !(this.paneSettings[i].size) || !(this.allPanes[i].innerText === '')
: !(this.paneSettings[i].size) && !(this.allPanes[i].innerText === '')) {
flexPaneIndexes[flexCount] = i;
flexCount++;
}
}
const avgDiffWidth = diff / flexPaneIndexes.length;
for (let j = 0, len = flexPaneIndexes.length; j < len; j++) {
if (this.allPanes[flexPaneIndexes[j]].style.flexBasis !== '') {
this.allPanes[flexPaneIndexes[j]].style.flexBasis = this.orientation === 'Horizontal' ?
(this.allPanes[flexPaneIndexes[j]].offsetWidth + avgDiffWidth) + 'px' :
(this.allPanes[flexPaneIndexes[j]].offsetHeight + avgDiffWidth) + 'px';
}
}
if (this.allPanes.length === 2 && iswindowResize) {
const paneCount = this.allPanes.length;
let minValue;
let paneMinRange;
const paneIndex = 0;
let updatePane;
let flexPane;
for (let i = 0; i < paneCount; i++) {
if (!isNullOrUndefined(this.paneSettings[i].min)) {
paneMinRange = this.convertPixelToNumber((this.paneSettings[i].min).toString());
if (this.paneSettings[i].min.indexOf('%') > 0) {
paneMinRange = this.convertPercentageToPixel(this.paneSettings[i].min);
}
minValue = this.convertPixelToNumber((paneMinRange).toString());
if ((this.orientation === 'Horizontal' ? this.allPanes[i].offsetWidth : this.allPanes[i].offsetHeight) < minValue) {
if (i === paneIndex) {
updatePane = this.allPanes[i];
flexPane