@codehint-ng/tree-table
Version:
A simple component to display tree-hierarchically data in table.
92 lines • 12.4 kB
JavaScript
import { Directive, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class ResizableTableColumnDirective {
constructor(elementRef) {
this.elementRef = elementRef;
this.resizer = new Resizer();
}
ngOnInit() {
if (this.appResizableTableColumn || this.appResizableTableColumn === '') {
const resizeDiv = Helper.createResizeDiv(this.elementRef.nativeElement);
this.resizer.attachEvents(resizeDiv);
}
}
ngOnDestroy() {
this.resizer.detachEvents();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: ResizableTableColumnDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.3", type: ResizableTableColumnDirective, selector: "[appResizableTableColumn]", inputs: { appResizableTableColumn: "appResizableTableColumn" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.3", ngImport: i0, type: ResizableTableColumnDirective, decorators: [{
type: Directive,
args: [{
selector: '[appResizableTableColumn]'
}]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { appResizableTableColumn: [{
type: Input
}] } });
class Resizer {
attachEvents(resizeDiv) {
this.resizeDiv = resizeDiv;
this.resizeDiv.addEventListener('mousedown', this.resizeDivMouseDown.bind(this));
document.addEventListener('mousemove', this.documentMouseMove.bind(this));
document.addEventListener('mouseup', this.documentMouseUp.bind(this));
}
detachEvents() {
if (this.resizeDiv) {
this.resizeDiv.removeEventListener('mousedown', this.resizeDivMouseDown.bind(this));
document.removeEventListener('mousemove', this.documentMouseMove.bind(this));
document.removeEventListener('mouseup', this.documentMouseUp.bind(this));
}
}
resizeDivMouseDown(e) {
this.curCol = e.target.parentElement;
this.nxtCol = this.curCol.nextElementSibling;
this.pageX = e.pageX;
this.curColWidth = this.curCol.offsetWidth;
if (this.nxtCol) {
this.nxtColWidth = this.nxtCol.offsetWidth;
}
}
documentMouseMove(e) {
if (this.curCol) {
const diffX = e.pageX - this.pageX;
if (this.nxtCol) {
this.nxtCol.style.width = (this.nxtColWidth - (diffX)) + 'px';
}
this.curCol.style.width = (this.curColWidth + diffX) + 'px';
}
}
documentMouseUp(e) {
this.curCol = undefined;
this.nxtCol = undefined;
this.pageX = undefined;
this.nxtColWidth = undefined;
this.curColWidth = undefined;
}
}
class Helper {
static createResizeDiv(thElement) {
const div = this.createDiv(thElement.offsetHeight);
thElement.appendChild(div);
// thElement.style.position = 'relative';
return div;
}
static createDiv(height) {
const div = document.createElement('div');
div.style.top = '0';
div.style.right = '0';
div.style.width = '4px';
div.style.position = 'absolute';
div.style.cursor = 'col-resize';
/* remove backGroundColor later */
div.style.backgroundColor = '#f2f2f2';
div.style.opacity = '0.2';
div.style.userSelect = 'none';
/* table height */
div.style.height = height + 'px';
div.classList.add('col-resize');
return div;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXphYmxlLXRhYmxlLWNvbHVtbi5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy90cmVlLXRhYmxlL3NyYy9saWIvc2hhcmVkL3Jlc2l6YWJsZS10YWJsZS1jb2x1bW4uZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQWMsS0FBSyxFQUFvQixNQUFNLGVBQWUsQ0FBQzs7QUFLOUUsTUFBTSxPQUFPLDZCQUE2QjtJQUl4QyxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBRmxDLFlBQU8sR0FBRyxJQUFJLE9BQU8sRUFBRSxDQUFDO0lBR2hDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsdUJBQXVCLElBQUksSUFBSSxDQUFDLHVCQUE4QixLQUFLLEVBQUUsRUFBRSxDQUFDO1lBQy9FLE1BQU0sU0FBUyxHQUFHLE1BQU0sQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUN4RSxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUN2QyxDQUFDO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsT0FBTyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzlCLENBQUM7OEdBaEJVLDZCQUE2QjtrR0FBN0IsNkJBQTZCOzsyRkFBN0IsNkJBQTZCO2tCQUh6QyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSwyQkFBMkI7aUJBQ3RDOytFQUVVLHVCQUF1QjtzQkFBL0IsS0FBSzs7QUFrQlIsTUFBTSxPQUFPO0lBUVgsWUFBWSxDQUFDLFNBQVM7UUFDcEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7UUFDM0IsSUFBSSxDQUFDLFNBQVMsQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXLEVBQUUsSUFBSSxDQUFDLGtC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LENBQUMsQ0FBQztRQUMxQyxHQUFHLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxHQUFHLENBQUM7UUFDcEIsR0FBRyxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDO1FBQ3RCLEdBQUcsQ0FBQyxLQUFLLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUN4QixHQUFHLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7UUFDaEMsR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsWUFBWSxDQUFDO1FBQ2hDLGtDQUFrQztRQUNsQyxHQUFHLENBQUMsS0FBSyxDQUFDLGVBQWUsR0FBRyxTQUFTLENBQUM7UUFDdEMsR0FBRyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQzFCLEdBQUcsQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLE1BQU0sQ0FBQztRQUM5QixrQkFBa0I7UUFDbEIsR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLEdBQUcsTUFBTSxHQUFHLElBQUksQ0FBQztRQUNqQyxHQUFHLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNoQyxPQUFPLEdBQUcsQ0FBQztJQUNiLENBQUM7Q0FDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7RGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbYXBwUmVzaXphYmxlVGFibGVDb2x1bW5dJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgUmVzaXphYmxlVGFibGVDb2x1bW5EaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XHJcbiAgQElucHV0KCkgYXBwUmVzaXphYmxlVGFibGVDb2x1bW46IGJvb2xlYW47XHJcbiAgcHJpdmF0ZSByZXNpemVyID0gbmV3IFJlc2l6ZXIoKTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIGlmICh0aGlzLmFwcFJlc2l6YWJsZVRhYmxlQ29sdW1uIHx8IHRoaXMuYXBwUmVzaXphYmxlVGFibGVDb2x1bW4gYXMgYW55ID09PSAnJykge1xyXG4gICAgICBjb25zdCByZXNpemVEaXYgPSBIZWxwZXIuY3JlYXRlUmVzaXplRGl2KHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcclxuICAgICAgdGhpcy5yZXNpemVyLmF0dGFjaEV2ZW50cyhyZXNpemVEaXYpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICB0aGlzLnJlc2l6ZXIuZGV0YWNoRXZlbnRzKCk7XHJcbiAgfVxyXG59XHJcblxyXG5jbGFzcyBSZXNpemVyIHtcclxuICBwcml2YXRlIHBhZ2VYO1xyXG4gIHByaXZhdGUgY3VyQ29sO1xyXG4gIHByaXZhdGUgbnh0Q29sO1xyXG4gIHByaXZhdGUgY3VyQ29sV2lkdGg7XHJcbiAgcHJpdmF0ZSBueHRDb2xXaWR0aDtcclxuICBwcml2YXRlIHJlc2l6ZURpdjtcclxuXHJcbiAgYXR0YWNoRXZlbnRzKHJlc2l6ZURpdikge1xyXG4gICAgdGhpcy5yZXNpemVEaXYgPSByZXNpemVEaXY7XHJcbiAgICB0aGlzLnJlc2l6ZURpdi5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCB0aGlzLnJlc2l6ZURpdk1vdXNlRG93bi5iaW5kKHRoaXMpKTtcclxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlbW92ZScsIHRoaXMuZG9jdW1lbnRNb3VzZU1vdmUuYmluZCh0aGlzKSk7XHJcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgdGhpcy5kb2N1bWVudE1vdXNlVXAuYmluZCh0aGlzKSk7XHJcbiAgfVxyXG5cclxuICBkZXRhY2hFdmVudHMoKSB7XHJcbiAgICBpZiAodGhpcy5yZXNpemVEaXYpIHtcclxuICAgICAgdGhpcy5yZXNpemVEaXYucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgdGhpcy5yZXNpemVEaXZNb3VzZURvd24uYmluZCh0aGlzKSk7XHJcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNlbW92ZScsIHRoaXMuZG9jdW1lbnRNb3VzZU1vdmUuYmluZCh0aGlzKSk7XHJcbiAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ21vdXNldXAnLCB0aGlzLmRvY3VtZW50TW91c2VVcC5iaW5kKHRoaXMpKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgcmVzaXplRGl2TW91c2VEb3duKGUpIHtcclxuICAgIHRoaXMuY3VyQ29sID0gZS50YXJnZXQucGFyZW50RWxlbWVudDtcclxuICAgIHRoaXMubnh0Q29sID0gdGhpcy5jdXJDb2wubmV4dEVsZW1lbnRTaWJsaW5nO1xyXG4gICAgdGhpcy5wYWdlWCA9IGUucGFnZVg7XHJcbiAgICB0aGlzLmN1ckNvbFdpZHRoID0gdGhpcy5jdXJDb2wub2Zmc2V0V2lkdGg7XHJcbiAgICBpZiAodGhpcy5ueHRDb2wpIHtcclxuICAgICAgdGhpcy5ueHRDb2xXaWR0aCA9IHRoaXMubnh0Q29sLm9mZnNldFdpZHRoO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBkb2N1bWVudE1vdXNlTW92ZShlKSB7XHJcbiAgICBpZiAodGhpcy5jdXJDb2wpIHtcclxuICAgICAgY29uc3QgZGlmZlggPSBlLnBhZ2VYIC0gdGhpcy5wYWdlWDtcclxuICAgICAgaWYgKHRoaXMubnh0Q29sKSB7XHJcbiAgICAgICAgdGhpcy5ueHRDb2wuc3R5bGUud2lkdGggPSAodGhpcy5ueHRDb2xXaWR0aCAtIChkaWZmWCkpICsgJ3B4JztcclxuICAgICAgfVxyXG4gICAgICB0aGlzLmN1ckNvbC5zdHlsZS53aWR0aCA9ICh0aGlzLmN1ckNvbFdpZHRoICsgZGlmZlgpICsgJ3B4JztcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHByaXZhdGUgZG9jdW1lbnRNb3VzZVVwKGUpIHtcclxuICAgIHRoaXMuY3VyQ29sID0gdW5kZWZpbmVkO1xyXG4gICAgdGhpcy5ueHRDb2wgPSB1bmRlZmluZWQ7XHJcbiAgICB0aGlzLnBhZ2VYID0gdW5kZWZpbmVkO1xyXG4gICAgdGhpcy5ueHRDb2xXaWR0aCA9IHVuZGVmaW5lZDtcclxuICAgIHRoaXMuY3VyQ29sV2lkdGggPSB1bmRlZmluZWQ7XHJcbiAgfVxyXG59XHJcblxyXG5jbGFzcyBIZWxwZXIge1xyXG4gIHN0YXRpYyBjcmVhdGVSZXNpemVEaXYodGhFbGVtZW50KSB7XHJcbiAgICBjb25zdCBkaXYgPSB0aGlzLmNyZWF0ZURpdih0aEVsZW1lbnQub2Zmc2V0SGVpZ2h0KTtcclxuICAgIHRoRWxlbWVudC5hcHBlbmRDaGlsZChkaXYpO1xyXG4gICAgLy8gdGhFbGVtZW50LnN0eWxlLnBvc2l0aW9uID0gJ3JlbGF0aXZlJztcclxuICAgIHJldHVybiBkaXY7XHJcbiAgfVxyXG5cclxuICBwcml2YXRlIHN0YXRpYyBjcmVhdGVEaXYoaGVpZ2h0KSB7XHJcbiAgICBjb25zdCBkaXYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdkaXYnKTtcclxuICAgIGRpdi5zdHlsZS50b3AgPSAnMCc7XHJcbiAgICBkaXYuc3R5bGUucmlnaHQgPSAnMCc7XHJcbiAgICBkaXYuc3R5bGUud2lkdGggPSAnNHB4JztcclxuICAgIGRpdi5zdHlsZS5wb3NpdGlvbiA9ICdhYnNvbHV0ZSc7XHJcbiAgICBkaXYuc3R5bGUuY3Vyc29yID0gJ2NvbC1yZXNpemUnO1xyXG4gICAgLyogcmVtb3ZlIGJhY2tHcm91bmRDb2xvciBsYXRlciAqL1xyXG4gICAgZGl2LnN0eWxlLmJhY2tncm91bmRDb2xvciA9ICcjZjJmMmYyJztcclxuICAgIGRpdi5zdHlsZS5vcGFjaXR5ID0gJzAuMic7XHJcbiAgICBkaXYuc3R5bGUudXNlclNlbGVjdCA9ICdub25lJztcclxuICAgIC8qIHRhYmxlIGhlaWdodCAqL1xyXG4gICAgZGl2LnN0eWxlLmhlaWdodCA9IGhlaWdodCArICdweCc7XHJcbiAgICBkaXYuY2xhc3NMaXN0LmFkZCgnY29sLXJlc2l6ZScpO1xyXG4gICAgcmV0dXJuIGRpdjtcclxuICB9XHJcbn1cclxuIl19