ng2-bootstrap
Version:
angular2 bootstrap components
178 lines (177 loc) • 7.1 kB
JavaScript
// todo: add animate
"use strict";
var core_1 = require('@angular/core');
var ng2_bootstrap_config_1 = require('../ng2-bootstrap-config');
(function (Direction) {
Direction[Direction["UNKNOWN"] = 0] = "UNKNOWN";
Direction[Direction["NEXT"] = 1] = "NEXT";
Direction[Direction["PREV"] = 2] = "PREV";
})(exports.Direction || (exports.Direction = {}));
var Direction = exports.Direction;
// todo:
// (ng-swipe-right)="prev()" (ng-swipe-left)="next()"
/**
* Problems:
* 1) if we set an active slide via model changes, .active class remains on a current slide.
* 2) if we have only one slide, we shouldn't show prev/next nav buttons
* 3) if first or last slide is active and noWrap is true, there should be "disabled" class on the nav buttons.
* 4) default interval should be equal 5000
*/
var CarouselComponent = (function () {
function CarouselComponent() {
this.slides = [];
this.destroyed = false;
}
Object.defineProperty(CarouselComponent.prototype, "interval", {
get: function () {
return this._interval;
},
set: function (value) {
this._interval = value;
this.restartTimer();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CarouselComponent.prototype, "isBS4", {
get: function () {
return ng2_bootstrap_config_1.Ng2BootstrapConfig.theme === ng2_bootstrap_config_1.Ng2BootstrapTheme.BS4;
},
enumerable: true,
configurable: true
});
CarouselComponent.prototype.ngOnDestroy = function () {
this.destroyed = true;
};
CarouselComponent.prototype.select = function (nextSlide, direction) {
if (direction === void 0) { direction = Direction.UNKNOWN; }
var nextIndex = nextSlide.index;
if (direction === Direction.UNKNOWN) {
direction = nextIndex > this.getCurrentIndex()
? Direction.NEXT
: Direction.PREV;
}
// Prevent this user-triggered transition from occurring if there is
// already one in progress
if (nextSlide && nextSlide !== this.currentSlide) {
this.goNext(nextSlide, direction);
}
};
CarouselComponent.prototype.play = function () {
if (!this.isPlaying) {
this.isPlaying = true;
this.restartTimer();
}
};
CarouselComponent.prototype.pause = function () {
if (!this.noPause) {
this.isPlaying = false;
this.resetTimer();
}
};
CarouselComponent.prototype.next = function () {
var newIndex = (this.getCurrentIndex() + 1) % this.slides.length;
if (newIndex === 0 && this.noWrap) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.NEXT);
};
CarouselComponent.prototype.prev = function () {
var newIndex = this.getCurrentIndex() - 1 < 0
? this.slides.length - 1
: this.getCurrentIndex() - 1;
if (this.noWrap && newIndex === this.slides.length - 1) {
this.pause();
return;
}
return this.select(this.getSlideByIndex(newIndex), Direction.PREV);
};
CarouselComponent.prototype.addSlide = function (slide) {
slide.index = this.slides.length;
this.slides.push(slide);
if (this.slides.length === 1 || slide.active) {
this.select(this.slides[this.slides.length - 1]);
if (this.slides.length === 1) {
this.play();
}
}
else {
slide.active = false;
}
};
CarouselComponent.prototype.removeSlide = function (slide) {
this.slides.splice(slide.index, 1);
if (this.slides.length === 0) {
this.currentSlide = void 0;
return;
}
for (var i = 0; i < this.slides.length; i++) {
this.slides[i].index = i;
}
};
CarouselComponent.prototype.goNext = function (slide, direction) {
if (this.destroyed) {
return;
}
slide.direction = direction;
slide.active = true;
if (this.currentSlide) {
this.currentSlide.direction = direction;
this.currentSlide.active = false;
}
this.currentSlide = slide;
// every time you change slides, reset the timer
this.restartTimer();
};
CarouselComponent.prototype.getSlideByIndex = function (index) {
var len = this.slides.length;
for (var i = 0; i < len; ++i) {
if (this.slides[i].index === index) {
return this.slides[i];
}
}
return void 0;
};
CarouselComponent.prototype.getCurrentIndex = function () {
return !this.currentSlide ? 0 : this.currentSlide.index;
};
CarouselComponent.prototype.restartTimer = function () {
var _this = this;
this.resetTimer();
var interval = +this.interval;
if (!isNaN(interval) && interval > 0) {
this.currentInterval = setInterval(function () {
var nInterval = +_this.interval;
if (_this.isPlaying && !isNaN(_this.interval) && nInterval > 0 && _this.slides.length) {
_this.next();
}
else {
_this.pause();
}
}, interval);
}
};
CarouselComponent.prototype.resetTimer = function () {
if (this.currentInterval) {
clearInterval(this.currentInterval);
this.currentInterval = void 0;
}
};
CarouselComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'carousel',
template: "\n <div (mouseenter)=\"pause()\" (mouseleave)=\"play()\" class=\"carousel slide\">\n <ol class=\"carousel-indicators\" *ngIf=\"slides.length > 1\">\n <li *ngFor=\"let slidez of slides\" [class.active]=\"slidez.active === true\" (click)=\"select(slidez)\"></li>\n </ol>\n <div class=\"carousel-inner\"><ng-content></ng-content></div>\n <a class=\"left carousel-control\" (click)=\"prev()\" *ngIf=\"slides.length\">\n <span class=\"icon-prev\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBS4\" class=\"sr-only\">Previous</span>\n </a>\n <a class=\"right carousel-control\" (click)=\"next()\" *ngIf=\"slides.length\">\n <span class=\"icon-next\" aria-hidden=\"true\"></span>\n <span *ngIf=\"isBS4\" class=\"sr-only\">Next</span>\n </a>\n </div>\n "
},] },
];
/** @nocollapse */
CarouselComponent.ctorParameters = [];
CarouselComponent.propDecorators = {
'noWrap': [{ type: core_1.Input },],
'noPause': [{ type: core_1.Input },],
'noTransition': [{ type: core_1.Input },],
'interval': [{ type: core_1.Input },],
};
return CarouselComponent;
}());
exports.CarouselComponent = CarouselComponent;