feat(core): migrate to ScrollReveal v4.x.x

- add `desktop` option in `NgsRevealConfig` - add `beforeReveal$`, `afterReveal$`, `beforeReset$`, `afterReset$` observables in `NgsRevealService` to subscribe to these events (see usage [here](https://github.com/tinesoft/ng-scrollreveal#subscribing-to-scrollreveal-events)) BREAKING CHANGE: Here are the breaking changes, mostly coming from ScrollReveal: - `@types/scrollreveal` is no longer necessary and **must be removed** from your `package.son` - `options.distance` now only supports `em`, `px` and `%` values - `NgsRevealConfig` default values have been updated to match [ScrollReveal](https://scrollrevealjs.org/api/defaults.html)'s - be aware that `ScrollReveal` now requires a **commercial license**, unless for [GPL-3.0](https://opensource.org/licenses/GPL-3.0) compatible open source projects.
tinesoft · Sep 18, 2018 · 264d0bb · 264d0bb
1 parent 0f5b9a3
commit 264d0bb
Show file tree

Hide file tree

Showing 13 changed files with 401 additions and 101 deletions.
diff --git a/README.md b/README.md
@@ -13,47 +13,53 @@ ScrollReveal JS is a great library that allows easy scroll animations for web an
 View all the directives in action at https://tinesoft.github.io/ng-scrollreveal
 
 ## Dependencies
-* [Angular](https://angular.io) (*requires* Angular 2 or higher, tested with 2.0.0)
-* [ScrollReveal](https://scrollrevealjs.org) (*requires* ScrollReveal 3.2 or higher, tested with 3.2.0)
+
+* [Angular](https://angular.io) (*requires* Angular 6+, [v2.2.0](https://github.com/tinesoft/ng-scrollreveal/tree/v2.2.0) is the latest version for Angular < 6 )
+* [ScrollReveal](https://scrollrevealjs.org) (*requires* ScrollReveal 4 or higher, tested with 4.0.2)
 
 ## Installation
+
 Install above dependencies via *npm*. In particular for `ScrollReveal JS`, run:
-```shell
-npm install --save scrollreveal
-```
 
-To avoid compilation warnings during development, you can also install the typings for `ScrollReveal JS` :
 ```shell
-npm install --save-dev @types/scrollreveal
+npm install --save scrollreveal
 ```
 
-
 ---
+
 ##### Angular-CLI
->**Note**: If you are using `angular-cli` to build your app, make sure that `scrollreveal` is properly listed as a [global library](https://github.com/angular/angular-cli#global-library-installation), by editing your `angular-cli.json` as such:
+
+>**Note**: If you are using `angular-cli` to build your app, make sure that `scrollreveal` is properly listed as a [global library](https://github.com/angular/angular-cli/wiki/stories-global-lib), by editing your `angular.json` as such:
+
 ```
       "scripts": [
         "../node_modules/scrollreveal/dist/scrollreveal.js"
       ],
 ```
 
 ##### SystemJS
+
 >**Note**:If you are using `SystemJS`, you should adjust your configuration to point to the UMD bundle.
 In your systemjs config file, `map` needs to tell the System loader where to look for `ng-scrollreveal`:
+
 ```js
 map: {
   'ng-scrollreveal': 'node_modules/ng-scrollreveal/bundles/ng-scrollreveal.min.js',
 }
 ```
+
 In your systemjs config file, `meta` needs to tell the System loader how to load `scrollreveal`:
+
 ```js
     meta: {
     './node_modules/scrollreveal/dist/scrollreveal.min.js': {
             format: 'amd'
         }
     }
 ```
+
 In your index.html file, add script tag to load  `scrollreveal` globally:
+
 ```html
     <!-- 1. Configure SystemJS -->
     <script src="system.config.js"></script>
@@ -63,24 +69,33 @@ In your index.html file, add script tag to load  `scrollreveal` globally:
 
 ---
 
-
 Now install `ng-scrollreveal` via:
+
 ```shell
 npm install --save ng-scrollreveal
 ```
 
 Once installed you need to import the main module:
+
 ```js
 import {NgsRevealModule} from 'ng-scrollreveal';
 ```
+
 The only remaining part is to list the imported module in your application module. The exact method will be slightly
 different for the root (top-level) module for which you should end up with the code similar to (notice `NgsRevealModule.forRoot()`):
-```js
+
+```ts
 import {NgsRevealModule} from 'ng-scrollreveal';
 
+// you can optionally provide a config, to change default options used by the directives
+const config:NgsRevealConfig = {
+    easing: 'cubic-bezier(0.2, 0, 0.5, 1)',
+    distance: '20px'
+}
+
 @NgModule({
   declarations: [AppComponent, ...],
-  imports: [NgsRevealModule.forRoot(), ...],  
+  imports: [NgsRevealModule.forRoot(config), ...],  
   bootstrap: [AppComponent]
 })
 export class AppModule {
@@ -105,7 +120,8 @@ export class OtherModule {
 The library is composed of two main directives: `ngsReveal` and `ngsRevealSet`.
 
 ### ngsReveal Directive
------------------------
+
+---
 
 Use this directive to reveal/hide a **single DOM element** upon scroll.
 
@@ -118,16 +134,19 @@ Use this directive to reveal/hide a **single DOM element** upon scroll.
 ##### With Custom Options:
 
 You can also pass in a custom configuration object to the directive.
+
 ```html
     <div class="item" [ngsReveal]="{ reset: true}" >..</div>
 ```
+
 This will override the default configuration used when revealing this particular element.
 When no configuration is passed in, the directive uses the default configuration defined at component or at application level.
 
-Configuration options are the same as ScrollReveal JS [configuration object](https://github.com/jlmakes/scrollreveal#2-configuration). 
+Configuration options are the same as ScrollReveal JS [configuration object](https://scrollrevealjs.org/guide/customization.html).
 
 ### ngsRevealSet Directive
----------------------------
+
+---
 
 Use this directive to reveal/hide a **set of DOM elements** upon scroll.
 
@@ -136,7 +155,7 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
 >**Note:** The value is a list of CSS selectors (comma-separated).
 
 
-##### Basic Usage:
+#### Basic Usage:
 
 ```html
     <div class="itemset" ngsRevealSet [ngsSelector]="'.item'">
@@ -148,7 +167,7 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
     </div>
 ```
 
-##### With Custom Options:
+#### With Custom Options:
 
 ```html
     <div class="itemset" [ngsRevealSet]="{ reset:true}" [ngsSelector]="'.item'">
@@ -159,9 +178,10 @@ Use this directive to reveal/hide a **set of DOM elements** upon scroll.
         <div class="item5">Item 5 (will not be animated)</div>
     </div>
 ```
+
 Configuration options are the same as ScrollReveal JS [configuration object](https://github.com/jlmakes/scrollreveal#2-configuration). 
 
-##### Sequentially animated items: 
+#### Sequentially animated items:
 
 Child items inside the parent set can be sequentially animated, by adding the `[ngsRevealInterval]` attribute.
 
@@ -178,8 +198,9 @@ Child items inside the parent set can be sequentially animated, by adding the `[
 
 ```
 
-### Global Configuration 
-------------------------
+### Global Configuration
+
+---
 
 You can inject the config service, typically in your root component, and customize the values of its properties in order to provide default values for all the ng-reveal directives used in the application.
 
@@ -205,6 +226,60 @@ export class AppComponent {
 ```
 
 
+### Subscribing to ScrollReveal events
+
+---
+
+You can now subscribe to some events triggered by `ScrollReveal` before/after an element is revealed/reset.
+
+```ts
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { NgsRevealService } from 'ng-scrollreveal';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+  providers: [NgbTabsetConfig] // add NgsRevealConfig to the component providers
+})
+export class AppComponent implements OnInit, OnDestroy{
+  constructor(private revealService: NgsRevealService) {
+  }
+
+  ngOnInit() {
+    // subscribe to ScrollReveal observables to react to main events
+    this.beforeRevealSubscription = this.revealService.beforeReveal$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`beforeReveal of '<${el.nodeName}>.${el.className}'`);
+      });
+
+    this.afterRevealSubscription = this.revealService.afterReveal$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`afterReveal of '<${el.nodeName}>.${el.className}'`);
+    });
+
+    this.beforeResetSubscription = this.revealService.beforeReset$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`beforeReset of '<${el.nodeName}>.${el.className}'`);
+    });
+
+    this.afterResetSubscription = this.revealService.afterReset$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`afterReset of '<${el.nodeName}>.${el.className}'`);
+    });
+  }
+
+  ngOnDestroy() {
+    // unsubscribe to ScrollReveal observables to prevent memory leaks
+    this.beforeRevealSubscription.unsubscribe();
+    this.afterRevealSubscription.unsubscribe();
+    this.beforeResetSubscription.unsubscribe();
+    this.afterResetSubscription.unsubscribe();
+  }
+}
+
+```
+
 ## Credits
 
 `ng-scrollreveal` is built upon [ScrollReveal JS](https://scrollrevealjs.org) by **Julian Lloyd**. Thanks to him for the great work!
diff --git a/demo/package.json b/demo/package.json
@@ -26,7 +26,7 @@
     "@ng-bootstrap/ng-bootstrap": "2.0.0",
     "@stackblitz/sdk":"^1.2.0",
     "bootstrap": "4.0.0",
-    "scrollreveal": "3.3.6",
+    "scrollreveal": "4.0.2",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",
     "rxjs": "^6.0.0",
@@ -43,7 +43,6 @@
     "codelyzer": "^4.0.1",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
-    "@types/scrollreveal": "~0.0.3",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",

diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -1,16 +1,24 @@
-import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, PLATFORM_ID, OnInit, OnDestroy } from '@angular/core';
 import { Router, NavigationEnd, RouterEvent } from '@angular/router';
 import { isPlatformBrowser } from '@angular/common';
 import { filter } from 'rxjs/operators';
+import { Subscription } from 'rxjs';
+import { NgsRevealService } from 'ng-scrollreveal';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit, OnDestroy{
 
-  constructor(private router: Router, @Inject(PLATFORM_ID) private platformId: Object) {
+  //keep refs to subscriptions to be able to unsubscribe later
+  private beforeRevealSubscription: Subscription;
+  private afterRevealSubscription: Subscription;
+  private beforeResetSubscription: Subscription;
+  private afterResetSubscription: Subscription;
+
+  constructor(private revealService: NgsRevealService, private router: Router, @Inject(PLATFORM_ID) private platformId: Object) {
 
     this.router.events.pipe(
       filter((event:RouterEvent) => event instanceof NavigationEnd)
@@ -20,4 +28,35 @@ export class AppComponent {
       }
     });
   }
+
+  ngOnInit() {
+    // subscribe to ScrollReveal observables to react to main events
+    this.beforeRevealSubscription = this.revealService.beforeReveal$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`beforeReveal of '<${el.nodeName}>.${el.className}'`);
+      });
+
+    this.afterRevealSubscription = this.revealService.afterReveal$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`afterReveal of '<${el.nodeName}>.${el.className}'`);
+    });
+
+    this.beforeResetSubscription = this.revealService.beforeReset$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`beforeReset of '<${el.nodeName}>.${el.className}'`);
+    });
+
+    this.afterResetSubscription = this.revealService.afterReset$.subscribe(
+      (el: HTMLElement) => {
+        console.log(`afterReset of '<${el.nodeName}>.${el.className}'`);
+    });
+  }
+
+  ngOnDestroy() {
+    // unsubscribe to ScrollReveal observables to prevent memory leaks
+    this.beforeRevealSubscription.unsubscribe();
+    this.afterRevealSubscription.unsubscribe();
+    this.beforeResetSubscription.unsubscribe();
+    this.afterResetSubscription.unsubscribe();
+  }
 }
diff --git a/demo/src/app/shared/footer/footer.component.html b/demo/src/app/shared/footer/footer.component.html
@@ -2,6 +2,6 @@
 	<div class="container">
 		<p> Coded with <i class="fa fa-heart heart"></i> by <a href="https://github.com/tinesoft" target="_blank">Tine Kondo</a>.</p>
 		<p> Code licensed under <a href="https://raw.githubusercontent.com/tinesoft/ng-scrollreveal/master/LICENSE" target="_blank">MIT license conditions.</a></p>
-		<p> Demo content heavily inspired by the <a href="https://scrollrevealjs.org/" target="_blank">ScrollReveal JS demo</a>.</p>		<p> Demo content heavily inspired by the <a href="https://scrollrevealjs.org/" target="_blank">ScrollReveal JS demo</a>.</p>
+		<p> Demo content heavily inspired by the <a href="https://scrollrevealjs.org/" target="_blank">ScrollReveal JS demo</a>.</p>
 	</div>
 </footer>