From 1c2f61dce8a0b6744476018b00dac7ca5d3e82e2 Mon Sep 17 00:00:00 2001 From: cipchk Date: Thu, 28 Dec 2017 17:46:35 +0800 Subject: [PATCH] feat: start the counter on demand, close #9 example: --- README.md | 2 + demo/src/app/components/demo.component.html | 18 ++++++++- package.json | 2 +- src/components/component.ts | 42 +++++++++++++-------- src/components/interfaces/config.ts | 5 +++ 5 files changed, 51 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 970492b..66f6322 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,7 @@ export class AppModule { } | Name | Type | Default | Summary | | ------- | ------------- | ----- | ----- | | `config` | Config | - | see Config | +| `begin()` | - | - | Triggers when `{demand: false}` | | `restart()` | - | - | - | | `stop()` | - | - | - | | `pause()` | - | - | - | @@ -75,6 +76,7 @@ resetTimer(){ | Name | Type | Default | Summary | | ------- | ------------- | ----- | ----- | +| demand | boolean | `false` | 按需启动，需调用 `begin()` 开始启动 | | template | string | $!h!时$!m!分$!s!秒 | 自定义模板，如果为空以组件 innerHTML 为准，再不然使用默认值。`$!s!` 有另一种表示法 `$!s-ext!` 表示0.1s精度。 | | size | string | lite | lite、medium、large 三种不同风格，见DEMO | | leftTime | number | 0 | 剩余时间：指的是根据服务端计算剩余时间值进行倒计时，支持0.1s精度，但有可能会出现丢帧的情况。（单位：秒） | diff --git a/demo/src/app/components/demo.component.html b/demo/src/app/components/demo.component.html index fcc25d0..2fa54fc 100644 --- a/demo/src/app/components/demo.component.html +++ b/demo/src/app/components/demo.component.html @@ -97,7 +97,23 @@
-
基础效果
+
非立即开始
+
+
+ +
+ +
+
+ +
+
+
+
+
+
动作
diff --git a/package.json b/package.json index 842a3e0..3c32048 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-countdown", - "version": "2.0.3", + "version": "2.0.4", "main": "./bundles/ngx-countdown.umd.js", "typings": "index.d.ts", "description": "Simple, easy and performance countdown for angular", diff --git a/src/components/component.ts b/src/components/component.ts index e715b4c..67a0f0b 100644 --- a/src/components/component.ts +++ b/src/components/component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, ViewEncapsulation, Input, Renderer, OnChanges, SimpleChanges, OnDestroy, Output, EventEmitter, HostBinding, OnInit } from '@angular/core'; +import { Component, ElementRef, ViewEncapsulation, Input, Renderer, OnChanges, SimpleChanges, OnDestroy, Output, EventEmitter, HostBinding, OnInit, SimpleChange } from '@angular/core'; import { Config } from './interfaces/config'; import { Hand } from './interfaces/hand'; import { Timer } from './timer'; @@ -34,20 +34,27 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { } ngOnInit() { + this.mergeConfig(); this.init(); - this.callEvent('start'); + if (!this.config.demand) this.begin(); } ngOnDestroy(): void { this.destroy(); } - ngOnChanges(changes: SimpleChanges): void { + ngOnChanges(changes: { [P in keyof this]?: SimpleChange } & SimpleChanges): void { if (!changes.config.firstChange) { + this.mergeConfig(); this.destroy().init(); } } + begin() { + this.parsed = false; + this.callEvent('start'); + } + restart(): void { if (!this.stoped) this.destroy(); this.init(); @@ -74,6 +81,18 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { this.callEvent('resume'); } + private mergeConfig() { + this.config = Object.assign({ + demand: false, + leftTime: 0, + template: '$!h!时$!m!分$!s!秒', + size: 'lite', + effect: 'normal', + varRegular: /\$\!([\-\w]+)\!/g, + clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1] + }, this.config); + } + private callEvent(action: string) { this.event.emit({ action, left: this.left }); } @@ -81,18 +100,9 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { private init() { const me = this; const el = me.el.nativeElement; - me.parsed = false; + me.parsed = me.config.demand; me.stoped = false; - me.config = Object.assign({ - leftTime: 0, - template: '$!h!时$!m!分$!s!秒', - size: 'lite', - effect: 'normal', - varRegular: /\$\!([\-\w]+)\!/g, - clock: ['d', 100, 2, 'h', 24, 2, 'm', 60, 2, 's', 60, 2, 'u', 10, 1] - }, me.config); - this.cls = `count-down ${me.config.size} ${me.config.className || ''}`; // 分析markup @@ -139,7 +149,7 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { }); me.getLeft(); - me.reflow(); + me.reflow(0, true); // bind reflow to me const _reflow = me.reflow; @@ -173,8 +183,8 @@ export class CountdownComponent implements OnInit, OnChanges, OnDestroy { /** * 更新时钟 */ - private reflow(count: number = 0): void { - if (this.parsed || this.stoped) return ; + private reflow(count: number = 0, force: boolean = false): void { + if (!force && (this.parsed || this.stoped)) return ; const me = this; me.left = me.left - me.frequency * count; diff --git a/src/components/interfaces/config.ts b/src/components/interfaces/config.ts index 7d91099..69dcc6f 100644 --- a/src/components/interfaces/config.ts +++ b/src/components/interfaces/config.ts @@ -7,6 +7,11 @@ export interface Config { */ template?: string; + /** + * 按需启动，需调用 `begin()` 开始启动，默认：`false` + */ + demand?: boolean; + /** * 尺寸 *