ng-reorder
Version:
Sort elements within a list by using drag-n-drop interface without any restrictions by direction
2 lines • 12.2 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("@angular/common"),require("rxjs/operators")):"function"==typeof define&&define.amd?define("ng-reorder",["exports","@angular/core","rxjs","@angular/common","rxjs/operators"],e):e((t=t||self)["ng-reorder"]={},t.ng.core,t.rxjs,t.ng.common,t.rxjs.operators)}(this,(function(t,e,i,n,r){"use strict";var o=function(){function t(t,e){this._document=t,this._zone=e,this.move=new i.Subject,this.up=new i.Subject,this.scroll=new i.Subject,this._globalListeners=new Map}return t.prototype.applyGlobalListeners=function(t){var e=this,i=t.type.startsWith("mouse"),n=i?"mousemove":"touchmove",r=i?"mouseup":"touchend";this._globalListeners.set("scroll",{func:function(t){e.scroll.next(t)},options:!0}).set("selectstart",{func:function(t){t.preventDefault()},options:!1}).set(n,{func:function(t){e.move.next(t),t.preventDefault()},options:{passive:!1}}).set(r,{func:function(t){e.up.next(t)},options:!0}),this._zone.runOutsideAngular((function(){e._globalListeners.forEach((function(t,i){e._document.addEventListener(i,t.func,t.options)}))}))},t.prototype.removeGlobalListeners=function(){var t=this;this._zone.runOutsideAngular((function(){t._globalListeners.forEach((function(e,i){t._document.removeEventListener(i,e.func,e.options)}))}))},t}();o.decorators=[{type:e.Injectable}],o.ctorParameters=function(){return[{type:HTMLElement,decorators:[{type:e.Inject,args:[n.DOCUMENT]}]},{type:e.NgZone}]};Object.create;function s(t){var e="function"==typeof Symbol&&Symbol.iterator,i=e&&t[e],n=0;if(i)return i.call(t);if(t&&"number"==typeof t.length)return{next:function(){return t&&n>=t.length&&(t=void 0),{value:t&&t[n++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function c(t,e){var i="function"==typeof Symbol&&t[Symbol.iterator];if(!i)return t;var n,r,o=i.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(n=o.next()).done;)s.push(n.value)}catch(t){r={error:t}}finally{try{n&&!n.done&&(i=o.return)&&i.call(o)}finally{if(r)throw r.error}}return s}Object.create;function u(t,e,i){if(0!==t.length){if((e=a(e,t.length-1))===(i=a(i,t.length-1))||-1===i||-1===e)return t;for(var n=e<i?1:-1,r=t[e],o=e;o!==i;o+=n)t[o]=t[o+n];return t[i]=r,t}}function a(t,e){return isNaN(t)||null===t?-1:Math.max(0,Math.min(t,e))}function p(){return{x:0,y:0}}function l(t,e){return{x:t.x+e.x,y:t.y+e.y}}function f(t,e){return{x:t.x-e.x,y:t.y-e.y}}function h(t){var e=function(t){return"t"===t.type[0]}(t)?t.targetTouches[0]:t;return{x:e.clientX,y:e.clientY}}var d=new e.InjectionToken("Parent"),y=function(){function t(t,e){this._parent=t,this._host=e}return t.prototype.is=function(t){return this._host.nativeElement===t||this._host.nativeElement.contains(t)},t}();y.decorators=[{type:e.Directive,args:[{selector:"[dragHandle]"}]}],y.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[d]},{type:e.SkipSelf}]},{type:e.ElementRef}]};var v=function(){function t(t,e){this._parent=t,this._host=e}return t.prototype.is=function(t){return this._host.nativeElement===t||this._host.nativeElement.contains(t)},t}();v.decorators=[{type:e.Directive,args:[{selector:"[dragRejector]"}]}],v.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[d]},{type:e.SkipSelf}]},{type:e.ElementRef}]};var _=new e.InjectionToken("Container"),m=function(){function t(t,n,r,o){this.container=t,this.eventService=n,this._host=r,this._zone=o,this.unitTaken=new e.EventEmitter,this.unitReleased=new e.EventEmitter,this.unitMoved=new e.EventEmitter,this._active=!1,this._droppped=!1,this._destroy=new i.Subject,this._moveSubscribtion=i.Subscription.EMPTY,this._upSubscription=i.Subscription.EMPTY,this._scrollSubscription=i.Subscription.EMPTY,this._origin=this._offset=this._scrollOrigin=this._scrollOffset={x:0,y:0}}return Object.defineProperty(t.prototype,"active",{get:function(){return this._active},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"dropped",{get:function(){return this._droppped},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"disabled",{get:function(){return this._disabled},enumerable:!1,configurable:!0}),t.prototype.ngAfterViewInit=function(){var t=this;["mousedown","touchstart"].forEach((function(e){t._host.nativeElement.addEventListener(e,t._pointerDown.bind(t),{passive:!1,capture:!0})}))},t.prototype.ngOnDestroy=function(){this._destroy.next(),this._destroy.complete()},t.prototype.applyTransformation=function(t){0!==t.x||0!==t.y?this._host.nativeElement.style.transform="translate("+t.x+"px, "+t.y+"px)":this._host.nativeElement.style.transform=""},t.prototype.getRect=function(){return this._host.nativeElement.getBoundingClientRect()},t.prototype.reset=function(){this._host.nativeElement.style.transform=null,this._active=!1,this._droppped=!1,this._offset=this._origin=this._scrollOrigin=this._scrollOffset=this._pointerPosition={x:0,y:0}},t.prototype.setOffset=function(t){this._offset=t},t.prototype._animateDroppedElement=function(){var t=this;return new Promise((function(e,i){t._zone.onStable.asObservable().pipe(r.first()).subscribe(e)}))},t.prototype._initDragSequence=function(t){var e=this;this.eventService.applyGlobalListeners(t),this._scrollOrigin={x:document.defaultView.scrollX,y:document.defaultView.scrollY},this._moveSubscribtion=this.eventService.move.pipe(r.takeUntil(this._destroy),r.tap((function(t){e._zone.run((function(){return e._pointerMove(t)}))}))).subscribe(),this._upSubscription=this.eventService.up.pipe(r.takeUntil(this._destroy),r.tap((function(t){e._zone.run((function(){return e._pointerUp(t)}))}))).subscribe(),this._scrollSubscription=this.eventService.scroll.pipe(r.takeUntil(this._destroy),r.tap((function(t){e._zone.run((function(){return e._viewScroll()}))}))).subscribe()},t.prototype._viewScroll=function(){var t=document.defaultView,e={x:t.scrollX,y:t.scrollY};this._scrollOffset=f(e,this._scrollOrigin);var i=l(this._pointerPosition,this._scrollOffset);this.applyTransformation(f(i,this._origin))},t.prototype._startDragSequence=function(t){this.container.disabled||this._disabled||(t.stopPropagation(),this._initDragSequence(t),this._origin=this._pointerPosition=h(t),this._active=!0,this.container.start(this,this._origin),this.unitTaken.emit({unit:this,event:t}))},t.prototype._stopDragSequence=function(){var t=this;this._moveSubscribtion.unsubscribe(),this._upSubscription.unsubscribe(),this._scrollSubscription.unsubscribe();var e=function(t,e,i){var n;void 0===i&&(i=!0);var r=getComputedStyle(t),o=r.transitionProperty.split(","),s=o.find((function(t){return i?t===e||"all"===t:t===e}));if(!s)return 0;var u=o.indexOf(s),a=r.transitionDelay.split(",")[u],p=r.transitionDuration.split(",")[u];return n=c([a,p].map((function(t){var e=-1!==t.toLowerCase().indexOf("ms")?1:1e3;return parseFloat(t)*e})),2),(a=n[0])+n[1]}(this._host.nativeElement,"transform");setTimeout((function(){t.container.stop(t),t.eventService.removeGlobalListeners()}),1.5*e)},t.prototype._pointerDown=function(t){var e=this;if(!this.container.inAction){var i=t.target;this._rejectors.length&&this._rejectors.find((function(t){return t.is(i)}))||this._handles.length&&!this._handles.find((function(t){return t.is(i)}))||this._zone.run((function(){return e._startDragSequence(t)}))}},t.prototype._pointerMove=function(t){this._pointerPosition=h(t);var e=l(this._pointerPosition,this._scrollOffset);this.applyTransformation(f(e,this._origin)),this.container.moveUnitTo(this,e),this.unitMoved.emit({unit:this,distance:f(e,this._origin),event:t})},t.prototype._pointerUp=function(t){this._active=!1,this.applyTransformation(this._offset),this._droppped=!0,this._animateDroppedElement().then(this._stopDragSequence.bind(this)),this.unitReleased.emit({unit:this,event:t})},t}();m.decorators=[{type:e.Directive,args:[{selector:"[dragUnit]",providers:[{provide:d,useExisting:m}],host:{"[class.drag-unit]":"true","[class.active]":"active","[class.dropped]":"dropped","[class.disabled]":"disabled"}}]}],m.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[_]},{type:e.SkipSelf}]},{type:o,decorators:[{type:e.SkipSelf}]},{type:e.ElementRef},{type:e.NgZone}]},m.propDecorators={_disabled:[{type:e.Input,args:["disabled"]}],unitTaken:[{type:e.Output}],unitReleased:[{type:e.Output}],unitMoved:[{type:e.Output}],_handles:[{type:e.ContentChildren,args:[y,{descendants:!0}]}],_rejectors:[{type:e.ContentChildren,args:[v,{descendants:!0}]}]};var g=function(){function t(){this._listOfPositions=null,this._from=null,this._to=null}return t.prototype.cachePosition=function(t){this._listOfPositions.push(this.getPosition(t))},t.prototype.findIndex=function(t){var e,i;try{for(var n=s(this._listOfPositions),r=n.next();!r.done;r=n.next()){var o=r.value,c=t.x>o.rect.left+o.shift.x,u=t.x<o.rect.right+o.shift.x,a=t.y>o.rect.top+o.shift.y,p=t.y<o.rect.bottom+o.shift.y;if(c&&u&&a&&p)return this._listOfPositions.indexOf(o)}}catch(t){e={error:t}}finally{try{r&&!r.done&&(i=n.return)&&i.call(n)}finally{if(e)throw e.error}}return-1},t.prototype.getPosition=function(t){return{unit:t,rect:t.getRect(),shift:{x:0,y:0}}},t.prototype.initService=function(t){this._root=t},t.prototype.cacheAllPositions=function(){var t=this;this._listOfPositions=new Array,this._root.units.forEach((function(e){return t.cachePosition(e)}))},t.prototype.moveUnits=function(t,e){var i=this._listOfPositions,n=i.map((function(t){return t.unit})).indexOf(t),r=this.findIndex(e);if(-1!==n&&-1!==r&&r!==n&&null!==this._from){this._to=r;for(var o=i[r].rect.left+i[r].shift.x,s=i[r].rect.top+i[r].shift.y,c=r>n?-1:1,a=r;a!==n;a+=c){var p=a+c,l={x:i[p].rect.left+i[p].shift.x-(i[a].rect.left+i[a].shift.x),y:i[p].rect.top+i[p].shift.y-(i[a].rect.top+i[a].shift.y)};i[a].shift.x+=l.x,i[a].shift.y+=l.y,i[a].unit.applyTransformation(i[a].shift)}i[n].shift.x=o-i[n].rect.left,i[n].shift.y=s-i[n].rect.top,t.setOffset(i[n].shift),this._listOfPositions=i,this._listOfPositions=u(this._listOfPositions,n,r)}},t.prototype.start=function(t,e,i){this.cacheAllPositions(),this._from=i},t.prototype.stop=function(t){var e=this;return new Promise((function(i){i({collection:e._root,unit:t,previousIndex:e._from,currentIndex:e._to}),e._listOfPositions=null,e._from=null,e._to=null}))},t}();g.decorators=[{type:e.Injectable}],g.ctorParameters=function(){return[]};var b=function(){function t(t,i){this._zone=t,this.sortService=i,this.dropCompleted=new e.EventEmitter,this._activeItem=null}return Object.defineProperty(t.prototype,"inAction",{get:function(){return null!==this._activeItem},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"disabled",{get:function(){return this._disabled},enumerable:!1,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.sortService.initService(this)},t.prototype.clearChildren=function(){var t=this;this._zone.run((function(){t.units.toArray().forEach((function(t){return t.reset()}))}))},t.prototype.moveUnitTo=function(t,e){this.sortService.moveUnits(t,e)},t.prototype.start=function(t,e){var i=this.units.toArray(),n=i.indexOf(t);this.sortService.start(i,e,n),this._activeItem=t},t.prototype.stop=function(t){var e=this;this.clearChildren(),this.sortService.stop(t).then((function(t){null!==t.currentIndex&&e.dropCompleted.emit(t)})),this._activeItem=null},t}();b.decorators=[{type:e.Directive,args:[{selector:"[dragCollection]",providers:[{provide:_,useExisting:b},o,g],host:{"[class.collection]":"true","[class.in-action]":"inAction","[class.disabled]":"disabled"}}]}],b.ctorParameters=function(){return[{type:e.NgZone},{type:g,decorators:[{type:e.Self}]}]},b.propDecorators={_disabled:[{type:e.Input,args:["disabled"]}],dropCompleted:[{type:e.Output}],units:[{type:e.ContentChildren,args:[m]}]};var x=function(){};x.decorators=[{type:e.NgModule,args:[{declarations:[b,m,y,v],imports:[],exports:[b,m,y,v]}]}],t.DragCollectionDirective=b,t.DragHandleDirective=y,t.DragRejectorDirective=v,t.DragUnitDirective=m,t.NgReorderModule=x,t.createPoint=p,t.pointDif=f,t.pointFromPointerEvent=h,t.pointSum=l,t.reorderItems=u,t.ɵa=_,t.ɵc=o,t.ɵd=g,t.ɵe=d,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-reorder.umd.min.js.map