From d1f368e571dfc9aec7175f00f0ec6c94afb6936a Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Tue, 24 May 2016 16:40:17 +0300 Subject: [PATCH] feat(preloader): preloader service which can take a list of promises and execute smth once all promises are completed --- src/app/app.component.ts | 20 +++++++++--- .../baAmChart/baAmChart.component.ts | 11 +++++++ src/app/theme/services/baImageLoader/index.ts | 1 + .../baThemePreloader.service.ts | 32 +++++++++++++++++++ .../theme/services/baThemePreloader/index.ts | 1 + src/app/theme/services/index.ts | 2 ++ 6 files changed, 63 insertions(+), 4 deletions(-) create mode 100644 src/app/theme/services/baImageLoader/index.ts create mode 100644 src/app/theme/services/baThemePreloader/baThemePreloader.service.ts create mode 100644 src/app/theme/services/baThemePreloader/index.ts create mode 100644 src/app/theme/services/index.ts diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 7840656a..39642b81 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,6 +7,9 @@ import {Pages} from './pages'; import {AppState} from './app.state'; import {BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner} from './theme'; import {BaThemeRun} from './theme/directives'; +import {BaImageLoaderService, BaThemePreloader} from './theme/services'; + +import {layoutPaths} from './theme/theme.constants'; /* * App Component @@ -16,7 +19,7 @@ import {BaThemeRun} from './theme/directives'; selector: 'app', pipes: [], directives: [BaThemeRun], - providers: [BaThemeConfigProvider, BaThemeConfig, BaThemeSpinner], + providers: [BaThemeConfigProvider, BaThemeConfig, BaImageLoaderService, BaThemeSpinner], encapsulation: ViewEncapsulation.None, styles: [require('normalize.css'), require('./app.scss')], template: ` @@ -38,14 +41,23 @@ export class App { isMenuCollapsed:boolean = false; - constructor(private _state:AppState, private _baThemeConfig:BaThemeConfig, private _baSpinner:BaThemeSpinner) { + constructor(private _state:AppState, private _imageLoader:BaImageLoaderService, private _spinner:BaThemeSpinner) { + this._loadImages(); this._state.subscribe('menu.isCollapsed', (isCollapsed) => { this.isMenuCollapsed = isCollapsed; }); } - ngAfterViewInit() { - this._baSpinner.hide(200); + public ngAfterViewInit():void { + // hide spinner once all loaders are completed + BaThemePreloader.load().then((values) => { + this._spinner.hide(); + }); + } + + private _loadImages():void { + // register some loaders + BaThemePreloader.registerLoader(this._imageLoader.load(layoutPaths.images.root + 'blur-bg-mobile.jpg')); } } diff --git a/src/app/theme/components/baAmChart/baAmChart.component.ts b/src/app/theme/components/baAmChart/baAmChart.component.ts index 102858e3..56ed9655 100644 --- a/src/app/theme/components/baAmChart/baAmChart.component.ts +++ b/src/app/theme/components/baAmChart/baAmChart.component.ts @@ -1,5 +1,7 @@ import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core'; +import {BaThemePreloader} from '../../../theme/services'; + import './baAmChart.loader.ts'; import {BaAmChartThemeService} from './baAmChartTheme.service'; @@ -18,6 +20,7 @@ export class BaAmChart { @ViewChild('baAmChart') private _selector:ElementRef; constructor (private _baAmChartThemeService:BaAmChartThemeService) { + this._loadChartsLib(); } ngOnInit() { @@ -28,4 +31,12 @@ export class BaAmChart { let chart = AmCharts.makeChart(this._selector.nativeElement, this.baAmChartConfiguration); this.onChartReady.emit(chart); } + + private _loadChartsLib():void { + BaThemePreloader.registerLoader(new Promise((resolve, reject) => { + AmCharts.ready(function(){ + resolve('AmCharts ready'); + }); + })); + } } diff --git a/src/app/theme/services/baImageLoader/index.ts b/src/app/theme/services/baImageLoader/index.ts new file mode 100644 index 00000000..bba91fe2 --- /dev/null +++ b/src/app/theme/services/baImageLoader/index.ts @@ -0,0 +1 @@ +export * from './baImageLoader.service.ts'; diff --git a/src/app/theme/services/baThemePreloader/baThemePreloader.service.ts b/src/app/theme/services/baThemePreloader/baThemePreloader.service.ts new file mode 100644 index 00000000..8bd903d7 --- /dev/null +++ b/src/app/theme/services/baThemePreloader/baThemePreloader.service.ts @@ -0,0 +1,32 @@ +import {Injectable} from '@angular/core'; + +@Injectable() +export class BaThemePreloader { + + private static _loaders:Array> = []; + + public static registerLoader(method:Promise):void { + BaThemePreloader._loaders.push(method); + } + + public static clear():void { + BaThemePreloader._loaders = []; + } + + public static load():Promise { + return new Promise((resolve, reject) => { + BaThemePreloader._executeAll(resolve); + }); + } + + private static _executeAll(done:Function):void { + setTimeout(() => { + Promise.all(BaThemePreloader._loaders).then((values) => { + done.call(null, values); + + }).catch((error) => { + console.error(error); + }); + }); + } +} diff --git a/src/app/theme/services/baThemePreloader/index.ts b/src/app/theme/services/baThemePreloader/index.ts new file mode 100644 index 00000000..df24e90e --- /dev/null +++ b/src/app/theme/services/baThemePreloader/index.ts @@ -0,0 +1 @@ +export * from './baThemePreloader.service.ts'; diff --git a/src/app/theme/services/index.ts b/src/app/theme/services/index.ts new file mode 100644 index 00000000..e743f90c --- /dev/null +++ b/src/app/theme/services/index.ts @@ -0,0 +1,2 @@ +export * from './baImageLoader'; +export * from './baThemePreloader';