diff --git a/bundles/ng2-dnd.js b/bundles/ng2-dnd.js index 864ce2b..76f063c 100644 --- a/bundles/ng2-dnd.js +++ b/bundles/ng2-dnd.js @@ -29,14 +29,15 @@ System.registerDynamic("src/dnd.draggable", ["angular2/core", "./dnd.component", return Reflect.metadata(k, v); }; var core_1 = $__require('angular2/core'); + var core_2 = $__require('angular2/core'); var dnd_component_1 = $__require('./dnd.component'); var dnd_config_1 = $__require('./dnd.config'); var dnd_service_1 = $__require('./dnd.service'); var DraggableComponent = (function(_super) { __extends(DraggableComponent, _super); - function DraggableComponent(elemRef, _dragDropService, _config) { - _super.call(this, elemRef, _dragDropService, _config); - this.onDragSuccessCallback = new core_1.EventEmitter(); + function DraggableComponent(elemRef, dragDropService, config, cdr) { + _super.call(this, elemRef, dragDropService, config, cdr); + this.onDragSuccessCallback = new core_2.EventEmitter(); this._defaultCursor = this._elem.style.cursor; this.dragEnabled = true; } @@ -64,11 +65,11 @@ System.registerDynamic("src/dnd.draggable", ["angular2/core", "./dnd.component", this._dragDropService.onDragSuccessCallback = null; this._elem.classList.remove(this._config.onDragStartClass); }; - __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null); - __decorate([core_1.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0); - __decorate([core_1.Output("onDragSuccess"), __metadata('design:type', core_1.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0); - __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null); - DraggableComponent = __decorate([core_1.Directive({selector: '[dnd-draggable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], DraggableComponent); + __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DraggableComponent.prototype, "draggable", null); + __decorate([core_2.Input(), __metadata('design:type', Object)], DraggableComponent.prototype, "dragData", void 0); + __decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], DraggableComponent.prototype, "onDragSuccessCallback", void 0); + __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DraggableComponent.prototype, "dropzones", null); + DraggableComponent = __decorate([core_2.Directive({selector: '[dnd-draggable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DraggableComponent); return DraggableComponent; })(dnd_component_1.AbstractComponent); exports.DraggableComponent = DraggableComponent; @@ -106,17 +107,18 @@ System.registerDynamic("src/dnd.droppable", ["angular2/core", "./dnd.component", return Reflect.metadata(k, v); }; var core_1 = $__require('angular2/core'); + var core_2 = $__require('angular2/core'); var dnd_component_1 = $__require('./dnd.component'); var dnd_config_1 = $__require('./dnd.config'); var dnd_service_1 = $__require('./dnd.service'); var DroppableComponent = (function(_super) { __extends(DroppableComponent, _super); - function DroppableComponent(elemRef, _dragDropService, _config) { - _super.call(this, elemRef, _dragDropService, _config); - this.onDropSuccessCallback = new core_1.EventEmitter(); - this.onDragEnterCallback = new core_1.EventEmitter(); - this.onDragOverCallback = new core_1.EventEmitter(); - this.onDragLeaveCallback = new core_1.EventEmitter(); + function DroppableComponent(elemRef, dragDropService, config, cdr) { + _super.call(this, elemRef, dragDropService, config, cdr); + this.onDropSuccessCallback = new core_2.EventEmitter(); + this.onDragEnterCallback = new core_2.EventEmitter(); + this.onDragOverCallback = new core_2.EventEmitter(); + this.onDragLeaveCallback = new core_2.EventEmitter(); this.dropEnabled = true; } Object.defineProperty(DroppableComponent.prototype, "droppable", { @@ -156,13 +158,13 @@ System.registerDynamic("src/dnd.droppable", ["angular2/core", "./dnd.component", this._elem.classList.remove(this._config.onDragOverClass); this._elem.classList.remove(this._config.onDragEnterClass); }; - __decorate([core_1.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null); - __decorate([core_1.Output("onDropSuccess"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDropSuccessCallback", void 0); - __decorate([core_1.Output("onDragEnter"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragEnterCallback", void 0); - __decorate([core_1.Output("onDragOver"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragOverCallback", void 0); - __decorate([core_1.Output("onDragLeave"), __metadata('design:type', core_1.EventEmitter)], DroppableComponent.prototype, "onDragLeaveCallback", void 0); - __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null); - DroppableComponent = __decorate([core_1.Directive({selector: '[dnd-droppable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], DroppableComponent); + __decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], DroppableComponent.prototype, "droppable", null); + __decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDropSuccessCallback", void 0); + __decorate([core_2.Output("onDragEnter"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragEnterCallback", void 0); + __decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragOverCallback", void 0); + __decorate([core_2.Output("onDragLeave"), __metadata('design:type', core_2.EventEmitter)], DroppableComponent.prototype, "onDragLeaveCallback", void 0); + __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], DroppableComponent.prototype, "dropzones", null); + DroppableComponent = __decorate([core_2.Directive({selector: '[dnd-droppable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], DroppableComponent); return DroppableComponent; })(dnd_component_1.AbstractComponent); exports.DroppableComponent = DroppableComponent; @@ -200,13 +202,14 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", return Reflect.metadata(k, v); }; var core_1 = $__require('angular2/core'); + var core_2 = $__require('angular2/core'); var dnd_component_1 = $__require('./dnd.component'); var dnd_config_1 = $__require('./dnd.config'); var dnd_service_1 = $__require('./dnd.service'); var SortableContainer = (function(_super) { __extends(SortableContainer, _super); - function SortableContainer(elemRef, _dragDropService, _config, _sortableDataService) { - _super.call(this, elemRef, _dragDropService, _config); + function SortableContainer(elemRef, dragDropService, config, cdr, _sortableDataService) { + _super.call(this, elemRef, dragDropService, config, cdr); this._sortableDataService = _sortableDataService; this._sortableData = []; this.dragEnabled = false; @@ -244,25 +247,26 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", this._sortableDataService.sortableData = this._sortableData; this._sortableDataService.index = 0; } + this.detectChanges(); }; - __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null); - __decorate([core_1.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null); - __decorate([core_1.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null); - SortableContainer = __decorate([core_1.Directive({selector: '[dnd-sortable-container]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, dnd_service_1.DragDropSortableService])], SortableContainer); + __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableContainer.prototype, "draggable", null); + __decorate([core_2.Input(), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "sortableData", null); + __decorate([core_2.Input("dropZones"), __metadata('design:type', Array), __metadata('design:paramtypes', [Array])], SortableContainer.prototype, "dropzones", null); + SortableContainer = __decorate([core_2.Directive({selector: '[dnd-sortable-container]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef, dnd_service_1.DragDropSortableService])], SortableContainer); return SortableContainer; })(dnd_component_1.AbstractComponent); exports.SortableContainer = SortableContainer; var SortableComponent = (function(_super) { __extends(SortableComponent, _super); - function SortableComponent(elemRef, _dragDropService, _config, _sortableContainer, _sortableDataService) { - _super.call(this, elemRef, _dragDropService, _config); + function SortableComponent(elemRef, dragDropService, config, _sortableContainer, _sortableDataService, cdr) { + _super.call(this, elemRef, dragDropService, config, cdr); this._sortableContainer = _sortableContainer; this._sortableDataService = _sortableDataService; - this.onDragSuccessCallback = new core_1.EventEmitter(); - this.onDragStartCallback = new core_1.EventEmitter(); - this.onDragOverCallback = new core_1.EventEmitter(); - this.onDragEndCallback = new core_1.EventEmitter(); - this.onDropSuccessCallback = new core_1.EventEmitter(); + this.onDragSuccessCallback = new core_2.EventEmitter(); + this.onDragStartCallback = new core_2.EventEmitter(); + this.onDragOverCallback = new core_2.EventEmitter(); + this.onDragEndCallback = new core_2.EventEmitter(); + this.onDropSuccessCallback = new core_2.EventEmitter(); this.dropZones = this._sortableContainer.dropZones; this.dragEnabled = true; this.dropEnabled = true; @@ -319,17 +323,18 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", if (this._dragDropService.onDragSuccessCallback) { this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData); } + this._sortableContainer.detectChanges(); }; - __decorate([core_1.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0); - __decorate([core_1.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null); - __decorate([core_1.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null); - __decorate([core_1.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0); - __decorate([core_1.Output("onDragSuccess"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0); - __decorate([core_1.Output("onDragStart"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0); - __decorate([core_1.Output("onDragOver"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0); - __decorate([core_1.Output("onDragEnd"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0); - __decorate([core_1.Output("onDropSuccess"), __metadata('design:type', core_1.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0); - SortableComponent = __decorate([core_1.Directive({selector: '[dnd-sortable]'}), __metadata('design:paramtypes', [core_1.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService])], SortableComponent); + __decorate([core_2.Input('sortableIndex'), __metadata('design:type', Number)], SortableComponent.prototype, "index", void 0); + __decorate([core_2.Input("dragEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "draggable", null); + __decorate([core_2.Input("dropEnabled"), __metadata('design:type', Boolean), __metadata('design:paramtypes', [Boolean])], SortableComponent.prototype, "droppable", null); + __decorate([core_2.Input(), __metadata('design:type', Object)], SortableComponent.prototype, "dragData", void 0); + __decorate([core_2.Output("onDragSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragSuccessCallback", void 0); + __decorate([core_2.Output("onDragStart"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragStartCallback", void 0); + __decorate([core_2.Output("onDragOver"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragOverCallback", void 0); + __decorate([core_2.Output("onDragEnd"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDragEndCallback", void 0); + __decorate([core_2.Output("onDropSuccess"), __metadata('design:type', core_2.EventEmitter)], SortableComponent.prototype, "onDropSuccessCallback", void 0); + SortableComponent = __decorate([core_2.Directive({selector: '[dnd-sortable]'}), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, SortableContainer, dnd_service_1.DragDropSortableService, core_1.ChangeDetectorRef])], SortableComponent); return SortableComponent; })(dnd_component_1.AbstractComponent); exports.SortableComponent = SortableComponent; @@ -488,10 +493,11 @@ System.registerDynamic("src/dnd.component", ["angular2/core", "./dnd.config", ". var dnd_config_1 = $__require('./dnd.config'); var dnd_service_1 = $__require('./dnd.service'); var AbstractComponent = (function() { - function AbstractComponent(elemRef, _dragDropService, _config) { + function AbstractComponent(elemRef, _dragDropService, _config, _cdr) { var _this = this; this._dragDropService = _dragDropService; this._config = _config; + this._cdr = _cdr; this._dragEnabled = false; this.dropEnabled = false; this.dropZones = []; @@ -505,6 +511,7 @@ System.registerDynamic("src/dnd.component", ["angular2/core", "./dnd.config", ". if (event.dataTransfer != null) { event.dataTransfer.dropEffect = _this._config.dropEffect.name; } + return false; }; this._elem.ondragleave = function(event) { _this._onDragLeave(event); @@ -526,12 +533,6 @@ System.registerDynamic("src/dnd.component", ["angular2/core", "./dnd.config", ". this._elem.ondragend = function(event) { _this._onDragEnd(event); }; - this._elem.ontouchstart = function(event) { - _this._onDragStart(event); - }; - this._elem.ontouchend = function(event) { - _this._onDragEnd(event); - }; } Object.defineProperty(AbstractComponent.prototype, "dragEnabled", { get: function() { @@ -547,28 +548,40 @@ System.registerDynamic("src/dnd.component", ["angular2/core", "./dnd.config", ". enumerable: true, configurable: true }); + AbstractComponent.prototype.detectChanges = function() { + var _this = this; + setTimeout(function() { + _this._cdr.detectChanges(); + }, 250); + }; AbstractComponent.prototype._onDragEnter = function(event) { if (this._isDropAllowed) { - event.preventDefault(); this._onDragEnterCallback(event); } }; AbstractComponent.prototype._onDragOver = function(event) { if (this._isDropAllowed) { - event.preventDefault(); + if (event.preventDefault) { + event.preventDefault(); + } this._onDragOverCallback(event); } }; AbstractComponent.prototype._onDragLeave = function(event) { if (this._isDropAllowed) { - event.preventDefault(); this._onDragLeaveCallback(event); } }; AbstractComponent.prototype._onDrop = function(event) { if (this._isDropAllowed) { - event.preventDefault(); + if (event.preventDefault) { + event.preventDefault(); + } + if (event.stopPropagation) { + event.stopPropagation(); + } this._onDropCallback(event); + this.detectChanges(); } }; Object.defineProperty(AbstractComponent.prototype, "_isDropAllowed", { @@ -605,7 +618,7 @@ System.registerDynamic("src/dnd.component", ["angular2/core", "./dnd.config", ". AbstractComponent.prototype._onDropCallback = function(event) {}; AbstractComponent.prototype._onDragStartCallback = function(event) {}; AbstractComponent.prototype._onDragEndCallback = function(event) {}; - AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig])], AbstractComponent); + AbstractComponent = __decorate([core_1.Injectable(), __metadata('design:paramtypes', [core_2.ElementRef, dnd_service_1.DragDropService, dnd_config_1.DragDropConfig, core_1.ChangeDetectorRef])], AbstractComponent); return AbstractComponent; })(); exports.AbstractComponent = AbstractComponent; diff --git a/bundles/ng2-dnd.min.js b/bundles/ng2-dnd.min.js index 3a18c72..0fd79f4 100644 --- a/bundles/ng2-dnd.min.js +++ b/bundles/ng2-dnd.min.js @@ -1,2 +1,2 @@ -System.registerDynamic("src/dnd.draggable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a){e.call(this,t,r,a),this.onDragSuccessCallback=new i.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass)},t.prototype._onDragEndCallback=function(e){this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass)},o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([i.Output("onDragSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig])],t)}(s.AbstractComponent);return t.DraggableComponent=d,r.exports}),System.registerDynamic("src/dnd.droppable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a){e.call(this,t,r,a),this.onDropSuccessCallback=new i.EventEmitter,this.onDragEnterCallback=new i.EventEmitter,this.onDragOverCallback=new i.EventEmitter,this.onDragLeaveCallback=new i.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnterCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass),this.onDragOverCallback.emit(this._dragDropService.dragData)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeaveCallback.emit(this._dragDropService.dragData)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},o([i.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([i.Output("onDropSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),o([i.Output("onDragEnter"),n("design:type",i.EventEmitter)],t.prototype,"onDragEnterCallback",void 0),o([i.Output("onDragOver"),n("design:type",i.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([i.Output("onDragLeave"),n("design:type",i.EventEmitter)],t.prototype,"onDragLeaveCallback",void 0),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-droppable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig])],t)}(s.AbstractComponent);return t.DroppableComponent=d,r.exports}),System.registerDynamic("src/dnd.sortable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("./dnd.component"),c=e("./dnd.config"),l=e("./dnd.service"),d=function(e){function t(t,r,a,o){e.call(this,t,r,a),this._sortableDataService=o,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){var t=this._sortableDataService.sortableData[this._sortableDataService.index];-1===this._sortableData.indexOf(t)&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.push(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0)},o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input(),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"sortableData",null),o([i.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([i.Directive({selector:"[dnd-sortable-container]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig,l.DragDropSortableService])],t)}(s.AbstractComponent);t.SortableContainer=d;var p=function(e){function t(t,r,a,o,n){e.call(this,t,r,a),this._sortableContainer=o,this._sortableDataService=n,this.onDragSuccessCallback=new i.EventEmitter,this.onDragStartCallback=new i.EventEmitter,this.onDragOverCallback=new i.EventEmitter,this.onDragEndCallback=new i.EventEmitter,this.onDropSuccessCallback=new i.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback},t.prototype._onDragOverCallback=function(e){this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData)},o([i.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([i.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([i.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([i.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([i.Output("onDragSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([i.Output("onDragStart"),n("design:type",i.EventEmitter)],t.prototype,"onDragStartCallback",void 0),o([i.Output("onDragOver"),n("design:type",i.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([i.Output("onDragEnd"),n("design:type",i.EventEmitter)],t.prototype,"onDragEndCallback",void 0),o([i.Output("onDropSuccess"),n("design:type",i.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=o([i.Directive({selector:"[dnd-sortable]"}),n("design:paramtypes",[i.ElementRef,l.DragDropService,c.DragDropConfig,d,l.DragDropSortableService])],t)}(s.AbstractComponent);return t.SortableComponent=p,r.exports}),System.registerDynamic("src/dnd.config",["angular2/core"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([n.Injectable(),o("design:paramtypes",[String])],e)}();t.DataTransferEffect=i;var s=function(){function e(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r}return e=a([n.Injectable(),o("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var c=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=i.MOVE,this.dropEffect=i.MOVE,this.dragCursor="move"}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();return t.DragDropConfig=c,r.exports}),System.registerDynamic("src/dnd.service",["angular2/core","angular2/src/facade/lang","./dnd.config"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/src/facade/lang"),s=e("./dnd.config"),c=function(){function e(){this.allowedDropZones=[]}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){i.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),i.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([n.Injectable(),o("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.component",["angular2/core","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=function(){function e(e,t,r){var a=this;this._dragDropService=t,this._config=r,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this.dragEnabled=!0,this._elem.ondragenter=function(e){a._onDragEnter(e)},this._elem.ondragover=function(e){a._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=a._config.dropEffect.name)},this._elem.ondragleave=function(e){a._onDragLeave(e)},this._elem.ondrop=function(e){a._onDrop(e)},this._elem.ondragstart=function(e){if(a._onDragStart(e),null!=e.dataTransfer&&(e.dataTransfer.effectAllowed=a._config.dragEffect.name,e.dataTransfer.setData("text",""),null!=a._config.dragImage)){var t=a._config.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}},this._elem.ondragend=function(e){a._onDragEnd(e)},this._elem.ontouchstart=function(e){a._onDragStart(e)},this._elem.ontouchend=function(e){a._onDragEnd(e)}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled,null!=this._config.dragCursor&&(this._elem.style.cursor=this._dragEnabled?this._config.dragCursor:this._defaultCursor)},enumerable:!0,configurable:!0}),e.prototype._onDragEnter=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragEnterCallback(e))},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDragLeaveCallback(e))},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault(),this._onDropCallback(e))},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this.dropEnabled){if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;en?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDragSuccessCallback=new s.EventEmitter,this._defaultCursor=this._elem.style.cursor,this.dragEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback,this._elem.classList.add(this._config.onDragStartClass)},t.prototype._onDragEndCallback=function(e){this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this._elem.classList.remove(this._config.onDragStartClass)},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-draggable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DraggableComponent=p,r.exports}),System.registerDynamic("src/dnd.droppable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o){e.call(this,t,r,a,o),this.onDropSuccessCallback=new s.EventEmitter,this.onDragEnterCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragLeaveCallback=new s.EventEmitter,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){this._elem.classList.add(this._config.onDragEnterClass),this.onDragEnterCallback.emit(this._dragDropService.dragData)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass),this.onDragOverCallback.emit(this._dragDropService.dragData)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass),this.onDragLeaveCallback.emit(this._dragDropService.dragData)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Output("onDropSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),o([s.Output("onDragEnter"),n("design:type",s.EventEmitter)],t.prototype,"onDragEnterCallback",void 0),o([s.Output("onDragOver"),n("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([s.Output("onDragLeave"),n("design:type",s.EventEmitter)],t.prototype,"onDragLeaveCallback",void 0),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-droppable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.DroppableComponent=p,r.exports}),System.registerDynamic("src/dnd.sortable",["angular2/core","./dnd.component","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__extends||function(e,t){function r(){this.constructor=e}for(var a in t)t.hasOwnProperty(a)&&(e[a]=t[a]);e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)},o=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},n=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},i=e("angular2/core"),s=e("angular2/core"),c=e("./dnd.component"),l=e("./dnd.config"),d=e("./dnd.service"),p=function(e){function t(t,r,a,o,n){e.call(this,t,r,a,o),this._sortableDataService=n,this._sortableData=[],this.dragEnabled=!1}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"sortableData",{get:function(){return this._sortableData},set:function(e){this._sortableData=e,this.dropEnabled=0===this._sortableData.length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dropzones",{set:function(e){this.dropZones=e},enumerable:!0,configurable:!0}),t.prototype._onDragEnterCallback=function(e){var t=this._sortableDataService.sortableData[this._sortableDataService.index];-1===this._sortableData.indexOf(t)&&(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableData.push(t),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0),this.detectChanges()},o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input(),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"sortableData",null),o([s.Input("dropZones"),n("design:type",Array),n("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=o([s.Directive({selector:"[dnd-sortable-container]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,i.ChangeDetectorRef,d.DragDropSortableService])],t)}(c.AbstractComponent);t.SortableContainer=p;var g=function(e){function t(t,r,a,o,n,i){e.call(this,t,r,a,i),this._sortableContainer=o,this._sortableDataService=n,this.onDragSuccessCallback=new s.EventEmitter,this.onDragStartCallback=new s.EventEmitter,this.onDragOverCallback=new s.EventEmitter,this.onDragEndCallback=new s.EventEmitter,this.onDropSuccessCallback=new s.EventEmitter,this.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),Object.defineProperty(t.prototype,"draggable",{set:function(e){this.dragEnabled=!!e},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"droppable",{set:function(e){this.dropEnabled=!!e},enumerable:!0,configurable:!0}),t.prototype._onDragStartCallback=function(e){this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this._dragDropService.dragData=this.dragData,this._dragDropService.onDragSuccessCallback=this.onDragSuccessCallback},t.prototype._onDragOverCallback=function(e){this._elem!=this._sortableDataService.elem&&(this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem),this.onDragOverCallback.emit(this._dragDropService.dragData))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null),this._dragDropService.dragData=null,this._dragDropService.onDragSuccessCallback=null,this.onDragEndCallback.emit(this._dragDropService.dragData)},t.prototype._onDragEnterCallback=function(e){if(this._sortableDataService.markSortable(this._elem),this.index!==this._sortableDataService.index||this._sortableDataService.sortableData!=this._sortableContainer.sortableData){var t=this._sortableDataService.sortableData[this._sortableDataService.index];this._sortableDataService.sortableData.splice(this._sortableDataService.index,1),this._sortableContainer.sortableData.splice(this.index,0,t),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index}},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback.emit(this._dragDropService.dragData),this._dragDropService.onDragSuccessCallback&&this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData),this._sortableContainer.detectChanges()},o([s.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([s.Input("dragEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"draggable",null),o([s.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),o([s.Input(),n("design:type",Object)],t.prototype,"dragData",void 0),o([s.Output("onDragSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),o([s.Output("onDragStart"),n("design:type",s.EventEmitter)],t.prototype,"onDragStartCallback",void 0),o([s.Output("onDragOver"),n("design:type",s.EventEmitter)],t.prototype,"onDragOverCallback",void 0),o([s.Output("onDragEnd"),n("design:type",s.EventEmitter)],t.prototype,"onDragEndCallback",void 0),o([s.Output("onDropSuccess"),n("design:type",s.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),t=o([s.Directive({selector:"[dnd-sortable]"}),n("design:paramtypes",[s.ElementRef,d.DragDropService,l.DragDropConfig,p,d.DragDropSortableService,i.ChangeDetectorRef])],t)}(c.AbstractComponent);return t.SortableComponent=g,r.exports}),System.registerDynamic("src/dnd.config",["angular2/core"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=function(){function e(e){this.name=e}return e.COPY=new e("copy"),e.LINK=new e("link"),e.MOVE=new e("move"),e.NONE=new e("none"),e=a([n.Injectable(),o("design:paramtypes",[String])],e)}();t.DataTransferEffect=i;var s=function(){function e(e,t,r){void 0===t&&(t=0),void 0===r&&(r=0),this.imageElement=e,this.x_offset=t,this.y_offset=r}return e=a([n.Injectable(),o("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var c=function(){function e(){this.onDragStartClass="dnd-drag-start",this.onDragEnterClass="dnd-drag-enter",this.onDragOverClass="dnd-drag-over",this.onSortableDragClass="dnd-sortable-drag",this.dragEffect=i.MOVE,this.dropEffect=i.MOVE,this.dragCursor="move"}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();return t.DragDropConfig=c,r.exports}),System.registerDynamic("src/dnd.service",["angular2/core","angular2/src/facade/lang","./dnd.config"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/src/facade/lang"),s=e("./dnd.config"),c=function(){function e(){this.allowedDropZones=[]}return e=a([n.Injectable(),o("design:paramtypes",[])],e)}();t.DragDropService=c;var l=function(){function e(e){this._config=e}return Object.defineProperty(e.prototype,"elem",{get:function(){return this._elem},enumerable:!0,configurable:!0}),e.prototype.markSortable=function(e){i.isPresent(this._elem)&&this._elem.classList.remove(this._config.onSortableDragClass),i.isPresent(e)&&(this._elem=e,this._elem.classList.add(this._config.onSortableDragClass))},e=a([n.Injectable(),o("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=l,r.exports}),System.registerDynamic("src/dnd.component",["angular2/core","./dnd.config","./dnd.service"],!0,function(e,t,r){var a=this&&this.__decorate||function(e,t,r,a){var o,n=arguments.length,i=3>n?t:null===a?a=Object.getOwnPropertyDescriptor(t,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,a);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(i=(3>n?o(i):n>3?o(t,r,i):o(t,r))||i);return n>3&&i&&Object.defineProperty(t,r,i),i},o=this&&this.__metadata||function(e,t){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(e,t):void 0},n=e("angular2/core"),i=e("angular2/core"),s=e("./dnd.config"),c=e("./dnd.service"),l=function(){function e(e,t,r,a){var o=this;this._dragDropService=t,this._config=r,this._cdr=a,this._dragEnabled=!1,this.dropEnabled=!1,this.dropZones=[],this._elem=e.nativeElement,this.dragEnabled=!0,this._elem.ondragenter=function(e){o._onDragEnter(e)},this._elem.ondragover=function(e){return o._onDragOver(e),null!=e.dataTransfer&&(e.dataTransfer.dropEffect=o._config.dropEffect.name),!1},this._elem.ondragleave=function(e){o._onDragLeave(e)},this._elem.ondrop=function(e){o._onDrop(e)},this._elem.ondragstart=function(e){if(o._onDragStart(e),null!=e.dataTransfer&&(e.dataTransfer.effectAllowed=o._config.dragEffect.name,e.dataTransfer.setData("text",""),null!=o._config.dragImage)){var t=o._config.dragImage;e.dataTransfer.setDragImage(t.imageElement,t.x_offset,t.y_offset)}},this._elem.ondragend=function(e){o._onDragEnd(e)}}return Object.defineProperty(e.prototype,"dragEnabled",{get:function(){return this._dragEnabled},set:function(e){this._dragEnabled=!!e,this._elem.draggable=this._dragEnabled,null!=this._config.dragCursor&&(this._elem.style.cursor=this._dragEnabled?this._config.dragCursor:this._defaultCursor)},enumerable:!0,configurable:!0}),e.prototype.detectChanges=function(){var e=this;setTimeout(function(){e._cdr.detectChanges()},250)},e.prototype._onDragEnter=function(e){this._isDropAllowed&&this._onDragEnterCallback(e)},e.prototype._onDragOver=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),this._onDragOverCallback(e))},e.prototype._onDragLeave=function(e){this._isDropAllowed&&this._onDragLeaveCallback(e)},e.prototype._onDrop=function(e){this._isDropAllowed&&(e.preventDefault&&e.preventDefault(),e.stopPropagation&&e.stopPropagation(),this._onDropCallback(e),this.detectChanges())},Object.defineProperty(e.prototype,"_isDropAllowed",{get:function(){if(this.dropEnabled){if(0===this.dropZones.length&&0===this._dragDropService.allowedDropZones.length)return!0;for(var e=0;e { this._onDragLeave(event); @@ -78,37 +82,49 @@ export abstract class AbstractComponent { let dragImage: DragImage = this._config.dragImage; (event.dataTransfer).setDragImage(dragImage.imageElement, dragImage.x_offset, dragImage.y_offset); } - - // // console.log('ondragstart.dataTransfer', event.dataTransfer); } }; this._elem.ondragend = (event: Event) => { // console.log('ondragend', event.target); this._onDragEnd(event); }; - this._elem.ontouchstart = (event: Event) => { - // console.log('ontouchstart', event.target); - this._onDragStart(event); - }; - this._elem.ontouchend = (event: Event) => { - // console.log('ontouchend', event.target); - this._onDragEnd(event); - }; + // this._elem.ontouchstart = (event: Event) => { + // // console.log('ontouchstart', event.target); + // this._onDragStart(event); + // }; + // this._elem.ontouchend = (event: Event) => { + // // console.log('ontouchend', event.target); + // this._onDragEnd(event); + // }; + } + + /******* Change detection ******/ + + detectChanges() { + // Programmatically run change detection to fix issue in Safari + setTimeout(() => { + this._cdr.detectChanges(); + }, 250); } //****** Droppable *******// private _onDragEnter(event: Event): void { // console.log('ondragenter._isDropAllowed', this._isDropAllowed); if (this._isDropAllowed) { - event.preventDefault(); + // event.preventDefault(); this._onDragEnterCallback(event); } } - private _onDragOver(event: Event): void { + private _onDragOver(event: Event) { // // console.log('ondragover._isDropAllowed', this._isDropAllowed); if (this._isDropAllowed) { - event.preventDefault(); + // The element is over the same source element - do nothing + if (event.preventDefault) { + // Necessary. Allows us to drop. + event.preventDefault(); + } + this._onDragOverCallback(event); } } @@ -116,7 +132,7 @@ export abstract class AbstractComponent { private _onDragLeave(event: Event): void { // console.log('ondragleave._isDropAllowed', this._isDropAllowed); if (this._isDropAllowed) { - event.preventDefault(); + // event.preventDefault(); this._onDragLeaveCallback(event); } } @@ -124,8 +140,19 @@ export abstract class AbstractComponent { private _onDrop(event: Event): void { // console.log('ondrop._isDropAllowed', this._isDropAllowed); if (this._isDropAllowed) { - event.preventDefault(); + if (event.preventDefault) { + // Necessary. Allows us to drop. + event.preventDefault(); + } + + if (event.stopPropagation) { + // Necessary. Allows us to drop. + event.stopPropagation(); + } + this._onDropCallback(event); + + this.detectChanges(); } } @@ -134,8 +161,8 @@ export abstract class AbstractComponent { if (this.dropZones.length === 0 && this._dragDropService.allowedDropZones.length === 0) { return true; } - for (let i:number = 0; i < this._dragDropService.allowedDropZones.length; i++) { - let dragZone:string = this._dragDropService.allowedDropZones[i]; + for (let i: number = 0; i < this._dragDropService.allowedDropZones.length; i++) { + let dragZone: string = this._dragDropService.allowedDropZones[i]; if (this.dropZones.indexOf(dragZone) !== -1) { return true; } @@ -162,12 +189,12 @@ export abstract class AbstractComponent { } //**** Drop Callbacks ****// - _onDragEnterCallback(event: Event) {} - _onDragOverCallback(event: Event) {} - _onDragLeaveCallback(event: Event) {} - _onDropCallback(event: Event) {} - + _onDragEnterCallback(event: Event) { } + _onDragOverCallback(event: Event) { } + _onDragLeaveCallback(event: Event) { } + _onDropCallback(event: Event) { } + //**** Drag Callbacks ****// - _onDragStartCallback(event: Event) {} - _onDragEndCallback(event: Event) {} + _onDragStartCallback(event: Event) { } + _onDragEndCallback(event: Event) { } } diff --git a/src/dnd.draggable.ts b/src/dnd.draggable.ts index 9493d3f..b80d3d8 100644 --- a/src/dnd.draggable.ts +++ b/src/dnd.draggable.ts @@ -2,7 +2,7 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-dnd -import {Injectable} from 'angular2/core'; +import {Injectable, ChangeDetectorRef} from 'angular2/core'; import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core'; import {AbstractComponent} from './dnd.component'; @@ -31,8 +31,10 @@ export class DraggableComponent extends AbstractComponent { this.dropZones = value; } - constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig) { - super(elemRef, _dragDropService, _config); + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, + cdr:ChangeDetectorRef) { + + super(elemRef, dragDropService, config, cdr); this._defaultCursor = this._elem.style.cursor; this.dragEnabled = true; } diff --git a/src/dnd.droppable.ts b/src/dnd.droppable.ts index 99e401f..d098239 100644 --- a/src/dnd.droppable.ts +++ b/src/dnd.droppable.ts @@ -2,7 +2,7 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-dnd -import {Injectable} from 'angular2/core'; +import {Injectable, ChangeDetectorRef} from 'angular2/core'; import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core'; import {AbstractComponent} from './dnd.component'; @@ -30,8 +30,10 @@ export class DroppableComponent extends AbstractComponent { this.dropZones = value; } - constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig) { - super(elemRef, _dragDropService, _config); + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, + cdr:ChangeDetectorRef) { + + super(elemRef, dragDropService, config, cdr); this.dropEnabled = true; } diff --git a/src/dnd.sortable.ts b/src/dnd.sortable.ts index dffb974..6514a5e 100644 --- a/src/dnd.sortable.ts +++ b/src/dnd.sortable.ts @@ -2,7 +2,7 @@ // This project is licensed under the terms of the MIT license. // https://github.com/akserg/ng2-dnd -import {Injectable} from 'angular2/core'; +import {Injectable, ChangeDetectorRef} from 'angular2/core'; import {Directive, Input, Output, EventEmitter, ElementRef} from 'angular2/core'; import {AbstractComponent} from './dnd.component'; @@ -34,8 +34,10 @@ export class SortableContainer extends AbstractComponent { this.dropZones = value; } - constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig, private _sortableDataService: DragDropSortableService) { - super(elemRef, _dragDropService, _config); + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, cdr:ChangeDetectorRef, + private _sortableDataService: DragDropSortableService) { + + super(elemRef, dragDropService, config, cdr); this.dragEnabled = false; } @@ -52,6 +54,8 @@ export class SortableContainer extends AbstractComponent { this._sortableDataService.sortableData = this._sortableData; this._sortableDataService.index = 0; } + // Refresh changes in properties of container component + this.detectChanges(); } } @@ -84,8 +88,12 @@ export class SortableComponent extends AbstractComponent { @Output("onDragEnd") onDragEndCallback: EventEmitter = new EventEmitter(); @Output("onDropSuccess") onDropSuccessCallback: EventEmitter = new EventEmitter(); - constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig, private _sortableContainer: SortableContainer, private _sortableDataService: DragDropSortableService) { - super(elemRef, _dragDropService, _config); + constructor(elemRef: ElementRef, dragDropService: DragDropService, config:DragDropConfig, + private _sortableContainer: SortableContainer, + private _sortableDataService: DragDropSortableService, + cdr:ChangeDetectorRef) { + + super(elemRef, dragDropService, config, cdr); this.dropZones = this._sortableContainer.dropZones; this.dragEnabled = true; @@ -149,5 +157,7 @@ export class SortableComponent extends AbstractComponent { // console.log('onDropCallback.onDragSuccessCallback.dragData', this._dragDropService.dragData); this._dragDropService.onDragSuccessCallback.emit(this._dragDropService.dragData); } + // Refresh changes in properties of container component + this._sortableContainer.detectChanges(); } }