import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
import {SlideComponent} from "./slide.component";
@Component({
selector: 'fp-slider',
template: `
`,
styleUrls: ['full-page-slider.component.css']
})
export class FullPageSliderComponent implements AfterContentInit {
@ContentChildren(SlideComponent) slides: QueryList;
@Input()
public initSlide = 1;
@Input()
public logoURL;
public animate: boolean = false;
public state = 0;
ngAfterContentInit() {
this.state = this.initSlide;
this.setSlides(this.state);
}
setSlides(state = 1) {
this.slides.forEach((slide, index) => {
slide.state = state;
slide.y = -50 + (index + 1) * 200 - state * 200;
});
}
onWheel(event) {
if (!this.animate) {
this.animate = true;
if (event.deltaY > 0 && (this.state < this.slides.length)) {
this.state++;
this.setSlides(this.state);
setTimeout(() => {
this.animate = false;
}, 500);
} else if (event.deltaY < 0 && (this.state !== 1)) {
this.state--;
this.setSlides(this.state);
setTimeout(() => {
this.animate = false;
}, 500);
} else {
this.animate = false;
}
}
}
public onClick(index: number) {
if (!this.animate) {
this.animate = true;
this.state = index;
this.setSlides(this.state);
setTimeout(() => {
this.animate = false;
}, 500);
}
}
}