diff --git a/bundles/ng2-dnd.js b/bundles/ng2-dnd.js index 0e82913..c63aafd 100644 --- a/bundles/ng2-dnd.js +++ b/bundles/ng2-dnd.js @@ -202,7 +202,15 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", _super.call(this, elemRef, _dragDropService, _config); this._sortableDataService = _sortableDataService; this._sortableData = []; + this.dragEnabled = false; } + Object.defineProperty(SortableContainer.prototype, "draggable", { + set: function(value) { + this.dragEnabled = !!value; + }, + enumerable: true, + configurable: true + }); Object.defineProperty(SortableContainer.prototype, "sortableData", { get: function() { return this._sortableData; @@ -224,11 +232,13 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", SortableContainer.prototype._onDragEnterCallback = function(event) { var item = this._sortableDataService.sortableData[this._sortableDataService.index]; if (this._sortableData.indexOf(item) === -1) { - this._sortableData.push(this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1)); + this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1); + this._sortableData.push(item); this._sortableDataService.sortableData = this._sortableData; this._sortableDataService.index = 0; } }; + __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); @@ -245,6 +255,13 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", this.dragEnabled = true; this.dropEnabled = true; } + Object.defineProperty(SortableComponent.prototype, "draggable", { + set: function(value) { + this.dragEnabled = !!value; + }, + enumerable: true, + configurable: true + }); Object.defineProperty(SortableComponent.prototype, "droppable", { set: function(value) { this.dropEnabled = !!value; @@ -253,6 +270,7 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", configurable: true }); SortableComponent.prototype._onDragStartCallback = function(event) { + console.log('_onDragStartCallback. dragging elem with index ' + this.index); this._sortableDataService.sortableData = this._sortableContainer.sortableData; this._sortableDataService.index = this.index; this._sortableDataService.markSortable(this._elem); @@ -265,6 +283,7 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", } }; SortableComponent.prototype._onDragEndCallback = function(event) { + console.log('_onDragEndCallback. end dragging elem with index ' + this.index); this._sortableDataService.sortableData = null; this._sortableDataService.index = null; this._sortableDataService.markSortable(null); @@ -272,12 +291,15 @@ System.registerDynamic("src/dnd.sortable", ["angular2/core", "./dnd.component", SortableComponent.prototype._onDragEnterCallback = function(event) { this._sortableDataService.markSortable(this._elem); if ((this.index !== this._sortableDataService.index) || (this._sortableDataService.sortableData != this._sortableContainer.sortableData)) { - this._sortableContainer.sortableData.splice(this.index, 0, this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1)); + var item = this._sortableDataService.sortableData[this._sortableDataService.index]; + this._sortableDataService.sortableData.splice(this._sortableDataService.index, 1); + this._sortableContainer.sortableData.splice(this.index, 0, item); this._sortableDataService.sortableData = this._sortableContainer.sortableData; this._sortableDataService.index = this.index; } }; __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); 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); return SortableComponent; diff --git a/bundles/ng2-dnd.min.js b/bundles/ng2-dnd.min.js index 64ec9d6..00c5856 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.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)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback&&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.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=[]}return a(t,e),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._sortableData.push(this._sortableDataService.sortableData.splice(this._sortableDataService.index,1)),this._sortableDataService.sortableData=this._sortableData,this._sortableDataService.index=0)},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.dropZones=this._sortableContainer.dropZones,this.dragEnabled=!0,this.dropEnabled=!0}return a(t,e),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)},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))},t.prototype._onDragEndCallback=function(e){this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null)},t.prototype._onDragEnterCallback=function(e){this._sortableDataService.markSortable(this._elem),this.index===this._sortableDataService.index&&this._sortableDataService.sortableData==this._sortableContainer.sortableData||(this._sortableContainer.sortableData.splice(this.index,0,this._sortableDataService.sortableData.splice(this._sortableDataService.index,1)),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index)},o([i.Input("sortableIndex"),n("design:type",Number)],t.prototype,"index",void 0),o([i.Input("dropEnabled"),n("design:type",Boolean),n("design:paramtypes",[Boolean])],t.prototype,"droppable",null),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/html",""),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;eo?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},i=e("angular2/core"),s=e("./dnd.component"),l=e("./dnd.config"),c=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)},n([i.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([i.Input(),o("design:type",Object)],t.prototype,"dragData",void 0),n([i.Output("onDragSuccess"),o("design:type",i.EventEmitter)],t.prototype,"onDragSuccessCallback",void 0),n([i.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=n([i.Directive({selector:"[dnd-draggable]"}),o("design:paramtypes",[i.ElementRef,c.DragDropService,l.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)},n=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=3>o?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},i=e("angular2/core"),s=e("./dnd.component"),l=e("./dnd.config"),c=e("./dnd.service"),d=function(e){function t(t,r,a){e.call(this,t,r,a),this.onDropSuccessCallback=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)},t.prototype._onDragOverCallback=function(e){this._elem.classList.add(this._config.onDragOverClass)},t.prototype._onDragLeaveCallback=function(e){this._elem.classList.remove(this._config.onDragOverClass),this._elem.classList.remove(this._config.onDragEnterClass)},t.prototype._onDropCallback=function(e){this.onDropSuccessCallback&&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)},n([i.Input("dropEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"droppable",null),n([i.Output("onDropSuccess"),o("design:type",i.EventEmitter)],t.prototype,"onDropSuccessCallback",void 0),n([i.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=n([i.Directive({selector:"[dnd-droppable]"}),o("design:paramtypes",[i.ElementRef,c.DragDropService,l.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)},n=this&&this.__decorate||function(e,t,r,a){var n,o=arguments.length,i=3>o?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},i=e("angular2/core"),s=e("./dnd.component"),l=e("./dnd.config"),c=e("./dnd.service"),d=function(e){function t(t,r,a,n){e.call(this,t,r,a),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)},n([i.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([i.Input(),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"sortableData",null),n([i.Input("dropZones"),o("design:type",Array),o("design:paramtypes",[Array])],t.prototype,"dropzones",null),t=n([i.Directive({selector:"[dnd-sortable-container]"}),o("design:paramtypes",[i.ElementRef,c.DragDropService,l.DragDropConfig,c.DragDropSortableService])],t)}(s.AbstractComponent);t.SortableContainer=d;var p=function(e){function t(t,r,a,n,o){e.call(this,t,r,a),this._sortableContainer=n,this._sortableDataService=o,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){console.log("_onDragStartCallback. dragging elem with index "+this.index),this._sortableDataService.sortableData=this._sortableContainer.sortableData,this._sortableDataService.index=this.index,this._sortableDataService.markSortable(this._elem)},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))},t.prototype._onDragEndCallback=function(e){console.log("_onDragEndCallback. end dragging elem with index "+this.index),this._sortableDataService.sortableData=null,this._sortableDataService.index=null,this._sortableDataService.markSortable(null)},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}},n([i.Input("sortableIndex"),o("design:type",Number)],t.prototype,"index",void 0),n([i.Input("dragEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"draggable",null),n([i.Input("dropEnabled"),o("design:type",Boolean),o("design:paramtypes",[Boolean])],t.prototype,"droppable",null),t=n([i.Directive({selector:"[dnd-sortable]"}),o("design:paramtypes",[i.ElementRef,c.DragDropService,l.DragDropConfig,d,c.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 n,o=arguments.length,i=3>o?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},o=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([o.Injectable(),n("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([o.Injectable(),n("design:paramtypes",[HTMLElement,Number,Number])],e)}();t.DragImage=s;var l=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([o.Injectable(),n("design:paramtypes",[])],e)}();return t.DragDropConfig=l,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 n,o=arguments.length,i=3>o?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},o=e("angular2/core"),i=e("angular2/src/facade/lang"),s=e("./dnd.config"),l=function(){function e(){this.allowedDropZones=[]}return e=a([o.Injectable(),n("design:paramtypes",[])],e)}();t.DragDropService=l;var c=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([o.Injectable(),n("design:paramtypes",[s.DragDropConfig])],e)}();return t.DragDropSortableService=c,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 n,o=arguments.length,i=3>o?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--)(n=e[s])&&(i=(3>o?n(i):o>3?n(t,r,i):n(t,r))||i);return o>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},o=e("angular2/core"),i=e("angular2/core"),s=e("./dnd.config"),l=e("./dnd.service"),c=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/html",""),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;e = []; @Input() set sortableData(sortableData: Array) { @@ -32,6 +36,7 @@ export class SortableContainer extends AbstractComponent { constructor(elemRef: ElementRef, _dragDropService: DragDropService, _config:DragDropConfig, private _sortableDataService: DragDropSortableService) { super(elemRef, _dragDropService, _config); + this.dragEnabled = false; } _onDragEnterCallback(event: Event) { @@ -54,6 +59,10 @@ export class SortableContainer extends AbstractComponent { export class SortableComponent extends AbstractComponent { @Input('sortableIndex') index: number; + + @Input("dragEnabled") set draggable(value:boolean) { + this.dragEnabled = !!value; + } @Input("dropEnabled") set droppable(value:boolean) { this.dropEnabled = !!value; @@ -84,6 +93,7 @@ export class SortableComponent extends AbstractComponent { } _onDragEndCallback(event: Event) { + // console.log('_onDragEndCallback. end dragging elem with index ' + this.index); this._sortableDataService.sortableData = null; this._sortableDataService.index = null; this._sortableDataService.markSortable(null);