ng2-custom-carousel
Version:
Carousel Component for Angular 2+. Easily customizable, with autoscroll, loop and navigation controls
297 lines (290 loc) • 20.5 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, ElementRef, Component, ContentChildren, ViewChildren, ViewChild, Input, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/animations';
import { animate, style } from '@angular/animations';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
class Ng2CustomCarouselItemDirective {
constructor(tpl) {
this.tpl = tpl;
}
}
Ng2CustomCarouselItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
Ng2CustomCarouselItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: Ng2CustomCarouselItemDirective, selector: "[ng2CustomCarouselItem]", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselItemDirective, decorators: [{
type: Directive,
args: [{
selector: '[ng2CustomCarouselItem]'
}]
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
class Ng2CustomCarouselItemElement {
}
Ng2CustomCarouselItemElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselItemElement, deps: [], target: i0.ɵɵFactoryTarget.Directive });
Ng2CustomCarouselItemElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.1.3", type: Ng2CustomCarouselItemElement, selector: ".ng2-custom-carousel-item", ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselItemElement, decorators: [{
type: Directive,
args: [{
selector: '.ng2-custom-carousel-item'
}]
}] });
class Ng2CustomCarouselComponent {
constructor(builder) {
this.builder = builder;
this.timing = '250ms ease-in';
this.showControls = true;
this.showNavigation = 'radio'; // radio, numbers, none
this.autoScroll = 0; // miliseconds
this.loop = false;
this.slidesN = 0;
this.scrollDirection = 'left'; // left, right
this.slidesMargin = 0;
this.currentSlide = 0;
this.currentSlideShown = 0;
this.ng2CustomCarouselWrapperStyle = {};
this.navigationIndexes = [];
this.scrollLimit = 0;
}
get currentSlideString() {
return this.currentSlideShown.toString();
}
set currentSlideString(index) {
this.goToSlide(+index + (this.loop ? 2 : 0));
}
onResize() {
let carouselWidth = 0;
while ((this.ng2CustomCarouselCover.nativeElement.offsetWidth >= ((carouselWidth + this.itemWidth) - this.slidesMargin)) &&
(((carouselWidth + this.itemWidth) - this.slidesMargin) <= ((this.itemWidth * this.slidesN) - this.slidesMargin))) {
carouselWidth = carouselWidth + this.itemWidth;
}
if (this.slidesMargin) {
carouselWidth = carouselWidth - this.slidesMargin;
}
this.ng2CustomCarouselWrapperStyle = {
width: carouselWidth + `px`,
margin: 'auto'
};
// this.ng2carouselControlsStyle = {
// width: carouselWidth + `px`,
// margin: `1em auto`
// };
}
goToSlide(indexSlider) {
let restart = false;
let reend = false;
const sliderDif = indexSlider - this.currentSlide;
if (sliderDif === 0) {
return;
}
else if (sliderDif > 0) {
if ((!this.loop) && ((this.currentSlide + 1) === this.scrollLimit)) {
return;
}
this.currentSlide = this.currentSlide + sliderDif;
if ((this.currentSlide >= (this.items.length - this.slidesN)) && (this.loop)) {
this.currentSlideShown = (this.items.length - this.slidesN) - 2;
}
else {
this.currentSlideShown = this.currentSlide - (this.loop ? 2 : 0);
}
if (this.loop) {
if (this.currentSlide === ((this.items.length - this.slidesN))) {
restart = true;
}
}
}
else {
if ((!this.loop) && (this.currentSlide === 0)) {
return;
}
this.currentSlide = this.currentSlide + sliderDif;
if (this.loop) {
if (this.currentSlide < 2) {
this.currentSlideShown = this.currentSlide + (this.scrollLimit - 2);
}
else {
this.currentSlideShown = this.currentSlide - 2;
}
}
else {
this.currentSlideShown = this.currentSlide;
}
if (this.loop) {
if (this.currentSlide === 0) {
reend = true;
}
}
}
const offset = this.currentSlide * this.itemWidth;
const myAnimation = this.buildAnimation(offset);
this.player = myAnimation.create(this.ng2CustomCarousel.nativeElement);
this.player.play();
if (restart) {
this.player.onDone(() => {
this.currentSlide = 1;
this.currentSlideShown = (this.items.length - this.slidesN) - 2;
const myAnimationAux = this.buildAnimationStart();
this.playerRestart = myAnimationAux.create(this.ng2CustomCarousel.nativeElement);
this.playerRestart.play();
});
}
if (reend) {
this.player.onDone(() => {
this.currentSlide = (this.items.length - this.slidesN) - 1;
this.currentSlideShown = this.currentSlide - 2;
const myAnimationAux = this.buildAnimationEnd();
this.playerReend = myAnimationAux.create(this.ng2CustomCarousel.nativeElement);
this.playerReend.play();
});
}
this.stopScrool();
this.startScroll();
}
buildAnimation(offset) {
return this.builder.build([
animate(this.timing, style({ left: `-` + offset + `px` }))
]);
}
buildAnimationStart() {
return this.builder.build([
animate('1ms ease-in', style({ left: `-` + this.itemWidth + `px` }))
]);
}
buildAnimationEnd() {
return this.builder.build([
animate('1ms ease-in', style({ left: `-` + (this.itemWidth * ((this.items.length - this.slidesN) - 1)) + `px` }))
]);
}
stopScrool() {
if (this.autoScroll > 0) {
clearInterval(this.intervalTransition);
}
}
startScroll() {
if (this.autoScroll > 0) {
this.intervalTransition = setInterval(() => {
if (this.scrollDirection === 'right') {
this.goToSlide(this.currentSlide - 1);
}
else {
this.goToSlide(this.currentSlide + 1);
}
}, this.autoScroll);
}
}
ngAfterContentInit() {
if (this.slidesN === 0) {
this.slidesN = this.items.length;
}
if (this.items.length <= this.slidesN) {
this.slidesN = this.items.length;
}
if (this.items.length < 2) {
this.autoScroll = 0;
this.showControls = false;
this.showNavigation = 'none';
}
this.startScroll();
}
ngAfterViewInit() {
if (this.items.length > 0) {
this.scrollLimit = this.items.length;
if (!this.loop) {
this.scrollLimit = (this.items.length - this.slidesN) + 1;
}
for (let i = 0; i < this.scrollLimit; i++) {
this.navigationIndexes.push(i);
}
this.itemWidth = this.itemsElements.first.nativeElement.getBoundingClientRect().width + (this.slidesMargin ? this.slidesMargin : 0);
this.onResize();
if (this.loop) {
const lastSlice = this.items.length - 1;
const addedSlices = [];
for (let i = 0; i < (this.slidesN - 1); i++) {
addedSlices.push(this.items.toArray()[i]);
}
this.items.reset([this.items.toArray()[lastSlice - 1], this.items.toArray()[lastSlice], this.items.toArray(), addedSlices]);
this.currentSlide = 2;
this.ng2CustomCarousel.nativeElement.style.left = '-' + (2 * this.itemWidth) + 'px';
}
this.ng2CustomCarousel.nativeElement.style.width = ((this.itemWidth * this.items.length) - this.slidesMargin) + `px`;
}
}
ngOnDestroy() {
clearTimeout(this.intervalTransition);
}
}
Ng2CustomCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselComponent, deps: [{ token: i1.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
Ng2CustomCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: Ng2CustomCarouselComponent, selector: "ng2-custom-carousel", inputs: { timing: "timing", showControls: "showControls", showNavigation: "showNavigation", autoScroll: "autoScroll", loop: "loop", slidesN: "slidesN", scrollDirection: "scrollDirection", slidesMargin: "slidesMargin" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "items", predicate: Ng2CustomCarouselItemDirective }], viewQueries: [{ propertyName: "ng2CustomCarousel", first: true, predicate: ["ng2CustomCarousel"], descendants: true, static: true }, { propertyName: "ng2CustomCarouselCover", first: true, predicate: ["ng2CustomCarouselCover"], descendants: true, static: true }, { propertyName: "itemsElements", predicate: Ng2CustomCarouselItemElement, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"ng2-custom-carousel-panel\" #ng2CustomCarouselCover>\n <section class=\"ng2-custom-carousel-wrapper\" [ngStyle]=\"ng2CustomCarouselWrapperStyle\" (mouseenter)=\"stopScrool()\"\n (mouseleave)=\"startScroll()\">\n <ul class=\"ng2-custom-carousel-inner\" #ng2CustomCarousel>\n <li *ngFor=\"let item of items;\" class=\"ng2-custom-carousel-item\"\n [ngStyle]=\"{'marginRight': slidesMargin + 'px'}\">\n <ng-container [ngTemplateOutlet]=\"item !== undefined?item.tpl:items.last.tpl\"></ng-container>\n </li>\n </ul>\n </section>\n <div class=\"ng2-custom-carousel-controls-wrapper\">\n <div class=\"ng2-custom-carousel-controls\">\n <button *ngIf=\"showControls\" (click)=\"goToSlide(currentSlide - 1)\">Prev</button>\n <div *ngIf=\"showNavigation === 'numbers'\" class=\"ng2-custom-carousel-navigation\">\n <button *ngFor=\"let item of navigationIndexes, let i = index\" (click)=\"goToSlide(i + (loop? 2 : 0))\"\n [class.ng2CustomCarouselSlideSelected]=\"i === currentSlideShown\">{{i + 1}}</button>\n </div>\n <form #searchPackDiscountForm=\"ngForm\" *ngIf=\"showNavigation === 'radio'\"\n class=\"ng2-custom-carousel-navigation\">\n <input *ngFor=\"let item of navigationIndexes, let i = index\" type=\"radio\" name=\"currentSlideShown\"\n [(ngModel)]=\"currentSlideString\" value=\"{{i}}\">\n </form>\n <button *ngIf=\"showControls\" (click)=\"goToSlide(currentSlide + 1)\">Next</button>\n </div>\n </div>\n</div>", styles: [".ng2-custom-carousel-panel .ng2-custom-carousel-wrapper{overflow:hidden}.ng2-custom-carousel-panel .ng2-custom-carousel-wrapper .ng2-custom-carousel-inner{position:relative;display:flex;list-style:none;margin:0;padding:0}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper{margin:1em auto}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls{margin:auto;width:max-content}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls .ng2-custom-carousel-navigation{display:inline;margin:0 20px}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls .ng2-custom-carousel-slide-selected{background-color:gray}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Ng2CustomCarouselItemElement, selector: ".ng2-custom-carousel-item" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselComponent, decorators: [{
type: Component,
args: [{ selector: 'ng2-custom-carousel', template: "<div class=\"ng2-custom-carousel-panel\" #ng2CustomCarouselCover>\n <section class=\"ng2-custom-carousel-wrapper\" [ngStyle]=\"ng2CustomCarouselWrapperStyle\" (mouseenter)=\"stopScrool()\"\n (mouseleave)=\"startScroll()\">\n <ul class=\"ng2-custom-carousel-inner\" #ng2CustomCarousel>\n <li *ngFor=\"let item of items;\" class=\"ng2-custom-carousel-item\"\n [ngStyle]=\"{'marginRight': slidesMargin + 'px'}\">\n <ng-container [ngTemplateOutlet]=\"item !== undefined?item.tpl:items.last.tpl\"></ng-container>\n </li>\n </ul>\n </section>\n <div class=\"ng2-custom-carousel-controls-wrapper\">\n <div class=\"ng2-custom-carousel-controls\">\n <button *ngIf=\"showControls\" (click)=\"goToSlide(currentSlide - 1)\">Prev</button>\n <div *ngIf=\"showNavigation === 'numbers'\" class=\"ng2-custom-carousel-navigation\">\n <button *ngFor=\"let item of navigationIndexes, let i = index\" (click)=\"goToSlide(i + (loop? 2 : 0))\"\n [class.ng2CustomCarouselSlideSelected]=\"i === currentSlideShown\">{{i + 1}}</button>\n </div>\n <form #searchPackDiscountForm=\"ngForm\" *ngIf=\"showNavigation === 'radio'\"\n class=\"ng2-custom-carousel-navigation\">\n <input *ngFor=\"let item of navigationIndexes, let i = index\" type=\"radio\" name=\"currentSlideShown\"\n [(ngModel)]=\"currentSlideString\" value=\"{{i}}\">\n </form>\n <button *ngIf=\"showControls\" (click)=\"goToSlide(currentSlide + 1)\">Next</button>\n </div>\n </div>\n</div>", styles: [".ng2-custom-carousel-panel .ng2-custom-carousel-wrapper{overflow:hidden}.ng2-custom-carousel-panel .ng2-custom-carousel-wrapper .ng2-custom-carousel-inner{position:relative;display:flex;list-style:none;margin:0;padding:0}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper{margin:1em auto}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls{margin:auto;width:max-content}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls .ng2-custom-carousel-navigation{display:inline;margin:0 20px}.ng2-custom-carousel-panel .ng2-custom-carousel-controls-wrapper .ng2-custom-carousel-controls .ng2-custom-carousel-slide-selected{background-color:gray}\n"] }]
}], ctorParameters: function () { return [{ type: i1.AnimationBuilder }]; }, propDecorators: { items: [{
type: ContentChildren,
args: [Ng2CustomCarouselItemDirective]
}], itemsElements: [{
type: ViewChildren,
args: [Ng2CustomCarouselItemElement, { read: ElementRef }]
}], ng2CustomCarousel: [{
type: ViewChild,
args: ['ng2CustomCarousel', { static: true }]
}], ng2CustomCarouselCover: [{
type: ViewChild,
args: ['ng2CustomCarouselCover', { static: true }]
}], timing: [{
type: Input
}], showControls: [{
type: Input
}], showNavigation: [{
type: Input
}], autoScroll: [{
type: Input
}], loop: [{
type: Input
}], slidesN: [{
type: Input
}], scrollDirection: [{
type: Input
}], slidesMargin: [{
type: Input
}], onResize: [{
type: HostListener,
args: ['window:resize', ['$event']]
}] } });
class Ng2CustomCarouselModule {
}
Ng2CustomCarouselModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
Ng2CustomCarouselModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselModule, declarations: [Ng2CustomCarouselComponent,
Ng2CustomCarouselItemElement,
Ng2CustomCarouselItemDirective], imports: [CommonModule,
FormsModule], exports: [Ng2CustomCarouselComponent,
Ng2CustomCarouselItemDirective] });
Ng2CustomCarouselModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselModule, imports: [CommonModule,
FormsModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: Ng2CustomCarouselModule, decorators: [{
type: NgModule,
args: [{
declarations: [
Ng2CustomCarouselComponent,
Ng2CustomCarouselItemElement,
Ng2CustomCarouselItemDirective
],
imports: [
CommonModule,
FormsModule
],
exports: [
Ng2CustomCarouselComponent,
Ng2CustomCarouselItemDirective
]
}]
}] });
/*
* Public API Surface of ng2-custom-carousel
*/
/**
* Generated bundle index. Do not edit.
*/
export { Ng2CustomCarouselComponent, Ng2CustomCarouselItemDirective, Ng2CustomCarouselItemElement, Ng2CustomCarouselModule };
//# sourceMappingURL=ng2-custom-carousel.mjs.map