From 80c6eee89330d95bddb4a0fd5f775284ecdbe7e2 Mon Sep 17 00:00:00 2001
From: Jack Matthews <jack@jackhkmatthews.com>
Date: Thu, 7 Jun 2018 17:36:50 +0100
Subject: [PATCH] feat(scroll-collapse): emit scroll direction events

---
 README.md                                          |  6 +++---
 src/app/app.component.html                         |  2 +-
 src/app/app.component.ts                           |  7 ++++++-
 .../scroll-collapse.directive.spec.ts              | 14 ++++++++++++++
 .../scroll-collapse/scroll-collapse.directive.ts   | 11 ++++++++++-
 5 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 9a26c23..9109b92 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 [![Commitizen friendly][commitizen-badge]][commitizen]
 [![code style: prettier][prettier-badge]][prettier-badge-url]
 
-A simple lightweight library for [Angular][angular] that detects scroll direction and adds a `sn-scrolling-up` or `sn-scrolling-down` class to the element. The library can also detect when the user has scrolled passed the element and apply a `sn-affix` class. Useful for make a element sticky when the user has scrolled beyond it. This library can will also apply `sn-minimise` class after the user has scrolled beyond the height of the element.
+A simple lightweight library for [Angular][angular] that detects scroll direction and adds a `sn-scrolling-up` or `sn-scrolling-down` class to the element and emits an appropriate event. The library can also detect when the user has scrolled passed the element and apply a `sn-affix` class. Useful for make a element sticky when the user has scrolled beyond it. This library can will also apply `sn-minimise` class after the user has scrolled beyond the height of the element.
 
 This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0][apfv5].
 
@@ -60,15 +60,15 @@ A working example can be found inside [/src](https://github.com/thisissoon/angul
 ### Scroll direction
 
 ```html
-<nav class="foo" snScrollCollapse>
+<nav class="foo" snScrollCollapse (scrollDirectionChange)="scrollDirectionHandler($event)">
   ...
 </nav>
 ```
 
 ```css
 .foo {
-  left: 0;
   height: 100px;
+  left: 0;
   position: fixed;
   right: 0;
   top: 0;
diff --git a/src/app/app.component.html b/src/app/app.component.html
index fe5c834..07cc1fa 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,6 +1,6 @@
 <h1>Scroll down ↓</h1>
 
-<nav class="nav" snScrollCollapse>
+<nav class="nav" snScrollCollapse (scrollDirectionChange)="scrollDirectionHandler($event)">
   My nav&nbsp;
   <span class="down">Going down</span>
   <span class="up">Going up</span>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 1a91fa7..1c853e9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,13 @@
 import { Component } from '@angular/core';
+import { Direction } from '..';
 
 @Component({
   selector: 'sn-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {}
+export class AppComponent {
+  scrollDirectionHandler(event: Direction) {
+    console.log(event);
+  }
+}
diff --git a/src/app/scroll-collapse/scroll-collapse.directive.spec.ts b/src/app/scroll-collapse/scroll-collapse.directive.spec.ts
index 843d64a..6023141 100644
--- a/src/app/scroll-collapse/scroll-collapse.directive.spec.ts
+++ b/src/app/scroll-collapse/scroll-collapse.directive.spec.ts
@@ -3,6 +3,7 @@ import { ElementRef, SimpleChanges } from '@angular/core';
 import { WindowRef } from '@thisissoon/angular-inviewport';
 
 import { ScrollCollapseDirective } from './scroll-collapse.directive';
+import { Direction } from './shared/direction.enum';
 
 describe('ScrollCollapseDirective', () => {
   let node: HTMLElement;
@@ -113,6 +114,19 @@ describe('ScrollCollapseDirective', () => {
       ]);
       expect(directive.isScrollingDown).toBeTruthy();
     });
+    it('should emit scroll direction event on scroll', () => {
+      const spy = spyOn(directive.scrollDirectionChange, 'emit');
+      directive.calculateScrollDirection([
+        { scrollX: 0, scrollY: 0, width: 1266, height: 768 },
+        { scrollX: 0, scrollY: 100, width: 1266, height: 768 }
+      ]);
+      expect(spy).toHaveBeenCalledWith(Direction.DOWN);
+      directive.calculateScrollDirection([
+        { scrollX: 0, scrollY: 100, width: 1266, height: 768 },
+        { scrollX: 0, scrollY: 0, width: 1266, height: 768 }
+      ]);
+      expect(spy).toHaveBeenCalledWith(Direction.UP);
+    });
   });
 
   describe('minimise mode', () => {
diff --git a/src/app/scroll-collapse/scroll-collapse.directive.ts b/src/app/scroll-collapse/scroll-collapse.directive.ts
index 45d8f81..a20ca1e 100644
--- a/src/app/scroll-collapse/scroll-collapse.directive.ts
+++ b/src/app/scroll-collapse/scroll-collapse.directive.ts
@@ -5,7 +5,9 @@ import {
   Input,
   NgZone,
   AfterViewInit,
-  OnDestroy
+  OnDestroy,
+  Output,
+  EventEmitter
 } from '@angular/core';
 import { fromEvent, merge, Subject } from 'rxjs';
 import {
@@ -47,6 +49,12 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
    * @memberof ScrollCollapseDirective
    */
   private scrollDirection: Direction;
+  /**
+   * Emits scroll direction on scroll or window resize.
+   *
+   * @memberof ScrollCollapseDirective
+   */
+  @Output() scrollDirectionChange = new EventEmitter<Direction>();
   /**
    * Original offsetTop of element
    *
@@ -192,6 +200,7 @@ export class ScrollCollapseDirective implements AfterViewInit, OnDestroy {
     }
     this.scrollDirection =
       pastEvent.scrollY > currentEvent.scrollY ? Direction.UP : Direction.DOWN;
+    this.scrollDirectionChange.emit(this.scrollDirection);
   }
   /**
    * Calculate if the user has scrolled pass the origin height of