tushar-ng-drag-drop
Version:
Simple drag and drop for angular
195 lines (188 loc) • 11 kB
JavaScript
import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { DndModule } from 'ngx-drag-drop';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DragDropService = /** @class */ (function () {
function DragDropService() {
}
DragDropService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
DragDropService.ctorParameters = function () { return []; };
/** @nocollapse */ DragDropService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DragDropService_Factory() { return new DragDropService(); }, token: DragDropService, providedIn: "root" });
return DragDropService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DragDropComponent = /** @class */ (function () {
function DragDropComponent() {
this.documentList = [];
this.documentTypeList = [];
this.onDraggable = new EventEmitter();
this.onLeftDraggableDrop = new EventEmitter();
this.onRightDraggableDrop = new EventEmitter();
}
/**
* @return {?}
*/
DragDropComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// for(let i=1; i<=5; i++){
// this.documentList.push({ "id": i, "content": 'file_name_'+i+'.pdf', effectAllowed: "copyMove", disable: false, handle: false, show: true });
// this.documentTypeListBK.push({ "id": "doctype_" + i, "content": "", "type": "Label "+i, max: 1, effectAllowed: "move", disable: false, handle: false, empty: true });
// this.documentTypeList.push({ "id": "doctype_" + i, "content": "", "type": "Label "+i, max: 1, effectAllowed: "move", disable: false, handle: false, empty: true });
// }
};
/**
* @param {?} item
* @return {?}
*/
DragDropComponent.prototype.onDraggableStart = /**
* @param {?} item
* @return {?}
*/
function (item) {
this.currentDraggableEvent = item;
this.onDraggable.emit(item);
};
/**
* @param {?} item
* @return {?}
*/
DragDropComponent.prototype.onLeftDraggableCopied = /**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var index = this.documentList.indexOf(item);
this.documentList.splice(index, 1);
};
/**
* @param {?} item
* @return {?}
*/
DragDropComponent.prototype.onRightDraggableCopied = /**
* @param {?} item
* @return {?}
*/
function (item) {
/** @type {?} */
var index = this.documentTypeList.indexOf(item);
this.documentTypeList[index].content = "";
//this.documentAssociationObj[this.employee] = JSON.parse(JSON.stringify(this.documentTypeList));
};
/**
* @param {?} event
* @return {?}
*/
DragDropComponent.prototype.onLeftDrop = /**
* @param {?} event
* @return {?}
*/
function (event) {
/** @type {?} */
var index = JSON.parse(JSON.stringify(event)).index;
if (typeof index === "undefined") {
index = this.documentList.length;
}
/** @type {?} */
var tempObj = JSON.parse(JSON.stringify(this.currentDraggableEvent));
tempObj["content"] = tempObj.content;
tempObj["effectAllowed"] = "move";
tempObj["disable"] = false;
tempObj["handle"] = true;
tempObj["show"] = true;
this.documentList.splice(index, 0, tempObj);
this.onLeftDraggableDrop.emit(this.documentList);
};
/**
* @param {?} event
* @param {?} item
* @return {?}
*/
DragDropComponent.prototype.onRightDrop = /**
* @param {?} event
* @param {?} item
* @return {?}
*/
function (event, item) {
/** @type {?} */
var tempObj = JSON.parse(JSON.stringify(this.currentDraggableEvent));
/** @type {?} */
var index = this.documentTypeList.indexOf(item);
this.documentTypeList[index].content = tempObj.content;
this.onRightDraggableDrop.emit(this.documentTypeList);
//this.documentAssociationObj[this.employee] = JSON.parse(JSON.stringify(this.documentTypeList));
};
DragDropComponent.decorators = [
{ type: Component, args: [{
selector: 'tushar-ng-drag-drop',
template: "\r\n\r\n\r\n<div class=\"row\">\r\n <div class=\"col col-sm-5 ol-xs-12 documentList \">\r\n <ol class=\"list-group scrolling \"\r\n dndDropzone dndEffectAllowed=\"copyMove\"\r\n (dndDrop)=\"onLeftDrop($event)\">\r\n <span *ngFor=\"let draggable of documentList\">\r\n <li [dndEffectAllowed]=\"draggable.effectAllowed\"\r\n [dndDraggable]=\"draggable.data\"\r\n (dndStart)=\"onDraggableStart(draggable)\"\r\n (dndMoved)=\"onLeftDraggableCopied(draggable)\"\r\n class=\"list-group-item\" *ngIf=\"draggable.show\">\r\n <div >{{draggable.content}}</div>\r\n </li>\r\n </span>\r\n <li class=\"dd-placeholder\" style=\"height: 36px;\"\r\n dndPlaceholderRef>\r\n </li>\r\n </ol>\r\n </div>\r\n \r\n <div class=\"col-sm-1 scrolling-without-border text-allign-middle hidden-xs\" >\r\n <i class='fa fa-arrows-h' style='font-size:48px;color:gray; vertical-align: middle;'></i>\r\n </div>\r\n <div class=\"col-sm-1r text-allign-middle visible-xs\" >\r\n <i class='fa fa-arrows-v' style='font-size:48px;color:gray; vertical-align: middle;'></i>\r\n </div>\r\n\r\n <div class=\"col-sm-6\">\r\n <section class=\" col col-sm-12 scrolling documentTypeList\">\r\n <div class=\"form-horizontal\" *ngFor=\"let draggable of documentTypeList\">\r\n <div class=\"form-group\" *ngIf=\"draggable.show\" >\r\n <label *ngIf=\"draggable.type != undefined\" class=\"control-label col-sm-3\" style=\"text-align: left; margin-top: 10px;;\">\r\n {{draggable.type}} : \r\n </label>\r\n <div class=\"col col-sm-{{draggable.type == undefined?12:9}} \">\r\n <ol class=\"\"\r\n dndDropzone class=\"dd-empty dndDragover\"\r\n dndEffectAllowed=\"copyMove\"\r\n [dndDisableIf]=\"draggable.content != ''\"\r\n (dndDrop)=\"onRightDrop($event,draggable)\">\r\n <li [dndEffectAllowed]=\"draggable.effectAllowed\"\r\n [dndDraggable]=\"draggable.data\"\r\n (dndStart)=\"onDraggableStart(draggable)\"\r\n (dndMoved)=\"onRightDraggableCopied(draggable)\"\r\n class=\"dd-item {{draggable.class}}\" *ngIf=\"draggable.content != ''\">\r\n <div class=\"dd-handle\">{{draggable.content}}</div>\r\n </li>\r\n <li class=\"dd-placeholder\"\r\n dndPlaceholderRef></li>\r\n </ol>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </div>\r\n</div>\r\n\r\n\r\n",
styles: [".dd-handle{display:block;font-size:15px;padding:9px 15px;color:#333;text-decoration:none;border:1px solid #cfcfcf;background:#fbfbfb;border-radius:4px}.dd-empty,.dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.dd-empty{min-height:41px!important;background-image:none!important;background-color:#fff!important;border:1px solid #d1d1d1!important;border-radius:4px}.scrolling{height:300px!important;overflow-y:scroll;border:1px solid #d1d1d1!important;margin-top:5px}.scrolling-without-border{height:300px!important;overflow-y:scroll;margin-top:5px}ol li{list-style-type:none}.documentList li{margin:5px}.dd-placeholder{margin:0;padding:0;border-radius:4px;min-height:40px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.documentTypeList .form-group{margin-bottom:0}::-webkit-scrollbar{width:5px}.text-allign-middle{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;text-align:center}"]
}] }
];
/** @nocollapse */
DragDropComponent.ctorParameters = function () { return []; };
DragDropComponent.propDecorators = {
documentList: [{ type: Input }],
documentTypeList: [{ type: Input }],
onDraggable: [{ type: Output }],
onLeftDraggableDrop: [{ type: Output }],
onRightDraggableDrop: [{ type: Output }]
};
return DragDropComponent;
}());
if (false) {
/** @type {?} */
DragDropComponent.prototype.documentList;
/** @type {?} */
DragDropComponent.prototype.documentTypeList;
/** @type {?} */
DragDropComponent.prototype.currentDraggableEvent;
/** @type {?} */
DragDropComponent.prototype.onDraggable;
/** @type {?} */
DragDropComponent.prototype.onLeftDraggableDrop;
/** @type {?} */
DragDropComponent.prototype.onRightDraggableDrop;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DragDropModule = /** @class */ (function () {
function DragDropModule() {
}
DragDropModule.decorators = [
{ type: NgModule, args: [{
declarations: [DragDropComponent],
imports: [
DndModule,
BrowserModule
],
exports: [DragDropComponent]
},] }
];
return DragDropModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { DragDropComponent, DragDropModule, DragDropService };
//# sourceMappingURL=tushar-ng-drag-drop.js.map