UNPKG

@ciri/ngx-carousel

Version:
17 lines (15 loc) 10.9 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("rxjs/internal/scheduler/animationFrame"),require("@angular/platform-browser"),require("resize-observer-polyfill"),require("@angular/common"),require("hammerjs")):"function"==typeof define&&define.amd?define("@ciri/ngx-carousel",["exports","@angular/core","rxjs","rxjs/operators","rxjs/internal/scheduler/animationFrame","@angular/platform-browser","resize-observer-polyfill","@angular/common","hammerjs"],e):e(((t=t||self).ciri=t.ciri||{},t.ciri["ngx-carousel"]={}),t.ng.core,t.rxjs,t.rxjs.operators,t.rxjs["internal/scheduler/animationFrame"],t.ng.platformBrowser,t.ResizeObserver,t.ng.common)}(this,(function(t,e,n,r,i,o,s,a){"use strict";s=s&&s.hasOwnProperty("default")?s.default:s; /*! ***************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ var c=function(t,e){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var p=function(){function t(t){this.content=t}return t.decorators=[{type:e.Directive,args:[{selector:"[lazyRender]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();function u(t,e,n){return Math.min(Math.max(t,e),n)}function l(t,e,n){return t>=e&&t<=n}var h=new e.InjectionToken("CarouselToken"),d=function(){function t(t,e,r,i){this.elRef=t,this.cdr=e,this.sanitizer=r,this.parent=i,this.rendered=!1,this.destroy$=new n.Subject}return Object.defineProperty(t.prototype,"isLazyRender",{get:function(){return!!this.lazyContent},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"shouldRender",{get:function(){return!this.isLazyRender||this.rendered},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){var t=this,e=this.parent,n=e.active$,i=e.cache,o=e.lazyRenderOffset;n.pipe(r.takeUntil(this.destroy$)).subscribe((function(e){t.rendered=i&&t.rendered||l(t.index,e-o,e+o),t.cdr.markForCheck()}))},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.decorators=[{type:e.Component,args:[{selector:"ngx-carousel-item",template:'<ng-container *ngIf="shouldRender" [ngTemplateOutlet]="lazyContent && lazyContent.content">\n <ng-content></ng-content>\n</ng-container>\n',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush,host:{"[class.ngx-carousel__item]":"true"},styles:[".ngx-carousel__item{display:inline-block;vertical-align:top}.ngx-carousel__item.pre-mirror-node{position:absolute;left:0;transform:translateX(-100%)}.ngx-carousel__item.post-mirror-node{position:absolute;right:0;transform:translateX(100%)}"]}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.ChangeDetectorRef},{type:o.DomSanitizer},{type:void 0,decorators:[{type:e.Inject,args:[h]}]}]},t.propDecorators={lazyContent:[{type:e.ContentChild,args:[p,{static:!1}]}]},t}();var f=function(){function t(t,r,i){this.renderer=t,this.hostElRef=r,this.cdr=i,this.loop=!1,this.speed=300,this.autoplay=0,this.followFinger=!0,this.allowTouchMove=!0,this.initialIndex=0,this.lazyRenderOffset=0,this.cache=!1,this.indexChange=new e.EventEmitter,this.active$=new n.BehaviorSubject(null),this.destroy$=new n.Subject,this.percent=0,this.offset=0,this.animating=!1}return Object.defineProperty(t.prototype,"active",{get:function(){return this.active$.value},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"count",{get:function(){return(this.items||[]).length},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"viewport",{get:function(){return this.hostElRef.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"width",{get:function(){return this.viewport.offsetWidth},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"canMove",{get:function(){return this.allowTouchMove&&!this.animating},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"data",{get:function(){return{active:this.active,count:this.count,offset:this.offset,animating:this.animating,atFirst:0===this.active,atLast:this.active===this.count-1}},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngAfterViewInit=function(){var t=this;this.items.changes.pipe(r.takeUntil(this.destroy$),r.startWith(null),r.debounceTime(0,i.animationFrame)).subscribe((function(){t.init()})),this.active$.pipe(r.takeUntil(this.destroy$),r.skip(1),r.filter((function(e){return null!==e&&l(e,0,t.count-1)})),r.distinctUntilChanged()).subscribe((function(e){t.indexChange.emit(e),t.cdr.markForCheck()}))},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.onPanStart=function(t){this.stopAutoplay()},t.prototype.onPanMove=function(t){if(this.canMove){var e=this.getSafeDeltaX(t.deltaX);if(this.percent=100/this.count*e/this.width,this.followFinger){var n=this.percent-100/this.count*this.active;this.move(n,!0)}}},t.prototype.onPanEnd=function(t){if(this.canMove){var e=this.active,n=t.direction===Hammer.DIRECTION_LEFT&&t.velocityX<-.3,r=t.direction===Hammer.DIRECTION_RIGHT&&t.velocityX>.3;n||this.percent<=-50/this.count?e++:(r||this.percent>=50/this.count)&&e--,this.goTo(e),this.startAutoplay()}},t.prototype.goTo=function(t,e){var n=this;if(void 0===t&&(t=0),void 0===e&&(e=!1),!this.animating){var r=this.getSafeActive(t),i=this.getRealActive(r);this.active$.next(i),!this.loop||0!==i&&i!==this.count-1||this.handleMirrorNodes(),this.animating=!0,this.move(-100/this.count*r,e).subscribe((function(){n.animating=!1,-1!==r&&r!==n.count||n.goTo(i,!0)}))}},t.prototype.prev=function(){this.goTo(this.active-1)},t.prototype.next=function(){this.goTo(this.active+1)},t.prototype.init=function(){var t=this;0!==this.items.length&&(this.items.forEach((function(e,n){e.index=n,t.renderer.setStyle(e.elRef.nativeElement,"width",t.width+"px")})),this.goTo(this.getSafeActive(this.initialIndex,!0),!0),this.startAutoplay())},t.prototype.getSafeDeltaX=function(t){var e=this.width;return u(t,-e,e)},t.prototype.getSafeActive=function(t,e){return void 0===e&&(e=!1),u(t,this.loop&&!e?-1:0,this.loop&&!e?this.count:this.count-1)},t.prototype.getRealActive=function(t){return(t+this.count)%this.count},t.prototype.handleMirrorNodes=function(){var t=this.track.nativeElement;try{this.renderer.removeChild(t,this.preMirrorNode),this.renderer.removeChild(t,this.postMirrorNode)}catch(t){}var e=this.items,n=e.first,r=e.last;this.preMirrorNode=r.elRef.nativeElement.cloneNode(!0),this.postMirrorNode=n.elRef.nativeElement.cloneNode(!0),this.renderer.addClass(this.preMirrorNode,"pre-mirror-node"),this.renderer.addClass(this.postMirrorNode,"post-mirror-node"),this.renderer.insertBefore(t,this.preMirrorNode,n.elRef.nativeElement),this.renderer.appendChild(t,this.postMirrorNode)},t.prototype.move=function(t,e){void 0===e&&(e=!1);var i=this.track.nativeElement,o=this.offset,s=this.offset=t;return this.renderer.setStyle(i,"transition",e?"none":"transform "+this.speed+"ms"),this.renderer.setStyle(i,"transform","translate3d("+t+"%, 0, 0)"),n.timer(e||s===o?0:this.speed).pipe(r.takeUntil(this.destroy$))},t.prototype.startAutoplay=function(){var t=this;!this.autoplay||this.count<=1||(this.stopAutoplay(),this.intervalSub=n.interval(this.autoplay+this.speed).pipe(r.takeUntil(this.destroy$)).subscribe((function(){var e=t.active,n=t.loop?e+1:t.getRealActive(e+1);t.goTo(n)})))},t.prototype.stopAutoplay=function(){this.intervalSub&&this.intervalSub.unsubscribe()},t.decorators=[{type:e.Component,args:[{selector:"ngx-carousel",template:'<div\n class="ngx-carousel__track"\n #track\n (dragstart)="$event.preventDefault()"\n (panstart)="onPanStart($event)"\n (panmove)="onPanMove($event)"\n (panend)="onPanEnd($event)"\n (pancancel)="onPanEnd($event)"\n>\n <ng-content></ng-content>\n</div>\n\n<div class="ngx-carousel__indicator" *ngIf="!indicator">\n <div\n *ngFor="let item of items; let i = index"\n [class.active]="i === active"\n ></div>\n</div>\n\n<ng-container *ngTemplateOutlet="indicator; context: { $implicit: data }"></ng-container>\n',encapsulation:e.ViewEncapsulation.None,changeDetection:e.ChangeDetectionStrategy.OnPush,host:{"[class.ngx-carousel]":"true"},providers:[{provide:h,useExisting:e.forwardRef((function(){return t}))}],styles:[".ngx-carousel{position:relative;display:block;overflow:hidden}.ngx-carousel__track{position:relative;display:inline-block;white-space:nowrap}.ngx-carousel__indicator{position:absolute;bottom:10px;width:100%;text-align:center;white-space:nowrap;font-size:0;pointer-events:none}.ngx-carousel__indicator div{display:inline-block;width:6px;height:6px;margin:0 3px;border-radius:50%;background:rgba(0,0,0,.25);pointer-events:auto}.ngx-carousel__indicator div.active{background:rgba(0,0,0,.75)}"]}]}],t.ctorParameters=function(){return[{type:e.Renderer2},{type:e.ElementRef},{type:e.ChangeDetectorRef}]},t.propDecorators={loop:[{type:e.Input}],speed:[{type:e.Input}],autoplay:[{type:e.Input}],followFinger:[{type:e.Input}],allowTouchMove:[{type:e.Input}],indicator:[{type:e.Input}],initialIndex:[{type:e.Input}],lazyRenderOffset:[{type:e.Input}],cache:[{type:e.Input}],indexChange:[{type:e.Output}],track:[{type:e.ViewChild,args:["track",{static:!1}]}],items:[{type:e.ContentChildren,args:[d]}]},t}();var y=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return function(t,e){function n(){this.constructor=t}c(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(e,t),e.prototype.buildHammer=function(t){return new Hammer(t,{inputClass:Hammer.TouchMouseInput})},e}(o.HammerGestureConfig),g=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[f,d,p],imports:[a.CommonModule],exports:[f,d,p],providers:[{provide:o.HAMMER_GESTURE_CONFIG,useClass:y}]}]}],t}();t.CarouselComponent=f,t.CarouselItemComponent=d,t.CarouselModule=g,t.LazyRenderDirective=p,t.ɵa=h,t.ɵb=y,Object.defineProperty(t,"__esModule",{value:!0})})); //# sourceMappingURL=ciri-ngx-carousel.umd.min.js.map