Merge pull request #25 from vdanyliv/develop

Lazy loading example, Interface update

README.md

@@ -7,8 +7,12 @@ Angular component that gives you possibility to use tiny slider library.
 2. Import NgxTinySliderModule into your shared / root module
 3. Use in your component template use <ngx-tiny-slider>
 
-# Whats new on 1.0.1?
-1. Possibility to import NgxTinySliderService in your component
+# Sandboxes
+1. Custom controls [codesandbox.io](https://codesandbox.io/s/ngx-tiny-slider-custom-controls-rhrq6)
+
+# Whats new on 1.0.2?
+1. Added lazy loading example
+2. Added domReady into NgxTinySliderInstanceInterface
 
 # Usage example
 Your module definition example

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tiny-slider-wrapper",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -25,7 +25,7 @@
     "rxjs": "~6.5.5",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2",
-    "ngx-tiny-slider": "1.0.0"
+    "ngx-tiny-slider": "latest"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.1",

projects/ngx-tiny-slider/package.json

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

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

@@ -1,7 +1,9 @@
 import {TinySliderInstance} from 'tiny-slider';
 import {ElementRef} from '@angular/core';
+import {Subject} from 'rxjs';
 
-export interface NgxTinySliderInstance {
+export interface NgxTinySliderInstanceInterface {
+  domReady: Subject<any>;
   sliderInstance: TinySliderInstance;
   slideItemsContainerRef: ElementRef;
 }

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

@@ -1,5 +1,5 @@
 import {TinySliderSettings} from 'tiny-slider';
 
 export interface NgxTinySliderSettingsInterface extends TinySliderSettings {
-  waiteForDom?: boolean;
+  waitForDom?: boolean;
 }

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

@@ -13,7 +13,7 @@ import {NgxTinySliderSettingsInterface} from './interfaces/ngx-tiny-slider-setti
   encapsulation: ViewEncapsulation.None
 })
 export class NgxTinySliderComponent implements OnInit, OnDestroy {
-  @Input() config: NgxTinySliderSettingsInterface;
+  @Input() config: NgxTinySliderSettingsInterface = {};
   @ViewChild('slideItems', { static: true }) slideItemsContainerRef;
 
   public sliderInstance;
@@ -30,15 +30,15 @@ export class NgxTinySliderComponent implements OnInit, OnDestroy {
       this.extendConfig();
     }
 
-    if (this.config.waiteForDom) {
+    if (this.config.waitForDom) {
       this.listenForDomReady();
     } else {
       this.initSlider();
     }
   }
 
   ngOnDestroy() {
-    if (this.config.waiteForDom) {
+    if (this.config.waitForDom) {
       this.aliveObservable = false;
     }
 

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

@@ -1,8 +1,6 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-
 import {NgxTinySliderComponent} from './ngx-tiny-slider.component';
-
 import {NgxTinySliderService} from './ngx-tiny-slider.service';
 
 @NgModule({

src/app/app.component.html

@@ -70,4 +70,23 @@
       Go to <button class="btn-black" (click)="prev()">prev</button>
     </div>
   </div>
+  <div class="mb-15">
+    Custom controls:
+    <div>
+      Invoke ngx-service <button class="btn-black" (click)="invokeService()">open console</button>
+    </div>
+  </div>
+
+  <b>Slider demo #2 - Lazy loading:</b>
+  <div class="mb-15 component-wrapper">
+    <ngx-tiny-slider [config]="tinySliderConfigLazy" #sliderLazy>
+      <ng-container class="items">
+        <div class="item" *ngFor="let img of listOfImages" [class.hidden]="sliderHidden">
+          <a target="_blank" href="#">
+            <img [src]=img (load)="onImgLoadSuccess()">
+          </a>
+        </div>
+      </ng-container>
+    </ngx-tiny-slider>
+  </div>
 </div>

src/app/app.component.scss

@@ -13,3 +13,7 @@
   color: #fff;
   cursor: pointer;
 }
+
+.hidden {
+  display: none;
+}

src/app/app.component.ts

@@ -1,14 +1,43 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {NgxTinySliderSettingsInterface, NgxTinySliderInstance} from 'ngx-tiny-slider';
+
+import {NgxTinySliderSettingsInterface} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface';
+import {NgxTinySliderInstanceInterface} from '../../projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-instanse.interface';
+import {NgxTinySliderService} from '../../projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.service';
+import {BehaviorSubject} from 'rxjs';
+import {filter} from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+  sliderHidden = true;
   tinySliderConfig: NgxTinySliderSettingsInterface;
-  @ViewChild('slider', {static: false}) slider: NgxTinySliderInstance;
+  tinySliderConfigLazy: NgxTinySliderSettingsInterface;
+  /**
+   * Simple Behaviour subject that will accumulate number of successfully loaded images
+   */
+  imageLoadingProcess: BehaviorSubject<number> = new BehaviorSubject(0);
+
+  @ViewChild('slider', {static: false}) slider: NgxTinySliderInstanceInterface;
+  @ViewChild('sliderLazy', {static: false}) sliderLazy: NgxTinySliderInstanceInterface;
+
+  /**
+   * List of items that we plan to load dynamically
+   */
+  public listOfImages: Array<string> = [
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg',
+    'http://www.mattsorger.com/newsletterpics/gsw07_01.jpg'
+  ];
+
+  constructor(private ngxTinySliderService: NgxTinySliderService) {
+  }
 
   ngOnInit() {
     this.tinySliderConfig = {
@@ -18,6 +47,44 @@ export class AppComponent implements OnInit {
       nav: false,
       controlsText: ['<', '>']
     };
+
+    this.tinySliderConfigLazy = {
+      arrowKeys: true,
+      waitForDom: true, // do not forget about this
+      autoWidth: true,
+      gutter: 10,
+      nav: false,
+      controlsText: ['<', '>']
+    };
+
+    this.trackImageLoading();
+  }
+
+  /**
+   * One of the way how we can count successfully loaded images and fire domReady event
+   */
+  trackImageLoading() {
+    this.imageLoadingProcess
+      .pipe(
+        filter((count: number) => count === this.listOfImages.length)
+      )
+      .subscribe(next => {
+          this.sliderLazy.domReady.next();
+          this.sliderHidden = false;
+          console.log('image loaded', next);
+      });
+  }
+
+  /**
+   * Simple example of tracking image loading process
+   */
+  onImgLoadSuccess() {
+    const incLoadedCount = this.imageLoadingProcess.getValue() + 1;
+    this.imageLoadingProcess.next(incLoadedCount);
+  }
+
+  invokeService() {
+    console.log(this.ngxTinySliderService, 'ngxTinySliderService');
   }
 
   next() {

src/app/app.module.ts

@@ -2,7 +2,8 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 
 import {AppComponent} from './app.component';
-import {NgxTinySliderModule} from 'ngx-tiny-slider';
+import {NgxTinySliderModule} from '../../projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.module';
+import {NgxTinySliderService} from '../../projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.service';
 
 @NgModule({
   imports: [
@@ -15,7 +16,9 @@ import {NgxTinySliderModule} from 'ngx-tiny-slider';
   exports: [
     NgxTinySliderModule
   ],
-  providers: [],
+  providers: [
+    NgxTinySliderService
+  ],
   bootstrap: [
     AppComponent
   ]