ngx-bootstrap
Version:
Native Angular Bootstrap Components
435 lines (427 loc) • 13.4 kB
JavaScript
import { isBs3, LinkedList } from 'ngx-bootstrap/utils';
import { CommonModule } from '@angular/common';
import { Injectable, Component, EventEmitter, Input, NgZone, Output, HostBinding, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CarouselConfig {
constructor() {
/**
* Default interval of auto changing of slides
*/
this.interval = 5000;
/**
* Is loop of auto changing of slides can be paused
*/
this.noPause = false;
/**
* Is slides can wrap from the last to the first slide
*/
this.noWrap = false;
/**
* Show carousel-indicators
*/
this.showIndicators = true;
}
}
CarouselConfig.decorators = [
{ type: Injectable }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {number} */
const Direction = {
UNKNOWN: 0,
NEXT: 1,
PREV: 2,
};
Direction[Direction.UNKNOWN] = 'UNKNOWN';
Direction[Direction.NEXT] = 'NEXT';
Direction[Direction.PREV] = 'PREV';
/**
* Base element to create carousel
*/
class CarouselComponent {
/**
* @param {?} config
* @param {?} ngZone
*/
constructor(config, ngZone) {
this.ngZone = ngZone;
/**
* Will be emitted when active slide has been changed. Part of two-way-bindable [(activeSlide)] property
*/
this.activeSlideChange = new EventEmitter(false);
this._slides = new LinkedList();
this.destroyed = false;
Object.assign(this, config);
}
/**
* Index of currently displayed slide(started for 0)
* @param {?} index
* @return {?}
*/
set activeSlide(index) {
if (this._slides.length && index !== this._currentActiveSlide) {
this._select(index);
}
}
/**
* @return {?}
*/
get activeSlide() {
return this._currentActiveSlide;
}
/**
* Delay of item cycling in milliseconds. If false, carousel won't cycle
* automatically.
* @return {?}
*/
get interval() {
return this._interval;
}
/**
* @param {?} value
* @return {?}
*/
set interval(value) {
this._interval = value;
this.restartTimer();
}
/**
* @return {?}
*/
get slides() {
return this._slides.toArray();
}
/**
* @return {?}
*/
get isBs4() {
return !isBs3();
}
/**
* @return {?}
*/
ngOnDestroy() {
this.destroyed = true;
}
/**
* Adds new slide. If this slide is first in collection - set it as active
* and starts auto changing
* @param {?} slide
* @return {?}
*/
addSlide(slide) {
this._slides.add(slide);
if (this._slides.length === 1) {
this._currentActiveSlide = void 0;
this.activeSlide = 0;
this.play();
}
}
/**
* Removes specified slide. If this slide is active - will roll to another
* slide
* @param {?} slide
* @return {?}
*/
removeSlide(slide) {
/** @type {?} */
const remIndex = this._slides.indexOf(slide);
if (this._currentActiveSlide === remIndex) {
// removing of active slide
/** @type {?} */
let nextSlideIndex = void 0;
if (this._slides.length > 1) {
// if this slide last - will roll to first slide, if noWrap flag is
// FALSE or to previous, if noWrap is TRUE in case, if this slide in
// middle of collection, index of next slide is same to removed
nextSlideIndex = !this.isLast(remIndex)
? remIndex
: this.noWrap ? remIndex - 1 : 0;
}
this._slides.remove(remIndex);
// prevents exception with changing some value after checking
setTimeout(() => {
this._select(nextSlideIndex);
}, 0);
}
else {
this._slides.remove(remIndex);
/** @type {?} */
const currentSlideIndex = this.getCurrentSlideIndex();
setTimeout(() => {
// after removing, need to actualize index of current active slide
this._currentActiveSlide = currentSlideIndex;
this.activeSlideChange.emit(this._currentActiveSlide);
}, 0);
}
}
/**
* Rolling to next slide
* @param {?=} force
* @return {?}
*/
nextSlide(force = false) {
this.activeSlide = this.findNextSlideIndex(Direction.NEXT, force);
}
/**
* Rolling to previous slide
* @param {?=} force
* @return {?}
*/
previousSlide(force = false) {
this.activeSlide = this.findNextSlideIndex(Direction.PREV, force);
}
/**
* Rolling to specified slide
* @param {?} index
* @return {?}
*/
selectSlide(index) {
this.activeSlide = index;
}
/**
* Starts a auto changing of slides
* @return {?}
*/
play() {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
}
/**
* Stops a auto changing of slides
* @return {?}
*/
pause() {
if (!this.noPause) {
this.isPlaying = false;
this.resetTimer();
}
}
/**
* Finds and returns index of currently displayed slide
* @return {?}
*/
getCurrentSlideIndex() {
return this._slides.findIndex((slide) => slide.active);
}
/**
* Defines, whether the specified index is last in collection
* @param {?} index
* @return {?}
*/
isLast(index) {
return index + 1 >= this._slides.length;
}
/**
* Defines next slide index, depending of direction
* @private
* @param {?} direction
* @param {?} force
* @return {?}
*/
findNextSlideIndex(direction, force) {
/** @type {?} */
let nextSlideIndex = 0;
if (!force &&
(this.isLast(this.activeSlide) &&
direction !== Direction.PREV &&
this.noWrap)) {
return void 0;
}
switch (direction) {
case Direction.NEXT:
// if this is last slide, not force, looping is disabled
// and need to going forward - select current slide, as a next
nextSlideIndex = !this.isLast(this._currentActiveSlide)
? this._currentActiveSlide + 1
: !force && this.noWrap ? this._currentActiveSlide : 0;
break;
case Direction.PREV:
// if this is first slide, not force, looping is disabled
// and need to going backward - select current slide, as a next
nextSlideIndex =
this._currentActiveSlide > 0
? this._currentActiveSlide - 1
: !force && this.noWrap
? this._currentActiveSlide
: this._slides.length - 1;
break;
default:
throw new Error('Unknown direction');
}
return nextSlideIndex;
}
/**
* Sets a slide, which specified through index, as active
* @private
* @param {?} index
* @return {?}
*/
_select(index) {
if (isNaN(index)) {
this.pause();
return;
}
/** @type {?} */
const currentSlide = this._slides.get(this._currentActiveSlide);
if (currentSlide) {
currentSlide.active = false;
}
/** @type {?} */
const nextSlide = this._slides.get(index);
if (nextSlide) {
this._currentActiveSlide = index;
nextSlide.active = true;
this.activeSlide = index;
this.activeSlideChange.emit(index);
}
}
/**
* Starts loop of auto changing of slides
* @private
* @return {?}
*/
restartTimer() {
this.resetTimer();
/** @type {?} */
const interval = +this.interval;
if (!isNaN(interval) && interval > 0) {
this.currentInterval = this.ngZone.runOutsideAngular(() => {
return setInterval(() => {
/** @type {?} */
const nInterval = +this.interval;
this.ngZone.run(() => {
if (this.isPlaying &&
!isNaN(this.interval) &&
nInterval > 0 &&
this.slides.length) {
this.nextSlide();
}
else {
this.pause();
}
});
}, interval);
});
}
}
/**
* Stops loop of auto changing of slides
* @private
* @return {?}
*/
resetTimer() {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = void 0;
}
}
}
CarouselComponent.decorators = [
{ type: Component, args: [{
selector: 'carousel',
template: "<div (mouseenter)=\"pause()\" (mouseleave)=\"play()\" (mouseup)=\"play()\" class=\"carousel slide\">\n <ol class=\"carousel-indicators\" *ngIf=\"showIndicators && slides.length > 1\">\n <li *ngFor=\"let slidez of slides; let i = index;\" [class.active]=\"slidez.active === true\" (click)=\"selectSlide(i)\"></li>\n </ol>\n <div class=\"carousel-inner\"><ng-content></ng-content></div>\n <a class=\"left carousel-control carousel-control-prev\" [class.disabled]=\"activeSlide === 0 && noWrap\" (click)=\"previousSlide()\" *ngIf=\"slides.length > 1\">\n <span class=\"icon-prev carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBs4\" class=\"sr-only\">Previous</span>\n </a>\n <a class=\"right carousel-control carousel-control-next\" (click)=\"nextSlide()\" [class.disabled]=\"isLast(activeSlide) && noWrap\" *ngIf=\"slides.length > 1\">\n <span class=\"icon-next carousel-control-next-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Next</span>\n </a>\n</div>\n"
}] }
];
/** @nocollapse */
CarouselComponent.ctorParameters = () => [
{ type: CarouselConfig },
{ type: NgZone }
];
CarouselComponent.propDecorators = {
noWrap: [{ type: Input }],
noPause: [{ type: Input }],
showIndicators: [{ type: Input }],
activeSlideChange: [{ type: Output }],
activeSlide: [{ type: Input }],
interval: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class SlideComponent {
/**
* @param {?} carousel
*/
constructor(carousel) {
/**
* Wraps element by appropriate CSS classes
*/
this.addClass = true;
this.carousel = carousel;
}
/**
* Fires changes in container collection after adding a new slide instance
* @return {?}
*/
ngOnInit() {
this.carousel.addSlide(this);
}
/**
* Fires changes in container collection after removing of this slide instance
* @return {?}
*/
ngOnDestroy() {
this.carousel.removeSlide(this);
}
}
SlideComponent.decorators = [
{ type: Component, args: [{
selector: 'slide',
template: `
<div [class.active]="active" class="item">
<ng-content></ng-content>
</div>
`,
host: {
'[attr.aria-hidden]': '!active'
}
}] }
];
/** @nocollapse */
SlideComponent.ctorParameters = () => [
{ type: CarouselComponent }
];
SlideComponent.propDecorators = {
active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }],
addClass: [{ type: HostBinding, args: ['class.item',] }, { type: HostBinding, args: ['class.carousel-item',] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class CarouselModule {
/**
* @return {?}
*/
static forRoot() {
return { ngModule: CarouselModule, providers: [] };
}
}
CarouselModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [SlideComponent, CarouselComponent],
exports: [SlideComponent, CarouselComponent],
providers: [CarouselConfig]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { CarouselComponent, CarouselModule, SlideComponent, CarouselConfig };
//# sourceMappingURL=ngx-bootstrap-carousel.js.map