@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,464 lines • 261 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: data-table-head.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import * as tslib_1 from "tslib";
import { ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, IterableDiffers, KeyValueDiffers, NgZone, Output } from '@angular/core';
import { BehaviorSubject, fromEvent } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';
import { DataTableComponent } from './data-table.component';
import { DataTableColumnTmplComponent } from './tmpl/data-table-column-tmpl.component';
import { DataTableHeadTmplComponent } from './tmpl/data-table-head-tmpl.component';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
/** @type {?} */
var documentElement = document.documentElement;
var DataTableHeadComponent = /** @class */ (function () {
function DataTableHeadComponent(dt, zone, element, differs, iterableDiffers, ref, i18n) {
var _this = this;
this.dt = dt;
this.zone = zone;
this.element = element;
this.differs = differs;
this.iterableDiffers = iterableDiffers;
this.ref = ref;
this.i18n = i18n;
this.multiSort = [];
this.dataSource = [];
this.headClickSortEvent = new EventEmitter();
this.resizeHandlerEvent = new EventEmitter();
this.beginResizeHandlerEvent = new EventEmitter();
this.resizingHandlerEvent = new EventEmitter();
this.dragTableEndEvent = new EventEmitter();
this.searchQuery = {};
this.multiSortArray = [];
this.rowItem = undefined;
this.classes = {
originTable: 'sindu_origin_table',
draggableTable: 'sindu_dragger',
dragging: 'sindu_dragging',
static: 'sindu_static',
handle: 'sindu_handle',
};
this.oldCoord = 0;
this.childTables = [];
this.dataSourceChange = false;
this.tableScrollbarWidth = 0;
this.colOffset = 0;
this.seconedHeaderOffset = 0;
this.cellMapOffset = 0;
this.cellMap = {};
this.searchText = '';
this.filterListDisplay = [];
this.isFilterHidden = false;
this.checkedListForFilter = [];
this.handleMousemove = (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
documentElement.removeEventListener('mousemove', _this.handleMousemove);
documentElement.addEventListener('mousedown', _this.grab);
documentElement.addEventListener('mouseup', _this.release);
setTimeout((/**
* @return {?}
*/
function () {
_this.dispatchMousedown();
}));
});
this.grab = (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
documentElement.removeEventListener('mousedown', _this.grab);
_this.addClass(documentElement, 'gu-unselectable');
/** @type {?} */
var context = _this.canStart(e.target);
_this.grabbed = context;
documentElement.addEventListener('mousemove', _this.startBecauseMouseMoved);
});
this.startBecauseMouseMoved = (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
if (!_this.grabbed) {
return;
}
documentElement.removeEventListener('mousemove', _this.startBecauseMouseMoved);
documentElement.addEventListener('mousemove', _this.drag);
_this.source = _this.grabbed.source;
_this.item = _this.grabbed.item;
_this.initialSibling = _this.currentSibling = _this.nextEl(_this.grabbed.item);
_this.addClass(_this.item, 'gu-transit');
_this.el.style.display = 'flex';
_this.el.style.position = 'relative';
_this.originTable.style.display = 'none';
if (_this.fixHeader) {
_this.fixTableOffsetTop = _this.fixOriginTable.parentNode.parentNode.scrollTop;
_this.fixFakeTableEl.style.display = 'flex';
_this.fixOriginTable.style.display = 'none';
_this.fixFakeTableEl.style.position = 'relative';
}
_this.offsetX = 15;
_this.offsetY = 15;
_this.renderMirrorImage(_this.item);
});
this.release = (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
_this.grabbed = null;
documentElement.removeEventListener('mousemove', _this.drag);
documentElement.removeEventListener('mouseup', _this.release);
/** @type {?} */
var to = Array.from(_this.el.children).indexOf(_this.item);
_this.removeMirrorImage();
_this.el.style.display = 'none';
_this.originTable.style.display = 'table';
if (_this.fixHeader) {
_this.fixFakeTableEl.style.display = 'none';
_this.fixOriginTable.style.display = 'table';
_this.fixFakeTableEl.style.position = 'absolute';
}
documentElement.style.overflow = _this.bodyOverflow;
documentElement.removeEventListener('mouseup', _this.release);
if (_this.item) {
_this.rmClass(_this.item, 'gu-transit');
}
_this.sortColumn(_this.originCellIndex.x, to);
cancelAnimationFrame(_this.animationRequestId);
});
this.sortColumn = (/**
* @param {?} from
* @param {?} to
* @return {?}
*/
function (from, to) {
if (from === to) {
return;
}
/** @type {?} */
var offset = 0;
if (_this.checkable) {
offset++;
}
if (_this.showExpandToggle) {
offset++;
}
from = from - offset;
to = to - offset;
/** @type {?} */
var toCell = _this.cellMap[to].sortKey[0];
/** @type {?} */
var fromCell = _this.cellMap[from].sortKey[0];
/** @type {?} */
var loopCount = 1;
if (_this.cellMap[from].isAdvanceHeader) {
loopCount = _this.cellMap[from].headerLength;
if (from > to) {
fromCell = _this.cellMap[from].sortKey[_this.cellMap[from].headerLength - 1];
}
}
if (_this.cellMap[to].isAdvanceHeader && from < to) {
toCell = _this.cellMap[to].sortKey[_this.cellMap[to].headerLength - 1];
}
for (var i = 0; i < loopCount; i++) {
_this.dragTableEndEvent.emit({ from: fromCell, to: toCell });
}
});
this.sort = (/**
* @param {?} __0
* @return {?}
*/
function (_a) {
var list = _a.list, from = _a.from, to = _a.to;
if (!list[from] && !list[to]) {
return;
}
if (from < to) {
_this.appendSibling({ target: list[from], origin: list[to] });
}
else {
_this.insertBeforeSibling({ target: list[from], origin: list[to] });
}
});
this.rerenderTables = (/**
* @return {?}
*/
function () {
_this.dataSourceChange = true;
if (_this.fixHeader && _this.tableBodyEl) {
_this.fixOriginTable = _this.tableBodyEl.nativeElement;
setTimeout((/**
* @return {?}
*/
function () {
_this.renderFixFakeTableEl();
_this.fixFakeTableEl.style.display = 'none';
}));
}
else {
_this.detecteOriginTable();
setTimeout((/**
* @return {?}
*/
function () {
_this.renderFakeTable();
_this.el.style.display = 'none';
}));
}
});
this.drag = (/**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
if (!_this.mirror) {
return;
}
/** @type {?} */
var clientX = _this.getCoord('clientX', e);
/** @type {?} */
var clientY = _this.getCoord('clientY', e);
if (_this.animationRequestId) {
cancelAnimationFrame(_this.animationRequestId);
_this.animationRequestId = null;
}
_this.handleScroll(clientX, clientY, e);
documentElement.style.overflow = 'hidden';
/** @type {?} */
var x = clientX - _this.offsetX;
/** @type {?} */
var y = clientY - _this.offsetY;
_this.mirror.style.left = x + 'px';
_this.mirror.style.top = y + 'px';
_this.mirror.style.visibility = 'visible';
/** @type {?} */
var elementBehindCursor = _this.getElementBehindPoint(_this.mirror, clientX, clientY);
/** @type {?} */
var dropTarget = _this.findDropTarget(elementBehindCursor, clientX, clientY);
if (!dropTarget) {
return;
}
/** @type {?} */
var immediate = _this.getImmediateChild(dropTarget, elementBehindCursor);
/** @type {?} */
var reference;
if (immediate) {
reference = _this.getReference(dropTarget, immediate, clientX);
}
/** @type {?} */
var changed = dropTarget !== null && dropTarget !== _this.lastDropTarget;
if (changed || dropTarget === null) {
_this.lastDropTarget = dropTarget;
}
if ((reference === null && changed) ||
reference !== _this.item &&
reference !== _this.nextEl(_this.item)) {
/** @type {?} */
var mover = void 0;
/** @type {?} */
var nowCord = e.pageX;
if (nowCord < _this.oldCoord) {
mover = reference; // upward or right
}
else {
mover = reference ? (reference.previousElementSibling ? reference.previousElementSibling : reference) : dropTarget.lastElementChild;
}
_this.oldCoord = nowCord;
/** @type {?} */
var from = void 0;
/** @type {?} */
var to = void 0;
/** @type {?} */
var moverIndex = void 0;
/** @type {?} */
var fixItemRect = void 0;
/** @type {?} */
var fixItem = void 0;
/** @type {?} */
var fixMoverRect = void 0;
/** @type {?} */
var fixMover = void 0;
if (_this.fixHeader) {
from = Array.from(_this.el.children).indexOf(_this.item);
to = Array.from(_this.el.children).indexOf(reference);
moverIndex = Array.from(_this.el.children).indexOf(mover);
fixItem = Array.from(_this.fixFakeTableEl.children)[from];
fixItemRect = fixItem.getBoundingClientRect();
fixMover = Array.from(_this.fixFakeTableEl.children)[moverIndex];
fixMoverRect = moverIndex !== -1 && fixMover.getBoundingClientRect();
}
/** @type {?} */
var moverRect = mover && mover.getBoundingClientRect();
/** @type {?} */
var itemRact = _this.item.getBoundingClientRect();
_this.moveTarget(dropTarget, _this.item, reference);
if (_this.fixHeader) {
_this.moveTarget(_this.fixFakeTableEl, Array.from(_this.fixFakeTableEl.children)[from], Array.from(_this.fixFakeTableEl.children)[to]);
}
if (mover && moverRect) {
_this.animate(moverRect, mover, 300);
_this.animate(itemRact, _this.item, 300);
}
if (_this.fixHeader && moverIndex !== -1 && fixMoverRect) {
_this.animate(fixMoverRect, fixMover, 300);
_this.animate(fixItemRect, fixItem, 300);
}
}
});
this.getLongestRow = (/**
* @param {?} table
* @return {?}
*/
function (table) {
/** @type {?} */
var result = table.rows[0];
Array.from(table.rows).forEach((/**
* @param {?} row
* @return {?}
*/
function (row) {
/** @type {?} */
var rowL = ((/** @type {?} */ (row))).children.length;
/** @type {?} */
var resultL = result.children.length;
result = rowL > resultL ? row : result;
}));
return result;
});
this.getChildTableColumn = (/**
* @param {?} table
* @param {?} index
* @return {?}
*/
function (table, index) {
/** @type {?} */
var cTable = table.cloneNode(true);
_this.origin2DragItem(cTable);
/** @type {?} */
var empty = (/**
* @param {?} node
* @return {?}
*/
function (node) {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
});
Array.from(cTable.rows).forEach((/**
* @param {?} row
* @return {?}
*/
function (row) {
if (((/** @type {?} */ (row))).classList.contains('child-table')) {
/** @type {?} */
var target = _this.getChildTableColumn(((/** @type {?} */ (row))).children[0].children[0], index);
empty(((/** @type {?} */ (row))).children[0]);
((/** @type {?} */ (row))).children[0].appendChild(target);
}
else {
/** @type {?} */
var target = ((/** @type {?} */ (row))).children[index];
empty(row);
if (target) {
((/** @type {?} */ (row))).appendChild(target);
}
}
}));
_this.sizeChildColumnFake(cTable, table, index);
return cTable;
});
this.detecteChildTables = (/**
* @param {?} table
* @return {?}
*/
function (table) {
Array.from(table.rows).forEach((/**
* @param {?} row
* @param {?} index
* @return {?}
*/
function (row, index) {
if (((/** @type {?} */ (row))).classList.contains('child-table')) {
/** @type {?} */
var childTable = ((/** @type {?} */ (table.rows[index]))).children[0].children[0];
_this.childTables.push(childTable);
_this.detecteChildTables(childTable);
}
}));
});
this.getReference = (/**
* @param {?} dropTarget
* @param {?} target
* @param {?} x
* @return {?}
*/
function (dropTarget, target, x) {
/** @type {?} */
var resolve = (/**
* @param {?} after
* @return {?}
*/
function (after) {
return after ? _this.nextEl(target) : target;
});
/** @type {?} */
var inside = (/**
* @return {?}
*/
function () {
// faster, but only available if dropped inside a child element
/** @type {?} */
var rect = target.getBoundingClientRect();
return resolve(x > rect.left + _this.getRectWidth(rect) / 2);
});
/** @type {?} */
var outside = (/**
* @return {?}
*/
function () {
// slower, but able to figure out any position
/** @type {?} */
var len = dropTarget.children.length;
/** @type {?} */
var i;
/** @type {?} */
var el;
/** @type {?} */
var rect;
for (i = 0; i < len; i++) {
el = dropTarget.children[i];
rect = el.getBoundingClientRect();
if ((rect.left + rect.width / 2) > x) {
return el;
}
}
return null;
});
/** @type {?} */
var reference = target !== dropTarget ? inside() : outside();
return reference;
});
this.getImmediateChild = (/**
* @param {?} dropTarget
* @param {?} target
* @return {?}
*/
function (dropTarget, target) {
/** @type {?} */
var immediate = target;
/** @type {?} */
var isElementDropFreeze = (/**
* @param {?} element
* @return {?}
*/
function (element) {
/** @type {?} */
var index = Array.from(element.parentNode.children).indexOf(element);
return index < _this.colDropFreezeTo;
});
while (immediate !== dropTarget && _this.getParent(immediate) !== dropTarget) {
immediate = _this.getParent(immediate);
}
if (immediate === documentElement || isElementDropFreeze(immediate)) {
return null;
}
return immediate;
});
this.i18nCommonText = this.i18n.getI18nText().common;
}
/**
* @return {?}
*/
DataTableHeadComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.colDraggable) {
this.iterableDiffer = this.iterableDiffers.find([]).create(null);
this.objDiffer = {};
this.dataSource.forEach((/**
* @param {?} data
* @param {?} index
* @return {?}
*/
function (data, index) {
_this.objDiffer[index] = _this.differs.find(data).create();
}));
}
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
function (data) {
_this.i18nCommonText = data.common;
}));
};
/**
* @param {?} changes
* @return {?}
*/
DataTableHeadComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
if (changes && changes.columns || changes.multiSort) {
this.multiSortArray = [];
this.columns.forEach((/**
* @param {?} column
* @return {?}
*/
function (column) {
if (column.sortable) {
/** @type {?} */
var sortIndex = _this.multiSort.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return item['field'] === column.field; }));
_this.multiSortArray.push({
field: column.field,
direction: sortIndex !== -1 ? _this.multiSort[sortIndex].direction : ''
});
}
}));
}
if (changes['columns']) {
this.rowCount = Math.max.apply(Math, tslib_1.__spread(this.columns.map((/**
* @param {?} column
* @return {?}
*/
function (column) {
if (column.advancedHeader) {
return column.advancedHeader.length;
}
else {
return 0;
}
}))));
if (this.rowCount > 0) {
this.rowCountArray = new Array(this.rowCount);
this.initAdvanceHeader();
}
if (this.colDraggable) {
this.rerenderTables();
}
}
if (changes && changes.dataSource) {
if (this.colDraggable) {
this.rerenderTables();
}
}
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.ngDoCheck = /**
* @return {?}
*/
function () {
var _this = this;
if (!this.colDraggable) {
return;
}
this.dataSource.forEach((/**
* @param {?} elt
* @param {?} index
* @return {?}
*/
function (elt, index) {
/** @type {?} */
var objDiffer = _this.objDiffer[index];
if (!objDiffer) {
return;
}
/** @type {?} */
var objChanges = objDiffer.diff(elt);
if (objChanges) {
objChanges.forEachChangedItem((/**
* @param {?} changeItem
* @return {?}
*/
function (changeItem) {
if (changeItem.key === '$isChildTableOpen' && elt.children && elt.children.length) {
_this.rerenderTables();
}
if (changeItem.key === 'children') {
_this.rerenderTables();
}
}));
}
}));
/** @type {?} */
var changes = this.iterableDiffer.diff(this.columns);
if (changes) {
this.createCellMap();
}
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.colDraggable) {
// set mirror container to table-wrap element
this.mirrorContainer = this.element.nativeElement.parentNode.parentNode;
this.bodyOverflow = documentElement.style.overflow;
this.detecteOriginTable();
setTimeout((/**
* @return {?}
*/
function () {
_this.renderFakeTable();
_this.el.style.display = 'none';
if (_this.fixHeader && _this.tableBodyEl) {
_this.fixOriginTable = _this.tableBodyEl.nativeElement;
_this.tableScrollbarWidth = _this.getScrollbarWidth();
_this.renderFixFakeTableEl();
_this.fixFakeTableEl.style.display = 'none';
}
}));
documentElement.addEventListener('resize', this.renderFakeTable);
this.createCellMap();
this.scrollViewEl = this.originTable.parentNode.parentNode;
this.scrollViewRect = this.scrollViewEl.getBoundingClientRect();
if (this.fixHeader && this.tableBodyEl) {
this.fixTableScrollViewEl = this.fixOriginTable.parentNode.parentNode;
}
}
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.createCellMap = /**
* @return {?}
*/
function () {
var _this = this;
/** @type {?} */
var cellIndex = 0;
this.columns.forEach((/**
* @param {?} column
* @param {?} index
* @return {?}
*/
function (column, index) {
if (!column.advancedHeader) {
_this.cellMap[cellIndex] = { name: column.field, sortKey: [index] };
cellIndex++;
}
else {
if (column.advancedHeader[0].colspan) {
_this.cellMap[cellIndex] = { name: column.field, isAdvanceHeader: true,
sortKey: [index], headerLength: column.advancedHeader[0].colspan };
cellIndex++;
}
else {
Object.keys(_this.cellMap).forEach((/**
* @param {?} key
* @return {?}
*/
function (key) {
/** @type {?} */
var item = _this.cellMap[key];
if (item.isAdvanceHeader && item.sortKey.length < item.headerLength) {
item.sortKey.push(index);
}
}));
}
}
}));
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.colDraggable) {
documentElement.removeEventListener('resize', this.renderFakeTable);
}
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.resetSources = /**
* @return {?}
*/
function () {
this.checkedListForFilter = [];
if (this.sourceSubscription) {
this.sourceSubscription.unsubscribe();
}
if (this.filterSubscription) {
this.filterSubscription.unsubscribe();
}
};
/**
* @param {?} column
* @return {?}
*/
DataTableHeadComponent.prototype.onHeadClick = /**
* @param {?} column
* @return {?}
*/
function (column) {
if (!column.sortable) {
return;
}
/** @type {?} */
var sortIndex = this.multiSortArray.findIndex((/**
* @param {?} item
* @return {?}
*/
function (item) { return item['field'] === column.field; }));
if (sortIndex === -1) {
return;
}
switch (this.multiSortArray[sortIndex].direction) {
case 'ASC':
this.multiSortArray[sortIndex].direction = 'DESC';
break;
case 'DESC':
this.multiSortArray[sortIndex].direction = '';
break;
case '':
default:
this.multiSortArray[sortIndex].direction = 'ASC';
}
this.headClickSortEvent.emit({ field: column.field, direction: this.multiSortArray[sortIndex].direction });
};
/**
* @param {?} columns
* @return {?}
*/
DataTableHeadComponent.prototype.hasAnyFilterColumns = /**
* @param {?} columns
* @return {?}
*/
function (columns) {
return (columns || []).some((/**
* @param {?} col
* @return {?}
*/
function (col) { return col && col.filterable; }));
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.onCheckAllChange = /**
* @return {?}
*/
function () {
this.dt.onCheckAllChange(this.pageAllChecked);
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.onSearchQueryChange = /**
* @return {?}
*/
function () {
this.dt.onSearchQueryChange(this.searchQuery);
};
/**
* @param {?} column
* @return {?}
*/
DataTableHeadComponent.prototype.canFilterable = /**
* @param {?} column
* @return {?}
*/
function (column) {
return column.field && column.field !== '$index' && column.filterable;
};
/**
* @param {?} field
* @return {?}
*/
DataTableHeadComponent.prototype.getIfExistMultiSort = /**
* @param {?} field
* @return {?}
*/
function (field) {
/** @type {?} */
var column = this.columns.find((/**
* @param {?} item
* @return {?}
*/
function (item) { return item['field'] === field; }));
return !!column.sortable;
};
/**
* @param {?} field
* @return {?}
*/
DataTableHeadComponent.prototype.getSortDirection = /**
* @param {?} field
* @return {?}
*/
function (field) {
if (!this.multiSortArray) {
return false;
}
/** @type {?} */
var filterField = this.multiSortArray.filter((/**
* @param {?} item
* @return {?}
*/
function (item) {
return item['field'] === field;
}));
if (filterField.length !== 0) {
return filterField[0]['direction'];
}
else {
return undefined;
}
};
/**
* @param {?} $event
* @param {?} column
* @param {?} isUserDefined
* @return {?}
*/
DataTableHeadComponent.prototype.onResize = /**
* @param {?} $event
* @param {?} column
* @param {?} isUserDefined
* @return {?}
*/
function ($event, column, isUserDefined) {
// tslint:disable-next-line:no-unused-expression
column['advancedHeader'] == null && this.resizeHandlerEvent.emit(tslib_1.__assign({}, $event, { field: column.field, isUserDefined: isUserDefined }));
};
/**
* @param {?} $event
* @return {?}
*/
DataTableHeadComponent.prototype.beginResize = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.beginResizeHandlerEvent.emit($event);
};
/**
* @param {?} $event
* @param {?} column
* @return {?}
*/
DataTableHeadComponent.prototype.onResizing = /**
* @param {?} $event
* @param {?} column
* @return {?}
*/
function ($event, column) {
// tslint:disable-next-line:no-unused-expression
column['advancedHeader'] == null && this.resizingHandlerEvent.emit(tslib_1.__assign({}, $event, { column: column }));
};
/**
* @private
* @param {?} lastChildIndex
* @param {?} parentWidth
* @param {?} newParentWidth
* @return {?}
*/
DataTableHeadComponent.prototype.setParentNextWidth = /**
* @private
* @param {?} lastChildIndex
* @param {?} parentWidth
* @param {?} newParentWidth
* @return {?}
*/
function (lastChildIndex, parentWidth, newParentWidth) {
if (!lastChildIndex) {
return;
}
/** @type {?} */
var lastChilds = this.columns.filter((/**
* @param {?} column
* @return {?}
*/
function (column) { return column['$colIndex'] === lastChildIndex; })).map((/**
* @param {?} item
* @return {?}
*/
function (item) { return item.field; }));
for (var index = 0; index < this.columns.length - 1; index++) {
if (this.columns[index].field === lastChilds[0] && index + 1 < this.columns.length && this.columns[index + 1].width) {
/** @type {?} */
var totalWidth = parentWidth + parseInt(this.columns[index + 1].width, 10);
this.columns[index + 1].width = totalWidth - newParentWidth + 'px';
return;
}
}
};
/**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
DataTableHeadComponent.prototype.resizingParent = /**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
function ($event, changeColumn) {
var _this = this;
var width = $event.width;
if (this.rowCount > 0) {
this.columns.filter((/**
* @param {?} column
* @return {?}
*/
function (column) { return column['advancedHeader'] !== undefined; }))
.map((/**
* @param {?} column
* @return {?}
*/
function (column) { return column['advancedHeader']; }))
.reduce((/**
* @param {?} target
* @param {?} newItemArr
* @return {?}
*/
function (target, newItemArr) { return target.concat(newItemArr); }))
.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item['$cols'].indexOf(changeColumn['$colIndex']) > -1; }))
.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
_this.zone.run((/**
* @return {?}
*/
function () {
if (!item.$rowIndex) {
/** @type {?} */
var length_1 = item['$cols'].length;
/** @type {?} */
var currentIsLastChild = changeColumn['$colIndex'] === item['$cols'][length_1 - 1];
// tslint:disable-next-line:no-unused-expression
!currentIsLastChild && _this.setParentNextWidth(item['$cols'][length_1 - 1], parseInt(item['$width'], 10), length_1 * width);
item['$width'] = length_1 * width + 'px';
}
}));
}));
}
};
// 初始化多行表头，为了兼容resizeable对表头互相影响数据做了记录
// 初始化多行表头，为了兼容resizeable对表头互相影响数据做了记录
/**
* @return {?}
*/
DataTableHeadComponent.prototype.initAdvanceHeader =
// 初始化多行表头，为了兼容resizeable对表头互相影响数据做了记录
/**
* @return {?}
*/
function () {
if (this.resizeable) {
this.columns.forEach((/**
* @param {?} column
* @param {?} colIndex
* @return {?}
*/
function (column, colIndex) {
if (column['advancedHeader']) {
column['advancedHeader'].forEach((/**
* @param {?} item
* @param {?} rowIndex
* @return {?}
*/
function (item, rowIndex) {
item['$rowIndex'] = rowIndex;
item['$colIndex'] = colIndex;
item['$cols'] = new Array(item.colspan).fill(1).map((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
function (v, i) { return colIndex + i; }));
}));
}
column['$colIndex'] = colIndex;
}));
}
};
/**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
DataTableHeadComponent.prototype.resizeParent = /**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
function ($event, changeColumn) {
var width = $event.width;
if (this.rowCount > 0) {
this.columns.filter((/**
* @param {?} column
* @return {?}
*/
function (column) { return column['advancedHeader'] !== undefined; }))
.map((/**
* @param {?} column
* @return {?}
*/
function (column) { return column['advancedHeader']; }))
.reduce((/**
* @param {?} target
* @param {?} newItemArr
* @return {?}
*/
function (target, newItemArr) { return target.concat(newItemArr); }))
.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item['$cols'].indexOf(changeColumn['$colIndex']) > -1; }))
.forEach((/**
* @param {?} item
* @return {?}
*/
function (item) {
if (item['header'] === changeColumn['header']) { // 是当前列则直接赋值
item['$width'] = width;
}
else {
// 判断是父列，则修改父列宽
if (!item.$rowIndex) {
item['$width'] = item['$cols'].length * parseInt(width, 10) + 'px';
}
}
}));
}
};
/**
* @param {?} index
* @param {?} item
* @return {?}
*/
DataTableHeadComponent.prototype.trackByFn = /**
* @param {?} index
* @param {?} item
* @return {?}
*/
function (index, item) {
return index;
};
/**
* @param {?} e
* @return {?}
*/
DataTableHeadComponent.prototype.onTap = /**
* @param {?} e
* @return {?}
*/
function (e) {
var _this = this;
e.preventDefault();
this.originCellIndex = this.findCellIndex(e);
setTimeout((/**
* @return {?}
*/
function () {
documentElement.addEventListener('mousemove', _this.handleMousemove);
documentElement.addEventListener('mouseup', (/**
* @return {?}
*/
function () {
documentElement.removeEventListener('mousemove', _this.handleMousemove);
}));
}));
};
/**
* @param {?} __0
* @return {?}
*/
DataTableHeadComponent.prototype.appendSibling = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var target = _a.target, origin = _a.origin;
if (!target) {
return;
}
target.parentNode.insertBefore(target, origin ? origin.nextElementSibling : null);
};
/**
* @param {?} el
* @return {?}
*/
DataTableHeadComponent.prototype.getOffset = /**
* @param {?} el
* @return {?}
*/
function (el) {
/** @type {?} */
var rect = el.getBoundingClientRect();
return {
left: rect.left + this.getScroll('scrollLeft', 'pageXOffset'),
top: rect.top + this.getScroll('scrollTop', 'pageYOffset')
};
};
/**
* @param {?} scrollProp
* @param {?} offsetProp
* @return {?}
*/
DataTableHeadComponent.prototype.getScroll = /**
* @param {?} scrollProp
* @param {?} offsetProp
* @return {?}
*/
function (scrollProp, offsetProp) {
if (typeof window[offsetProp] !== 'undefined') {
return window[offsetProp];
}
if (documentElement.clientHeight) {
return documentElement[scrollProp];
}
return document.body[scrollProp];
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.dispatchMousedown = /**
* @return {?}
*/
function () {
var _a = this, el = _a.el, originCellIndex = _a.originCellIndex;
el.children[originCellIndex.x].dispatchEvent(this.getTouchyEvent());
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.getTouchyEvent = /**
* @return {?}
*/
function () {
/** @type {?} */
var event;
// This is true only for IE,firefox
if (document.createEvent) {
// To create a mouse event , first we need to create an event and then initialize it.
event = document.createEvent('MouseEvent');
event.initMouseEvent('mousedown', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
else {
event = new MouseEvent('mousedown', {
'view': window,
'bubbles': true,
'cancelable': true
});
}
return event;
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.removeMirrorImage = /**
* @return {?}
*/
function () {
var _this = this;
if (this.mirror) {
documentElement.removeEventListener('mousemove', this.grab);
this.getParent(this.mirror).removeChild(this.mirror);
this.mirror = null;
setTimeout((/**
* @return {?}
*/
function () {
_this.rmClass(_this.mirrorContainer, 'gu-unselectable');
_this.rmClass(documentElement, 'gu-unselectable');
}));
}
};
/**
* @param {?} item
* @return {?}
*/
DataTableHeadComponent.prototype.canStart = /**
* @param {?} item
* @return {?}
*/
function (item) {
while (this.getParent(item) && this.isContainer(this.getParent(item)) === false) {
item = this.getParent(item); // drag target should be a top element
if (!item) {
return;
}
}
/** @type {?} */
var source = this.getParent(item);
if (!source) {
return;
}
return {
item: item,
source: source
};
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.detecteOriginTable = /**
* @return {?}
*/
function () {
/** @type {?} */
var target = this.element.nativeElement;
while (target.nodeName !== 'TABLE') {
target = target.parentElement;
}
this.originTable = target;
if (this.fixHeader && this.tableBodyEl) {
this.fixOriginTable = this.tableBodyEl.nativeElement;
this.detecteChildTables(this.fixOriginTable);
}
else {
this.detecteChildTables(this.originTable);
}
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.renderFakeTable = /**
* @return {?}
*/
function () {
if (this.el && !this.dataSourceChange) {
return;
}
this.childTables = [];
this.detecteChildTables(this.originTable);
/** @type {?} */
var fakeTable = this.buildFakeTable(this.originTable);
this.fakeTable = fakeTable;
/** @type {?} */
var el = fakeTable.reduce((/**
* @param {?} previous
* @param {?} current
* @return {?}
*/
function (previous, current) {
/** @type {?} */
var li = document.createElement('li');
if (current) {
li.appendChild(current);
}
return previous.appendChild(li) && previous;
}), document.createElement('ul'));
this.el = el;
this.renderEl(el, this.originTable, fakeTable);
};
/**
* @return {?}
*/
DataTableHeadComponent.prototype.renderFixFakeTableEl = /**
* @return {?}
*/
function () {
if (this.fixFakeTableEl && !this.dataSourceChange) {
return;
}
/** @type {?} */
var fakeTable = this.buildFakeTable(this.fixOriginTable);
this.mainFakeTable = fakeTable;
/** @type {?} */
var el = fakeTable.reduce((/**
* @param {?} previous
* @param {?} current
* @return {?}
*/
function (previous, current) {
/** @type {?} */
var li = document.createElement('li');
li.appendChild(current);
return previous.appendChild(li) && previous;
}), document.createElement('ul'));
this.fixFakeTableEl = el;
this.renderEl(el, this.fixOriginTable, this.mainFakeTable);
};
/**
* @param {?} table
* @return {?}
*/
DataTableHeadComponent.prototype.buildFakeTable = /**
* @param {?} table
* @return {?}
*/
function (table) {
var _this = this;
this.colOffset = 0;
this.seconedHeaderOffset = 0;
return Array.from(table.rows[0].children).map((/**
* @param {?} cell
* @param {?} index
* @return {?}
*/
function (cell, index) {
return _this.getColumnAsTableByIndex(table, index, ((/** @type {?} */ (cell))).colSpan, ((/** @type {?} */ (cell))).rowSpan);
}));
};
/**
* @param {?} el
* @param {?} originEl
* @param {?} fakeTables
* @return {?}
*/
DataTableHeadComponent.prototype.renderEl = /**
* @param {?} el
* @param {?} originEl
* @param {?} fakeTables
* @return {?}
*/
function (el, originEl, fakeTables) {
this.sizeColumnFake(fakeTables, originEl);
this.css(el, {
position: 'absolute',
});
if (originEl.parentNode.children[0].nodeName === 'UL') {
originEl.parentNode.removeChild(originEl.parentNode.children[0]);
this.insertBeforeSibling({ target: el, origin: originEl });
}
else {
this.insertBeforeSibling({ target: el, origin: originEl });
}
// render every wrapper of table(element li)
/** @type {?} */
var spacing = window.getComputedStyle(originEl).getPropertyValue('border-spacing').split(' ')[0];
/** @type {?} */
var attr = 'margin-right';
/** @type {?} */
var length = el.children.length;
Array.from(el.children).forEach((/**
* @param {?} li
* @param {?} dex
* @return {?}
*/
function (li, dex) {
if (spacing && dex < (length - 1)) {
((/** @type {?} */ (li))).style[attr] = "-" + spacing;
}
}));
this.addClass(el.parentElement, this.classes.dragging);
this.addClass(el, this.classes.draggableTable);
this.addClass(el, 'sindu_column');
};
/**
* @param {?} fakeTables
* @param {?} originEl
* @return {?}
*/
DataTableHeadComponent.prototype.sizeColumnFake = /**
* @param {?} fakeTables
* @param {?} originEl
* @return {?}
*/
function (fakeTables, originEl) {
var _this = this;
// calculate width of every column
Array.from(originEl.rows[0].children).forEach((/**
* @param {?} cell
* @param {?} index
* @return {?}
*/
function (cell, index) {
if (!fakeTables[index]) {
return;
}
/** @type {?} */
var w = ((/** @type {?} */ (cell))).getBoundingClientRect().width;
/** @type {?} */
var t = fakeTables[index];
_this.css(t, { width: w + "px" });
_this.css(t.rows[0].children[0], { width: w + "px" });
}));
};
/**
* @param {?} el
* @param {?} csses
* @return {?}
*/
DataTableHeadComponent.prototype.css = /**
* @param {?} el
* @param {?} csses
* @return {?}
*/
function (el, csses) {
Object.keys(csses).forEach((/**
* @param {?} k
* @return {?}
*/
function (k) {
el.style[k] = csses[k];
}));
return el;
};
/**
* @param {?} __0
* @return {?}
*/
DataTableHeadComponent.prototype.insertBeforeSibling = /**
* @param {?} __0
* @return {?}
*/
function (_a) {
var target = _a.target, origin = _a.origin;
if (!target) {
return;
}
origin.parentNode.insertBefore(target, origin);
};
/**
* @param {?} e
* @return {?}
*/
DataTableHeadComponent.prototype.findCellIndex = /**
* @param {?} e
* @return {?}
*/
function (e) {
/** @type {?} */
var target = e.target;
while (target.nodeName !== 'TH') {
target = target.parentElement || target.parentNode;
}
return { x: target.cellIndex, y: target.parentElement.rowIndex };
};
/**
* @param {?} target
* @return {?}
*/
DataTableHeadComponent.prototype.re