@cause-911/material
Version:
Run `npm install @cause-911/material --save` to add this library to your project
150 lines • 11.4 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
export class SlideshowComponent {
constructor() {
this.height = '150px';
this.autoPlay = true;
this.timer = null;
this.items = [];
this.states = [];
this.selectedIndex = 0;
}
/**
* @param {?} list
* @return {?}
*/
set images(list) {
this.items = list;
this.restart();
}
/**
* @return {?}
*/
get images() {
return this.items;
}
/**
* @return {?}
*/
ngOnInit() {
this.container.nativeElement.style.height = this.height;
this.container.nativeElement.style.width = '100%';
}
/**
* @param {?} index
* @return {?}
*/
getState(index) {
if (this.states[index]) {
return this.states[index];
}
return (this.selectedIndex === index ? 'in' : 'out');
}
/**
* @return {?}
*/
restart() {
if (this.timer) {
window.clearInterval(this.timer);
}
if (this.images && this.images.length) {
this.timer = window.setInterval((/**
* @return {?}
*/
() => this.changed('next')), 5000);
}
}
/**
* @return {?}
*/
next() {
if (this.selectedIndex < this.items.length - 1) {
this.selectedIndex++;
}
else {
this.selectedIndex = 0;
}
}
/**
* @private
* @param {?} action
* @return {?}
*/
changed(action) {
this.states[this.selectedIndex] = 'out';
this[action]();
this.states[this.selectedIndex] = 'in';
}
}
SlideshowComponent.decorators = [
{ type: Component, args: [{
selector: 'cause-slideshow',
template: "<div #container class=\"slideshow\">\n <div *ngFor=\"let url of images; let index = index;\" [@slideLeftRight]=\"getState(index)\">\n <img [src]=\"url\" />\n </div>\n</div>",
animations: [
trigger('slideUpDown', [
state('in', style({ transform: 'translateY(0%)' })),
state('out', style({ transform: 'translateY(-100%)' })),
transition('in => out', [
animate('500ms ease-in')
]),
transition('out => in', [
style({ transform: 'translateY(100%)' }),
animate('500ms ease-in')
]),
]),
trigger('slideLeftRight', [
state('in', style({ transform: 'translateX(0%)' })),
state('out', style({ transform: 'translateX(-100%)' })),
transition('in => out', [
animate('500ms ease-in')
]),
transition('out => in', [
style({ transform: 'translateX(100%)' }),
animate('500ms ease-in')
]),
]),
],
styles: [".slideshow{margin:0 auto;position:relative;overflow:hidden}.slideshow>div{width:100%;height:100%;position:absolute}img{max-height:100%;max-width:100%;margin:0 auto;display:block}"]
}] }
];
/** @nocollapse */
SlideshowComponent.ctorParameters = () => [];
SlideshowComponent.propDecorators = {
container: [{ type: ViewChild, args: ['container', { static: true },] }],
height: [{ type: Input }],
autoPlay: [{ type: Input }],
images: [{ type: Input }]
};
if (false) {
/** @type {?} */
SlideshowComponent.prototype.container;
/** @type {?} */
SlideshowComponent.prototype.height;
/** @type {?} */
SlideshowComponent.prototype.autoPlay;
/**
* @type {?}
* @private
*/
SlideshowComponent.prototype.timer;
/**
* @type {?}
* @private
*/
SlideshowComponent.prototype.items;
/**
* @type {?}
* @private
*/
SlideshowComponent.prototype.states;
/**
* @type {?}
* @private
*/
SlideshowComponent.prototype.selectedIndex;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVzaG93LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BjYXVzZS05MTEvbWF0ZXJpYWwvIiwic291cmNlcyI6WyJsaWIvc2xpZGVzaG93L3NsaWRlc2hvdy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsVUFBVSxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQStCakYsTUFBTSxPQUFPLGtCQUFrQjtJQW1CN0I7UUFqQlMsV0FBTSxHQUFHLE9BQU8sQ0FBQztRQUNqQixhQUFRLEdBQUcsSUFBSSxDQUFDO1FBRWpCLFVBQUssR0FBRyxJQUFJLENBQUM7UUFDYixVQUFLLEdBQUcsRUFBRSxDQUFDO1FBQ1gsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUNaLGtCQUFhLEdBQUcsQ0FBQyxDQUFDO0lBV1YsQ0FBQzs7Ozs7SUFUakIsSUFDSSxNQUFNLENBQUMsSUFBSTtRQUNiLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUNqQixDQUFDOzs7O0lBQ0QsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3BCLENBQUM7Ozs7SUFJRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDO1FBQ3hELElBQUksQ0FBQyxTQUFTLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsTUFBTSxDQUFDO0lBQ3BELENBQUM7Ozs7O0lBRUQsUUFBUSxDQUFDLEtBQUs7UUFDWixJQUFJLElBQUksQ0FBQyxNQUFNLENBQUMsS0FB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QW1COzs7OztJQUNuQixvQ0FBb0I7Ozs7O0lBQ3BCLDJDQUEwQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBFbGVtZW50UmVmLCBJbnB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBhbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY2F1c2Utc2xpZGVzaG93JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NsaWRlc2hvdy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NsaWRlc2hvdy5jb21wb25lbnQuc2NzcyddLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignc2xpZGVVcERvd24nLCBbXG4gICAgICBzdGF0ZSgnaW4nLCBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoMCUpJyB9KSksXG4gICAgICBzdGF0ZSgnb3V0Jywgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVZKC0xMDAlKScgfSkpLFxuICAgICAgdHJhbnNpdGlvbignaW4gPT4gb3V0JywgW1xuICAgICAgICBhbmltYXRlKCc1MDBtcyBlYXNlLWluJylcbiAgICAgIF0pLFxuICAgICAgdHJhbnNpdGlvbignb3V0ID0+IGluJywgW1xuICAgICAgICBzdHlsZSh7IHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoMTAwJSknIH0pLFxuICAgICAgICBhbmltYXRlKCc1MDBtcyBlYXNlLWluJylcbiAgICAgIF0pLFxuICAgIF0pLFxuICAgIHRyaWdnZXIoJ3NsaWRlTGVmdFJpZ2h0JywgW1xuICAgICAgc3RhdGUoJ2luJywgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKScgfSkpLFxuICAgICAgc3RhdGUoJ291dCcsIHN0eWxlKHsgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtMTAwJSknIH0pKSxcbiAgICAgIHRyYW5zaXRpb24oJ2luID0+IG91dCcsIFtcbiAgICAgICAgYW5pbWF0ZSgnNTAwbXMgZWFzZS1pbicpXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oJ291dCA9PiBpbicsIFtcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDEwMCUpJyB9KSxcbiAgICAgICAgYW5pbWF0ZSgnNTAwbXMgZWFzZS1pbicpXG4gICAgICBdKSxcbiAgICBdKSxcbiAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2xpZGVzaG93Q29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgQFZpZXdDaGlsZCgnY29udGFpbmVyJywgeyBzdGF0aWM6IHRydWUgfSkgY29udGFpbmVyOiBFbGVtZW50UmVmO1xuICBASW5wdXQoKSBoZWlnaHQgPSAnMTUwcHgnO1xuICBASW5wdXQoKSBhdXRvUGxheSA9IHRydWU7XG5cbiAgcHJpdmF0ZSB0aW1lciA9IG51bGw7XG4gIHByaXZhdGUgaXRlbXMgPSBbXTtcbiAgcHJpdmF0ZSBzdGF0ZXMgPSBbXTtcbiAgcHJpdmF0ZSBzZWxlY3RlZEluZGV4ID0gMDtcblxuICBASW5wdXQoKVxuICBzZXQgaW1hZ2VzKGxpc3QpIHtcbiAgICB0aGlzLml0ZW1zID0gbGlzdDtcbiAgICB0aGlzLnJlc3RhcnQoKTtcbiAgfVxuICBnZXQgaW1hZ2VzKCkge1xuICAgIHJldHVybiB0aGlzLml0ZW1zO1xuICB9XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNvbnRhaW5lci5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9IHRoaXMuaGVpZ2h0O1xuICAgIHRoaXMuY29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc3R5bGUud2lkdGggPSAnMTAwJSc7XG4gIH1cblxuICBnZXRTdGF0ZShpbmRleCkge1xuICAgIGlmICh0aGlzLnN0YXRlc1tpbmRleF0pIHtcbiAgICAgIHJldHVybiB0aGlzLnN0YXRlc1tpbmRleF07XG4gICAgfVxuXG4gICAgcmV0dXJuICh0aGlzLnNlbGVjdGVkSW5kZXggPT09IGluZGV4ID8gJ2luJyA6ICdvdXQnKTtcbiAgfVxuXG4gIHJlc3RhcnQoKSB7XG4gICAgaWYgKHRoaXMudGltZXIpIHtcbiAgICAgIHdpbmRvdy5jbGVhckludGVydmFsKHRoaXMudGltZXIpO1xuICAgIH1cbiAgICBpZiAodGhpcy5pbWFnZXMgJiYgdGhpcy5pbWFnZXMubGVuZ3RoKSB7XG4gICAgICB0aGlzLnRpbWVyID0gd2luZG93LnNldEludGVydmFsKCgpID0+IHRoaXMuY2hhbmdlZCgnbmV4dCcpLCA1MDAwKTtcbiAgICB9XG4gIH1cblxuICBuZXh0KCkge1xuICAgIGlmICh0aGlzLnNlbGVjdGVkSW5kZXggPCB0aGlzLml0ZW1zLmxlbmd0aCAtIDEpIHtcbiAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleCsrO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSAwO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgY2hhbmdlZChhY3Rpb24pIHtcbiAgICB0aGlzLnN0YXRlc1t0aGlzLnNlbGVjdGVkSW5kZXhdID0gJ291dCc7XG4gICAgdGhpc1thY3Rpb25dKCk7XG4gICAgdGhpcy5zdGF0ZXNbdGhpcy5zZWxlY3RlZEluZGV4XSA9ICdpbic7XG4gIH1cbn1cbiJdfQ==