From cda78c66e4f7e0712e1dabd9865df04b3946ed73 Mon Sep 17 00:00:00 2001
From: Aaron Louie <aaron@sartography.com>
Date: Fri, 18 Oct 2019 16:28:15 -0400
Subject: [PATCH] Uses reusable animation and scroll method

---
 src/app/about-us/about-us.component.ts | 35 +++-----------------------
 src/app/welcome/welcome.component.ts   | 33 +++---------------------
 2 files changed, 8 insertions(+), 60 deletions(-)

diff --git a/src/app/about-us/about-us.component.ts b/src/app/about-us/about-us.component.ts
index 1db37e1..6542100 100644
--- a/src/app/about-us/about-us.component.ts
+++ b/src/app/about-us/about-us.component.ts
@@ -1,38 +1,14 @@
 import {Component, ElementRef, HostListener, OnInit} from '@angular/core';
 import {ApiService} from '../api.service';
 import {Capability} from '../interfaces';
-import {animate, state, style, transition, trigger, useAnimation} from '@angular/animations';
-import {fadeIn, fadeOut} from '../animation';
-import {isEven} from '../util';
+import {animations} from '../animation';
+import {getScrollState, isEven} from '../util';
 
 @Component({
   selector: 'app-about-us',
   templateUrl: './about-us.component.html',
   styleUrls: ['./about-us.component.scss'],
-  animations: [
-    trigger('fadeInOut', [
-      transition('void <=> *', useAnimation(fadeIn)),
-      transition('* <=> void', useAnimation(fadeOut))
-    ]),
-    trigger('scrollAnimation', [
-      state(
-        'show',
-        style({
-          opacity: 1,
-          zIndex: 0
-        })
-      ),
-      state(
-        'hide',
-        style({
-          opacity: 0,
-          zIndex: 0
-        })
-      ),
-      transition('show => hide', animate('700ms ease-out')),
-      transition('hide => show', animate('700ms ease-in'))
-    ])
-  ]
+  animations: animations
 })
 export class AboutUsComponent implements OnInit {
   capabilities: Capability[];
@@ -48,9 +24,6 @@ export class AboutUsComponent implements OnInit {
 
   @HostListener('window:scroll', ['$event'])
   checkScroll() {
-    const hOffset = window.innerHeight / 2;
-    const componentPosition = this.el.nativeElement.offsetTop;
-    const scrollPosition = window.pageYOffset + hOffset;
-    this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
+    this.state = getScrollState(this.el);
   }
 }
diff --git a/src/app/welcome/welcome.component.ts b/src/app/welcome/welcome.component.ts
index 4314e4b..fd68bd9 100644
--- a/src/app/welcome/welcome.component.ts
+++ b/src/app/welcome/welcome.component.ts
@@ -7,36 +7,14 @@ import {
   trigger,
   useAnimation
 } from '@angular/animations';
-import { fadeIn, fadeOut } from '../animation';
+import {animations, fadeIn, fadeOut} from '../animation';
+import {getScrollState} from '../util';
 
 @Component({
   selector: 'app-welcome',
   templateUrl: './welcome.component.html',
   styleUrls: ['./welcome.component.scss'],
-  animations: [
-    trigger('fadeInOut', [
-      transition('void <=> *', useAnimation(fadeIn)),
-      transition('* <=> void', useAnimation(fadeOut))
-    ]),
-    trigger('scrollAnimation', [
-      state(
-        'show',
-        style({
-          opacity: 1,
-          zIndex: 0
-        })
-      ),
-      state(
-        'hide',
-        style({
-          opacity: 0,
-          zIndex: 0
-        })
-      ),
-      transition('show => hide', animate('700ms ease-out')),
-      transition('hide => show', animate('700ms ease-in'))
-    ])
-  ]
+  animations: animations
 })
 export class WelcomeComponent implements OnInit {
   state = 'hide';
@@ -47,9 +25,6 @@ export class WelcomeComponent implements OnInit {
 
   @HostListener('window:scroll', ['$event'])
   checkScroll() {
-    const hOffset = window.innerHeight / 2;
-    const componentPosition = this.el.nativeElement.offsetTop;
-    const scrollPosition = window.pageYOffset + hOffset;
-    this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
+    this.state = getScrollState(this.el);
   }
 }