@swimlane/ngx-dnd
Version:
Drag and Drop for Angular2 and beyond!
91 lines • 8.45 kB
JavaScript
import { Directive, Input, Output, ElementRef, EventEmitter, Renderer2 } from '@angular/core';
import { DrakeStoreService } from '../services/drake-store.service';
import * as i0 from "@angular/core";
import * as i1 from "../services/drake-store.service";
let i = 10000;
function getNextId() {
return i++;
}
/**
* Makes the container droppable and children draggable.
*
* @export
*/
export class DroppableDirective {
el;
renderer;
drakesService;
model;
copy = false;
removeOnSpill = false;
ngxDroppable;
direction = 'vertical';
drop = new EventEmitter();
drag = new EventEmitter();
over = new EventEmitter();
out = new EventEmitter();
remove = new EventEmitter();
cancel = new EventEmitter();
get container() {
return this.el.nativeElement;
}
get dropZone() {
return this._dropZone || this.ngxDroppable || this.defaultZone;
}
set dropZone(val) {
this._dropZone = val;
}
defaultZone;
_dropZone;
constructor(el, renderer, drakesService) {
this.el = el;
this.renderer = renderer;
this.drakesService = drakesService;
}
ngOnInit() {
this.defaultZone = `@-${getNextId()}@@`;
this.drakesService.register(this);
}
ngAfterViewInit() {
this.over.subscribe(() => {
this.renderer.addClass(this.container, 'gu-over');
});
this.out.subscribe(() => {
this.renderer.removeClass(this.container, 'gu-over');
});
}
ngOnDestroy() {
this.drakesService.remove(this);
}
static ɵfac = function DroppableDirective_Factory(t) { return new (t || DroppableDirective)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.DrakeStoreService)); };
static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: DroppableDirective, selectors: [["", "ngxDroppable", ""]], inputs: { model: "model", copy: "copy", removeOnSpill: "removeOnSpill", ngxDroppable: "ngxDroppable", direction: "direction", dropZone: "dropZone" }, outputs: { drop: "drop", drag: "drag", over: "over", out: "out", remove: "remove", cancel: "cancel" } });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DroppableDirective, [{
type: Directive,
args: [{ selector: '[ngxDroppable]' }]
}], () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.DrakeStoreService }], { model: [{
type: Input
}], copy: [{
type: Input
}], removeOnSpill: [{
type: Input
}], ngxDroppable: [{
type: Input
}], direction: [{
type: Input
}], drop: [{
type: Output
}], drag: [{
type: Output
}], over: [{
type: Output
}], out: [{
type: Output
}], remove: [{
type: Output
}], cancel: [{
type: Output
}], dropZone: [{
type: Input
}] }); })();
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWRyb3BwYWJsZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zd2ltbGFuZS9uZ3gtZG5kL3NyYy9saWIvZGlyZWN0aXZlcy9uZ3gtZHJvcHBhYmxlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFDTCxNQUFNLEVBSU4sVUFBVSxFQUNWLFlBQVksRUFDWixTQUFTLEVBQ1YsTUFBTSxlQUFlLENBQUM7QUFFdkIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0saUNBQWlDLENBQUM7OztBQUVwRSxJQUFJLENBQUMsR0FBRyxLQUFLLENBQUM7QUFDZCxTQUFTLFNBQVM7SUFDaEIsT0FBTyxDQUFDLEVBQUUsQ0FBQztBQUNiLENBQUM7QUFFRDs7OztHQUlHO0FBRUgsTUFBTSxPQUFPLGtCQUFrQjtJQWtDVDtJQUF3QjtJQUE2QjtJQWpDaEUsS0FBSyxDQUFNO0lBQ1gsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUNiLGFBQWEsR0FBRyxLQUFLLENBQUM7SUFDdEIsWUFBWSxDQUFTO0lBQ3JCLFNBQVMsR0FBd0MsVUFBVSxDQUFDO0lBRTNELElBQUksR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVsRCxJQUFJLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFFbEQsSUFBSSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBRWxELEdBQUcsR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUVqRCxNQUFNLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7SUFFcEQsTUFBTSxHQUFzQixJQUFJLFlBQVksRUFBTyxDQUFDO0lBRTlELElBQUksU0FBUztRQUNYLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7SUFDL0IsQ0FBQztJQUVELElBQ0ksUUFBUTtRQUNWLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsWUFBWSxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDakUsQ0FBQztJQUNELElBQUksUUFBUSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxHQUFHLENBQUM7SUFDdkIsQ0FBQztJQUVELFdBQVcsQ0FBUztJQUNwQixTQUFTLENBQVM7SUFFbEIsWUFBb0IsRUFBYyxFQUFVLFFBQW1CLEVBQVUsYUFBZ0M7UUFBckYsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFVLGFBQVEsR0FBUixRQUFRLENBQVc7UUFBVSxrQkFBYSxHQUFiLGFBQWEsQ0FBbUI7SUFBRyxDQUFDO0lBRTdHLFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxHQUFHLHFCQUFxQixTQUFTLEVBQUUsSUFBSSxDQUFDO1FBQ3hELElBQUksQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFFRCxlQUFlO1FBQ2IsSUFBSSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDcEQsQ0FBQyxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsR0FBRyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQztRQUN2RCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs0RUFwRFUsa0JBQWtCOzZEQUFsQixrQkFBa0I7O2lGQUFsQixrQkFBa0I7Y0FEOUIsU0FBUztlQUFDLEVBQUUsUUFBUSxFQUFFLGdCQUFnQixFQUFFO21HQUU5QixLQUFLO2tCQUFiLEtBQUs7WUFDRyxJQUFJO2tCQUFaLEtBQUs7WUFDRyxhQUFhO2tCQUFyQixLQUFLO1lBQ0csWUFBWTtrQkFBcEIsS0FBSztZQUNHLFNBQVM7a0JBQWpCLEtBQUs7WUFFSSxJQUFJO2tCQUFiLE1BQU07WUFFRyxJQUFJO2tCQUFiLE1BQU07WUFFRyxJQUFJO2tCQUFiLE1BQU07WUFFRyxHQUFHO2tCQUFaLE1BQU07WUFFRyxNQUFNO2tCQUFmLE1BQU07WUFFRyxNQUFNO2tCQUFmLE1BQU07WUFPSCxRQUFRO2tCQURYLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBEaXJlY3RpdmUsXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIE9uSW5pdCxcbiAgT25EZXN0cm95LFxuICBBZnRlclZpZXdJbml0LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIFJlbmRlcmVyMlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgRHJha2VTdG9yZVNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy9kcmFrZS1zdG9yZS5zZXJ2aWNlJztcblxubGV0IGkgPSAxMDAwMDtcbmZ1bmN0aW9uIGdldE5leHRJZCgpIHtcbiAgcmV0dXJuIGkrKztcbn1cblxuLyoqXG4gKiBNYWtlcyB0aGUgY29udGFpbmVyIGRyb3BwYWJsZSBhbmQgY2hpbGRyZW4gZHJhZ2dhYmxlLlxuICpcbiAqIEBleHBvcnRcbiAqL1xuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW25neERyb3BwYWJsZV0nIH0pXG5leHBvcnQgY2xhc3MgRHJvcHBhYmxlRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xuICBASW5wdXQoKSBtb2RlbDogYW55O1xuICBASW5wdXQoKSBjb3B5ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHJlbW92ZU9uU3BpbGwgPSBmYWxzZTtcbiAgQElucHV0KCkgbmd4RHJvcHBhYmxlOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGRpcmVjdGlvbjogJ3ZlcnRpY2FsJyB8ICdob3Jpem9udGFsJyB8ICdtaXhlZCcgPSAndmVydGljYWwnO1xuXG4gIEBPdXRwdXQoKSBkcm9wOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIEBPdXRwdXQoKSBkcmFnOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIEBPdXRwdXQoKSBvdmVyOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIEBPdXRwdXQoKSBvdXQ6IEV2ZW50RW1pdHRlcjxhbnk+ID0gbmV3IEV2ZW50RW1pdHRlcjxhbnk+KCk7XG5cbiAgQE91dHB1dCgpIHJlbW92ZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcblxuICBAT3V0cHV0KCkgY2FuY2VsOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIGdldCBjb250YWluZXIoKTogYW55IHtcbiAgICByZXR1cm4gdGhpcy5lbC5uYXRpdmVFbGVtZW50O1xuICB9XG5cbiAgQElucHV0KClcbiAgZ2V0IGRyb3Bab25lKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuX2Ryb3Bab25lIHx8IHRoaXMubmd4RHJvcHBhYmxlIHx8IHRoaXMuZGVmYXVsdFpvbmU7XG4gIH1cbiAgc2V0IGRyb3Bab25lKHZhbDogc3RyaW5nKSB7XG4gICAgdGhpcy5fZHJvcFpvbmUgPSB2YWw7XG4gIH1cblxuICBkZWZhdWx0Wm9uZTogc3RyaW5nO1xuICBfZHJvcFpvbmU6IHN0cmluZztcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlIHJlbmRlcmVyOiBSZW5kZXJlcjIsIHByaXZhdGUgZHJha2VzU2VydmljZTogRHJha2VTdG9yZVNlcnZpY2UpIHt9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5kZWZhdWx0Wm9uZSA9IGBAQERlZmF1bHREcm9wWm9uZS0ke2dldE5leHRJZCgpfUBAYDtcbiAgICB0aGlzLmRyYWtlc1NlcnZpY2UucmVnaXN0ZXIodGhpcyk7XG4gIH1cblxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vdmVyLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMuY29udGFpbmVyLCAnZ3Utb3ZlcicpO1xuICAgIH0pO1xuICAgIHRoaXMub3V0LnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICB0aGlzLnJlbmRlcmVyLnJlbW92ZUNsYXNzKHRoaXMuY29udGFpbmVyLCAnZ3Utb3ZlcicpO1xuICAgIH0pO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5kcmFrZXNTZXJ2aWNlLnJlbW92ZSh0aGlzKTtcbiAgfVxufVxuIl19