Touch-события

Библиотека iziToast поддерживает работу с различными пользовательскими событиями, включая сенсорные (touch) взаимодействия. Touch-события позволяют создавать интерактивные уведомления, которые реагируют на жесты пользователя, такие как касание, свайп или удержание. Основные события, доступные в iziToast, включают: onOpening, onOpened, onClosing, onClosed, а также специальные события для сенсорных взаимодействий: onSwipe, onDrag, onTouchStart, onTouchMove и onTouchEnd.

Инициализация touch-событий

Создание уведомления с обработкой touch-событий осуществляется через объект конфигурации при вызове iziToast.show(). Пример базовой структуры:

iziToast.show({
    title: 'Пример уведомления',
    message: 'Тестовое сообщение с touch-событием',
    position: 'topRight',
    onOpening: function(instance, toast){
        console.log('Уведомление открывается');
    },
    onOpened: function(instance, toast){
        console.log('Уведомление открыто');
    },
    onClosing: function(instance, toast, closedBy){
        console.log('Уведомление закрывается, причина:', closedBy);
    },
    onClosed: function(instance, toast, closedBy){
        console.log('Уведомление закрыто, причина:', closedBy);
    }
});

Для добавления реакции на touch-события необходимо использовать свойства onDrag или назначить обработчики через JavaScript на элемент уведомления.

Работа с onSwipe и onDrag

События onSwipe и onDrag позволяют пользователю управлять уведомлением жестами. В iziToast свайп обычно используется для закрытия уведомления. Пример настройки:

iziToast.show({
    title: 'Свайп для закрытия',
    message: 'Проведите пальцем влево или вправо',
    position: 'bottomRight',
    drag: true, // включение drag-событий
    onDrag: function(instance, toast, direction){
        console.log('Свайп, направление:', direction);
        // Пример: закрытие при свайпе вправо
        if(direction === 'right') instance.hide({}, toast);
    }
});

Ключевые моменты:

  • drag: true — обязательно для активации событий перетаскивания.
  • Параметр direction в onDrag принимает значения 'left', 'right', 'up', 'down'.
  • instance.hide() можно использовать для программного закрытия уведомления по результатам свайпа.

Использование onTouchStart, onTouchMove и onTouchEnd

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

iziToast.show({
    title: 'Touch-события',
    message: 'Отслеживание касаний',
    position: 'topLeft',
    onOpening: function(instance, toast){
        toast.addEventListener('touchstart', function(e){
            console.log('Касание начато', e.touches[0].clientX, e.touches[0].clientY);
        });
        toast.addEventListener('touchmove', function(e){
            console.log('Касание перемещается', e.touches[0].clientX, e.touches[0].clientY);
        });
        toast.addEventListener('touchend', function(e){
            console.log('Касание завершено');
        });
    }
});

Особенности touch-событий:

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

Настройка закрытия уведомлений свайпом

По умолчанию iziToast поддерживает закрытие свайпом. Параметры конфигурации swipe позволяют управлять поведением:

iziToast.show({
    title: 'Свайп закрытие',
    message: 'Настройка направления и чувствительности',
    position: 'topRight',
    drag: true,
    swipe: ['right', 'left'], // разрешённые направления свайпа
    dragTolerance: 50, // чувствительность в пикселях
    onDrag: function(instance, toast, direction){
        console.log('Свайп выполнен в направлении:', direction);
    }
});

Рекомендации по настройке:

  • dragTolerance определяет минимальное смещение для срабатывания свайпа.
  • Если требуется полностью отключить свайп, установите drag: false.
  • Можно комбинировать свайп и другие touch-события для создания интерактивных уведомлений с кастомной логикой.

Применение touch-событий для интерактивного интерфейса

Использование touch-событий расширяет возможности iziToast:

  • Реализация уведомлений, которые исчезают только после свайпа.
  • Создание уведомлений с реакцией на удержание (long press), используя комбинацию touchstart и таймера.
  • Поддержка кастомных жестов, таких как диагональный свайп или последовательные касания.

Пример реализации “удержания для подтверждения”:

let holdTimer;
iziToast.show({
    title: 'Удерживайте уведомление',
    message: 'Подтвердите действие удержанием',
    position: 'bottomLeft',
    onOpening: function(instance, toast){
        toast.addEventListener('touchstart', function(){
            holdTimer = setTimeout(() => {
                console.log('Действие подтверждено');
                instance.hide({}, toast);
            }, 1000); // удержание 1 секунда
        });
        toast.addEventListener('touchend', function(){
            clearTimeout(holdTimer);
        });
    }
});

Такой подход позволяет создавать более естественные и удобные интерфейсы на мобильных устройствах, полностью используя возможности сенсорного взаимодействия.

Оглавление