Revision 59452
Added by Konstantina Galouni almost 4 years ago
| full-page-slider.component.ts | ||
|---|---|---|
| 1 | 1 |
import {AfterContentInit, Component, ContentChildren, Input, OnInit, QueryList} from "@angular/core";
|
| 2 | 2 |
import {SlideComponent} from "./slide.component";
|
| 3 |
import {BehaviorSubject, Observable} from 'rxjs';
|
|
| 3 | 4 |
|
| 4 | 5 |
@Component({
|
| 5 | 6 |
selector: 'fp-slider', |
| 6 | 7 |
template: ` |
| 7 | 8 |
<div class="menu"> |
| 8 | 9 |
<img class="logo" *ngIf="logoURL" [src]="logoURL"> |
| 9 |
<a *ngIf="state > 1" class="previous" (click)="onClick(state - 1)">
|
|
| 10 |
<a *ngIf="stateValue > 1" class="previous" (click)="onClick(stateValue - 1)">
|
|
| 10 | 11 |
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155"> |
| 11 | 12 |
<g id="Group_3053" data-name="Group 3053" transform="translate(0)"> |
| 12 | 13 |
<path id="arrow-down-left2" |
| ... | ... | |
| 17 | 18 |
</a> |
| 18 | 19 |
<nav> |
| 19 | 20 |
<ul> |
| 20 |
<li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (state - 1)"> |
|
| 21 |
<li *ngFor="let slide of slides.toArray();let i=index" [class.uk-active]="i === (stateValue - 1)">
|
|
| 21 | 22 |
<a (click)="onClick(i + 1)"></a> |
| 22 | 23 |
</li> |
| 23 | 24 |
</ul> |
| 24 | 25 |
</nav> |
| 25 |
<a *ngIf="state < slides.length" class="next" (click)="onClick(state + 1)">
|
|
| 26 |
<a *ngIf="stateValue < slides.length" class="next" (click)="onClick(stateValue + 1)">
|
|
| 26 | 27 |
<svg xmlns="http://www.w3.org/2000/svg" width="17.155" height="17.155" viewBox="0 0 17.155 17.155"> |
| 27 | 28 |
<g id="Group_2442" data-name="Group 2442" transform="translate(-1221 -675)"> |
| 28 | 29 |
<path id="arrow-down-left2" |
| ... | ... | |
| 33 | 34 |
</a> |
| 34 | 35 |
</div> |
| 35 | 36 |
<div [ngClass]="topBar" class="top-bar"></div> |
| 36 |
<section (wheel)="onWheel($event)"> |
|
| 37 |
<section (wheel)="onWheel($event)" [class.has-footer]="hasFooter && state.value === slides.length">
|
|
| 37 | 38 |
<ng-content></ng-content> |
| 38 |
</section>`, |
|
| 39 |
</section> |
|
| 40 |
<bottom *ngIf="hasFooter && state.value === slides.length" class="bottom-bar uk-animation-slide-bottom" |
|
| 41 |
[shortView]="true" [ngClass]="footerClass" |
|
| 42 |
[showOpenaire]="true" [darkBackground]="false"></bottom> |
|
| 43 |
`, |
|
| 39 | 44 |
styleUrls: ['full-page-slider.component.css'] |
| 40 | 45 |
}) |
| 41 | 46 |
export class FullPageSliderComponent implements AfterContentInit {
|
| ... | ... | |
| 46 | 51 |
@Input() |
| 47 | 52 |
public logoURL; |
| 48 | 53 |
@Input() topBar: string = null; |
| 54 |
@Input() hasFooter: boolean = null; |
|
| 55 |
@Input() footerClass: string; |
|
| 49 | 56 |
public animate: boolean = false; |
| 50 |
public state = 0;
|
|
| 57 |
public state: BehaviorSubject<number> = new BehaviorSubject<number>(0);
|
|
| 51 | 58 |
|
| 52 | 59 |
ngAfterContentInit() {
|
| 53 |
this.state = this.initSlide;
|
|
| 54 |
this.setSlides(this.state); |
|
| 60 |
this.state.next(this.initSlide);
|
|
| 61 |
this.setSlides(this.state.value);
|
|
| 55 | 62 |
} |
| 56 | 63 |
|
| 57 | 64 |
setSlides(state = 1) {
|
| ... | ... | |
| 64 | 71 |
onWheel(event) {
|
| 65 | 72 |
if (!this.animate) {
|
| 66 | 73 |
this.animate = true; |
| 67 |
if (event.deltaY > 0 && (this.state < this.slides.length)) {
|
|
| 68 |
this.state++;
|
|
| 69 |
this.setSlides(this.state); |
|
| 74 |
if (event.deltaY > 0 && (this.state.value < this.slides.length)) {
|
|
| 75 |
this.state.next(+this.state.value + 1);
|
|
| 76 |
this.setSlides(this.state.value);
|
|
| 70 | 77 |
setTimeout(() => {
|
| 71 | 78 |
this.animate = false; |
| 72 | 79 |
}, 500); |
| 73 |
} else if (event.deltaY < 0 && (this.state !== 1)) {
|
|
| 74 |
this.state--;
|
|
| 75 |
this.setSlides(this.state); |
|
| 80 |
} else if (event.deltaY < 0 && (this.state.value !== 1)) {
|
|
| 81 |
this.state.next(this.state.value - 1);
|
|
| 82 |
this.setSlides(this.state.value);
|
|
| 76 | 83 |
setTimeout(() => {
|
| 77 | 84 |
this.animate = false; |
| 78 | 85 |
}, 500); |
| ... | ... | |
| 85 | 92 |
public onClick(index: number) {
|
| 86 | 93 |
if (!this.animate) {
|
| 87 | 94 |
this.animate = true; |
| 88 |
this.state = index;
|
|
| 89 |
this.setSlides(this.state); |
|
| 95 |
this.state.next(index);
|
|
| 96 |
this.setSlides(this.state.value);
|
|
| 90 | 97 |
setTimeout(() => {
|
| 91 | 98 |
this.animate = false; |
| 92 | 99 |
}, 500); |
| 93 | 100 |
} |
| 94 | 101 |
} |
| 102 |
|
|
| 103 |
public get stateValue() {
|
|
| 104 |
return this.state.value; |
|
| 105 |
} |
|
| 106 |
|
|
| 107 |
public get stateAsObservable(): Observable<number> {
|
|
| 108 |
return this.state.asObservable(); |
|
| 109 |
} |
|
| 95 | 110 |
} |
Also available in: Unified diff
[use-UoaAdminToolsLibrary | Library]: Merge trunk into branch.