You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
331 lines
14 KiB
JavaScript
331 lines
14 KiB
JavaScript
"use strict";
|
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
};
|
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var core_1 = require("@angular/core");
|
|
var domhandler_1 = require("../dom/domhandler");
|
|
var shared_1 = require("../common/shared");
|
|
var common_1 = require("@angular/common");
|
|
var Carousel = /** @class */ (function () {
|
|
function Carousel(el, renderer, cd) {
|
|
this.el = el;
|
|
this.renderer = renderer;
|
|
this.cd = cd;
|
|
this.numVisible = 3;
|
|
this.firstVisible = 0;
|
|
this.circular = false;
|
|
this.breakpoint = 560;
|
|
this.responsive = true;
|
|
this.autoplayInterval = 0;
|
|
this.effectDuration = '1s';
|
|
this.easing = 'ease-out';
|
|
this.pageLinks = 3;
|
|
this.onPage = new core_1.EventEmitter();
|
|
this.left = 0;
|
|
this.columns = 0;
|
|
}
|
|
Carousel.prototype.ngAfterContentInit = function () {
|
|
var _this = this;
|
|
this.templates.forEach(function (item) {
|
|
switch (item.getType()) {
|
|
case 'item':
|
|
_this.itemTemplate = item.template;
|
|
break;
|
|
default:
|
|
_this.itemTemplate = item.template;
|
|
break;
|
|
}
|
|
});
|
|
};
|
|
Object.defineProperty(Carousel.prototype, "value", {
|
|
get: function () {
|
|
return this._value;
|
|
},
|
|
set: function (val) {
|
|
this._value = val;
|
|
this.handleDataChange();
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Carousel.prototype.handleDataChange = function () {
|
|
if (this.value && this.value.length) {
|
|
if (this.value.length && this.firstVisible >= this.value.length) {
|
|
this.setPage(this.totalPages - 1);
|
|
}
|
|
}
|
|
else {
|
|
this.setPage(0);
|
|
}
|
|
this.valuesChanged = true;
|
|
};
|
|
Carousel.prototype.ngAfterViewChecked = function () {
|
|
if (this.valuesChanged && this.containerViewChild.nativeElement.offsetParent) {
|
|
this.render();
|
|
this.valuesChanged = false;
|
|
}
|
|
};
|
|
Carousel.prototype.ngAfterViewInit = function () {
|
|
var _this = this;
|
|
if (this.responsive) {
|
|
this.documentResponsiveListener = this.renderer.listen('window', 'resize', function (event) {
|
|
_this.updateState();
|
|
});
|
|
}
|
|
};
|
|
Carousel.prototype.updateLinks = function () {
|
|
this.anchorPageLinks = [];
|
|
for (var i = 0; i < this.totalPages; i++) {
|
|
this.anchorPageLinks.push(i);
|
|
}
|
|
};
|
|
Carousel.prototype.updateDropdown = function () {
|
|
this.selectDropdownOptions = [];
|
|
for (var i = 0; i < this.totalPages; i++) {
|
|
this.selectDropdownOptions.push(i);
|
|
}
|
|
};
|
|
Carousel.prototype.updateMobileDropdown = function () {
|
|
this.mobileDropdownOptions = [];
|
|
if (this.value && this.value.length) {
|
|
for (var i = 0; i < this.value.length; i++) {
|
|
this.mobileDropdownOptions.push(i);
|
|
}
|
|
}
|
|
};
|
|
Carousel.prototype.render = function () {
|
|
if (this.autoplayInterval) {
|
|
this.stopAutoplay();
|
|
}
|
|
this.items = domhandler_1.DomHandler.find(this.itemsViewChild.nativeElement, 'li');
|
|
this.calculateColumns();
|
|
this.calculateItemWidths();
|
|
this.setPage(Math.floor(this.firstVisible / this.columns), true);
|
|
if (!this.responsive) {
|
|
this.containerViewChild.nativeElement.style.width = (domhandler_1.DomHandler.width(this.containerViewChild.nativeElement)) + 'px';
|
|
}
|
|
if (this.autoplayInterval) {
|
|
this.circular = true;
|
|
this.startAutoplay();
|
|
}
|
|
this.updateMobileDropdown();
|
|
this.updateLinks();
|
|
this.updateDropdown();
|
|
this.cd.detectChanges();
|
|
};
|
|
Carousel.prototype.calculateItemWidths = function () {
|
|
var firstItem = (this.items && this.items.length) ? this.items[0] : null;
|
|
if (firstItem) {
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
this.items[i].style.width = ((domhandler_1.DomHandler.innerWidth(this.viewportViewChild.nativeElement) - (domhandler_1.DomHandler.getHorizontalMargin(firstItem) * this.columns)) / this.columns) + 'px';
|
|
}
|
|
}
|
|
};
|
|
Carousel.prototype.calculateColumns = function () {
|
|
if (window.innerWidth <= this.breakpoint) {
|
|
this.shrinked = true;
|
|
this.columns = 1;
|
|
}
|
|
else {
|
|
this.shrinked = false;
|
|
this.columns = this.numVisible;
|
|
}
|
|
this.page = Math.floor(this.firstVisible / this.columns);
|
|
};
|
|
Carousel.prototype.onNextNav = function () {
|
|
var lastPage = (this.page === (this.totalPages - 1));
|
|
if (!lastPage)
|
|
this.setPage(this.page + 1);
|
|
else if (this.circular)
|
|
this.setPage(0);
|
|
};
|
|
Carousel.prototype.onPrevNav = function () {
|
|
if (this.page !== 0)
|
|
this.setPage(this.page - 1);
|
|
else if (this.circular)
|
|
this.setPage(this.totalPages - 1);
|
|
};
|
|
Carousel.prototype.setPageWithLink = function (event, p) {
|
|
this.setPage(p);
|
|
event.preventDefault();
|
|
};
|
|
Carousel.prototype.setPage = function (p, enforce) {
|
|
if (p !== this.page || enforce) {
|
|
this.page = p;
|
|
this.left = (-1 * (domhandler_1.DomHandler.innerWidth(this.viewportViewChild.nativeElement) * this.page));
|
|
this.firstVisible = this.page * this.columns;
|
|
this.onPage.emit({
|
|
page: this.page
|
|
});
|
|
}
|
|
};
|
|
Carousel.prototype.onDropdownChange = function (val) {
|
|
this.setPage(parseInt(val));
|
|
};
|
|
Object.defineProperty(Carousel.prototype, "displayPageLinks", {
|
|
get: function () {
|
|
return (this.totalPages <= this.pageLinks && !this.shrinked);
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(Carousel.prototype, "displayPageDropdown", {
|
|
get: function () {
|
|
return (this.totalPages > this.pageLinks && !this.shrinked);
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(Carousel.prototype, "totalPages", {
|
|
get: function () {
|
|
return (this.value && this.value.length) ? Math.ceil(this.value.length / this.columns) : 0;
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Carousel.prototype.routerDisplay = function () {
|
|
var win = window;
|
|
if (win.innerWidth <= this.breakpoint)
|
|
return true;
|
|
else
|
|
return false;
|
|
};
|
|
Carousel.prototype.updateState = function () {
|
|
var win = window;
|
|
if (win.innerWidth <= this.breakpoint) {
|
|
this.shrinked = true;
|
|
this.columns = 1;
|
|
}
|
|
else if (this.shrinked) {
|
|
this.shrinked = false;
|
|
this.columns = this.numVisible;
|
|
this.updateLinks();
|
|
this.updateDropdown();
|
|
}
|
|
this.calculateItemWidths();
|
|
this.setPage(Math.floor(this.firstVisible / this.columns), true);
|
|
};
|
|
Carousel.prototype.startAutoplay = function () {
|
|
var _this = this;
|
|
this.interval = setInterval(function () {
|
|
if (_this.page === (_this.totalPages - 1))
|
|
_this.setPage(0);
|
|
else
|
|
_this.setPage(_this.page + 1);
|
|
}, this.autoplayInterval);
|
|
};
|
|
Carousel.prototype.stopAutoplay = function () {
|
|
clearInterval(this.interval);
|
|
};
|
|
Carousel.prototype.ngOnDestroy = function () {
|
|
if (this.documentResponsiveListener) {
|
|
this.documentResponsiveListener();
|
|
}
|
|
if (this.autoplayInterval) {
|
|
this.stopAutoplay();
|
|
}
|
|
};
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Carousel.prototype, "numVisible", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Carousel.prototype, "firstVisible", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Carousel.prototype, "headerText", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Carousel.prototype, "circular", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Carousel.prototype, "breakpoint", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Carousel.prototype, "responsive", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Carousel.prototype, "autoplayInterval", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object)
|
|
], Carousel.prototype, "effectDuration", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Carousel.prototype, "easing", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Carousel.prototype, "pageLinks", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object)
|
|
], Carousel.prototype, "style", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Carousel.prototype, "styleClass", void 0);
|
|
__decorate([
|
|
core_1.Output(),
|
|
__metadata("design:type", core_1.EventEmitter)
|
|
], Carousel.prototype, "onPage", void 0);
|
|
__decorate([
|
|
core_1.ContentChildren(shared_1.PrimeTemplate),
|
|
__metadata("design:type", core_1.QueryList)
|
|
], Carousel.prototype, "templates", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('container'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Carousel.prototype, "containerViewChild", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('viewport'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Carousel.prototype, "viewportViewChild", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('items'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Carousel.prototype, "itemsViewChild", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Array),
|
|
__metadata("design:paramtypes", [Array])
|
|
], Carousel.prototype, "value", null);
|
|
Carousel = __decorate([
|
|
core_1.Component({
|
|
selector: 'p-carousel',
|
|
template: "\n <div #container [ngClass]=\"{'ui-carousel ui-widget ui-widget-content ui-corner-all':true}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n <div class=\"ui-carousel-header ui-widget-header ui-corner-all\">\n <span class=\"ui-carousel-header-title\">{{headerText}}</span>\n <span class=\"ui-carousel-button ui-carousel-next-button pi pi-arrow-circle-right\" (click)=\"onNextNav()\" \n [ngClass]=\"{'ui-state-disabled':(page === (totalPages-1)) && !circular}\" *ngIf=\"value&&value.length\"></span>\n <span class=\"ui-carousel-button ui-carousel-prev-button pi pi-arrow-circle-left\" (click)=\"onPrevNav()\" \n [ngClass]=\"{'ui-state-disabled':(page === 0 && !circular)}\" *ngIf=\"value&&value.length\"></span>\n <div *ngIf=\"displayPageLinks\" class=\"ui-carousel-page-links\">\n <a tabindex=\"0\" (click)=\"setPageWithLink($event,i)\" class=\"ui-carousel-page-link pi\" *ngFor=\"let links of anchorPageLinks;let i=index\" [ngClass]=\"{'pi-circle-on': page===i, 'pi-circle-off': page !== i}\"></a>\n </div>\n <select *ngIf=\"displayPageDropdown\" class=\"ui-carousel-dropdown ui-widget ui-state-default ui-corner-left\" [value]=\"page\" (change)=\"onDropdownChange($event.target.value)\">\n <option *ngFor=\"let option of selectDropdownOptions\" [value]=\"option\" [selected]=\"value == option\">{{option+1}}</option>\n </select>\n <select *ngIf=\"responsive&&value&&value.length\" class=\"ui-carousel-mobiledropdown ui-widget ui-state-default ui-corner-left\" [value]=\"page\" (change)=\"onDropdownChange($event.target.value)\"\n [style.display]=\"shrinked ? 'block' : 'none'\">\n <option *ngFor=\"let option of mobileDropdownOptions\" [value]=\"option\" [selected]=\"value == option\">{{option+1}}</option>\n </select>\n </div>\n <div #viewport class=\"ui-carousel-viewport\">\n <ul #items class=\"ui-carousel-items\" [style.left.px]=\"left\" [style.transitionProperty]=\"'left'\" \n [style.transitionDuration]=\"effectDuration\" [style.transitionTimingFunction]=\"easing\">\n <li *ngFor=\"let item of value\" class=\"ui-carousel-item ui-widget-content ui-corner-all\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: {$implicit: item}\"></ng-container>\n </li>\n </ul>\n </div>\n </div>\n "
|
|
}),
|
|
__metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.ChangeDetectorRef])
|
|
], Carousel);
|
|
return Carousel;
|
|
}());
|
|
exports.Carousel = Carousel;
|
|
var CarouselModule = /** @class */ (function () {
|
|
function CarouselModule() {
|
|
}
|
|
CarouselModule = __decorate([
|
|
core_1.NgModule({
|
|
imports: [common_1.CommonModule, shared_1.SharedModule],
|
|
exports: [Carousel, shared_1.SharedModule],
|
|
declarations: [Carousel]
|
|
})
|
|
], CarouselModule);
|
|
return CarouselModule;
|
|
}());
|
|
exports.CarouselModule = CarouselModule;
|
|
//# sourceMappingURL=carousel.js.map
|