Таймер обратного отсчета

Расширение ui.countdown добавляет таймер обратного отсчета. Доступно с версии ui 24.200.400.

Подключение

import { Countdown } from 'ui.countdown'; // es6
new Countdown(props);
    
new BX.UI.Countdown(props); // es5

PHP

\Bitrix\Main\UI\Extension::load('ui.countdown');

Параметры

Параметр `тип`	Описание
props `Object`	Коллекция параметров

Параметр props

Параметр `тип`	Описание
seconds `number`	Количество секунд для обратного отсчета. По умолчанию — `0`
node `HTMLElement`	Ссылка на DOM-элемент, в котором будет выведен таймер. Внутри этого элемента будет только таймер. При инициализации таймера все дочерние элементы будут очищены.
showIcon `boolean`	Показывать ли иконку перед таймером. По умолчанию — `true`
iconClass `string \| null`	CSS класс для своей иконки. По умолчанию `ui-icon-set --clock-2` — иконка часиков, как на картинке в начале. При использовании сета иконок из ui-icon-set подключите соответствующий пакет
showMinutes `boolean`	Делить ли секунды на минуты. По умолчанию — `true`. Например, если передали `150` секунд: при значении `true` таймер начнет отсчет с `2:30` при значении `false` — обратный отсчет чисел со `150` секунд
interval `number`	Интервал между тактами в миллисекундах для регулировки скорости отсчета. По умолчанию — `1000`. Примеры: При значении `1000` отсчет идет со скоростью 1 элемент в секунду При значении `200` отсчет идет со скоростью 5 элементов в секунду
needStartImmediately `boolean`	Начать ли отсчет автоматически. Может иметь значения: `true` — запускать отсчет автоматически при инициализации `false` — дождаться команды старта По умолчанию — `true`
hideAfterEnd `boolean`	Скрывать таймер после окончания отсчета. По умолчанию равен `false` — таймер останавливается на нуле
onTimerEnd `function`	Колбэк, вызываемый при достижении нуля. Например, можно сделать кнопку активной

Примеры использования

Простой таймер на 20 секунд

    <div id="simple-timer"></div>
    import { Countdown } from 'ui.countdown'; // es6
    new Countdown({
        seconds: 20,
        node: document.querySelector('#simple-timer'),
    });

Таймер без минут (обычный счетчик)

    <div id="simple-timer"></div>
    import { Countdown } from 'ui.countdown'; // es6
    new Countdown({
        seconds: 250,
        showMinutes: false,
        node: document.querySelector('#long-timer-without-minutes'),
    });

Таймер с колбэком

    <div id="callback"></div>
    <div id="button" style="margin-left: 20px;"></div>
    import { Countdown } from 'ui.countdown'; // es6
    import { Button, ButtonSize, ButtonColor } from 'ui.button';
    const button = new Button({
        text: 'Отправить',
        size: ButtonSize.SMALL,
        color: ButtonColor.PRIMARY,
    });
    button.renderTo(document.querySelector('#button'));
    
    new Countdown({
        seconds: 5,
        node: document.querySelector('#callback'),
        onTimerEnd: () => {
            button.setDisabled();
        },
    });