Countdown
Create a countdown element in Metro UI is very simple with the use of a special countdown component.
About
The goal of the countdown
component is to create an element that can count down time from the specified time point.
To create countdown
add data-role="countdown"
attribute to element and setup options
.
<div data-role="countdown" data-hours="90"></div>
Options
You can set options
to set times and visual styles for the countdown
element.
Options | Data-* | Default | Desc |
---|---|---|---|
animate | data-animate |
switch | Can be: slide, fade, zoom, switch (default) |
ease | data-ease |
linear | Can be: a valid ease function name |
days | data-days |
0 | Add days to interval |
hours | data-hours |
0 | Add hours to interval |
minutes | data-minutes |
0 | Add minutes to interval |
seconds | data-seconds |
0 | Add seconds to interval |
date | data-date |
Now | Set start point interval |
daysLabel | data-days-label |
days | Set label for days |
hoursLabel | data-hours-label |
hours | Set label for hours |
minutesLabel | data-minutes-label |
mins | Set label for minutes |
secondsLabel | data-seconds-label |
secs | Set label for seconds |
clsZero | data-cls-zero |
Set additional class for zero value | |
clsAlarm | data-cls-alarm |
Set additional class for alarm state | |
clsDays | data-cls-days |
Set additional class for days | |
clsHours | data-cls-hours |
Set additional class for hours | |
clsMinutes | data-cls-minutes |
Set additional class for minutes | |
clsSeconds | data-cls-seconds |
Set additional class for seconds | |
onCountdownCreate | data-on-countdown-create |
Metro.noop | Fired when component is created |
onAlarm | data-on-alarm |
Metro.noop | Fired when countdown is done |
onTick | data-on-tick |
Metro.noop | Fired when countdown is ticks |
onZero | data-on-zero |
Metro.noop | Fired when part is sets to zero |
Setup interval
By default the start point
for interval is today
. To this point you can add days
, hours
, minutes
and seconds
.
<div data-role="countdown"
data-days="1"
data-hours="2"
data-minutes="3"
data-seconds="4"></div>
Also you can set start point manually. To set start point add data-date
attribute to element.
Value for this attribute can be VALID date string.
If you use custom format of date, you must use attribute data-input-format
to setup data format.
<div data-role="countdown" data-date="01/01/2018"
data-days="1"
data-hours="2"
data-minutes="3"
data-seconds="4"></div>
Customize
You can customize countdown
control with special attributes:
data-cls-zero
,
data-cls-alarm
,
data-cls-days
,
data-cls-hours
,
data-cls-minutes
,
data-cls-seconds
.
With this attributes you can define classes to customize visual style for countdown
.
<div data-role="countdown"
data-start="false"
data-days="1"
data-seconds="10"
data-cls-part="no-divider"
data-cls-days="bg-orange fg-white"
data-cls-hours="bg-red fg-white"
data-cls-minutes="bg-green fg-white"
data-cls-seconds="bg-blue fg-white"
data-cls-zero="bg-light fg-lightGray"
></div>
Events
When the countdown
is running, it generates various events
that you can use. How to define Metro UI components events see Events rules.
- onCountdownCreate(el) - fired when component created
- onAlarm(now, el) - fired when countdown is done
- onTick({d, h, m, s}, el) - fired every tick (one second)
- onZero(part, el) - fired when part sets to zero
<div id="countdown_events" data-role="countdown"
data-start="false"
data-days="1"
data-seconds="10"
data-on-countdown-create="console.log('Countdown was created!')"
></div>
<button class="button mt-2"
onclick="$('#countdown_events').data('countdown').start()">Start</button>
Methods
Each countdown
component contains same methods:
- start() - Start countdown
- stop() - Stop countdown
- pause() - Pause countdown
- isPaused() - Return true, if countdown is paused
- getTimepoint(asDate) - Return countdown start point
- getBreakpoint(asDate) - Return countdown break point
- getLeft() - Return object. It contains days, hours, minutes and seconds to stop
<div id="countdown_methods" data-role="countdown"
data-start="false"
data-days="1"
data-seconds="10"
></div>
<button class="button mt-2"
onclick="$('#countdown_methods').data('countdown').start()">Start</button>
<button class="button mt-2"
onclick="$('#countdown_methods').data('countdown').stop()">Stop</button>
<button class="button mt-2"
onclick="$('#countdown_methods').data('countdown').pause()">Pause</button>
<button class="button mt-2"
onclick="alert($('#countdown_methods').data('countdown').getBreakpoint(true))">Breakpoint</button>
<button class="button mt-2"
onclick="alert('Minutes left: ' + $('#countdown_methods').data('countdown').getLeft().minutes)">Minutes left</button>
i18n
To change language
for countdown
use attribute data-locale
. All predefined language files stored in i18n
folder.
You can add own internationalisation file to i18n
folder with same structure and use it. For more information about i18n
see this page.
<div data-role="countdown" data-hours="90" data-locale="de-DE"></div>
You can change locale in runtime. To change locale, update value for attribute data-locale
.
<div class="d-flex flex-justify-center mb-4">
<button class="button m-1" onclick="changeLocale($(this).text())">en-US</button>
<button class="button m-1" onclick="changeLocale($(this).text())">de-DE</button>
<button class="button m-1" onclick="changeLocale($(this).text())">hu-HU</button>
<button class="button m-1" onclick="changeLocale($(this).text())">uk-UA</button>
<button class="button m-1" onclick="changeLocale($(this).text())">ru-RU</button>
</div>
<div id="countdown_locale"
data-role="countdown"
data-hours="90"
style="font-size: 36px"></div>
<script>
function changeLocale(locale){
$('#countdown_locale').attr('data-locale', locale);
}
</script>