ngx-tree-dnd
Version:
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
195 lines • 11.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/*
Copyright (C) 2018 Yaroslav Kikot
This project is licensed under the terms of the MIT license.
https://github.com/Zicrael/ngx-tree-dnd
*/
import { Directive, ElementRef, HostListener, Input, Output, EventEmitter } from '@angular/core';
import { NgxTreeService } from '../ngx-tree-dnd.service';
var DropElementsDirective = /** @class */ (function () {
function DropElementsDirective(el, treeService) {
this.el = el;
this.treeService = treeService;
this.drop = new EventEmitter();
}
/*
Event: onallowdrop;
Call onDragOver() from tree service.
Emit onAllowDrop on tree service.
*/
/*
Event: onallowdrop;
Call onDragOver() from tree service.
Emit onAllowDrop on tree service.
*/
/**
* @param {?} event
* @return {?}
*/
DropElementsDirective.prototype.onDragOver = /*
Event: onallowdrop;
Call onDragOver() from tree service.
Emit onAllowDrop on tree service.
*/
/**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var eventObj = {
event: event,
target: this.item
};
this.treeService.onDragOver(eventObj);
event.preventDefault();
};
/*
Event: ondrop;
Call onDropItem() from tree service.
Emit OnDrop on tree service.
*/
/*
Event: ondrop;
Call onDropItem() from tree service.
Emit OnDrop on tree service.
*/
/**
* @param {?} event
* @return {?}
*/
DropElementsDirective.prototype.onDrop = /*
Event: ondrop;
Call onDropItem() from tree service.
Emit OnDrop on tree service.
*/
/**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var dragItem = this.treeService.isDragging;
/** @type {?} */
var eventObj = {
event: event,
target: this.item
};
dragItem.options.hideChildrens = this.treeService.lastExpandState;
dragItem.options.currentlyDragging = false;
if (dragItem !== eventObj.target) {
this.treeService.onDropItem(eventObj);
}
event.preventDefault();
};
/*s
Event: ondragenter;
Detect event where draggable element enter in drop zone.
Call enterDropZone() from tree service.
Emit onDragEnter.
*/
/*s
Event: ondragenter;
Detect event where draggable element enter in drop zone.
Call enterDropZone() from tree service.
Emit onDragEnter.
*/
/**
* @param {?} event
* @return {?}
*/
DropElementsDirective.prototype.onDragEnter = /*s
Event: ondragenter;
Detect event where draggable element enter in drop zone.
Call enterDropZone() from tree service.
Emit onDragEnter.
*/
/**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var eventObj = {
event: event,
target: this.item
};
this.treeService.enterDropZone(eventObj);
};
/*
Event: ondragleave;
Detect event where draggable element leave drop zone.
Call leaveDropZone() from tree service.
Emit onDragLeave.
*/
/*
Event: ondragleave;
Detect event where draggable element leave drop zone.
Call leaveDropZone() from tree service.
Emit onDragLeave.
*/
/**
* @param {?} event
* @return {?}
*/
DropElementsDirective.prototype.onDragLeave = /*
Event: ondragleave;
Detect event where draggable element leave drop zone.
Call leaveDropZone() from tree service.
Emit onDragLeave.
*/
/**
* @param {?} event
* @return {?}
*/
function (event) {
// emit events
/** @type {?} */
var eventObj = {
event: event,
target: this.item
};
// code
this.treeService.leaveDropZone(eventObj);
};
DropElementsDirective.decorators = [
{ type: Directive, args: [{
selector: '[libDropElement]'
},] },
];
/** @nocollapse */
DropElementsDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NgxTreeService }
]; };
DropElementsDirective.propDecorators = {
item: [{ type: Input }],
drop: [{ type: Output }],
onDragOver: [{ type: HostListener, args: ['dragover', ['$event'],] }],
onDrop: [{ type: HostListener, args: ['drop', ['$event'],] }],
onDragEnter: [{ type: HostListener, args: ['dragenter', ['$event'],] }],
onDragLeave: [{ type: HostListener, args: ['dragleave', ['$event'],] }]
};
return DropElementsDirective;
}());
export { DropElementsDirective };
if (false) {
/** @type {?} */
DropElementsDirective.prototype.item;
/** @type {?} */
DropElementsDirective.prototype.drop;
/**
* @type {?}
* @private
*/
DropElementsDirective.prototype.el;
/**
* @type {?}
* @private
*/
DropElementsDirective.prototype.treeService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRyZWUtZG5kLWRyb3AuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXRyZWUtZG5kLyIsInNvdXJjZXMiOlsibGliL2RpcmVjdGl2ZXMvbmd4LXRyZWUtZG5kLWRyb3AuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUtBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQWUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUU5RyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDekQ7SUFJSSwrQkFBb0IsRUFBYyxFQUFXLFdBQTJCO1FBQXBELE9BQUUsR0FBRixFQUFFLENBQVk7UUFBVyxnQkFBVyxHQUFYLFdBQVcsQ0FBZ0I7UUFFOUQsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7SUFGdUMsQ0FBQztJQUk1RTs7OztNQUlFOzs7Ozs7Ozs7O0lBRUYsMENBQVU7Ozs7Ozs7OztJQURWLFVBQ1csS0FBWTs7WUFDYixRQUFRLEdBQUc7WUFDYixLQUFLLE9BQUE7WUFDTCxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUk7U0FDcEI7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN0QyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUNEOzs7O01BSUU7Ozs7Ozs7Ozs7SUFFRixzQ0FBTTs7Ozs7Ozs7O0lBRE4sVUFDTyxLQUFZOztZQUNULFFBQVEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVU7O1lBQ3RDLFFBQVEsR0FBRztZQUNiLEtBQUssT0FBQTtZQUNMLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSTtTQUNwQjtRQUNELFFBQVEsQ0FBQyxPQUFPLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsZUFBZSxDQUFDO1FBQ2xFLFFBQVEsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEdBQUcsS0FBSyxDQUFDO1FBQzNDLElBQUksUUFBUSxLQUFLLFFBQVEsQ0FBQyxNQUFNLEVBQUU7WUFDOUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxVQUFVLENBQUMsUUFBUSxDQUFDLENBQUM7U0FDekM7UUFDRCxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVEOzs7OztNQUtFOzs7Ozs7Ozs7OztJQUVGLDJDQUFXOzs7Ozs7Ozs7O0lBRFgsVUFDWSxLQUFZOztZQUNkLFFBQVEsR0FBRztZQUNqQixLQUFLLE9BQUE7WUFDTCxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUk7U0FDaEI7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUM3QyxDQUFDO0lBRUQ7Ozs7O01BS0U7Ozs7Ozs7Ozs7O0lBRUYsMkNBQVc7Ozs7Ozs7Ozs7SUFEWCxVQUNZLEtBQVk7OztZQUVkLFFBQVEsR0FBRztZQUNqQixLQUFLLE9BQUE7WUFDTCxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUk7U0FDaEI7UUFDRCxPQUFPO1FBQ1AsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDN0MsQ0FBQzs7Z0JBeEVKLFNBQVMsU0FBQztvQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2lCQUM3Qjs7OztnQkFMbUIsVUFBVTtnQkFFckIsY0FBYzs7O3VCQU1sQixLQUFLO3VCQUNMLE1BQU07NkJBT04sWUFBWSxTQUFDLFVBQVUsRUFBRSxDQUFDLFFBQVEsQ0FBQzt5QkFjbkMsWUFBWSxTQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQzs4QkFxQi9CLFlBQVksU0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7OEJBZXBDLFlBQVksU0FBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUM7O0lBVXpDLDRCQUFDO0NBQUEsQUF6RUQsSUF5RUM7U0F0RVkscUJBQXFCOzs7SUFFOUIscUNBQXlCOztJQUN6QixxQ0FBb0M7Ozs7O0lBRnhCLG1DQUFzQjs7Ozs7SUFBRSw0Q0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuIENvcHlyaWdodCAoQykgMjAxOCBZYXJvc2xhdiBLaWtvdFxuIFRoaXMgcHJvamVjdCBpcyBsaWNlbnNlZCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIE1JVCBsaWNlbnNlLlxuIGh0dHBzOi8vZ2l0aHViLmNvbS9aaWNyYWVsL25neC10cmVlLWRuZFxuKi9cbmltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgSG9zdEJpbmRpbmcsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUcmVlTW9kZWwgfSBmcm9tICcuLi9tb2RlbHMvdHJlZS12aWV3Lm1vZGVsJztcbmltcG9ydCB7IE5neFRyZWVTZXJ2aWNlIH0gZnJvbSAnLi4vbmd4LXRyZWUtZG5kLnNlcnZpY2UnO1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2xpYkRyb3BFbGVtZW50XSdcbn0pXG5leHBvcnQgY2xhc3MgRHJvcEVsZW1lbnRzRGlyZWN0aXZlIHtcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsOiBFbGVtZW50UmVmLCBwcml2YXRlICB0cmVlU2VydmljZTogTmd4VHJlZVNlcnZpY2UpIHt9XG4gICAgQElucHV0KCkgaXRlbTogVHJlZU1vZGVsO1xuICAgIEBPdXRwdXQoKSBkcm9wID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gICAgLypcbiAgICAgICAgRXZlbnQ6IG9uYWxsb3dkcm9wO1xuICAgICAgICBDYWxsIG9uRHJhZ092ZXIoKSBmcm9tIHRyZWUgc2VydmljZS5cbiAgICAgICAgRW1pdCBvbkFsbG93RHJvcCBvbiB0cmVlIHNlcnZpY2UuXG4gICAgKi9cbiAgICBASG9zdExpc3RlbmVyKCdkcmFnb3ZlcicsIFsnJGV2ZW50J10pXG4gICAgb25EcmFnT3ZlcihldmVudDogRXZlbnQpIHtcbiAgICAgICAgY29uc3QgZXZlbnRPYmogPSB7XG4gICAgICAgICAgICBldmVudCxcbiAgICAgICAgICAgIHRhcmdldDogdGhpcy5pdGVtXG4gICAgICAgIH07XG4gICAgICAgIHRoaXMudHJlZVNlcnZpY2Uub25EcmFnT3ZlcihldmVudE9iaik7XG4gICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgfVxuICAgIC8qXG4gICAgICAgIEV2ZW50OiBvbmRyb3A7XG4gICAgICAgIENhbGwgb25Ecm9wSXRlbSgpIGZyb20gdHJlZSBzZXJ2aWNlLlxuICAgICAgICBFbWl0IE9uRHJvcCBvbiB0cmVlIHNlcnZpY2UuXG4gICAgKi9cbiAgICBASG9zdExpc3RlbmVyKCdkcm9wJywgWyckZXZlbnQnXSlcbiAgICBvbkRyb3AoZXZlbnQ6IEV2ZW50KSB7XG4gICAgICAgIGNvbnN0IGRyYWdJdGVtID0gdGhpcy50cmVlU2VydmljZS5pc0RyYWdnaW5nO1xuICAgICAgICBjb25zdCBldmVudE9iaiA9IHtcbiAgICAgICAgICAgIGV2ZW50LFxuICAgICAgICAgICAgdGFyZ2V0OiB0aGlzLml0ZW1cbiAgICAgICAgfTtcbiAgICAgICAgZHJhZ0l0ZW0ub3B0aW9ucy5oaWRlQ2hpbGRyZW5zID0gdGhpcy50cmVlU2VydmljZS5sYXN0RXhwYW5kU3RhdGU7XG4gICAgICAgIGRyYWdJdGVtLm9wdGlvbnMuY3VycmVudGx5RHJhZ2dpbmcgPSBmYWxzZTtcbiAgICAgICAgaWYgKGRyYWdJdGVtICE9PSBldmVudE9iai50YXJnZXQpIHtcbiAgICAgICAgICAgIHRoaXMudHJlZVNlcnZpY2Uub25Ecm9wSXRlbShldmVudE9iaik7XG4gICAgICAgIH1cbiAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICB9XG5cbiAgICAvKnNcbiAgICBFdmVudDogb25kcmFnZW50ZXI7XG4gICAgRGV0ZWN0IGV2ZW50IHdoZXJlIGRyYWdnYWJsZSBlbGVtZW50IGVudGVyIGluIGRyb3Agem9uZS5cbiAgICBDYWxsIGVudGVyRHJvcFpvbmUoKSBmcm9tIHRyZWUgc2VydmljZS5cbiAgICBFbWl0IG9uRHJhZ0VudGVyLlxuICAgICovXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZ2VudGVyJywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdFbnRlcihldmVudDogRXZlbnQpIHtcbiAgICAgICAgY29uc3QgZXZlbnRPYmogPSB7XG4gICAgICAgIGV2ZW50LFxuICAgICAgICB0YXJnZXQ6IHRoaXMuaXRlbVxuICAgICAgICB9O1xuICAgICAgICB0aGlzLnRyZWVTZXJ2aWNlLmVudGVyRHJvcFpvbmUoZXZlbnRPYmopO1xuICAgIH1cblxuICAgIC8qXG4gICAgICAgIEV2ZW50OiBvbmRyYWdsZWF2ZTtcbiAgICAgICAgRGV0ZWN0IGV2ZW50IHdoZXJlIGRyYWdnYWJsZSBlbGVtZW50IGxlYXZlIGRyb3Agem9uZS5cbiAgICAgICAgQ2FsbCBsZWF2ZURyb3Bab25lKCkgZnJvbSB0cmVlIHNlcnZpY2UuXG4gICAgICAgIEVtaXQgb25EcmFnTGVhdmUuXG4gICAgKi9cbiAgICBASG9zdExpc3RlbmVyKCdkcmFnbGVhdmUnLCBbJyRldmVudCddKVxuICAgIG9uRHJhZ0xlYXZlKGV2ZW50OiBFdmVudCkge1xuICAgICAgICAvLyBlbWl0IGV2ZW50c1xuICAgICAgICBjb25zdCBldmVudE9iaiA9IHtcbiAgICAgICAgZXZlbnQsXG4gICAgICAgIHRhcmdldDogdGhpcy5pdGVtXG4gICAgICAgIH07XG4gICAgICAgIC8vIGNvZGVcbiAgICAgICAgdGhpcy50cmVlU2VydmljZS5sZWF2ZURyb3Bab25lKGV2ZW50T2JqKTtcbiAgICB9XG59XG4iXX0=