JS Компонент таймера обратного отсчета (ui.countdown)

С обновлением платформы (24.200.400) в Расширение ui пришел новый компонент - "Таймер обратного отсчета" ( ui.countdown ).

На момент написания статьи документации об этом компоненте - нет. Поэтому, изучив его детальнее - я делюсь находками.

Компонент предназначен для отображения таймера обратного отсчета (как понятно из названия 😅) с плюшками.

Подключение

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

Параметры

Расширение находится в пространстве имен BX.UI.Countdown и является классом, который принимает такие параметры

let params = {
	seconds: number; // Секунды таймера (по умолчанию: 0)
	showIcon: boolean; // Показывать иконку (по умолчанию: true)
	iconClass: string; // Класс иконки (по умолчанию: 'ui-icon-set --clock-2')
	showMinutes: boolean; // Показывать минуты (по умолчанию: true)
	cssClass: string; // Css класс контейнера 'ui-countdown' (по умолчанию: null)
	interval: number; // Интервал обновления, мс (по умолчанию: 1000)
	node: HTMLElement; // Контейнер в котором рендерить таймер
	needStartImmediately: boolean; // Запускать после инициализации (по умолчанию: true)
	hideAfterEnd: boolean; // Скрыть после окончания таймера (по умолчанию: false)
	onTimerEnd: Function; // Коллбэк после окончания таймера
	onTimerUpdate: Function; // Коллбэк на обновлении таймера
}

Методы

// Установка таймера в секундах
setSeconds(seconds: number): void;

// Запуск таймера
start(): void;

// Остановка таймера
stop(): void;

// Получение DOM таймера
getElement(): HTMLElement;

Быстрое подключение таймера

<div id="countdown"></div>
<script>
    new BX.UI.Countdown({
        seconds: 86400,
        node: BX('countdown')
    });
</script>

Живой пример (таймер: 5 минут)

Вот такая небольшая статья получилась, возможно кому-то будет полезно 😉