Управление тач-событиями

Toastify — это легковесная библиотека для отображения уведомлений в веб-приложениях на JavaScript. Помимо базового функционала, она позволяет детально настраивать взаимодействие с уведомлениями, включая поддержку тач-событий на мобильных устройствах и сенсорных экранах.

Подключение и базовая конфигурация

Для использования Toastify необходимо подключить библиотеку через CDN или пакетный менеджер:

<!-- CDN -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
// Простейший пример
Toastify({
    text: "Уведомление успешно отображено",
    duration: 3000
}).showToast();

Ключевые параметры:

  • text — текст уведомления;
  • duration — время отображения в миллисекундах;
  • gravity — положение по вертикали ("top" или "bottom");
  • position — положение по горизонтали ("left", "center", "right").

Обработка тач-событий

Toastify позволяет управлять пользовательским взаимодействием с уведомлениями через тач-события:

  1. Событие onClick для мобильных устройств Позволяет реагировать на тап пользователя.
Toastify({
    text: "Нажмите на уведомление",
    duration: 5000,
    onClick: function() {
        console.log("Уведомление было нажато");
    }
}).showToast();
  1. Swipe-to-dismiss (смахивание для закрытия) Для поддержки тач-скролла и жестов необходимо использовать кастомные обработчики событий touchstart, touchmove и touchend.
const toast = Toastify({
    text: "Смахните для закрытия",
    duration: -1, // -1 означает постоянное отображение
}).showToast();

let startX = 0;
let currentX = 0;
let threshold = 100; // минимальное смещение для закрытия

toast.addEventListener("touchstart", (e) => {
    startX = e.touches[0].clientX;
});

toast.addEventListener("touchmove", (e) => {
    currentX = e.touches[0].clientX;
    toast.style.transform = `translateX(${currentX - startX}px)`;
});

toast.addEventListener("touchend", () => {
    if (Math.abs(currentX - startX) > threshold) {
        toast.remove();
    } else {
        toast.style.transform = `translateX(0)`;
    }
});

Особенности:

  • touchstart фиксирует начальную позицию пальца;
  • touchmove позволяет динамически перемещать уведомление по оси X;
  • touchend определяет, превышен ли порог для удаления уведомления.

Настройка чувствительности к тачу

Для более точной настройки взаимодействия можно задать порог срабатывания и скорость анимации:

let swipeThreshold = 80; // пиксели
let swipeSpeed = 300; // миллисекунды анимации возврата

toast.addEventListener("touchend", () => {
    let deltaX = currentX - startX;
    if (Math.abs(deltaX) > swipeThreshold) {
        toast.style.transition = `transform ${swipeSpeed}ms ease-out, opacity ${swipeSpeed}ms ease-out`;
        toast.style.opacity = "0";
        toast.style.transform = `translateX(${deltaX > 0 ? 500 : -500}px)`;
        setTimeout(() => toast.remove(), swipeSpeed);
    } else {
        toast.style.transition = `transform ${swipeSpeed}ms ease-out`;
        toast.style.transform = "translateX(0)";
    }
});

Выводы по настройке тач-событий:

  • Для мобильных интерфейсов важно учитывать инерцию пальца и минимальное смещение для активации жеста;
  • Использование CSS-анимации улучшает визуальное восприятие;
  • Toastify предоставляет базовые события, но полный контроль над жестами достигается через нативные touch-события.

Комбинация с другими событиями

Тач-события можно комбинировать с onClick, duration и close для создания сложных сценариев:

Toastify({
    text: "Уведомление с тач-жестами и кнопкой закрытия",
    duration: -1,
    close: true,
    onClick: function() {
        console.log("Клик зарегистрирован");
    }
}).showToast();
  • close: true добавляет крестик для ручного закрытия;
  • при свайпе уведомление удаляется автоматически, а onClick срабатывает только при обычном тапе.

Рекомендации по UX при работе с тач

  1. Уведомления не должны перекрывать основные элементы интерфейса на мобильных экранах.
  2. Минимальный размер уведомления для удобного тап-управления — 48x48 пикселей.
  3. Анимация при удалении жестом должна быть плавной, чтобы пользователь видел, что действие выполнено.
  4. Для уведомлений с интерактивными элементами рекомендуется отключать автоматическое исчезновение (duration: -1) до завершения взаимодействия.

Управление тач-событиями в Toastify открывает возможности создания адаптивного мобильного интерфейса с интуитивными жестами. Правильная комбинация onClick, кастомных touch-обработчиков и плавной анимации обеспечивает удобное взаимодействие и повышает вовлечённость пользователей.

Оглавление