2020-06-16 19:07:32 +02:00
|
|
|
import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
|
2020-06-15 21:02:44 +02:00
|
|
|
import {SlideComponent} from "./slide.component";
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'fp-slider',
|
|
|
|
template: `
|
|
|
|
<section (wheel)="onWheel($event)">
|
|
|
|
<ng-content></ng-content>
|
|
|
|
</section>`,
|
|
|
|
styleUrls: ['full-page-slider.component.css']
|
|
|
|
})
|
|
|
|
export class FullPageSliderComponent implements AfterContentInit {
|
|
|
|
|
|
|
|
@ContentChildren(SlideComponent) slides: QueryList<SlideComponent>;
|
2020-06-16 19:07:32 +02:00
|
|
|
@Input()
|
|
|
|
public initSlide = 1;
|
2020-06-15 21:02:44 +02:00
|
|
|
public animate: boolean = false;
|
|
|
|
public state = 0;
|
|
|
|
|
|
|
|
ngAfterContentInit() {
|
2020-06-16 19:07:32 +02:00
|
|
|
this.state = this.initSlide;
|
|
|
|
this.setSlides(this.state);
|
2020-06-15 21:02:44 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|
|
|
|
}, 1000);
|
|
|
|
} else if (event.deltaY < 0 && (this.state !== 1)) {
|
|
|
|
this.state--;
|
|
|
|
this.setSlides(this.state);
|
|
|
|
setTimeout(() => {
|
|
|
|
this.animate = false;
|
|
|
|
}, 1000);
|
|
|
|
} else {
|
|
|
|
this.animate = false;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|