[Library | Trunk]: Create full page slider component

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58919 d315682c-612b-4755-9ff5-7f18f6832af3

utils/full-page-slider/animation.ts

@@ -0,0 +1,10 @@
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+export const animation = trigger('state', [
+  state('*', style({
+    transform: 'translate(-50%, {{y}}%)'
+  }), {params: {y: -50}}),
+  transition('* => *', [
+    animate('1s')
+  ])
+]);

utils/full-page-slider/full-page-slider.component.css

@@ -0,0 +1,8 @@
+section {
+  position: fixed;
+  top:10%;
+  left: 0;
+  height: 90%;
+  width: 100%;
+  overflow: hidden;
+}

utils/full-page-slider/full-page-slider.component.ts

@@ -0,0 +1,51 @@
+import {AfterContentInit, Component, ContentChildren, QueryList} from "@angular/core";
+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>;
+  
+  public animate: boolean = false;
+  public state = 0;
+  
+  ngAfterContentInit() {
+    this.setSlides();
+    this.state = 1;
+  }
+  
+  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;
+      }
+    }
+  }
+}

utils/full-page-slider/full-page-slider.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {FullPageSliderComponent} from "./full-page-slider.component";
+import {SlideComponent} from "./slide.component";
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [FullPageSliderComponent, SlideComponent],
+  exports: [FullPageSliderComponent, SlideComponent],
+})
+export class FullPageSliderModule {
+
+}

utils/full-page-slider/slide.component.ts

@@ -0,0 +1,27 @@
+import {Component} from "@angular/core";
+import {animation} from "./animation";
+import {transition, trigger} from "@angular/animations";
+
+@Component({
+  selector: 'slide',
+  template: `
+    <div @blockInitialRenderAnimation>
+      <div [@state]="{value: state, params: {y: y}}"
+           style="position: absolute;top: 40%;left: 50%;width: 100%;">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  animations: [animation,
+    trigger(
+      "blockInitialRenderAnimation",
+      [
+        transition( ":enter", [] )
+      ]
+    )]
+})
+export class SlideComponent {
+  state: number = 1
+  y: number = -50;
+  medium: boolean = true;
+}