87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
|
|
import {SlideComponent} from "./slide.component";
|
|
|
|
@Component({
|
|
selector: 'fp-slider',
|
|
template: `
|
|
<div class="menu">
|
|
<img class="logo" *ngIf="logoURL" [src]="logoURL">
|
|
<a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">
|
|
<span class="uk-icon uk-preserve">
|
|
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="arrow-up">
|
|
<polygon points="10.5,4 15.37,9.4 14.63,10.08 10.5,5.49 6.37,10.08 5.63,9.4"></polygon>
|
|
<line fill="none" stroke="#000" x1="10.5" y1="16" x2="10.5" y2="5"></line>
|
|
</svg>
|
|
</span>
|
|
</a>
|
|
<nav>
|
|
<ul>
|
|
<li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (state - 1)">
|
|
<a (click)="onClick(i + 1)"></a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
<a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">
|
|
<span uk-icon="arrow-down"></span>
|
|
</a>
|
|
</div>
|
|
<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>;
|
|
@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);
|
|
}
|
|
}
|
|
}
|