diff --git a/README.md b/README.md index 689a581..f7e95dd 100644 --- 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 -# 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 index ba4969e..d9e4775 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-tiny-slider-wrapper", - "version": "0.0.6", + "version": "0.0.7", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -9358,9 +9358,9 @@ } }, "ngx-tiny-slider": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/ngx-tiny-slider/-/ngx-tiny-slider-1.0.0.tgz", - "integrity": "sha512-jRN9BT433RMgs5nyJpnvpokV3uH2+Um1WmI8zxvE30n3Z40txeiErEp0nw1hrgI+lgv5E0FUuvjxFyc+39syFA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ngx-tiny-slider/-/ngx-tiny-slider-1.0.1.tgz", + "integrity": "sha512-qmKaSJvjNjJJ9FJ/7oCEo8MkMNe5CfYI7661hp+DVw3AvbjoOzr9wjLZOVJpX+pTLBvJ2cJZAnsoAcFE5Yi9jw==", "requires": { "tiny-slider": "^2.9.1" } diff --git a/package.json b/package.json index 7712f45..b93666f 100644 --- 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 index f8db560..8da8ea1 100644 --- 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 index 2582bec..8977006 100644 --- 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; 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 index 986e721..9f3eb0d 100644 --- 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 index b08a11f..e823adb 100644 --- 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,7 +30,7 @@ export class NgxTinySliderComponent implements OnInit, OnDestroy { this.extendConfig(); } - if (this.config.waiteForDom) { + if (this.config.waitForDom) { this.listenForDomReady(); } else { this.initSlider(); @@ -38,7 +38,7 @@ export class NgxTinySliderComponent implements OnInit, OnDestroy { } 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 index 596e322..6346fe6 100644 --- 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 index c69f390..cb2f2b9 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -70,4 +70,23 @@ Go to +
+ Custom controls: +
+ Invoke ngx-service +
+
+ + Slider demo #2 - Lazy loading: +
+ + +
+ + + +
+
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 6f4e228..60397cc 100644 --- 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 index cf2c2e9..78499cc 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,5 +1,10 @@ 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', @@ -7,8 +12,32 @@ import {NgxTinySliderSettingsInterface, NgxTinySliderInstance} from 'ngx-tiny-sl 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 = 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 = [ + '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 index 7149ded..afa0fcf 100644 --- 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 ]