Merge pull request #5 from vdanyliv/develop

0.0.4

Author: vdanyliv

README.md

@@ -1,12 +1,14 @@
 # ngx-tiny-slider
-Angular component that gives you possibility to use [tiny-slider](https://www.npmjs.com/package/tiny-slider) library. 
+Angular component that gives you possibility to use tiny slider library. 
 1. Demo [page](http://ganlanyuan.github.io/tiny-slider/demo/)
 
 # How to use
-
 1. Import NgxTinySliderModule into your module
 2. Use in your component template <ngx-tiny-slider>
 
+# Whats new on 0.0.4?
+1. Added component OnDestroy hook, that will handle slider instance destroying  
+
 # Usage example
 Your component template
 ```html
@@ -61,17 +63,16 @@ export class AppComponent implements OnInit {
       arrowKeys: true,
       autoWidth: true,
       gutter: 10,
-      centerNavigation: true,
-      customControlsStyle: true,
-      controlsText: ['<', '>'],
+      controlsText: ['<', '>']
     };
   }
 }
 
   ```
 
   # Additional options
-  1. waiteForDom {Boolean} - in case of using dynamic content use this property, trigger domReady subject when your content ready
-  2. domReady {Subject} - provide possibility to initialize component manually
-  3. customControlsStyle {Boolean} - Custom component style
-  4. centerNavigation {Boolean} - Navigation on center of the slider container
+  1. domReady {Subject} - provide possibility to initialize component manually
+  
+  #### Deprecated and removed (use tiny-slider options in case if you need extra  customisation)
+  1. customControlsStyle {Boolean} - Custom component style
+  2. centerNavigation {Boolean} - Navigation on center of the slider container

package.json

@@ -25,7 +25,7 @@
     "rxjs": "~6.3.3",
     "tiny-slider": "^2.9.1",
     "zone.js": "~0.8.26",
-    "ngx-tiny-slider": "file:projects/ngx-tiny-slider/dist/ngx-tiny-slider"
+    "ngx-tiny-slider": "0.0.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.10.0",

projects/ngx-tiny-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tiny-slider",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "dependencies": {
     "tiny-slider": "^2.9.1"
   },

projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface.ts

@@ -2,6 +2,4 @@ import {TinySliderSettings} from 'tiny-slider';
 
 export interface NgxTinySliderSettingsInterface extends TinySliderSettings {
   waiteForDom?: boolean;
-  centerNavigation?: boolean;
-  customControlsStyle?: boolean;
 }

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.html

@@ -1,5 +1,4 @@
-<div class="slider-wrapper"
-     [ngClass]="{'slider-wrapper-nav-center': config?.centerNavigation, 'slider-wrapper-custom-nav-style': config?.customControlsStyle}">
+<div class="slider-wrapper">
   <div class="slide-items" #slideItems>
     <ng-content select=".items"></ng-content>
   </div>

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.ts

@@ -1,7 +1,7 @@
-import {Component, Input, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
+import {Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
 
 import {Subject} from 'rxjs';
-import {first} from 'rxjs/operators';
+import {first, takeWhile} from 'rxjs/operators';
 
 import {NgxTinySliderService} from './ngx-tiny-slider.service';
 import {NgxTinySliderSettingsInterface} from './interfaces/ngx-tiny-slider-settings.interface';
@@ -12,18 +12,23 @@ import {NgxTinySliderSettingsInterface} from './interfaces/ngx-tiny-slider-setti
   styleUrls: ['ngx-tiny-slider.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class NgxTinySliderComponent implements OnInit {
+export class NgxTinySliderComponent implements OnInit, OnDestroy {
   @Input() config: NgxTinySliderSettingsInterface;
   @ViewChild('slideItems') slideItemsContainerRef;
 
+  private sliderInstance;
+  private aliveObservable = true;
+
   public domReady = new Subject();
   private defaultConfig = this.ngxTinySliderService.getDefaultConfig();
 
   constructor(private ngxTinySliderService: NgxTinySliderService) {
   }
 
   ngOnInit() {
-    this.extendConfig();
+    if (this.config) {
+      this.extendConfig();
+    }
 
     if (this.config.waiteForDom) {
       this.listenForDomReady();
@@ -32,19 +37,30 @@ export class NgxTinySliderComponent implements OnInit {
     }
   }
 
+  ngOnDestroy() {
+    if (this.config.waiteForDom) {
+      this.aliveObservable = false;
+    }
+
+    if (this.sliderInstance && this.sliderInstance.destroy) {
+      this.sliderInstance.destroy();
+    }
+  }
+
   private listenForDomReady() {
     this.domReady
-      .pipe(first())
-      .subscribe(() => {
-        this.initSlider();
-      });
+      .pipe(
+        first(),
+        takeWhile(() => this.aliveObservable)
+      )
+      .subscribe(() => this.initSlider());
   }
 
   private extendConfig() {
     Object.keys(this.config).forEach(i => this.defaultConfig[i] = this.config[i]);
   }
 
   private initSlider() {
-    this.ngxTinySliderService.initSlider(this.defaultConfig, this.slideItemsContainerRef);
+    this.sliderInstance = this.ngxTinySliderService.initSlider(this.defaultConfig, this.slideItemsContainerRef);
   }
 }

projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.service.ts

@@ -10,15 +10,16 @@ export class NgxTinySliderService {
   }
 
   initSlider(config, elementRef: ElementRef) {
-    return tns(Object.assign({container: elementRef.nativeElement}, config));
+    const extendConfig = Object.assign({container: elementRef.nativeElement}, config);
+    return tns(extendConfig);
   }
 
   getDefaultConfig() {
     return {
       items: 3,
       mode: 'carousel',
       controlsPosition: 'bottom',
-      speed: 400,
+      speed: 400
     };
   }
 }

src/app/app.component.ts

@@ -1,6 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/dist/ngx-tiny-slider';
-import {NgxTinySliderSettingsInterface} from 'ngx-tiny-slider';
+import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface';
 
 @Component({
   selector: 'app-root',
@@ -16,8 +15,6 @@ export class AppComponent implements OnInit {
       autoWidth: true,
       gutter: 10,
       nav: false,
-      centerNavigation: true,
-      customControlsStyle: true,
       controlsText: ['<', '>']
     };
   }

src/app/app.module.ts

@@ -1,9 +1,8 @@
 import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
-import {NgxTinySliderModule} from 'ngx-tiny-slider';
-
 import {AppComponent} from './app.component';
+import {NgxTinySliderModule} from '../../projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.module';
 
 @NgModule({
   imports: [