ng2-slides - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

dist/services/index.d.ts

 export * from './slide.service';
+export * from './slide.event';

dist/services/index.js

@@ -6,2 +6,3 @@ "use strict";
 __export(require('./slide.service'));
+__export(require('./slide.event'));
 //# sourceMappingURL=index.js.map

dist/services/slide.service.d.ts

@@ -0,2 +1,10 @@
+import { ReplaySubject } from 'rxjs';
+import { SlideEvent } from './slide.event';
+import { SlideServiceConfig } from './slide-service.config';
 export declare class SlideService {
+    slideChange: ReplaySubject<SlideEvent>;
+    private elements;
+    private animator;
+    private animating;
+    private config;
     private keys;
@@ -6,7 +14,5 @@ private keyObs;
     private scrollObs;
-    private elements;
-    private animator;
-    private animating;
     constructor();
-    scrollToIndex(index: number, elements?: HTMLElement[]): void;
+    scrollToIndex(index: number, previousIndex?: number, elements?: HTMLElement[]): void;
+    setConfiguration(config: SlideServiceConfig): void;
     private getNg2SlideElements();
@@ -13,0 +19,0 @@ private getCurrentSlideIndex(elements);

dist/services/slide.service.js

@@ -14,5 +14,11 @@ "use strict";
 var slide_animator_1 = require('./slide.animator');
+var slide_event_1 = require('./slide.event');
 var SlideService = (function () {
     function SlideService() {
         var _this = this;
+        this.slideChange = new rxjs_1.ReplaySubject();
+        this.animating = false;
+        this.config = {
+            sensitivity: 20
+        };
         this.keys = { 37: true, 38: true, 39: true, 40: true };
@@ -37,3 +43,2 @@ this.keyObs = rxjs_1.Observable.fromEvent(document, 'keydown')
             .merge(this.keyObs);
-        this.animating = false;
         this.elements = this.getNg2SlideElements();
@@ -47,7 +52,7 @@ this.animator = new slide_animator_1.SlideAnimator();
                     var currentIndex = _this.getCurrentSlideIndex(_this.elements);
-                    if (event.deltaY > 30 || event.key === 'ArrowDown') {
-                        _this.scrollToIndex(currentIndex + 1);
+                    if (event.deltaY > _this.config.sensitivity || event.key === 'ArrowDown') {
+                        _this.scrollToIndex(currentIndex + 1, currentIndex);
                     }
-                    else if (event.deltaY < -30 || event.key === 'ArrowUp') {
-                        _this.scrollToIndex(currentIndex - 1);
+                    else if (event.deltaY < -_this.config.sensitivity || event.key === 'ArrowUp') {
+                        _this.scrollToIndex(currentIndex - 1, currentIndex);
                     }
@@ -58,6 +63,9 @@ }
     }
-    SlideService.prototype.scrollToIndex = function (index, elements) {
+    SlideService.prototype.scrollToIndex = function (index, previousIndex, elements) {
         var _this = this;
         if (elements)
             this.elements = elements;
+        if (!previousIndex)
+            previousIndex = this.getCurrentSlideIndex(this.elements);
+        this.slideChange.next(new slide_event_1.SlideEventStart(previousIndex, index));
         if (this.elements[index]) {
@@ -68,2 +76,3 @@ var startingPoint = window.scrollY;
             this.animator.animateScroll(startingPoint, endingPoint, function () {
+                _this.slideChange.next(new slide_event_1.SlideEventEnd(previousIndex, index));
                 _this.animating = false;
@@ -73,2 +82,5 @@ });
     };
+    SlideService.prototype.setConfiguration = function (config) {
+        this.config = Object.assign(this.config, config);
+    };
     SlideService.prototype.getNg2SlideElements = function () {
@@ -75,0 +87,0 @@ return Array.prototype.slice.call(document.querySelectorAll('ng2-slide'));

package.json

 {
   "name": "ng2-slides",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An Angular2 library to create full height slides",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -18,3 +18,3 @@ # Ng2 Slides
 
-## 2: Basic Use
+## 2: Useage
 
@@ -107,2 +107,48 @@ First and foremost you need to provide the `SlideService` to your application. Preferably you would do this in your Angular2 application bootstrap
 
-The example above will on startup move to the 3rd slide on the page. Pretty cool!
+The example above will on startup move to the 3rd slide on the page. Pretty cool!
+
+## 2.2 Listen for changes
+
+There is a `slideChanges` observable exposed on the `SlideService` use this to listen for changes
+```typescript
+// Same decorator as above
+export class Component implements OnInit {
+	
+	constructor(
+		private slide: SlideService
+	) {}
+
+	ngOnInit() {
+		this.slide.scrollToIndex(2)
+		this.slide.slideChanges.subscribe( 
+			slideEvent => console.log(slideEvent)
+		)
+		// Will log out
+		// SlideEventStart {fromIndex: 0, toIndex: 2}
+		// SlideEventEnd {fromIndex: 0, toIndex: 2}
+	}
+}
+```
+The observable emits the type of `SlideEventStart` and `SlideEventEnd` both of which are `SlideEvent` classes and are found as an import in the package.
+
+## 2.3 Custom config
+
+You can change the sensitivity it takes to trigger a scroll by passing in a `SlideServiceConfig` object into the `setConfiguration` method of `SlideService`
+
+```typescript
+// Same decorator as above
+export class Component implements OnInit {
+	
+	constructor(
+		private slide: SlideService
+	) {}
+
+	ngOnInit() {
+		this.slide.setConfiguration({
+			sensitivity: 50 // by default this is 20
+		})
+	}
+}
+```
+
+`SlideServiceConfig` only has one option right now. You can find it's interface [here](https://github.com/Spittal/ng2-slides/blob/master/src/services/slide-service.config.ts)

src/services/index.ts

@@ -1,1 +0,2 @@
-export * from './slide.service';
+export * from './slide.service';
+export * from './slide.event';

src/services/slide.service.ts

@@ -1,10 +0,25 @@
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+ import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
 import { SlideAnimator } from './slide.animator';
+import { SlideEventEnd, SlideEventStart, SlideEvent } from './slide.event';
+import { SlideServiceConfig } from './slide-service.config';
 
 @Injectable()
 export class SlideService {
+  public slideChange: ReplaySubject<SlideEvent> = new ReplaySubject<SlideEvent>();
+
+  private elements: HTMLElement[];
+
+  private animator: SlideAnimator;
+  private animating: boolean = false;
+
+  private config: SlideServiceConfig = {
+    sensitivity: 20
+  };
+
+  /** Observables */
   private keys: Object = {37: true, 38: true, 39: true, 40: true};
   private keyObs: Observable<any> = Observable.fromEvent(document, 'keydown')
     .filter(event => this.keys[(<KeyboardEvent> event).keyCode]);
+
   private touchObs: Observable<any> = Observable.fromEvent(window, 'touchstart')
@@ -19,16 +34,11 @@ .zip(Observable.fromEvent(window, 'touchend'))
     })
-    .filter(change => Math.abs(change.deltaY) > 50)
+    .filter(change => Math.abs(change.deltaY) > 50);
 
   private scrollObs: Observable<any> = Observable.fromEvent(window, 'wheel')
-  .merge(Observable.fromEvent(window, 'mousewheel'))
-  .merge(Observable.fromEvent(window, 'DOMMouseScroll'))
-  .merge(Observable.fromEvent(window, 'touchmove'))
-  .merge(this.touchObs)
-  .merge(this.keyObs);
+    .merge(Observable.fromEvent(window, 'mousewheel'))
+    .merge(Observable.fromEvent(window, 'DOMMouseScroll'))
+    .merge(Observable.fromEvent(window, 'touchmove'))
+    .merge(this.touchObs)
+    .merge(this.keyObs);
 
-  private elements: HTMLElement[];
-
-  private animator: SlideAnimator;
-  private animating: boolean = false;
-
   constructor() {
@@ -46,6 +56,6 @@ this.elements = this.getNg2SlideElements();
 
-          if (event.deltaY > 30 || event.key === 'ArrowDown') {
-            this.scrollToIndex(currentIndex + 1);
-          } else if (event.deltaY < -30 || event.key === 'ArrowUp') {
-            this.scrollToIndex(currentIndex - 1);
+          if (event.deltaY > this.config.sensitivity || event.key === 'ArrowDown') {
+            this.scrollToIndex(currentIndex + 1, currentIndex);
+          } else if (event.deltaY < -this.config.sensitivity || event.key === 'ArrowUp') {
+            this.scrollToIndex(currentIndex - 1, currentIndex);
           }
@@ -57,6 +67,10 @@ }
 
-  public scrollToIndex(index: number, elements?: HTMLElement[]): void {
+  public scrollToIndex(index: number, previousIndex?: number, elements?: HTMLElement[]): void {
     if (elements) this.elements = elements;
+    if (!previousIndex) previousIndex = this.getCurrentSlideIndex(this.elements);
 
+    this.slideChange.next(new SlideEventStart(previousIndex, index))
+
     if (this.elements[index]) {
+
       const startingPoint = window.scrollY;
@@ -67,2 +81,3 @@ const endingPoint = this.elements[index].getBoundingClientRect().top + window.scrollY;
       this.animator.animateScroll(startingPoint, endingPoint, () => {
+        this.slideChange.next(new SlideEventEnd(previousIndex, index))
         this.animating = false;
@@ -73,2 +88,6 @@ });
 
+  public setConfiguration(config: SlideServiceConfig): void {
+    this.config = Object.assign(this.config, config);
+  }
+
   private getNg2SlideElements(): HTMLElement[] {
@@ -75,0 +94,0 @@ return Array.prototype.slice.call(document.querySelectorAll('ng2-slide'));

No alert changes

Improved metrics

Total package byte prevSize

33050

increased by22.19%

Number of package files

39

increased by25.81%

Lines of code

564

increased by17.75%

Number of lines in readme file

152

increased by43.4%

No dependency changes