Skip to content

Commit

Permalink
release: 8.0.0 (#42)
Browse files Browse the repository at this point in the history
  • Loading branch information
cipchk authored Aug 31, 2019
2 parents c51998a + 8845a99 commit 555688d
Show file tree
Hide file tree
Showing 41 changed files with 768 additions and 1,421 deletions.
4 changes: 4 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@ indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false
1 change: 1 addition & 0 deletions .nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
10.9.0
13 changes: 11 additions & 2 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -1,5 +1,14 @@
{
"printWidth": 80,
"printWidth": 120,
"singleQuote": true,
"trailingComma": "all"
"semi": true,
"trailingComma": "all",
"overrides": [
{
"files": ".prettierrc",
"options": {
"parser": "json"
}
}
]
}
22 changes: 11 additions & 11 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
sudo: required
dist: trusty
language: node_js
node_js:
- '8.11'

addons:
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
- google-chrome-beta

git:
depth: 1
Expand All @@ -20,9 +11,18 @@ cache:
- ./node_modules

before_install:
- export CHROME_BIN=chromium-browser
- set -e
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- sleep 3
- export NG_CLI_ANALYTICS=ci

addons:
apt:
sources:
- google-chrome
packages:
- google-chrome-stable

env:
- TASK=build
Expand Down
31 changes: 31 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// Place your settings in this file to overwrite default and user settings.
{
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true,
"**/dist/*/**": true,
"**/coverage/*/**": true
},
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
},
"[markdown]": {
"editor.formatOnSave": false
},
"[javascript]": {
"editor.formatOnSave": false
},
"[json]": {
"editor.formatOnSave": false
},
"[jsonc]": {
"editor.formatOnSave": false
},
"files.associations": {
"*.json": "jsonc",
".prettierrc": "json",
".stylelintrc": "json"
}
}
90 changes: 46 additions & 44 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ Simple, easy and performance countdown for angular

[![NPM version](https://img.shields.io/npm/v/ngx-countdown.svg)](https://www.npmjs.com/package/ngx-countdown)
[![Build Status](https://travis-ci.org/cipchk/ngx-countdown.svg?branch=master)](https://travis-ci.org/cipchk/ngx-countdown)
[![codecov](https://codecov.io/gh/cipchk/ngx-countdown/branch/master/graph/badge.svg)](https://codecov.io/gh/cipchk/ngx-countdown)

## Demo

Expand All @@ -25,80 +24,83 @@ import `CountdownModule`。
import { CountdownModule } from 'ngx-countdown';

@NgModule({
imports: [ BrowserModule, CountdownModule ],
declarations: [AppComponent],
bootstrap: [AppComponent]
imports: [ BrowserModule, CountdownModule ],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```

### 2、Template

```html
<countdown [config]="config"
(start)="onStart()"
(finished)="onFinished()"
(notify)="onNotify($event)"></countdown>
<countdown #cd [config]="config" (event)="handleEvent($event)"></countdown>
```

| Name | Type | Default | Summary |
| ------- | ------------- | ----- | ----- |
| `config` | Config | - | see Config |
| `begin()` | - | - | Triggers when `{demand: false}` |
| `restart()` | - | - | - |
| `stop()` | - | - | - |
| `pause()` | - | - | - |
| `resume()` | - | - | - |
| `start` | `EventEmitter` | - | Triggers when start |
| `finished` | `EventEmitter` | - | Triggers when finished |
| `notify` | `EventEmitter(time: number)` | - | Triggers when notify, need setting `config.notify` values |
| `event` | `EventEmitter<{ action: string, left: number }>` | - | Catch all event |
**Method**

| Name | Description |
|-------------|------------------------------------------------------------------------------------------------|
| `begin()` | Start countdown, you must manually call when `demand: false` |
| `restart()` | Restart countdown |
| `stop()` | Stop countdown, must call `restart` when stopped, it's different from pause, unable to recover |
| `pause()` | Pause countdown, you can use `resume` to recover again |
| `resume()` | Resume countdown |

**How call component methods**

```typescript
@ViewChild(CountdownComponent) counter: CountdownComponent;
resetTimer(){
this.counter.restart();
this.counter.stop();
this.counter.pause();
this.counter.resume();
}
```ts
@ViewChild('cd', { static: false }) private countdown: CountdownComponent;
this.countdown.begin();
```

## Config
## API

### countdown

| Name | Type | Default | Summary |
|----------|--------------------------------|---------|---------|
| `config` | `CountdownConfig` | - | Config |
| `event` | `EventEmitter<CountdownEvent>` | - | Events |

### CountdownConfig

| Name | Type | Default | Summary |
| ------- | ------------- | ----- | ----- |
| demand | boolean | `false` | start the counter on demand, must call `begin()` to starting |
| template | string | `$!h!时$!m!分$!s!秒` | Custom render template, if is empty use the `<ng-content>` content, and `$!s-ext!` it's `0.1s` accuracy |
| leftTime | number | 0 | Calculate the remaining time based on the server, e.g: `10`,`5.5`(May be dropped frames) (Unit: seconds) |
| stopTime | number | 0 | 结束时间:指的是根据本地时间至结束时间进行倒计时。(单位:UNIX时间戳 ms) |
| varRegular | RegExp | `/\$\{([\-\w]+)\}/g` | 模板解析正则表达式,有时候由于模板结构比较特殊,无法根据默认的表达式进行解析,那就需要修改它。 |
| clock | Array | | 时钟控制数组,特殊需求时可以修改,里面是三元组:指针名、进制、位数,可参考大于99小时demo |
| notify | number[] | | 第xx秒时调用 notify 函数,值必须是**正整数** |
| repaint | Function | | Custom repaintes |
| demand | `boolean` | `false` | Start the counter on demand, must call `begin()` to starting |
| leftTime | `number` | `0` | Calculate the remaining time based on the server, e.g: `10`,`5.5`, (Unit: seconds) |
| stopTime | `number` | - | Refers to counting down from local time to end time (Unit: Milliseconds second UNIX timestamp) |
| format | `string` | `HH:mm:ss` | Formats a date value, pls refer to [Accepted patterns](https://angular.io/api/common/DatePipe#usage-notes) |
| prettyText | `(text: string) => string` | - | Beautify text, generally used to convert formatted time text into HTML |
| notify | `number[] | number` | - | Should be trigger type `notify` event on the x second. When values is `0` will be trigger every time |
| formatDate | `CountdownFormatFn` | - | Default based on the implementation of `formatDate` in `@angular/common`, You can changed to other libs, e.g: [date-fns](https://date-fns.org/v2.0.1/docs/format) |
| timezone | `string` | `+0000` | A timezone offset (such as '+0430'), or a standard UTC/GMT. When not supplied, uses the end-user's local system timezone |

### CountdownEvent

| Name | Type | Summary |
|----------|-----------------------------------------------|----------------------------------|
| `action` | `start,stop,restart,pause,resume,notify,done` | Action of the event |
| `status` | `CountdownStatus` | Status of the countdown |
| `left` | `number` | Number of remaining milliseconds |
| `text` | `string` | Format the text |

**Global Config**

```ts
function countdownConfigFactory(): Config {
return { template: `$!h!:$!m!:$!s!` };
function countdownConfigFactory(): CountdownGlobalConfig {
return { format: `mm:ss` };
}

@NgModule({
imports: [ CountdownModule ],
providers: [
{ provide: CountdownConfig, useFactory: countdownConfigFactory }
{ provide: CountdownGlobalConfig, 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).

## Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:
Expand Down
30 changes: 1 addition & 29 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
"polyfills": "src/polyfills.ts",
"assets": ["src/assets"],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"node_modules/ngx-toastr/toastr.css"
"node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": []
},
Expand Down Expand Up @@ -54,12 +53,6 @@
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngx-countdown:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
Expand All @@ -80,27 +73,6 @@
}
}
}
},
"ngx-countdown-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "protractor.conf.js",
"devServerTarget": "ngx-countdown:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [],
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"defaultProject": "ngx-countdown",
Expand Down
4 changes: 0 additions & 4 deletions lib/index.ts

This file was deleted.

5 changes: 3 additions & 2 deletions lib/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ module.exports = function (config) {
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
dir: require('path').join(__dirname, 'coverage'), reports: ['html', 'lcovonly'],
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
Expand All @@ -26,6 +26,7 @@ module.exports = function (config) {
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
singleRun: false,
restartOnFileChange: true
});
};
Loading

0 comments on commit 555688d

Please sign in to comment.