slider-carousel/bundles/slider-carousel.umd.min.js

Angular component of the carousel, using the slider as a transition. This is a simple, clean and light alternative. It also does not need dependencies.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser"),require("rxjs")):"function"==typeof define&&define.amd?define("slider-carousel",["exports","@angular/core","@angular/common","@angular/platform-browser","rxjs"],e):e((t=t||self)["slider-carousel"]={},t.ng.core,t.ng.common,t.ng.platformBrowser,t.rxjs)}(this,(function(t,e,i,n,s){"use strict";var r=function(){function t(t){this.elRef=t,this.class=!0,this.closedClass=!1,this.imageUrl="",this.loading=!0,this.scaleRate=1,this.modalRef={}}return Object.defineProperty(t.prototype,"width",{get:function(){return(this.loading?0:this.img.width*this.scaleRate)+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"height",{get:function(){return(this.loading?0:this.img.height*this.scaleRate)+"px"},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"windowWidth",{get:function(){return window.innerWidth-40},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"windowHeight",{get:function(){return window.innerHeight-40},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){this.imageUrl=this.modalRef.image.safeUrl,this.loadImage(this.modalRef.image.pureUrl)},t.prototype.loadImage=function(t){var e=this;this.loading=!0,this.img=new Image,this.img.onload=function(){e.loading=!1,e.onWindowResize()},this.img.src=t},t.prototype.onImageChange=function(t,e){this.loading||this.imageUrl===t.safeUrl||(this.imageUrl=t.safeUrl,this.loadImage(t.pureUrl))},t.prototype.onKeydown=function(t){t.preventDefault(),t.stopImmediatePropagation(),27===t.keyCode&&this.close()},t.prototype.onWindowResize=function(){if(!this.loading){var t=this.windowWidth-this.img.width,e=this.windowHeight-this.img.height;if(t<0||e<0)if(t<e){if(this.img.width>this.windowWidth)return void(this.scaleRate=this.windowWidth/this.img.width)}else if(this.img.height>this.windowHeight)return void(this.scaleRate=this.windowHeight/this.img.height)}this.scaleRate=1},t.prototype.close=function(){var t=this;this.closedClass=!0,setTimeout((function(){return t.modalRef.close()}),500)},t.ctorParameters=function(){return[{type:e.ElementRef}]},t.decorators=[{type:e.Component,args:[{selector:"slider-carousel-preview",template:'<section>\n    <img [src]="imageUrl" [style.width]="width" [style.height]="height" [style.opacity]="loading ? 0 : 1" />\n    <div *ngIf="!loading" class="slider-carousel-preview-actions">\n        <button matRipple matTooltipPosition="above" (click)="close()">\n            <svg x="0px" y="0px" viewBox="0 0 51.976 51.976">\n                <path d="M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0\n                    C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778\n                    c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828\n                    c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828\n                    l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"/>\n            </svg>\n        </button>\n    </div>\n</section>\n<div *ngIf="loading" class="slider-carousel-loading"></div>',host:{"(document:keydown)":"onKeydown($event)","(window:resize)":"onWindowResize()"}}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={class:[{type:e.HostBinding,args:["class.slider-carousel-preview"]}],closedClass:[{type:e.HostBinding,args:["class.closed"]}]},t}(),o=function(){function t(t,e,i){this.componentFactoryResolver=t,this.appRef=e,this.injector=i}return t.prototype.openPreview=function(t){var e,i;void 0===t&&(t={}),i={onClose:new s.Observable((function(t){return e=t})),instance:null};var n=this.createComponent(r,t,(function(t){e.next(t)}));return i.instance=n.instance,i},t.prototype.createComponent=function(t,e,i){var n=this,s=this.componentFactoryResolver.resolveComponentFactory(t).create(this.injector);e||(e={}),e.close=function(t){n.appRef.detachView(s.hostView),s.destroy(),i&&i(t)},Object.assign(s.instance,{modalRef:e}),this.appRef.attachView(s.hostView);var r=s.hostView.rootNodes[0];return document.body.appendChild(r),s},t.prototype.smoothScroll=function(t,e,i,n){void 0===i&&(i=400),void 0===n&&(n="top");var s="top"===n?t.scrollTop:t.scrollLeft;e<0&&(e=0);var r=e-s-77,o=(new Date).getTime();i||(i=400);var a=setInterval((function(){var e=(new Date).getTime()-o,l=function(t,e,i,n){return(t/=n/2)<1?i/2*t*t*t*t+e:-i/2*((t-=2)*t*t*t-2)+e}(e,s,r,i);e>=i&&(clearInterval(a),a=null),t.scrollTo?"top"===n?t.scrollTo(t.scrollLeft,l):t.scrollTo(l,t.scrollTop):"top"===n?t.scrollTop=l:t.scrollLeft=l}),1e3/60);return a},t.prototype.elementIsChild=function(t,e){try{for(;t&&"BODY"!==t.tagName.toUpperCase();){if(t===e)return!0;t=t.parentNode}return!1}catch(t){return!1}},t.prototype.isMobileDevice=function(){return void 0!==window.orientation||-1!==navigator.userAgent.indexOf("IEMobile")},t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector}]},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:e.ComponentFactoryResolver},{type:e.ApplicationRef},{type:e.Injector}]},t}(),a=function(){function t(t,e,i){this.sanitizer=t,this.renderer=e,this.helper=i,this.class=!0,this.images=[],this.preview=!0,this.height="500px",this.width="100%",this.maxWidth="100%",this.autoSize=!1,this.safeImages=[],this.initialized=!1,this.currentImageIndex=0,this.lastDirectionIsRight=!1,this.containerWidth=0,this.destroyed=!1,this.windowResizing=!1,this.listeners=[],this.drag={state:"none",startOffset:0,currentOffset:0,startLeft:0,currentLeft:0}}return Object.defineProperty(t.prototype,"currentImage",{get:function(){return this.safeImages[this.currentImageIndex]},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"currentIsFisrt",{get:function(){return 0===this.currentImageIndex},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"currentIsLast",{get:function(){return this.currentImageIndex===this.images.length-1},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isDragging",{get:function(){return"none"!==this.drag.state},enumerable:!1,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.ngOnChanges=function(){this.prepare()},t.prototype.prepare=function(){"string"!=typeof this.height?this.height="500px":this.height.endsWith("%")||this.height.endsWith("px")||(this.height+="px"),"string"!=typeof this.width?this.width="100%":this.width.endsWith("%")||this.width.endsWith("px")||(this.width+="px"),"string"!=typeof this.maxWidth?this.maxWidth="100%":this.maxWidth.endsWith("%")||this.maxWidth.endsWith("px")||(this.maxWidth+="px"),this.initialized=!0,this.checkImages(),this.initSlideDragWatching(),this.ngAfterViewChecked()},t.prototype.ngAfterViewChecked=function(){if(!this.windowResizing){var t=0;this.sectionEl&&this.sectionEl.nativeElement&&(t=this.sectionEl.nativeElement.clientWidth),t!==this.containerWidth&&(this.containerWidth=t)}},t.prototype.checkImages=function(){var t=this;this.images&&this.images.length?("string"!=typeof this.images[0]?this.images.forEach((function(t){t.md||(t.md=t.lg),t.sm||(t.sm=t.md)})):this.images=this.images.map((function(t){return{lg:t,md:t,sm:t}})),this.safeImages=this.images.map((function(e){var i,n,s,r,o,a;return{lg:{url:(null===(i=e.lg)||void 0===i?void 0:i.startsWith("http"))?t.sanitizer.bypassSecurityTrustUrl(e.lg):e.lg,style:(null===(n=e.lg)||void 0===n?void 0:n.startsWith("http"))?t.sanitizer.bypassSecurityTrustStyle("url('"+e.lg+"')"):"url('"+e.lg+"')",pure:e.lg},md:{url:(null===(s=e.md)||void 0===s?void 0:s.startsWith("http"))?t.sanitizer.bypassSecurityTrustUrl(e.md):e.md,style:(null===(r=e.md)||void 0===r?void 0:r.startsWith("http"))?t.sanitizer.bypassSecurityTrustStyle("url('"+e.md+"')"):"url('"+e.md+"')",pure:e.md},sm:{url:(null===(o=e.sm)||void 0===o?void 0:o.startsWith("http"))?t.sanitizer.bypassSecurityTrustUrl(e.sm):e.sm,style:(null===(a=e.sm)||void 0===a?void 0:a.startsWith("http"))?t.sanitizer.bypassSecurityTrustStyle("url('"+e.sm+"')"):"url('"+e.sm+"')",pure:e.sm}}}))):this.safeImages=[]},t.prototype.initSlideDragWatching=function(){var t=this;this.innerImagesEl&&this.innerImagesEl.nativeElement?(this.stopSlideDragWatching(),this.helper.isMobileDevice()?this.listeners=[this.renderer.listen(document.body,"touchstart",this.onStartDrag.bind(this)),this.renderer.listen(document.body,"touchmove",this.onDragging.bind(this)),this.renderer.listen(document.body,"touchend",this.onEndDrag.bind(this))]:this.listeners=[this.renderer.listen(document.body,"mousedown",this.onStartDrag.bind(this)),this.renderer.listen(document.body,"mousemove",this.onDragging.bind(this)),this.renderer.listen(document.body,"mouseup",this.onEndDrag.bind(this))]):setTimeout((function(){return t.initSlideDragWatching()}),200)},t.prototype.stopSlideDragWatching=function(){this.listeners&&this.listeners.length&&this.listeners.forEach((function(t){return t()}))},t.prototype.previewImage=function(t){var e=this;this.previewRef||(this.previewRef=this.helper.openPreview({image:{pureUrl:t.lg.pure,safeUrl:t.lg.url}}),this.previewRef.onClose.subscribe((function(){return e.previewRef=null})))},t.prototype.selectImage=function(t,e){t!==this.currentImageIndex&&(this.lastDirectionIsRight=t>this.currentImageIndex,this.currentImageIndex=t,e.target&&this.imageListEl&&this.imageListEl.nativeElement&&this.scrollingToElement(e.target,this.lastDirectionIsRight))},t.prototype.goPrevImage=function(t){if(void 0===t&&(t=0),this.currentImageIndex>0){t?this.currentImageIndex-t>=0?this.currentImageIndex-=t+1:this.currentImageIndex=0:this.currentImageIndex--,this.lastDirectionIsRight=!1;var e=this.imageListEl.nativeElement.children[0].children[this.currentImageIndex];this.imageListEl&&this.imageListEl.nativeElement&&this.scrollingToElement(e,this.lastDirectionIsRight)}},t.prototype.goNextImage=function(t){if(void 0===t&&(t=0),this.currentImageIndex+1<this.images.length){t?this.currentImageIndex+t+1<=this.images.length-1?this.currentImageIndex=t+1:this.currentImageIndex=this.images.length:this.currentImageIndex++,this.lastDirectionIsRight=!0;var e=this.imageListEl.nativeElement.children[0].children[this.currentImageIndex];this.imageListEl&&this.imageListEl.nativeElement&&this.scrollingToElement(e,this.lastDirectionIsRight)}},t.prototype.scrollingToElement=function(t,e){var i=this.imageListEl.nativeElement;if(i&&i.scrollWidth>0){var n=t.clientWidth+14,s=t.offsetLeft-14,r=t.offsetLeft+t.clientWidth+14,o=i.scrollLeft,a=i.scrollLeft+i.clientWidth,l=.1;e&&a-r<Math.floor(n/2)?l=o+n+100:!e&&s-o<Math.floor(n/2)&&(l=o-n),.1!==l&&(this.timerSroll&&clearInterval(this.timerSroll),this.timerSroll=this.helper.smoothScroll(i,l,400,"left"))}},t.prototype.onKeydown=function(t){!this.destroyed&&!this.isDragging&&[37,39].indexOf(t.keyCode)>=0&&(37===t.keyCode?this.goPrevImage():this.goNextImage(),this.previewRef&&this.previewRef.instance.onImageChange({pureUrl:this.currentImage.lg.pure,safeUrl:this.currentImage.lg.url}))},t.prototype.onWindowResize=function(){var t=this;this.destroyed||this.windowResizing||(this.windowResizing=!0,setTimeout((function(){t.containerWidth=t.sectionEl.nativeElement.clientWidth,setTimeout((function(){t.windowResizing=!1,setTimeout((function(){if(t.imageListEl&&t.imageListEl.nativeElement){var e=t.imageListEl.nativeElement.children[0].children[t.currentImageIndex];t.imageListEl&&t.imageListEl.nativeElement&&t.scrollingToElement(e,t.lastDirectionIsRight)}}),100)}))})))},t.prototype.onStartDrag=function(t){var e=!1;t.touches&&(e=!0,t=t.touches[0]),(e||0===t.button)&&this.helper.elementIsChild(t.target,this.sectionEl.nativeElement)&&(this.drag.startLeft=this.innerImagesEl.nativeElement.offsetLeft,this.drag.currentLeft=this.innerImagesEl.nativeElement.offsetLeft,this.drag.startOffset=t.clientX,this.drag.currentOffset=t.clientX,this.drag.state="start")},t.prototype.onDragging=function(t){if(t.touches&&(t=t.touches[0]),"start"===this.drag.state||"dragging"===this.drag.state)if(this.drag.state="dragging",this.drag.currentOffset=t.clientX,this.drag.startOffset!==this.drag.currentOffset){var e=this.drag.currentOffset>this.drag.startOffset,i=.8*Math.abs(this.drag.currentOffset-this.drag.startOffset);(e&&this.currentIsFisrt||!e&&this.currentIsLast)&&i>Math.floor(this.containerWidth/3)&&(i=Math.floor(this.containerWidth/3)),this.drag.currentLeft=this.drag.startLeft+(e?1:-1)*i}else this.drag.currentLeft=this.drag.startLeft},t.prototype.onEndDrag=function(t){var e=this,i=!1;if(t.touches&&(i=!0,t=t.touches[0]),i||0===t.button){var n=Math.abs(this.drag.startOffset-this.drag.currentOffset);"dragging"===this.drag.state&&n>0?setTimeout((function(){e.drag.state="none";if(n>=70){var t=e.drag.currentOffset>e.drag.startOffset,i=n/e.sectionEl.nativeElement.clientWidth-1;i=i>=1?Math.floor(i):0,t&&!e.currentIsFisrt?e.goPrevImage(i):t||e.currentIsLast||e.goNextImage(i)}})):this.drag.state="none"}},t.prototype.ngOnDestroy=function(){this.destroyed=!0,this.stopSlideDragWatching()},t.ctorParameters=function(){return[{type:n.DomSanitizer},{type:e.Renderer2},{type:o}]},t.decorators=[{type:e.Component,args:[{selector:"slider-carousel",template:'<section #section *ngIf="safeImages && safeImages.length" [style.width]="width" [style.maxWidth]="maxWidth">\n    <div *ngIf="!windowResizing && containerWidth > 0" class="image-controller animated fadeIn" [style.maxWidth.px]="containerWidth">\n\n        \x3c!-- INNER CONTAINER --\x3e\n        <ul #innerImages *ngIf="!autoSize"\n            [ngClass]="{\'dragging-effect\': isDragging}"\n\t\t\t[style.left.px]="isDragging ? drag.currentLeft : (-currentImageIndex * containerWidth)"\n\t\t\t[style.width.px]="safeImages.length * containerWidth"\n            [style.height]="height">\n            <li *ngFor="let image of safeImages; let i = index;"\n                [style.backgroundImage]="image.md.style"\n                [style.width.px]="containerWidth"\n                [ngClass]="{\'cursor-pointer\': preview, \'is-current\': i === currentImageIndex}"\n                (click)="!isDragging && previewImage(image)">\n            </li>\n        </ul>\n        <ul #innerImages *ngIf="autoSize" [ngClass]="{\'dragging-effect\': isDragging}" [style.left.px]="isDragging ? drag.currentLeft : (-currentImageIndex * containerWidth)">\n            <div *ngFor="let image of safeImages; let i = index;" [style.width.px]="containerWidth">\n\t\t\t\t<img [src]="image.md.url" draggable="false" [ngClass]="{\'cursor-pointer\': preview, \'is-current\': i === currentImageIndex}" (click)="!isDragging && previewImage(image)"/>\n            </div>\n        </ul>\n\n        \x3c!-- NAVIGATION BUTTONS --\x3e\n        <div (click)="goPrevImage()" class="image-controller-prev" [ngClass]="{\'disabled\': currentImageIndex <= 0}" role="button">\n            <svg viewBox="0 0 456 456">\n                <path d="M227.996,0C102.081,0,0,102.081,0,227.996c0,125.945,102.081,227.996,227.996,227.996\n\t\t\t\tc125.945,0,227.996-102.051,227.996-227.996C455.992,102.081,353.941,0,227.996,0z M299.435,238.788l-98.585,98.585\n\t\t\t\tc-5.928,5.897-15.565,5.897-21.492,0c-5.928-5.928-5.928-15.595,0-21.492l87.885-87.885l-87.885-87.885\n\t\t\t\tc-5.928-5.928-5.928-15.565,0-21.492s15.565-5.928,21.492,0l98.585,98.585c3.04,2.979,4.469,6.901,4.438,10.792\n\t\t\t\tC303.873,231.918,302.414,235.809,299.435,238.788z"/>\n            </svg>                    \n        </div>\n        <div (click)="goNextImage()" class="image-controller-next" [ngClass]="{\'disabled\': (currentImageIndex + 1) >= safeImages.length}" role="button">\n            <svg viewBox="0 0 456 456">\n                <path d="M227.996,0C102.081,0,0,102.081,0,227.996c0,125.945,102.081,227.996,227.996,227.996\n\t\t\t\tc125.945,0,227.996-102.051,227.996-227.996C455.992,102.081,353.941,0,227.996,0z M299.435,238.788l-98.585,98.585\n\t\t\t\tc-5.928,5.897-15.565,5.897-21.492,0c-5.928-5.928-5.928-15.595,0-21.492l87.885-87.885l-87.885-87.885\n\t\t\t\tc-5.928-5.928-5.928-15.565,0-21.492s15.565-5.928,21.492,0l98.585,98.585c3.04,2.979,4.469,6.901,4.438,10.792\n\t\t\t\tC303.873,231.918,302.414,235.809,299.435,238.788z"/>\n            </svg>  \n        </div>\n\n    </div>\n\n    \x3c!-- GALLERY NAVIGATION --\x3e\n    <div *ngIf="!windowResizing && containerWidth > 0" #imageList class="footer-images animated fadeIn" [style.maxWidth.px]="containerWidth">\n        <ul>\n            <li matRipple (click)="selectImage(i, $event)" *ngFor="let image of safeImages; let i = index;"\n                [ngClass]="{\'is-current\': i === currentImageIndex}"\n                [style.backgroundImage]="image.sm.style">\n            </li>\n        </ul>\n    </div>\n</section>',host:{"(document:keydown)":"onKeydown($event)","(window:resize)":"onWindowResize()"}}]}],t.ctorParameters=function(){return[{type:n.DomSanitizer},{type:e.Renderer2},{type:o}]},t.propDecorators={class:[{type:e.HostBinding,args:["class.slider-carousel"]}],sectionEl:[{type:e.ViewChild,args:["section"]}],imageListEl:[{type:e.ViewChild,args:["imageList"]}],innerImagesEl:[{type:e.ViewChild,args:["innerImages"]}],images:[{type:e.Input}],preview:[{type:e.Input}],height:[{type:e.Input}],width:[{type:e.Input}],maxWidth:[{type:e.Input,args:["max-width"]}],autoSize:[{type:e.Input,args:["auto-size"]}]},t}(),l=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],exports:[a],declarations:[a,r],entryComponents:[a,r],providers:[o]}]}],t}();t.SliderCarouselComponent=a,t.SliderCarouselModule=l,t.ɵa=o,t.ɵb=r,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=slider-carousel.umd.min.js.map