ng-image-drag-drop
Version:
Drag & Drop for Angular - based on HTML5 with no external dependencies.
237 lines • 10.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Droppable = void 0;
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var core_1 = require("@angular/core");
var drop_event_model_1 = require("../shared/drop-event.model");
var ng_drag_drop_service_1 = require("../services/ng-drag-drop.service");
var dom_helper_1 = require("../shared/dom-helper");
var i0 = require("@angular/core");
var i1 = require("../services/ng-drag-drop.service");
var Droppable = exports.Droppable = /** @class */ (function () {
function Droppable(el, renderer, ng2DragDropService, zone) {
this.el = el;
this.renderer = renderer;
this.ng2DragDropService = ng2DragDropService;
this.zone = zone;
/**
* Event fired when Drag dragged element enters a valid drop target.
*/
this.onDragEnter = new core_1.EventEmitter();
/**
* Event fired when an element is being dragged over a valid drop target
*/
this.onDragOver = new core_1.EventEmitter();
/**
* Event fired when a dragged element leaves a valid drop target.
*/
this.onDragLeave = new core_1.EventEmitter();
/**
* Event fired when an element is dropped on a valid drop target.
*/
this.onDrop = new core_1.EventEmitter();
/**
* CSS class that is applied when a compatible draggable is being dragged over this droppable.
*/
this.dragOverClass = 'drag-over-border';
/**
* CSS class applied on this droppable when a compatible draggable item is being dragged.
* This can be used to visually show allowed drop zones.
*/
this.dragHintClass = 'drag-hint-border';
/**
* Defines compatible drag drop pairs. Values must match both in draggable and droppable.dropScope.
*/
this.dropScope = 'default';
/**
* @private
* Backing field for the dropEnabled property
*/
this._dropEnabled = true;
/**
* @private
* Field for tracking drag state. Helps when
* drag stop event occurs before the allowDrop()
* can be calculated (async).
*/
this._isDragActive = false;
/**
* @private
* Field for tracking if service is subscribed.
* Avoids creating multiple subscriptions of service.
*/
this._isServiceActive = false;
}
Object.defineProperty(Droppable.prototype, "dropEnabled", {
get: function () {
return this._dropEnabled;
},
/**
* Defines if drop is enabled. `true` by default.
*/
set: function (value) {
this._dropEnabled = value;
if (this._dropEnabled === true) {
this.subscribeService();
}
else {
this.unsubscribeService();
}
},
enumerable: false,
configurable: true
});
;
Droppable.prototype.ngOnInit = function () {
if (this.dropEnabled === true) {
this.subscribeService();
}
};
Droppable.prototype.ngOnDestroy = function () {
this.unsubscribeService();
this.unbindDragListeners();
};
Droppable.prototype.dragEnter = function (e) {
e.preventDefault();
e.stopPropagation();
this.onDragEnter.emit(e);
};
Droppable.prototype.dragOver = function (e, result) {
if (result) {
dom_helper_1.DomHelper.addClass(this.el, this.dragOverClass);
e.preventDefault();
this.onDragOver.emit(e);
}
};
Droppable.prototype.dragLeave = function (e) {
dom_helper_1.DomHelper.removeClass(this.el, this.dragOverClass);
e.preventDefault();
this.onDragLeave.emit(e);
};
Droppable.prototype.drop = function (e) {
var _this = this;
this.allowDrop().subscribe(function (result) {
if (result && _this._isDragActive) {
dom_helper_1.DomHelper.removeClass(_this.el, _this.dragOverClass);
e.preventDefault();
e.stopPropagation();
_this.ng2DragDropService.onDragEnd.next(false);
_this.onDrop.emit(new drop_event_model_1.DropEvent(e, _this.ng2DragDropService.dragData));
_this.ng2DragDropService.dragData = null;
_this.ng2DragDropService.scope = null;
}
});
};
Droppable.prototype.allowDrop = function () {
var _this = this;
var allowed = false;
/* tslint:disable:curly */
/* tslint:disable:one-line */
if (typeof this.dropScope === 'string') {
if (typeof this.ng2DragDropService.scope === 'string')
allowed = this.ng2DragDropService.scope === this.dropScope;
else if (this.ng2DragDropService.scope instanceof Array)
allowed = this.ng2DragDropService.scope.indexOf(this.dropScope) > -1;
}
else if (this.dropScope instanceof Array) {
if (typeof this.ng2DragDropService.scope === 'string')
allowed = this.dropScope.indexOf(this.ng2DragDropService.scope) > -1;
else if (this.ng2DragDropService.scope instanceof Array)
allowed = this.dropScope.filter(function (item) {
return _this.ng2DragDropService.scope.indexOf(item) !== -1;
}).length > 0;
}
else if (typeof this.dropScope === 'function') {
allowed = this.dropScope(this.ng2DragDropService.dragData);
if (allowed instanceof rxjs_1.Observable) {
return allowed.pipe((0, operators_1.map)(function (result) { return result && _this.dropEnabled; }));
}
}
/* tslint:enable:curly */
/* tslint:disable:one-line */
return (0, rxjs_1.of)(allowed && this.dropEnabled);
};
Droppable.prototype.subscribeService = function () {
var _this = this;
if (this._isServiceActive === true) {
return;
}
this._isServiceActive = true;
this.dragStartSubscription = this.ng2DragDropService.onDragStart.subscribe(function () {
_this._isDragActive = true;
_this.allowDrop().subscribe(function (result) {
if (result && _this._isDragActive) {
dom_helper_1.DomHelper.addClass(_this.el, _this.dragHintClass);
_this.zone.runOutsideAngular(function () {
_this.unbindDragEnterListener = _this.renderer.listen(_this.el.nativeElement, 'dragenter', function (dragEvent) {
_this.dragEnter(dragEvent);
});
_this.unbindDragOverListener = _this.renderer.listen(_this.el.nativeElement, 'dragover', function (dragEvent) {
_this.dragOver(dragEvent, result);
});
_this.unbindDragLeaveListener = _this.renderer.listen(_this.el.nativeElement, 'dragleave', function (dragEvent) {
_this.dragLeave(dragEvent);
});
});
}
});
});
this.dragEndSubscription = this.ng2DragDropService.onDragEnd.subscribe(function () {
_this._isDragActive = false;
dom_helper_1.DomHelper.removeClass(_this.el, _this.dragHintClass);
_this.unbindDragListeners();
});
};
Droppable.prototype.unsubscribeService = function () {
this._isServiceActive = false;
if (this.dragStartSubscription) {
this.dragStartSubscription.unsubscribe();
}
if (this.dragEndSubscription) {
this.dragEndSubscription.unsubscribe();
}
};
Droppable.prototype.unbindDragListeners = function () {
if (this.unbindDragEnterListener) {
this.unbindDragEnterListener();
}
if (this.unbindDragOverListener) {
this.unbindDragOverListener();
}
if (this.unbindDragLeaveListener) {
this.unbindDragLeaveListener();
}
};
Droppable.ɵfac = function Droppable_Factory(t) { return new (t || Droppable)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.NgDragDropService), i0.ɵɵdirectiveInject(i0.NgZone)); };
Droppable.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Droppable, selectors: [["", "droppable", ""]], hostBindings: function Droppable_HostBindings(rf, ctx) { if (rf & 1) {
i0.ɵɵlistener("drop", function Droppable_drop_HostBindingHandler($event) { return ctx.drop($event); });
} }, inputs: { dragOverClass: "dragOverClass", dragHintClass: "dragHintClass", dropScope: "dropScope", dropEnabled: "dropEnabled" }, outputs: { onDragEnter: "onDragEnter", onDragOver: "onDragOver", onDragLeave: "onDragLeave", onDrop: "onDrop" } });
return Droppable;
}());
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Droppable, [{
type: core_1.Directive,
args: [{
selector: '[droppable]'
}]
}], function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.NgDragDropService }, { type: i0.NgZone }]; }, { onDragEnter: [{
type: core_1.Output
}], onDragOver: [{
type: core_1.Output
}], onDragLeave: [{
type: core_1.Output
}], onDrop: [{
type: core_1.Output
}], dragOverClass: [{
type: core_1.Input
}], dragHintClass: [{
type: core_1.Input
}], dropScope: [{
type: core_1.Input
}], dropEnabled: [{
type: core_1.Input
}], drop: [{
type: core_1.HostListener,
args: ['drop', ['$event']]
}] }); })();
//# sourceMappingURL=droppable.directive.js.map