Skip to content

Commit c51998a

Browse files
cipchkcipchk
committed
feat: support global config
- close #30
1 parent 3f1c940 commit c51998a

File tree

8 files changed

+130
-102
lines changed

8 files changed

+130
-102
lines changed

‎README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,22 @@ resetTimer(){
7979
| notify | number[] | | 第xx秒时调用 notify 函数，值必须是**正整数** |
8080
| repaint | Function | | Custom repaintes |
8181

82+
**Global Config**
83+
84+
```ts
85+
function countdownConfigFactory(): Config {
86+
return { template: `$!h!:$!m!:$!s!` };
87+
}
88+
89+
@NgModule({
90+
imports: [ CountdownModule ],
91+
providers: [
92+
{ provide: CountdownConfig, useFactory: countdownConfigFactory }
93+
],
94+
})
95+
export class AppDemoModule {}
96+
```
97+
8298
## About repaints
8399

84100
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).

‎angular.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@
1717
"tsConfig": "src/tsconfig.json",
1818
"polyfills": "src/polyfills.ts",
1919
"assets": ["src/assets"],
20-
"styles": [],
20+
"styles": [
21+
"node_modules/bootstrap/dist/css/bootstrap.css",
22+
"node_modules/ngx-toastr/toastr.css"
23+
],
2124
"scripts": []
2225
},
2326
"configurations": {

‎lib/src/countdown.component.ts‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,29 @@ import {
1010
OnInit,
1111
SimpleChange,
1212
ChangeDetectionStrategy,
13+
ViewEncapsulation,
14+
Inject,
1315
} from '@angular/core';
1416

1517
import { Config, Hand } from './interfaces';
1618
import { Timer } from './countdown.timer';
19+
import { CountdownConfig } from './countdown.config';
1720

1821
@Component({
1922
selector: 'countdown',
20-
template: `<ng-content></ng-content>`,
23+
template: `
24+
<ng-content></ng-content>
25+
`,
2126
styles: [
2227
`
23-
:host {
28+
countdown {
2429
display: none;
2530
}
2631
`,
2732
],
2833
host: { '[class.count-down]': 'true' },
29-
changeDetection: ChangeDetectionStrategy.OnPush
34+
encapsulation: ViewEncapsulation.None,
35+
changeDetection: ChangeDetectionStrategy.OnPush,
3036
})
3137
export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
3238
private frequency = 1000;
@@ -40,15 +46,19 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
4046
@Input()
4147
config: Config;
4248
@Output()
43-
start = new EventEmitter();
49+
readonly start = new EventEmitter();
4450
@Output()
45-
finished = new EventEmitter();
51+
readonly finished = new EventEmitter();
4652
@Output()
47-
notify = new EventEmitter();
53+
readonly notify = new EventEmitter();
4854
@Output()
49-
event = new EventEmitter<{ action: string; left: number }>();
55+
readonly event = new EventEmitter<{ action: string; left: number }>();
5056

51-
constructor(private el: ElementRef, private timer: Timer) {}
57+
constructor(
58+
private el: ElementRef,
59+
private timer: Timer,
60+
private cog: CountdownConfig,
61+
) {}
5262

5363
/** 开始，当 `demand: false` 时触发 */
5464
begin() {
@@ -92,17 +102,7 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy {
92102

93103
private init() {
94104
const me = this;
95-
me.config = Object.assign(
96-
<Config>{
97-
demand: false,
98-
leftTime: 0,
99-
template: '$!h!时$!m!分$!s!秒',
100-
effect: 'normal',
101-
varRegular: /\$\!([\-\w]+)\!/g,
102-
clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1],
103-
},
104-
me.config,
105-
);
105+
me.config = { ...new CountdownConfig(), ...me.cog, ...me.config };
106106
const el = me.el.nativeElement as HTMLElement;
107107
me.paused = me.config.demand;
108108
me.stoped = false;

‎lib/src/countdown.config.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Injectable } from '@angular/core';
2+
3+
@Injectable({ providedIn: 'root' })
4+
export class CountdownConfig {
5+
demand = false;
6+
leftTime = 0;
7+
template = '$!h!时$!m!分$!s!秒';
8+
effect = 'normal';
9+
varRegular?: RegExp = /\$\!([\-\w]+)\!/g;
10+
clock?: any[] = ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1];
11+
}

‎package.json‎

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-countdown",
3-
"version": "3.1.0",
3+
"version": "3.2.0",
44
"description": "Simple, easy and performance countdown for angular",
55
"repository": {
66
"type": "git",
@@ -31,41 +31,44 @@
3131
"release": "npm run build && cd publish && npm publish --access public"
3232
},
3333
"devDependencies": {
34-
"@angular/animations": "^6.1.9",
35-
"@angular/common": "^6.1.9",
36-
"@angular/compiler": "^6.1.9",
37-
"@angular/core": "^6.1.9",
38-
"@angular/forms": "^6.1.9",
39-
"@angular/http": "^6.1.9",
40-
"@angular/platform-browser": "^6.1.9",
41-
"@angular/platform-browser-dynamic": "^6.1.9",
42-
"@angular/router": "^6.1.9",
34+
"@angular/animations": "~7.2.0",
35+
"@angular/common": "~7.2.0",
36+
"@angular/compiler": "~7.2.0",
37+
"@angular/core": "~7.2.0",
38+
"@angular/forms": "~7.2.0",
39+
"@angular/platform-browser": "~7.2.0",
40+
"@angular/platform-browser-dynamic": "~7.2.0",
41+
"@angular/router": "~7.2.0",
4342
"core-js": "^2.5.4",
44-
"rxjs": "^6.1.9",
45-
"zone.js": "^0.8.26",
46-
"ngx-highlight-js": "^2.0.0",
47-
"ngx-notify": "^2.0.0",
48-
"@angular-devkit/build-angular": "^0.8.0",
49-
"@angular/cli": "^6.1.9",
50-
"@angular/compiler-cli": "^6.1.9",
51-
"@angular/language-service": "^6.1.9",
52-
"@types/jasmine": "~2.8.6",
53-
"@types/jasminewd2": "~2.0.3",
43+
"rxjs": "~6.3.3",
44+
"tslib": "^1.9.0",
45+
"zone.js": "~0.8.26",
46+
"@angular-devkit/build-angular": "~0.13.0",
47+
"@angular/cli": "~7.3.0",
48+
"@angular/compiler-cli": "~7.2.0",
49+
"@angular/language-service": "~7.2.0",
5450
"@types/node": "~8.9.4",
55-
"codecov": "^3.0.0",
56-
"codelyzer": "~4.2.1",
51+
"@types/jasmine": "~2.8.8",
52+
"@types/jasminewd2": "~2.0.3",
53+
"codelyzer": "~4.5.0",
5754
"jasmine-core": "~2.99.1",
5855
"jasmine-spec-reporter": "~4.2.1",
59-
"karma": "~3.0.0",
56+
"karma": "~3.1.1",
6057
"karma-chrome-launcher": "~2.2.0",
6158
"karma-coverage-istanbul-reporter": "~2.0.1",
6259
"karma-jasmine": "~1.1.2",
6360
"karma-jasmine-html-reporter": "^0.2.2",
64-
"protractor": "~5.3.0",
61+
"protractor": "~5.4.0",
6562
"ts-node": "~7.0.0",
6663
"tslint": "~5.11.0",
67-
"typescript": "~2.9.2",
68-
"ng-packagr": "^4.1.1"
64+
"typescript": "~3.2.2",
65+
"ngx-highlight-js": "^2.1.1",
66+
"ngx-toastr": "^9.1.1",
67+
"codecov": "^3.1.0",
68+
"bootstrap": "^4.2.1",
69+
"gh-pages": "^2.0.1",
70+
"tsickle": "^0.34.3",
71+
"ng-packagr": "^4.7.0"
6972
},
7073
"ngPackage": {
7174
"lib": {

‎src/app/app.module.ts‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
import { HttpModule } from '@angular/http';
21
import { NgModule } from '@angular/core';
32
import { FormsModule } from '@angular/forms';
4-
import { Routes, RouterModule } from '@angular/router';
3+
import { RouterModule } from '@angular/router';
54
import { BrowserModule } from '@angular/platform-browser';
65
import { CommonModule } from '@angular/common';
76
import { HighlightJsModule } from 'ngx-highlight-js';
8-
import { NotifyModule } from 'ngx-notify';
9-
// import { TabsModule } from 'ngx-bootstrap/tabs';
7+
import { ToastrModule } from 'ngx-toastr';
108

11-
import { CountdownModule } from 'ngx-countdown';
9+
import { CountdownModule, Config } from 'ngx-countdown';
1210

1311
import { AppComponent } from './app.component';
1412
import { LayoutComponent } from './components/layout.component';
@@ -17,53 +15,52 @@ import { ALotComponent } from './components/alot.component';
1715
import { TplComponent } from './components/tpl.component';
1816
import { NothingComponent } from './components/nothing.component';
1917
import { TplFlipComponent } from './tpl/flip/flip.component';
18+
import { CountdownConfig } from 'ngx-countdown/src/countdown.config';
19+
20+
export function countdownConfigFactory(): Config {
21+
return { template: `$!h!:$!m!:$!s!` };
22+
}
2023

2124
@NgModule({
22-
imports: [
23-
BrowserModule,
24-
FormsModule,
25-
HttpModule,
26-
CommonModule,
27-
HighlightJsModule,
28-
// TabsModule.forRoot(),
29-
NotifyModule.forRoot({
30-
notify: {
31-
theme: 'bootstrap',
32-
progress: false
33-
}
34-
}),
35-
RouterModule.forRoot([
36-
{
37-
path: '',
38-
component: LayoutComponent,
39-
children: [
40-
{ path: '', component: DemoComponent },
41-
{ path: 'alot', component: ALotComponent },
42-
{ path: 'tpl', component: TplComponent },
43-
{ path: 'nothing', component: NothingComponent }
44-
]
45-
},
46-
{
47-
path: 'tpl',
48-
children: [
49-
{ path: 'flip', component: TplFlipComponent }
50-
]
51-
}
52-
], { useHash: true }),
53-
CountdownModule
54-
],
55-
declarations: [
56-
AppComponent,
57-
LayoutComponent,
58-
DemoComponent,
59-
ALotComponent,
60-
NothingComponent,
61-
TplComponent,
62-
TplFlipComponent
63-
],
64-
providers: [],
65-
bootstrap: [AppComponent]
25+
imports: [
26+
BrowserModule,
27+
FormsModule,
28+
CommonModule,
29+
HighlightJsModule,
30+
ToastrModule.forRoot(),
31+
RouterModule.forRoot(
32+
[
33+
{
34+
path: '',
35+
component: LayoutComponent,
36+
children: [
37+
{ path: '', component: DemoComponent },
38+
{ path: 'alot', component: ALotComponent },
39+
{ path: 'tpl', component: TplComponent },
40+
{ path: 'nothing', component: NothingComponent },
41+
],
42+
},
43+
{
44+
path: 'tpl',
45+
children: [{ path: 'flip', component: TplFlipComponent }],
46+
},
47+
],
48+
{ useHash: true },
49+
),
50+
CountdownModule,
51+
],
52+
declarations: [
53+
AppComponent,
54+
LayoutComponent,
55+
DemoComponent,
56+
ALotComponent,
57+
NothingComponent,
58+
TplComponent,
59+
TplFlipComponent,
60+
],
61+
providers: [
62+
{ provide: CountdownConfig, useFactory: countdownConfigFactory }
63+
],
64+
bootstrap: [AppComponent],
6665
})
67-
68-
export class AppDemoModule {
69-
}
66+
export class AppDemoModule {}

‎src/app/components/demo.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ViewChild,
77
ElementRef,
88
} from '@angular/core';
9-
import { NotifyService } from 'ngx-notify';
9+
import { ToastrService } from 'ngx-toastr';
1010
import { CountdownComponent } from 'ngx-countdown';
1111

1212
@Component({
@@ -16,7 +16,7 @@ import { CountdownComponent } from 'ngx-countdown';
1616
encapsulation: ViewEncapsulation.None,
1717
})
1818
export class DemoComponent {
19-
constructor(private _ns: NotifyService) {}
19+
constructor(private ts: ToastrService) {}
2020

2121
notify: string;
2222
config: any = { leftTime: 10, notify: [2, 5] };

‎src/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<base href="./">
99
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
10-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
11-
crossorigin="anonymous">
1210
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/styles/atom-one-dark.min.css">
1311
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.11.0/highlight.min.js"></script>
1412
</head>

0 commit comments

Comments
 (0)