Skip to content

Commit bec6064

Browse files
ArgoZhangArgoZhang
authored
feat(FlipClock): add Reset instance method (#7657)
1 parent aebb38d commit bec6064

File tree

2 files changed

+89
-76
lines changed

2 files changed

+89
-76
lines changed

‎src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.cs‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,10 +175,22 @@ public partial class FlipClock
175175
/// <summary>
176176
/// <inheritdoc/>
177177
/// </summary>
178-
protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, new { Invoke = Interop, OnCompleted = nameof(OnCompleted), ViewMode = ViewMode.ToString(), StartValue = GetTicks() });
178+
protected override Task InvokeInitAsync() => Reset();
179179

180180
private double GetTicks() => StartValue?.TotalMilliseconds ?? 0;
181181

182+
/// <summary>
183+
/// <para lang="zh">重置方法</para>
184+
/// <para lang="en">Reset method</para>
185+
/// </summary>
186+
/// <returns></returns>
187+
public Task Reset() => InvokeVoidAsync("init", Id, Interop, new
188+
{
189+
OnCompleted = nameof(OnCompleted),
190+
ViewMode = ViewMode.ToString(),
191+
StartValue = GetTicks()
192+
});
193+
182194
/// <summary>
183195
/// <para lang="zh">倒计时结束回调方法由 JSInvoke 调用</para>
184196
/// <para lang="en">Countdown Completed Callback Method invoke by JSInvoke</para>

‎src/BootstrapBlazor/Components/FlipClock/FlipClock.razor.js‎

Lines changed: 76 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
1-
export function init(id, options) {
1+
export function init(id, invoke, options) {
22
options = {
33
...{
44
viewMode: 'DateTime',
55
startValue: 0,
6-
onCompleted: null
6+
onCompleted: null,
7+
counter: 0,
8+
totalMilliseconds : 0,
9+
countDown: false
710
},
811
...options
912
}
@@ -12,90 +15,22 @@
1215
return;
1316
}
1417

15-
let counter = 0;
16-
let totalMilliseconds = 0;
17-
let countDown = false;
18-
const getDate = () => {
19-
const view = options.viewMode;
20-
countDown = false;
21-
if (view === "DateTime") {
22-
const now = new Date();
23-
return {
24-
years: now.getFullYear(),
25-
months: now.getMonth() + 1,
26-
days: now.getDate(),
27-
hours: now.getHours(),
28-
minutes: now.getMinutes(),
29-
seconds: now.getSeconds()
30-
};
31-
}
32-
else if (view === "Count") {
33-
counter += 1000;
34-
totalMilliseconds = counter - options.startValue;
35-
}
36-
else if (view === "CountDown") {
37-
countDown = true;
38-
counter += 1000;
39-
totalMilliseconds = options.startValue - counter;
40-
if (totalMilliseconds < 0) totalMilliseconds = 0;
41-
}
42-
43-
const seconds = Math.floor(totalMilliseconds / 1000) % 60;
44-
const minutes = Math.floor(totalMilliseconds / (1000 * 60)) % 60;
45-
const hours = Math.floor(totalMilliseconds / (1000 * 60 * 60)) % 24;
46-
const days = Math.floor(totalMilliseconds / (1000 * 60 * 60 * 24));
47-
const months = 0;
48-
const years = 0;
49-
return { years, months, days, hours, minutes, seconds };
50-
};
51-
52-
const getConfig = () => [
53-
{ key: 'years', list: el.querySelector('.bb-flip-clock-list.year'), digits: 4 },
54-
{ key: 'months', list: el.querySelector('.bb-flip-clock-list.month'), digits: 2 },
55-
{ key: 'days', list: el.querySelector('.bb-flip-clock-list.day'), digits: 2 },
56-
{ key: 'hours', list: el.querySelector('.bb-flip-clock-list.hour'), digits: 2 },
57-
{ key: 'minutes', list: el.querySelector('.bb-flip-clock-list.minute'), digits: 2 },
58-
{ key: 'seconds', list: el.querySelector('.bb-flip-clock-list.second'), digits: 2 },
59-
];
60-
61-
const setDigits = (list, value, digits, countDown) => {
62-
list.classList.remove('flip');
63-
for (let i = 0; i < digits; i++) {
64-
const place = digits - 1 - i;
65-
const digit = Math.floor(value / 10 ** place) % 10;
66-
setFlip(list.children[i], digit, countDown);
67-
}
68-
list.classList.add('flip');
69-
};
70-
71-
const go = () => {
72-
const d = getDate();
73-
const unitConfig = getConfig();
74-
unitConfig.forEach(({ key, list, digits }) => {
75-
if (list === null) {
76-
return;
77-
}
78-
79-
setDigits(list, d[key], digits, countDown);
80-
});
81-
return d;
82-
};
83-
8418
let start = void 0
8519
let current;
20+
8621
const flip = ts => {
8722
if (start === void 0) {
8823
start = ts;
89-
current = go();
24+
current = go(el, options);
9025
}
9126
const elapsed = ts - start;
9227
if (elapsed >= 1000) {
9328
start = ts;
94-
current = go();
29+
current = go(el, options);
9530
}
9631

97-
if (countDown && current.hours === 0 && current.minutes === 0 && current.seconds === 0) {
98-
options.invoke.invokeMethodAsync(options.onCompleted);
32+
if (options.countDown && current.hours === 0 && current.minutes === 0 && current.seconds === 0) {
33+
invoke.invokeMethodAsync(options.onCompleted);
9934
return;
10035
}
10136
requestAnimationFrame(flip);
@@ -104,6 +39,72 @@
10439
requestAnimationFrame(flip);
10540
}
10641

42+
const go = (el, options) => {
43+
const d = getDate(options);
44+
const unitConfig = getConfig(el);
45+
unitConfig.forEach(({ key, list, digits }) => {
46+
if (list === null) {
47+
return;
48+
}
49+
50+
setDigits(list, d[key], digits, options.countDown);
51+
});
52+
return d;
53+
};
54+
55+
const getDate = (options) => {
56+
const view = options.viewMode;
57+
options.countDown = false;
58+
if (view === "DateTime") {
59+
const now = new Date();
60+
return {
61+
years: now.getFullYear(),
62+
months: now.getMonth() + 1,
63+
days: now.getDate(),
64+
hours: now.getHours(),
65+
minutes: now.getMinutes(),
66+
seconds: now.getSeconds()
67+
};
68+
}
69+
else if (view === "Count") {
70+
options.counter += 1000;
71+
options.totalMilliseconds = options.counter - options.startValue;
72+
}
73+
else if (view === "CountDown") {
74+
options.countDown = true;
75+
options.counter += 1000;
76+
options.totalMilliseconds = options.startValue - options.counter;
77+
if (options.totalMilliseconds < 0) options.totalMilliseconds = 0;
78+
}
79+
80+
const seconds = Math.floor(options.totalMilliseconds / 1000) % 60;
81+
const minutes = Math.floor(options.totalMilliseconds / (1000 * 60)) % 60;
82+
const hours = Math.floor(options.totalMilliseconds / (1000 * 60 * 60)) % 24;
83+
const days = Math.floor(options.totalMilliseconds / (1000 * 60 * 60 * 24));
84+
const months = 0;
85+
const years = 0;
86+
return { years, months, days, hours, minutes, seconds };
87+
};
88+
89+
const getConfig = el => [
90+
{ key: 'years', list: el.querySelector('.bb-flip-clock-list.year'), digits: 4 },
91+
{ key: 'months', list: el.querySelector('.bb-flip-clock-list.month'), digits: 2 },
92+
{ key: 'days', list: el.querySelector('.bb-flip-clock-list.day'), digits: 2 },
93+
{ key: 'hours', list: el.querySelector('.bb-flip-clock-list.hour'), digits: 2 },
94+
{ key: 'minutes', list: el.querySelector('.bb-flip-clock-list.minute'), digits: 2 },
95+
{ key: 'seconds', list: el.querySelector('.bb-flip-clock-list.second'), digits: 2 },
96+
];
97+
98+
const setDigits = (list, value, digits, countDown) => {
99+
list.classList.remove('flip');
100+
for (let i = 0; i < digits; i++) {
101+
const place = digits - 1 - i;
102+
const digit = Math.floor(value / 10 ** place) % 10;
103+
setFlip(list.children[i], digit, countDown);
104+
}
105+
list.classList.add('flip');
106+
};
107+
107108
const setFlip = (flip, index, countDown) => {
108109
const before = flip.querySelector('.before');
109110
if (before) {

0 commit comments

Comments
 (0)