feat(module): Catchable Errors for suppression and custom Error Handl…

…ing (#57)

Errors can now be caught on the `Observable` chain from within the `subscribe` method. The second parameter to `subscribe` contains the Error callback function, from which one can extract the error and handle as pleased.

This closes #50

README.md

@@ -81,7 +81,7 @@
     <th align="left" valign="top">Downloads</th>
     <td>NPM</td>
     <td>
-      <a href="https://npmjs.org/ngx-bootstrap" target="_blank">
+      <a href="https://npmjs.org/@nicky-lenaers/ngx-scroll-to" target="_blank">
         <img src="https://img.shields.io/npm/dm/%40nicky-lenaers%2Fngx-scroll-to.svg?style=flat-square" alt="NPM Monthly Downloads">
       </a>
     </td>
@@ -317,6 +317,33 @@ export class MyService {
   </tr>
 </table>
 
+## Error Handling
+In some occasions, one might misspell a target or container selector string. Even though `ngx-scoll-to` will not be able to initiate the scrolling animation, you can catch the internally generated error and handle it as you please on the `Observable` chain returned from the `scrollTo` method.
+
+**faulty.service.ts**
+```js
+import { Injectable } from '@angular/core';
+import { ScrollToService } from '@nicky-lenaers/ngx-scroll-to';
+
+@Injectable()
+export class FaultyService {
+
+  constructor(private _scrollToService: ScrollToService) { }
+
+  public triggerScrollTo() {
+
+    this._scrollToService
+      .scrollTo({
+        target: 'faulty-id'
+      })
+      .subscribe(
+        value => { console.log(value) },
+        err => console.log(err) // Error is caught and logged instead of thrown
+      );
+  }
+}
+```
+
 ## Directive Attribue Map Details
 #### <a name="ngx-scroll-to-details"></a>`[ngx-scroll-to]`
 This value specifies the ID of the HTML Element to scroll to. Note the outer double quotes `""` and the inner single quotes `''` in the above example(s). This enables you to dynamically set the string value based on a class property of your Component.

src/app/+container-target/container-target.component.ts

@@ -17,10 +17,15 @@ export class ContainerTargetComponent implements OnInit {
 
   public scrollToElementInAnotherContainer(container, event) {
 
-    this._scrollToService.scrollTo({
-      container: '#another-scroll-container',
+    const sub = this._scrollToService.scrollTo({
+      container: '#another-scroll-containerz',
       target: 'another-scroll-container-destination',
     });
+
+    sub.subscribe(
+      value => console.log(value),
+      err => { throw new Error(err); }
+    );
   }
 
 }

src/app/+home/home.component.html

@@ -1,7 +1,8 @@
 <button
+  (click)="show()"
   [ngx-scroll-to-duration]="4000"
   [ngx-scroll-to]="'destination'"
   >Go</button>
-<section id="destination">
+<section *ngIf="visible" id="destination">
   You've reached your destination.
 </section>

src/app/+home/home.component.ts

@@ -7,9 +7,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomeComponent implements OnInit {
 
+  public visible = false;
+
   constructor() { }
 
   ngOnInit() {
   }
 
+  public show() {
+    this.visible = true;
+  }
+
 }

src/app/modules/scroll-to/scroll-to.service.ts

@@ -3,9 +3,9 @@ import { DOCUMENT } from '@angular/platform-browser';
 import { isPlatformBrowser } from '@angular/common';
 
 import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/throw';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 
-import { TimeOut } from './decorators/scroll-to-timeout.decorator';
 import { ScrollToAnimationEasing } from './models/scroll-to-easing.model';
 import {
   ScrollToConfigOptions,
@@ -49,7 +49,8 @@ export class ScrollToService {
   private _interruptiveEvents: string[];
 
   /**
-   * Construct and setup required paratemeters
+   * Construct and setup required paratemeters.
+   *
    * @param _document         A Reference to the Document
    * @param _platformId       Angular Platform ID
    */
@@ -72,7 +73,6 @@ export class ScrollToService {
    * @param options         Configuration Object
    * @returns               Observable
    */
-  @TimeOut()
   public scrollTo(options: ScrollToConfigOptions): Observable<any> {
 
     if (!isPlatformBrowser(this._platformId)) return new ReplaySubject().asObservable();
@@ -99,7 +99,11 @@ export class ScrollToService {
     if (this._animation) this._animation.stop();
 
     const targetNode = this._getNode(mergedConfigOptions.target);
+    if (!targetNode) return Observable.throw(new Error('Unable to get Target Element'));
+
     const container: HTMLElement = this._getContainer(mergedConfigOptions, targetNode);
+    if (!container) return Observable.throw(new Error('Unable to get Container Element'));
+
     const listenerTarget = this._getListenerTarget(container);
     const to: number = isWindow(listenerTarget) ? targetNode.offsetTop : targetNode.getBoundingClientRect().top;
 
@@ -158,8 +162,6 @@ export class ScrollToService {
       this._getNode(options.container, true) :
       this._getFirstScrollableParent(targetNode);
 
-    if (!container) throw new Error('Unable to get Container Element');
-
     return container;
   }
 
@@ -213,7 +215,7 @@ export class ScrollToService {
 
     const overflowRegex: RegExp = /(auto|scroll)/;
 
-    if (style.position === 'fixed') throw new Error(`Scroll item cannot be positioned 'fixed'`);
+    if (style.position === 'fixed') return null;
 
     for (let parent = nativeElement; parent = parent.parentElement; null) {
 
@@ -227,7 +229,7 @@ export class ScrollToService {
         || parent.tagName === 'BODY') return parent;
     }
 
-    throw new Error(`No scrollable parent found for element ${nativeElement.nodeName}`);
+    return null;
   }
 
   /**
@@ -269,8 +271,6 @@ export class ScrollToService {
 
     }
 
-    if (!targetNode) throw new Error('Unable to find Target Element');
-
     return targetNode;
 
   }