@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
96 lines • 13.8 kB
JavaScript
import { CDK_DRAG_PARENT, CdkDrag } from '@angular/cdk/drag-drop';
import { Directive, Input } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class ReorderableModelDirective extends CdkDrag {
constructor() {
super(...arguments);
/** Apply the dragula preview class to avoid backwards compatibility issues */
this.previewClass = 'gu-mirror';
/** Preserve the column widths */
this._widths = new Map();
/** Unsubscribe on destroy */
this._destroy$ = new Subject();
}
// allow the user to specify a model for the item - allows use with ngFor
set uxReorderableModel(model) {
this.data = model;
}
ngOnInit() {
// cast the drop container as we have replaced it with our directive
const dropContainer = this.dropContainer;
this._dragRef.beforeStarted
.pipe(takeUntil(this._destroy$))
.subscribe(() => this.captureTableCellStyles());
this.started.pipe(takeUntil(this._destroy$)).subscribe(() => {
dropContainer.reorderStart.emit({
element: this.element.nativeElement,
model: this.data,
});
this.setTableCellWidths();
});
this.dropped.pipe(takeUntil(this._destroy$)).subscribe((dragEvent) => {
if (dragEvent.container === dragEvent.previousContainer &&
dragEvent.currentIndex === dragEvent.previousIndex) {
dropContainer.reorderCancel.emit({
element: this.element.nativeElement,
model: this.data,
});
}
else {
dropContainer.reorderEnd.emit({
element: this.element.nativeElement,
model: this.data,
});
}
});
}
ngOnDestroy() {
super.ngOnDestroy();
this._destroy$.next();
this._destroy$.complete();
}
/**
* When table elements are being dragged they are hoisted to the document level
* when dragged they lose the sizing and spacing provided when they are used inside a table.
*
* This function will capture the styles so we can inline them to preseve the styling.
*/
captureTableCellStyles() {
// if it is not a table row then skip this
if (this.element.nativeElement.tagName !== 'TR') {
return;
}
// iterate each cell and store the styles and enforce the width by using a minWidth
Array.from(this.element.nativeElement.children).forEach((cell, index) => {
this._widths.set(index, getComputedStyle(cell).getPropertyValue('width'));
});
}
setTableCellWidths() {
// if it is not a table row then skip this
if (this.element.nativeElement.tagName !== 'TR') {
return;
}
// access the preview element, this is private but there is no public way to access
// it and the UI is incorrect when draggingtable rows without this.
const previewElement = this._dragRef._preview;
// re-apply all the stored styles
Array.from(previewElement.children).forEach((cell, index) => (cell.style.minWidth = this._widths.get(index)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReorderableModelDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: ReorderableModelDirective, selector: "[uxReorderableModel]", inputs: { uxReorderableModel: "uxReorderableModel" }, host: { properties: { "class.ux-reorderable-moving": "_dragRef.isDragging()" } }, providers: [{ provide: CDK_DRAG_PARENT, useExisting: ReorderableModelDirective }], usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ReorderableModelDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxReorderableModel]',
providers: [{ provide: CDK_DRAG_PARENT, useExisting: ReorderableModelDirective }],
host: {
'[class.ux-reorderable-moving]': '_dragRef.isDragging()',
},
}]
}], propDecorators: { uxReorderableModel: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVvcmRlcmFibGUtbW9kZWwuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2RpcmVjdGl2ZXMvcmVvcmRlcmFibGUvcmVvcmRlcmFibGUtbW9kZWwuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsT0FBTyxFQUFlLE1BQU0sd0JBQXdCLENBQUM7QUFDL0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDL0IsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDOztBQVUzQyxNQUFNLE9BQU8seUJBQTZCLFNBQVEsT0FBTztJQVB6RDs7UUFhSSw4RUFBOEU7UUFDOUUsaUJBQVksR0FBRyxXQUFXLENBQUM7UUFFM0IsaUNBQWlDO1FBQ2hCLFlBQU8sR0FBRyxJQUFJLEdBQUcsRUFBa0IsQ0FBQztRQUVyRCw2QkFBNkI7UUFDWixjQUFTLEdBQUcsSUFBSSxPQUFPLEVBQVEsQ0FBQztLQTRFcEQ7SUF4RkcseUVBQXlFO0lBQ3pFLElBQWEsa0JBQWtCLENBQUMsS0FBUTtRQUNwQyxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDO0lBV0QsUUFBUTtRQUNKLG9FQUFvRTtRQUNwRSxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsYUFBd0MsQ0FBQztRQUVwRSxJQUFJLENBQUMsUUFBUSxDQUFDLGFBQWE7YUFDdEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7YUFDL0IsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxDQUFDLENBQUM7UUFFcEQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUks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USxFQUFFLHNCQUFzQjtvQkFDaEMsU0FBUyxFQUFFLENBQUMsRUFBRSxPQUFPLEVBQUUsZUFBZSxFQUFFLFdBQVcsMkJBQTJCLEVBQUUsQ0FBQztvQkFDakYsSUFBSSxFQUFFO3dCQUNGLCtCQUErQixFQUFFLHVCQUF1QjtxQkFDM0Q7aUJBQ0o7OEJBR2dCLGtCQUFrQjtzQkFBOUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENES19EUkFHX1BBUkVOVCwgQ2RrRHJhZywgQ2RrRHJhZ0Ryb3AgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcbmltcG9ydCB7IERpcmVjdGl2ZSwgSW5wdXQsIE9uRGVzdHJveSwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyB0YWtlVW50aWwgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBSZW9yZGVyYWJsZURpcmVjdGl2ZSB9IGZyb20gJy4vcmVvcmRlcmFibGUuZGlyZWN0aXZlJztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbdXhSZW9yZGVyYWJsZU1vZGVsXScsXG4gICAgcHJvdmlkZXJzOiBbeyBwcm92aWRlOiBDREtfRFJBR19QQVJFTlQsIHVzZUV4aXN0aW5nOiBSZW9yZGVyYWJsZU1vZGVsRGlyZWN0aXZlIH1dLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzcy51eC1yZW9yZGVyYWJsZS1tb3ZpbmddJzogJ19kcmFnUmVmLmlzRHJhZ2dpbmcoKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgUmVvcmRlcmFibGVNb2RlbERpcmVjdGl2ZTxUPiBleHRlbmRzIENka0RyYWcgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgLy8gYWxsb3cgdGhlIHVzZXIgdG8gc3BlY2lmeSBhIG1vZGVsIGZvciB0aGUgaXRlbSAtIGFsbG93cyB1c2Ugd2l0aCBuZ0ZvclxuICAgIEBJbnB1dCgpIHNldCB1eFJlb3JkZXJhYmxlTW9kZWwobW9kZWw6IFQpIHtcbiAgICAgICAgdGhpcy5kYXRhID0gbW9kZWw7XG4gICAgfVxuXG4gICAgLyoqIEFwcGx5IHRoZSBkcmFndWxhIHByZXZpZXcgY2xhc3MgdG8gYXZvaWQgYmFja3dhcmRzIGNvbXBhdGliaWxpdHkgaXNzdWVzICovXG4gICAgcHJldmlld0NsYXNzID0gJ2d1LW1pcnJvcic7XG5cbiAgICAvKiogUHJlc2VydmUgdGhlIGNvbHVtbiB3aWR0aHMgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF93aWR0aHMgPSBuZXcgTWFwPG51bWJlciwgc3RyaW5nPigpO1xuXG4gICAgLyoqIFVuc3Vic2NyaWJlIG9uIGRlc3Ryb3kgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9kZXN0cm95JCA9IG5ldyBTdWJqZWN0PHZvaWQ+KCk7XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgLy8gY2FzdCB0aGUgZHJvcCBjb250YWluZXIgYXMgd2UgaGF2ZSByZXBsYWNlZCBpdCB3aXRoIG91ciBkaXJlY3RpdmVcbiAgICAgICAgY29uc3QgZHJvcENvbnRhaW5lciA9IHRoaXMuZHJvcENvbnRhaW5lciBhcyBSZW9yZGVyYWJsZURpcmVjdGl2ZTxUPjtcblxuICAgICAgICB0aGlzLl9kcmFnUmVmLmJlZm9yZVN0YXJ0ZWRcbiAgICAgICAgICAgIC5waXBlKHRha2VVbnRpbCh0aGlzLl9kZXN0cm95JCkpXG4gICAgICAgICAgICAuc3Vic2NyaWJlKCgpID0+IHRoaXMuY2FwdHVyZVRhYmxlQ2VsbFN0eWxlcygpKTtcblxuICAgICAgICB0aGlzLnN0YXJ0ZWQucGlwZSh0YWtlVW50aWwodGhpcy5fZGVzdHJveSQpKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAgICAgZHJvcENvbnRhaW5lci5yZW9yZGVyU3RhcnQuZW1pdCh7XG4gICAgICAgICAgICAgICAgZWxlbWVudDogdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICAgICAgICAgbW9kZWw6IHRoaXMuZGF0YSxcbiAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgdGhpcy5zZXRUYWJsZUNlbGxXaWR0aHMoKTtcbiAgICAgICAgfSk7XG5cbiAgICAgICAgdGhpcy5kcm9wcGVkLnBpcGUodGFrZVVudGlsKHRoaXMuX2Rlc3Ryb3kkKSkuc3Vic2NyaWJlKChkcmFnRXZlbnQ6IENka0RyYWdEcm9wPFQ+KSA9PiB7XG4gICAgICAgICAgICBpZiAoXG4gICAgICAgICAgICAgICAgZHJhZ0V2ZW50LmNvbnRhaW5lciA9PT0gZHJhZ0V2ZW50LnByZXZpb3VzQ29udGFpbmVyICYmXG4gICAgICAgICAgICAgICAgZHJhZ0V2ZW50LmN1cnJlbnRJbmRleCA9PT0gZHJhZ0V2ZW50LnByZXZpb3VzSW5kZXhcbiAgICAgICAgICAgICkge1xuICAgICAgICAgICAgICAgIGRyb3BDb250YWluZXIucmVvcmRlckNhbmNlbC5lbWl0KHtcbiAgICAgICAgICAgICAgICAgICAgZWxlbWVudDogdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICAgICAgICAgICAgIG1vZGVsOiB0aGlzLmRhdGEsXG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIGRyb3BDb250YWluZXIucmVvcmRlckVuZC5lbWl0KHtcbiAgICAgICAgICAgICAgICAgICAgZWxlbWVudDogdGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsXG4gICAgICAgICAgICAgICAgICAgIG1vZGVsOiB0aGlzLmRhdGEsXG4gICAgICAgICAgICAgICAgfSk7XG4gICAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBzdXBlci5uZ09uRGVzdHJveSgpO1xuICAgICAgICB0aGlzLl9kZXN0cm95JC5uZXh0KCk7XG4gICAgICAgIHRoaXMuX2Rlc3Ryb3kkLmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgLyoqXG4gICAgICogV2hlbiB0YWJsZSBlbGVtZW50cyBhcmUgYmVpbmcgZHJhZ2dlZCB0aGV5IGFyZSBob2lzdGVkIHRvIHRoZSBkb2N1bWVudCBsZXZlbFxuICAgICAqIHdoZW4gZHJhZ2dlZCB0aGV5IGxvc2UgdGhlIHNpemluZyBhbmQgc3BhY2luZyBwcm92aWRlZCB3aGVuIHRoZXkgYXJlIHVzZWQgaW5zaWRlIGEgdGFibGUuXG4gICAgICpcbiAgICAgKiBUaGlzIGZ1bmN0aW9uIHdpbGwgY2FwdHVyZSB0aGUgc3R5bGVzIHNvIHdlIGNhbiBpbmxpbmUgdGhlbSB0byBwcmVzZXZlIHRoZSBzdHlsaW5nLlxuICAgICAqL1xuICAgIHByaXZhdGUgY2FwdHVyZVRhYmxlQ2VsbFN0eWxlcygpOiB2b2lkIHtcbiAgICAgICAgLy8gaWYgaXQgaXMgbm90IGEgdGFibGUgcm93IHRoZW4gc2tpcCB0aGlzXG4gICAgICAgIGlmICh0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC50YWdOYW1lICE9PSAnVFInKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICAvLyBpdGVyYXRlIGVhY2ggY2VsbCBhbmQgc3RvcmUgdGhlIHN0eWxlcyBhbmQgZW5mb3JjZSB0aGUgd2lkdGggYnkgdXNpbmcgYSBtaW5XaWR0aFxuICAgICAgICBBcnJheS5mcm9tKHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50LmNoaWxkcmVuKS5mb3JFYWNoKChjZWxsLCBpbmRleCkgPT4ge1xuICAgICAgICAgICAgdGhpcy5fd2lkdGhzLnNldChpbmRleCwgZ2V0Q29tcHV0ZWRTdHlsZShjZWxsKS5nZXRQcm9wZXJ0eVZhbHVlKCd3aWR0aCcpKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSBzZXRUYWJsZUNlbGxXaWR0aHMoKTogdm9pZCB7XG4gICAgICAgIC8vIGlmIGl0IGlzIG5vdCBhIHRhYmxlIHJvdyB0aGVuIHNraXAgdGhpc1xuICAgICAgICBpZiAodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQudGFnTmFtZSAhPT0gJ1RSJykge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gYWNjZXNzIHRoZSBwcmV2aWV3IGVsZW1lbnQsIHRoaXMgaXMgcHJpdmF0ZSBidXQgdGhlcmUgaXMgbm8gcHVibGljIHdheSB0byBhY2Nlc3NcbiAgICAgICAgLy8gaXQgYW5kIHRoZSBVSSBpcyBpbmNvcnJlY3Qgd2hlbiBkcmFnZ2luZ3RhYmxlIHJvd3Mgd2l0aG91dCB0aGlzLlxuICAgICAgICAgXG4gICAgICAgIGNvbnN0IHByZXZpZXdFbGVtZW50ID0gKHRoaXMuX2RyYWdSZWYgYXMgYW55KS5fcHJldmlldyBhcyBIVE1MRWxlbWVudDtcblxuICAgICAgICAvLyByZS1hcHBseSBhbGwgdGhlIHN0b3JlZCBzdHlsZXNcbiAgICAgICAgQXJyYXkuZnJvbShwcmV2aWV3RWxlbWVudC5jaGlsZHJlbikuZm9yRWFjaChcbiAgICAgICAgICAgIChjZWxsOiBIVE1MRWxlbWVudCwgaW5kZXgpID0+IChjZWxsLnN0eWxlLm1pbldpZHRoID0gdGhpcy5fd2lkdGhzLmdldChpbmRleCkpXG4gICAgICAgICk7XG4gICAgfVxufVxuIl19