From c51998aee6676639229d2600754d45c141db226a Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 6 Feb 2019 19:54:50 +0800 Subject: [PATCH] feat: support global config - close #30 --- README.md | 16 +++++ angular.json | 5 +- lib/src/countdown.component.ts | 38 +++++----- lib/src/countdown.config.ts | 11 +++ package.json | 55 ++++++++------- src/app/app.module.ts | 101 +++++++++++++-------------- src/app/components/demo.component.ts | 4 +- src/index.html | 2 - 8 files changed, 130 insertions(+), 102 deletions(-) create mode 100644 lib/src/countdown.config.ts diff --git a/README.md b/README.md index 54f5c09..38c4fab 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,22 @@ resetTimer(){ | notify | number[] | | 第xx秒时调用 notify 函数，值必须是**正整数** | | repaint | Function | | Custom repaintes | +**Global Config** + +```ts +function countdownConfigFactory(): Config { + return { template: `$!h!:$!m!:$!s!` }; +} + +@NgModule({ + imports: [ CountdownModule ], + providers: [ + { provide: CountdownConfig, useFactory: countdownConfigFactory } + ], +}) +export class AppDemoModule {} +``` + ## About repaints The timer will call repaint function every time, if it's `0.1s` accuracy, it will be more frequent. so you can make same special effects, like [Flip](https://cipchk.github.io/ngx-countdown/#/tpl/flip). diff --git a/angular.json b/angular.json index cf2673f..8cd49b1 100644 --- a/angular.json +++ b/angular.json @@ -17,7 +17,10 @@ "tsConfig": "src/tsconfig.json", "polyfills": "src/polyfills.ts", "assets": ["src/assets"], - "styles": [], + "styles": [ + "node_modules/bootstrap/dist/css/bootstrap.css", + "node_modules/ngx-toastr/toastr.css" + ], "scripts": [] }, "configurations": { diff --git a/lib/src/countdown.component.ts b/lib/src/countdown.component.ts index 6052df6..4728d1b 100644 --- a/lib/src/countdown.component.ts +++ b/lib/src/countdown.component.ts @@ -10,23 +10,29 @@ import { OnInit, SimpleChange, ChangeDetectionStrategy, + ViewEncapsulation, + Inject, } from '@angular/core'; import { Config, Hand } from './interfaces'; import { Timer } from './countdown.timer'; +import { CountdownConfig } from './countdown.config'; @Component({ selector: 'countdown', - template: ``, + template: ` + + `, styles: [ ` - :host { + countdown { display: none; } `, ], host: { '[class.count-down]': 'true' }, - changeDetection: ChangeDetectionStrategy.OnPush + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, }) export class CountdownComponent implements OnInit, OnChanges, OnDestroy { private frequency = 1000; @@ -40,15 +46,19 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { @Input() config: Config; @Output() - start = new EventEmitter(); + readonly start = new EventEmitter(); @Output() - finished = new EventEmitter(); + readonly finished = new EventEmitter(); @Output() - notify = new EventEmitter(); + readonly notify = new EventEmitter(); @Output() - event = new EventEmitter<{ action: string; left: number }>(); + readonly event = new EventEmitter<{ action: string; left: number }>(); - constructor(private el: ElementRef, private timer: Timer) {} + constructor( + private el: ElementRef, + private timer: Timer, + private cog: CountdownConfig, + ) {} /** 开始，当 `demand: false` 时触发 */ begin() { @@ -92,17 +102,7 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { private init() { const me = this; - me.config = Object.assign( - { - demand: false, - leftTime: 0, - template: '$!h!时$!m!分$!s!秒', - effect: 'normal', - varRegular: /\$\!([\-\w]+)\!/g, - clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1], - }, - me.config, - ); + me.config = { ...new CountdownConfig(), ...me.cog, ...me.config }; const el = me.el.nativeElement as HTMLElement; me.paused = me.config.demand; me.stoped = false; diff --git a/lib/src/countdown.config.ts b/lib/src/countdown.config.ts new file mode 100644 index 0000000..6482ce7 --- /dev/null +++ b/lib/src/countdown.config.ts @@ -0,0 +1,11 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ providedIn: 'root' }) +export class CountdownConfig { + demand = false; + leftTime = 0; + template = '$!h!时$!m!分$!s!秒'; + effect = 'normal'; + varRegular?: RegExp = /\$\!([\-\w]+)\!/g; + clock?: any[] = ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1]; +} diff --git a/package.json b/package.json index c8ac80b..4320d91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-countdown", - "version": "3.1.0", + "version": "3.2.0", "description": "Simple, easy and performance countdown for angular", "repository": { "type": "git", @@ -31,41 +31,44 @@ "release": "npm run build && cd publish && npm publish --access public" }, "devDependencies": { - "@angular/animations": "^6.1.9", - "@angular/common": "^6.1.9", - "@angular/compiler": "^6.1.9", - "@angular/core": "^6.1.9", - "@angular/forms": "^6.1.9", - "@angular/http": "^6.1.9", - "@angular/platform-browser": "^6.1.9", - "@angular/platform-browser-dynamic": "^6.1.9", - "@angular/router": "^6.1.9", + "@angular/animations": "~7.2.0", + "@angular/common": "~7.2.0", + "@angular/compiler": "~7.2.0", + "@angular/core": "~7.2.0", + "@angular/forms": "~7.2.0", + "@angular/platform-browser": "~7.2.0", + "@angular/platform-browser-dynamic": "~7.2.0", + "@angular/router": "~7.2.0", "core-js": "^2.5.4", - "rxjs": "^6.1.9", - "zone.js": "^0.8.26", - "ngx-highlight-js": "^2.0.0", - "ngx-notify": "^2.0.0", - "@angular-devkit/build-angular": "^0.8.0", - "@angular/cli": "^6.1.9", - "@angular/compiler-cli": "^6.1.9", - "@angular/language-service": "^6.1.9", - "@types/jasmine": "~2.8.6", - "@types/jasminewd2": "~2.0.3", + "rxjs": "~6.3.3", + "tslib": "^1.9.0", + "zone.js": "~0.8.26", + "@angular-devkit/build-angular": "~0.13.0", + "@angular/cli": "~7.3.0", + "@angular/compiler-cli": "~7.2.0", + "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", - "codecov": "^3.0.0", - "codelyzer": "~4.2.1", + "@types/jasmine": "~2.8.8", + "@types/jasminewd2": "~2.0.3", + "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", - "karma": "~3.0.0", + "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", - "protractor": "~5.3.0", + "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", - "typescript": "~2.9.2", - "ng-packagr": "^4.1.1" + "typescript": "~3.2.2", + "ngx-highlight-js": "^2.1.1", + "ngx-toastr": "^9.1.1", + "codecov": "^3.1.0", + "bootstrap": "^4.2.1", + "gh-pages": "^2.0.1", + "tsickle": "^0.34.3", + "ng-packagr": "^4.7.0" }, "ngPackage": { "lib": { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7c371cf..d9e188e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,14 +1,12 @@ -import { HttpModule } from '@angular/http'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { Routes, RouterModule } from '@angular/router'; +import { RouterModule } from '@angular/router'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { HighlightJsModule } from 'ngx-highlight-js'; -import { NotifyModule } from 'ngx-notify'; -// import { TabsModule } from 'ngx-bootstrap/tabs'; +import { ToastrModule } from 'ngx-toastr'; -import { CountdownModule } from 'ngx-countdown'; +import { CountdownModule, Config } from 'ngx-countdown'; import { AppComponent } from './app.component'; import { LayoutComponent } from './components/layout.component'; @@ -17,53 +15,52 @@ import { ALotComponent } from './components/alot.component'; import { TplComponent } from './components/tpl.component'; import { NothingComponent } from './components/nothing.component'; import { TplFlipComponent } from './tpl/flip/flip.component'; +import { CountdownConfig } from 'ngx-countdown/src/countdown.config'; + +export function countdownConfigFactory(): Config { + return { template: `$!h!:$!m!:$!s!` }; +} @NgModule({ - imports: [ - BrowserModule, - FormsModule, - HttpModule, - CommonModule, - HighlightJsModule, - // TabsModule.forRoot(), - NotifyModule.forRoot({ - notify: { - theme: 'bootstrap', - progress: false - } - }), - RouterModule.forRoot([ - { - path: '', - component: LayoutComponent, - children: [ - { path: '', component: DemoComponent }, - { path: 'alot', component: ALotComponent }, - { path: 'tpl', component: TplComponent }, - { path: 'nothing', component: NothingComponent } - ] - }, - { - path: 'tpl', - children: [ - { path: 'flip', component: TplFlipComponent } - ] - } - ], { useHash: true }), - CountdownModule - ], - declarations: [ - AppComponent, - LayoutComponent, - DemoComponent, - ALotComponent, - NothingComponent, - TplComponent, - TplFlipComponent - ], - providers: [], - bootstrap: [AppComponent] + imports: [ + BrowserModule, + FormsModule, + CommonModule, + HighlightJsModule, + ToastrModule.forRoot(), + RouterModule.forRoot( + [ + { + path: '', + component: LayoutComponent, + children: [ + { path: '', component: DemoComponent }, + { path: 'alot', component: ALotComponent }, + { path: 'tpl', component: TplComponent }, + { path: 'nothing', component: NothingComponent }, + ], + }, + { + path: 'tpl', + children: [{ path: 'flip', component: TplFlipComponent }], + }, + ], + { useHash: true }, + ), + CountdownModule, + ], + declarations: [ + AppComponent, + LayoutComponent, + DemoComponent, + ALotComponent, + NothingComponent, + TplComponent, + TplFlipComponent, + ], + providers: [ + { provide: CountdownConfig, useFactory: countdownConfigFactory } + ], + bootstrap: [AppComponent], }) - -export class AppDemoModule { -} +export class AppDemoModule {} diff --git a/src/app/components/demo.component.ts b/src/app/components/demo.component.ts index 4b9c188..2454888 100644 --- a/src/app/components/demo.component.ts +++ b/src/app/components/demo.component.ts @@ -6,7 +6,7 @@ import { ViewChild, ElementRef, } from '@angular/core'; -import { NotifyService } from 'ngx-notify'; +import { ToastrService } from 'ngx-toastr'; import { CountdownComponent } from 'ngx-countdown'; @Component({ @@ -16,7 +16,7 @@ import { CountdownComponent } from 'ngx-countdown'; encapsulation: ViewEncapsulation.None, }) export class DemoComponent { - constructor(private _ns: NotifyService) {} + constructor(private ts: ToastrService) {} notify: string; config: any = { leftTime: 10, notify: [2, 5] }; diff --git a/src/index.html b/src/index.html index c95a805..210edc3 100644 --- a/src/index.html +++ b/src/index.html @@ -7,8 +7,6 @@ -