Merge pull request #25 from vdanyliv/develop

vdanyliv · web-flow · commit 1275db9aec1d · 2020-06-06T14:19:10.000+03:00
Lazy loading example, Interface update
diff --git a/README.md b/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
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
diff --git a/projects/ngx-tiny-slider/package.json b/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"
   },
diff --git a/projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-instanse.interface.ts b/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;
 }
diff --git a/projects/ngx-tiny-slider/src/lib/interfaces/ngx-tiny-slider-settings.interface.ts b/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;
 }
diff --git a/projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.component.ts b/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;
     }
 
diff --git a/projects/ngx-tiny-slider/src/lib/ngx-tiny-slider.module.ts b/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({
diff --git a/src/app/app.component.html b/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>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -13,3 +13,7 @@
   color: #fff;
   cursor: pointer;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/src/app/app.component.ts b/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() {
diff --git a/src/app/app.module.ts b/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
   ]

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ngx-tiny-slider",`
`3`		`- "version": "1.0.1",`
	`3`	`+ "version": "1.0.2",`
`4`	`4`	`"dependencies": {`
`5`	`5`	`"tiny-slider": "^2.9.1"`
`6`	`6`	`},`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`import {TinySliderSettings} from 'tiny-slider';`
`2`	`2`
`3`	`3`	`export interface NgxTinySliderSettingsInterface extends TinySliderSettings {`
`4`		`- waiteForDom?: boolean;`
	`4`	`+ waitForDom?: boolean;`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ import {NgxTinySliderSettingsInterface} from './interfaces/ngx-tiny-slider-setti`
`13`	`13`	`encapsulation: ViewEncapsulation.None`
`14`	`14`	`})`
`15`	`15`	`export class NgxTinySliderComponent implements OnInit, OnDestroy {`
`16`		`- @Input() config: NgxTinySliderSettingsInterface;`
	`16`	`+ @Input() config: NgxTinySliderSettingsInterface = {};`
`17`	`17`	`@ViewChild('slideItems', { static: true }) slideItemsContainerRef;`
`18`	`18`
`19`	`19`	`public sliderInstance;`
`@@ -30,15 +30,15 @@ export class NgxTinySliderComponent implements OnInit, OnDestroy {`
`30`	`30`	`this.extendConfig();`
`31`	`31`	`}`
`32`	`32`
`33`		`- if (this.config.waiteForDom) {`
	`33`	`+ if (this.config.waitForDom) {`
`34`	`34`	`this.listenForDomReady();`
`35`	`35`	`} else {`
`36`	`36`	`this.initSlider();`
`37`	`37`	`}`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`ngOnDestroy() {`
`41`		`- if (this.config.waiteForDom) {`
	`41`	`+ if (this.config.waitForDom) {`
`42`	`42`	`this.aliveObservable = false;`
`43`	`43`	`}`
`44`	`44`
Original file line number	Diff line number	Diff line change
`@@ -13,3 +13,7 @@`
`13`	`13`	`color: #fff;`
`14`	`14`	`cursor: pointer;`
`15`	`15`	`}`
	`16`	`+`
	`17`	`+.hidden {`
	`18`	`+ display: none;`
	`19`	`+}`