@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1,450 lines • 250 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 { 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 {?} */
const documentElement = document.documentElement;
export class DataTableHeadComponent {
/**
* @param {?} dt
* @param {?} zone
* @param {?} element
* @param {?} differs
* @param {?} iterableDiffers
* @param {?} ref
* @param {?} i18n
*/
constructor(dt, zone, element, differs, iterableDiffers, ref, i18n) {
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 {?}
*/
(e) => {
e.preventDefault();
documentElement.removeEventListener('mousemove', this.handleMousemove);
documentElement.addEventListener('mousedown', this.grab);
documentElement.addEventListener('mouseup', this.release);
setTimeout((/**
* @return {?}
*/
() => {
this.dispatchMousedown();
}));
});
this.grab = (/**
* @param {?} e
* @return {?}
*/
(e) => {
e.preventDefault();
documentElement.removeEventListener('mousedown', this.grab);
this.addClass(documentElement, 'gu-unselectable');
/** @type {?} */
const context = this.canStart(e.target);
this.grabbed = context;
documentElement.addEventListener('mousemove', this.startBecauseMouseMoved);
});
this.startBecauseMouseMoved = (/**
* @param {?} e
* @return {?}
*/
(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 {?}
*/
(e) => {
e.preventDefault();
this.grabbed = null;
documentElement.removeEventListener('mousemove', this.drag);
documentElement.removeEventListener('mouseup', this.release);
/** @type {?} */
const 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 {?}
*/
(from, to) => {
if (from === to) {
return;
}
/** @type {?} */
let offset = 0;
if (this.checkable) {
offset++;
}
if (this.showExpandToggle) {
offset++;
}
from = from - offset;
to = to - offset;
/** @type {?} */
let toCell = this.cellMap[to].sortKey[0];
/** @type {?} */
let fromCell = this.cellMap[from].sortKey[0];
/** @type {?} */
let 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 (let i = 0; i < loopCount; i++) {
this.dragTableEndEvent.emit({ from: fromCell, to: toCell });
}
});
this.sort = (/**
* @param {?} __0
* @return {?}
*/
({ list, from, 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 {?}
*/
() => {
this.dataSourceChange = true;
if (this.fixHeader && this.tableBodyEl) {
this.fixOriginTable = this.tableBodyEl.nativeElement;
setTimeout((/**
* @return {?}
*/
() => {
this.renderFixFakeTableEl();
this.fixFakeTableEl.style.display = 'none';
}));
}
else {
this.detecteOriginTable();
setTimeout((/**
* @return {?}
*/
() => {
this.renderFakeTable();
this.el.style.display = 'none';
}));
}
});
this.drag = (/**
* @param {?} e
* @return {?}
*/
(e) => {
e.preventDefault();
if (!this.mirror) {
return;
}
/** @type {?} */
const clientX = this.getCoord('clientX', e);
/** @type {?} */
const clientY = this.getCoord('clientY', e);
if (this.animationRequestId) {
cancelAnimationFrame(this.animationRequestId);
this.animationRequestId = null;
}
this.handleScroll(clientX, clientY, e);
documentElement.style.overflow = 'hidden';
/** @type {?} */
const x = clientX - this.offsetX;
/** @type {?} */
const y = clientY - this.offsetY;
this.mirror.style.left = x + 'px';
this.mirror.style.top = y + 'px';
this.mirror.style.visibility = 'visible';
/** @type {?} */
const elementBehindCursor = this.getElementBehindPoint(this.mirror, clientX, clientY);
/** @type {?} */
const dropTarget = this.findDropTarget(elementBehindCursor, clientX, clientY);
if (!dropTarget) {
return;
}
/** @type {?} */
const immediate = this.getImmediateChild(dropTarget, elementBehindCursor);
/** @type {?} */
let reference;
if (immediate) {
reference = this.getReference(dropTarget, immediate, clientX);
}
/** @type {?} */
const 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 {?} */
let mover;
/** @type {?} */
const 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 {?} */
let from;
/** @type {?} */
let to;
/** @type {?} */
let moverIndex;
/** @type {?} */
let fixItemRect;
/** @type {?} */
let fixItem;
/** @type {?} */
let fixMoverRect;
/** @type {?} */
let fixMover;
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 {?} */
const moverRect = mover && mover.getBoundingClientRect();
/** @type {?} */
const 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 {?}
*/
(table) => {
/** @type {?} */
let result = table.rows[0];
Array.from(table.rows).forEach((/**
* @param {?} row
* @return {?}
*/
(row) => {
/** @type {?} */
const rowL = ((/** @type {?} */ (row))).children.length;
/** @type {?} */
const resultL = result.children.length;
result = rowL > resultL ? row : result;
}));
return result;
});
this.getChildTableColumn = (/**
* @param {?} table
* @param {?} index
* @return {?}
*/
(table, index) => {
/** @type {?} */
const cTable = table.cloneNode(true);
this.origin2DragItem(cTable);
/** @type {?} */
const empty = (/**
* @param {?} node
* @return {?}
*/
(node) => {
while (node.firstChild) {
node.removeChild(node.firstChild);
}
});
Array.from(cTable.rows).forEach((/**
* @param {?} row
* @return {?}
*/
(row) => {
if (((/** @type {?} */ (row))).classList.contains('child-table')) {
/** @type {?} */
const target = this.getChildTableColumn(((/** @type {?} */ (row))).children[0].children[0], index);
empty(((/** @type {?} */ (row))).children[0]);
((/** @type {?} */ (row))).children[0].appendChild(target);
}
else {
/** @type {?} */
const 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 {?}
*/
(table) => {
Array.from(table.rows).forEach((/**
* @param {?} row
* @param {?} index
* @return {?}
*/
(row, index) => {
if (((/** @type {?} */ (row))).classList.contains('child-table')) {
/** @type {?} */
const 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 {?}
*/
(dropTarget, target, x) => {
/** @type {?} */
const resolve = (/**
* @param {?} after
* @return {?}
*/
(after) => {
return after ? this.nextEl(target) : target;
});
/** @type {?} */
const inside = (/**
* @return {?}
*/
() => {
// faster, but only available if dropped inside a child element
/** @type {?} */
const rect = target.getBoundingClientRect();
return resolve(x > rect.left + this.getRectWidth(rect) / 2);
});
/** @type {?} */
const outside = (/**
* @return {?}
*/
() => {
// slower, but able to figure out any position
/** @type {?} */
const len = dropTarget.children.length;
/** @type {?} */
let i;
/** @type {?} */
let el;
/** @type {?} */
let 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 {?} */
const reference = target !== dropTarget ? inside() : outside();
return reference;
});
this.getImmediateChild = (/**
* @param {?} dropTarget
* @param {?} target
* @return {?}
*/
(dropTarget, target) => {
/** @type {?} */
let immediate = target;
/** @type {?} */
const isElementDropFreeze = (/**
* @param {?} element
* @return {?}
*/
(element) => {
/** @type {?} */
const 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 {?}
*/
ngOnInit() {
if (this.colDraggable) {
this.iterableDiffer = this.iterableDiffers.find([]).create(null);
this.objDiffer = {};
this.dataSource.forEach((/**
* @param {?} data
* @param {?} index
* @return {?}
*/
(data, index) => {
this.objDiffer[index] = this.differs.find(data).create();
}));
}
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
(data) => {
this.i18nCommonText = data.common;
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes && changes.columns || changes.multiSort) {
this.multiSortArray = [];
this.columns.forEach((/**
* @param {?} column
* @return {?}
*/
column => {
if (column.sortable) {
/** @type {?} */
const sortIndex = this.multiSort.findIndex((/**
* @param {?} item
* @return {?}
*/
item => item['field'] === column.field));
this.multiSortArray.push({
field: column.field,
direction: sortIndex !== -1 ? this.multiSort[sortIndex].direction : ''
});
}
}));
}
if (changes['columns']) {
this.rowCount = Math.max(...this.columns.map((/**
* @param {?} column
* @return {?}
*/
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 {?}
*/
ngDoCheck() {
if (!this.colDraggable) {
return;
}
this.dataSource.forEach((/**
* @param {?} elt
* @param {?} index
* @return {?}
*/
(elt, index) => {
/** @type {?} */
const objDiffer = this.objDiffer[index];
if (!objDiffer) {
return;
}
/** @type {?} */
const objChanges = objDiffer.diff(elt);
if (objChanges) {
objChanges.forEachChangedItem((/**
* @param {?} changeItem
* @return {?}
*/
(changeItem) => {
if (changeItem.key === '$isChildTableOpen' && elt.children && elt.children.length) {
this.rerenderTables();
}
if (changeItem.key === 'children') {
this.rerenderTables();
}
}));
}
}));
/** @type {?} */
const changes = this.iterableDiffer.diff(this.columns);
if (changes) {
this.createCellMap();
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
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 {?}
*/
() => {
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 {?}
*/
createCellMap() {
/** @type {?} */
let cellIndex = 0;
this.columns.forEach((/**
* @param {?} column
* @param {?} index
* @return {?}
*/
(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 {?}
*/
key => {
/** @type {?} */
const item = this.cellMap[key];
if (item.isAdvanceHeader && item.sortKey.length < item.headerLength) {
item.sortKey.push(index);
}
}));
}
}
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.colDraggable) {
documentElement.removeEventListener('resize', this.renderFakeTable);
}
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
/**
* @return {?}
*/
resetSources() {
this.checkedListForFilter = [];
if (this.sourceSubscription) {
this.sourceSubscription.unsubscribe();
}
if (this.filterSubscription) {
this.filterSubscription.unsubscribe();
}
}
/**
* @param {?} column
* @return {?}
*/
onHeadClick(column) {
if (!column.sortable) {
return;
}
/** @type {?} */
const sortIndex = this.multiSortArray.findIndex((/**
* @param {?} item
* @return {?}
*/
item => 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 {?}
*/
hasAnyFilterColumns(columns) {
return (columns || []).some((/**
* @param {?} col
* @return {?}
*/
col => col && col.filterable));
}
/**
* @return {?}
*/
onCheckAllChange() {
this.dt.onCheckAllChange(this.pageAllChecked);
}
/**
* @return {?}
*/
onSearchQueryChange() {
this.dt.onSearchQueryChange(this.searchQuery);
}
/**
* @param {?} column
* @return {?}
*/
canFilterable(column) {
return column.field && column.field !== '$index' && column.filterable;
}
/**
* @param {?} field
* @return {?}
*/
getIfExistMultiSort(field) {
/** @type {?} */
const column = this.columns.find((/**
* @param {?} item
* @return {?}
*/
item => item['field'] === field));
return !!column.sortable;
}
/**
* @param {?} field
* @return {?}
*/
getSortDirection(field) {
if (!this.multiSortArray) {
return false;
}
/** @type {?} */
const filterField = this.multiSortArray.filter((/**
* @param {?} item
* @return {?}
*/
item => {
return item['field'] === field;
}));
if (filterField.length !== 0) {
return filterField[0]['direction'];
}
else {
return undefined;
}
}
/**
* @param {?} $event
* @param {?} column
* @param {?} isUserDefined
* @return {?}
*/
onResize($event, column, isUserDefined) {
// tslint:disable-next-line:no-unused-expression
column['advancedHeader'] == null && this.resizeHandlerEvent.emit(Object.assign({}, $event, { field: column.field, isUserDefined: isUserDefined }));
}
/**
* @param {?} $event
* @return {?}
*/
beginResize($event) {
this.beginResizeHandlerEvent.emit($event);
}
/**
* @param {?} $event
* @param {?} column
* @return {?}
*/
onResizing($event, column) {
// tslint:disable-next-line:no-unused-expression
column['advancedHeader'] == null && this.resizingHandlerEvent.emit(Object.assign({}, $event, { column }));
}
/**
* @private
* @param {?} lastChildIndex
* @param {?} parentWidth
* @param {?} newParentWidth
* @return {?}
*/
setParentNextWidth(lastChildIndex, parentWidth, newParentWidth) {
if (!lastChildIndex) {
return;
}
/** @type {?} */
const lastChilds = this.columns.filter((/**
* @param {?} column
* @return {?}
*/
column => column['$colIndex'] === lastChildIndex)).map((/**
* @param {?} item
* @return {?}
*/
item => item.field));
for (let 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 {?} */
const totalWidth = parentWidth + parseInt(this.columns[index + 1].width, 10);
this.columns[index + 1].width = totalWidth - newParentWidth + 'px';
return;
}
}
}
/**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
resizingParent($event, changeColumn) {
const { width } = $event;
if (this.rowCount > 0) {
this.columns.filter((/**
* @param {?} column
* @return {?}
*/
column => column['advancedHeader'] !== undefined))
.map((/**
* @param {?} column
* @return {?}
*/
column => column['advancedHeader']))
.reduce((/**
* @param {?} target
* @param {?} newItemArr
* @return {?}
*/
(target, newItemArr) => target.concat(newItemArr)))
.filter((/**
* @param {?} item
* @return {?}
*/
item => item['$cols'].indexOf(changeColumn['$colIndex']) > -1))
.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
this.zone.run((/**
* @return {?}
*/
() => {
if (!item.$rowIndex) {
/** @type {?} */
const length = item['$cols'].length;
/** @type {?} */
const currentIsLastChild = changeColumn['$colIndex'] === item['$cols'][length - 1];
// tslint:disable-next-line:no-unused-expression
!currentIsLastChild && this.setParentNextWidth(item['$cols'][length - 1], parseInt(item['$width'], 10), length * width);
item['$width'] = length * width + 'px';
}
}));
}));
}
}
// 初始化多行表头，为了兼容resizeable对表头互相影响数据做了记录
/**
* @return {?}
*/
initAdvanceHeader() {
if (this.resizeable) {
this.columns.forEach((/**
* @param {?} column
* @param {?} colIndex
* @return {?}
*/
(column, colIndex) => {
if (column['advancedHeader']) {
column['advancedHeader'].forEach((/**
* @param {?} item
* @param {?} rowIndex
* @return {?}
*/
(item, rowIndex) => {
item['$rowIndex'] = rowIndex;
item['$colIndex'] = colIndex;
item['$cols'] = new Array(item.colspan).fill(1).map((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => colIndex + i));
}));
}
column['$colIndex'] = colIndex;
}));
}
}
/**
* @param {?} $event
* @param {?} changeColumn
* @return {?}
*/
resizeParent($event, changeColumn) {
const { width } = $event;
if (this.rowCount > 0) {
this.columns.filter((/**
* @param {?} column
* @return {?}
*/
column => column['advancedHeader'] !== undefined))
.map((/**
* @param {?} column
* @return {?}
*/
column => column['advancedHeader']))
.reduce((/**
* @param {?} target
* @param {?} newItemArr
* @return {?}
*/
(target, newItemArr) => target.concat(newItemArr)))
.filter((/**
* @param {?} item
* @return {?}
*/
item => item['$cols'].indexOf(changeColumn['$colIndex']) > -1))
.forEach((/**
* @param {?} item
* @return {?}
*/
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 {?}
*/
trackByFn(index, item) {
return index;
}
/**
* @param {?} e
* @return {?}
*/
onTap(e) {
e.preventDefault();
this.originCellIndex = this.findCellIndex(e);
setTimeout((/**
* @return {?}
*/
() => {
documentElement.addEventListener('mousemove', this.handleMousemove);
documentElement.addEventListener('mouseup', (/**
* @return {?}
*/
() => {
documentElement.removeEventListener('mousemove', this.handleMousemove);
}));
}));
}
/**
* @param {?} __0
* @return {?}
*/
appendSibling({ target, origin }) {
if (!target) {
return;
}
target.parentNode.insertBefore(target, origin ? origin.nextElementSibling : null);
}
/**
* @param {?} el
* @return {?}
*/
getOffset(el) {
/** @type {?} */
const rect = el.getBoundingClientRect();
return {
left: rect.left + this.getScroll('scrollLeft', 'pageXOffset'),
top: rect.top + this.getScroll('scrollTop', 'pageYOffset')
};
}
/**
* @param {?} scrollProp
* @param {?} offsetProp
* @return {?}
*/
getScroll(scrollProp, offsetProp) {
if (typeof window[offsetProp] !== 'undefined') {
return window[offsetProp];
}
if (documentElement.clientHeight) {
return documentElement[scrollProp];
}
return document.body[scrollProp];
}
/**
* @return {?}
*/
dispatchMousedown() {
const { el, originCellIndex } = this;
el.children[originCellIndex.x].dispatchEvent(this.getTouchyEvent());
}
/**
* @return {?}
*/
getTouchyEvent() {
/** @type {?} */
let 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 {?}
*/
removeMirrorImage() {
if (this.mirror) {
documentElement.removeEventListener('mousemove', this.grab);
this.getParent(this.mirror).removeChild(this.mirror);
this.mirror = null;
setTimeout((/**
* @return {?}
*/
() => {
this.rmClass(this.mirrorContainer, 'gu-unselectable');
this.rmClass(documentElement, 'gu-unselectable');
}));
}
}
/**
* @param {?} item
* @return {?}
*/
canStart(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 {?} */
const source = this.getParent(item);
if (!source) {
return;
}
return {
item: item,
source: source
};
}
/**
* @return {?}
*/
detecteOriginTable() {
/** @type {?} */
let 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 {?}
*/
renderFakeTable() {
if (this.el && !this.dataSourceChange) {
return;
}
this.childTables = [];
this.detecteChildTables(this.originTable);
/** @type {?} */
const fakeTable = this.buildFakeTable(this.originTable);
this.fakeTable = fakeTable;
/** @type {?} */
const el = fakeTable.reduce((/**
* @param {?} previous
* @param {?} current
* @return {?}
*/
(previous, current) => {
/** @type {?} */
const 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 {?}
*/
renderFixFakeTableEl() {
if (this.fixFakeTableEl && !this.dataSourceChange) {
return;
}
/** @type {?} */
const fakeTable = this.buildFakeTable(this.fixOriginTable);
this.mainFakeTable = fakeTable;
/** @type {?} */
const el = fakeTable.reduce((/**
* @param {?} previous
* @param {?} current
* @return {?}
*/
(previous, current) => {
/** @type {?} */
const 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 {?}
*/
buildFakeTable(table) {
this.colOffset = 0;
this.seconedHeaderOffset = 0;
return Array.from(table.rows[0].children).map((/**
* @param {?} cell
* @param {?} index
* @return {?}
*/
(cell, index) => {
return this.getColumnAsTableByIndex(table, index, ((/** @type {?} */ (cell))).colSpan, ((/** @type {?} */ (cell))).rowSpan);
}));
}
/**
* @param {?} el
* @param {?} originEl
* @param {?} fakeTables
* @return {?}
*/
renderEl(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 {?} */
const spacing = window.getComputedStyle(originEl).getPropertyValue('border-spacing').split(' ')[0];
/** @type {?} */
const attr = 'margin-right';
/** @type {?} */
const length = el.children.length;
Array.from(el.children).forEach((/**
* @param {?} li
* @param {?} dex
* @return {?}
*/
(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 {?}
*/
sizeColumnFake(fakeTables, originEl) {
// calculate width of every column
Array.from(originEl.rows[0].children).forEach((/**
* @param {?} cell
* @param {?} index
* @return {?}
*/
(cell, index) => {
if (!fakeTables[index]) {
return;
}
/** @type {?} */
const w = ((/** @type {?} */ (cell))).getBoundingClientRect().width;
/** @type {?} */
const t = fakeTables[index];
this.css(t, { width: `${w}px` });
this.css(t.rows[0].children[0], { width: `${w}px` });
}));
}
/**
* @param {?} el
* @param {?} csses
* @return {?}
*/
css(el, csses) {
Object.keys(csses).forEach((/**
* @param {?} k
* @return {?}
*/
(k) => {
el.style[k] = csses[k];
}));
return el;
}
/**
* @param {?} __0
* @return {?}
*/
insertBeforeSibling({ target, origin }) {
if (!target) {
return;
}
origin.parentNode.insertBefore(target, origin);
}
/**
* @param {?} e
* @return {?}
*/
findCellIndex(e) {
/** @type {?} */
let target = e.target;
while (target.nodeName !== 'TH') {
target = target.parentElement || target.parentNode;
}
return { x: target.cellIndex, y: target.parentElement.rowIndex };
}
/**
* @param {?} target
* @return {?}
*/
renderMirrorImage(target) {
if (this.mirror) {
return;
}
this.mirror = target.cloneNode(true);
/** @type {?} */
const getFixTableTotalHeight = (/**
* @return {?}
*/
() => {
return this.fixOriginTable.parentNode.parentNode.parentNode.getBoundingClientRect().height;
});
/** @type {?} */
const getTableTotalHeight = (/**
* @return {?}
*/
() => {
return this.originTable.parentNode.parentNode.parentNode.getBoundingClientRect().height;
});
// 固定表头表格时，对拖动内容进行截取
if (this.fixHeader) {
/** @type {?} */
const to = Array.from(this.el.children).indexOf(target);
/** @type {?} */
const fixTarget = this.fixFakeTableEl.children[to].children[0].cloneNode(true);
/** @type {?} */
const fixTargetContainer = document.createElement('div');
/** @type {?} */
const mirrorHeight = Math.min(parseInt(this.maxHeight, 10), getFixTableTotalHeight());
fixTargetContainer.style.height = mirrorHeight + 'px';
fixTargetContainer.style.overflow = 'hidden';
fixTargetContainer.appendChild(fixTarget);
fixTarget.style.maxHeight = this.maxHeight;
fixTarget.style.top = '-' + this.fixTableOffsetTop + 'px';
this.mirror.appendChild(fixTargetContainer);
}
// 设置最大高度，但不是固定表头的表格
if (!this.fixHeader && this.maxHeight) {
/** @type {?} */
const mirrorHeight = Math.min(parseInt(this.maxHeight, 10), getTableTotalHeight());
this.mirror.style.height = mirrorHeight + 'px';
this.mirror.style.overflow = 'hidden';
}
this.mirror.style.visibility = 'hidden';
/** @type {?} */
const thNode = this.mirror.querySelector('th');
this.addClass(thNode, 'hover');
this.rmClass(this.mirror, 'gu-transit');
this.addClass(this.mirror, 'gu-mirror');
this.mirrorContainer.appendChild(this.mirror);
this.addClass(this.mirrorContainer, 'gu-unselectable');
}
/**
* @param {?} className
* @return {?}
*/
lookupClass(className) {
/** @type {?} */
const cache = {};
/** @type {?} */
const start = '(?:^|\\s)';
/** @type {?} */
const end = '(?:\\s|$)';
/** @type {?} */
let cached = cache[className];
if (cached) {
cached.lastIndex = 0;
}
else {
cache[className] = cached = new RegExp(start + className + end, 'g');
}
return cached;
}
/**
* @param {?} el
* @param {?} className
* @return {?}
*/
addClass(el, className) {
/** @type {?} */
const current = el.className;
if (!current.length) {
el.className = className;
}
else if (!this.lookupClass(className).test(current)) {
el.className += ' ' + className;
}
}
/**
* @param {?} el
* @param {?} className
* @return {?}
*/
rmClass(el, className) {
el.className = el.className.replace(this.lookupClass(className), ' ').trim();
}
/**
* @param {?} x
* @param {?} y
* @param {?} e
* @return {?}
*/
handleScroll(x, y, e) {
this.scrollViewRect = this.scrollViewEl.getBoundingClientRect();
/** @type {?} */
let fixTableScrollViewRect;
if (this.fixHeader) {
this.fixTableScrollViewEl = this.fixOriginTable.parentNode.parentNode;
fixTableScrollViewRect = this.fixTableScrollViewEl.getBoundingClientRect();
}
/** @type {?} */
let scrollLeft = this.scrollViewEl.scrollLeft;
/** @type {?} */
const range = 150;
/** @type {?} */
const scrollToLeft = (/**
* @return {?}
*/
() => {
scrollLeft -= 50;
if (this.fixHeader) {
this.fixTableScrollViewEl.scrollTo(scrollLeft, 0);
}
this.scrollViewEl.scrollTo(scrollLeft, 0);
this.animationRequestId = requestAnimationFrame(scrollToLeft);
documentElement.dispatchEvent(e);
});
/** @type {?} */
const scrollToRight = (/**
* @return {?}
*/
() => {
scrollLeft += 50;
if (this.fixHeader) {
this.fixTableScrollViewEl.scrollTo(scrollLeft, 0);
}
this.scrollViewEl.scrollTo(scrollLeft, 0);
this.animationRequestId = requestAnimationFrame(scrollToRight);
documentElement.dispatchEvent(e);
});
if (!this.fixHeader && (y < this.scrollViewRect.top || y > this.scrollViewRect.bottom)) {
return;
}
if (this.fixHeader && (y < this.scrollViewRect.top || y > fixTableScrollViewRect.bottom)) {
return;
}
if (this.scrollViewRect.left < x && x < (this.scrollViewRect.left + range)) {
this.animationRequestId = requestAnimationFrame(scrollToLeft);
}
if ((this.scrollViewRect.right - range) < x && x < this.scrollViewRect.right) {
this.animationRequestId = reque