Закрытие свайпом

Featherlight — это лёгкая и гибкая библиотека для создания модальных окон на JavaScript. Одной из её продвинутых возможностей является закрытие модального окна с помощью свайпа, что особенно актуально для мобильных интерфейсов и сенсорных устройств. Этот функционал расширяет стандартное взаимодействие, добавляя интуитивную навигацию для пользователей.

Основы реализации свайп-жестов

Featherlight сам по себе не содержит встроенной поддержки свайпов, однако его можно интегрировать с любой библиотекой для обработки касаний, например, Hammer.js или использовать нативные события touchstart, touchmove и touchend.

Основная логика работы свайпа для закрытия модального окна включает следующие этапы:

  1. Отслеживание начала касания (touchstart) На этом этапе фиксируются начальные координаты пальца или курсора. Эти координаты будут использоваться для определения направления и длины свайпа.

    let startX = 0;
let startY = 0;

modal.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    startY = e.touches[0].clientY;
});

  2. Отслеживание движения пальца (touchmove) На этом этапе вычисляется смещение относительно начальной точки. Смещение по оси X и Y позволяет определить направление свайпа (влево, вправо, вверх или вниз).

    let deltaX = 0;
let deltaY = 0;

modal.addEventListener('touchmove', (e) => {
    deltaX = e.touches[0].clientX - startX;
    deltaY = e.touches[0].clientY - startY;
});

  3. Определение завершения жеста (touchend) После окончания касания необходимо проверить, достигло ли смещение минимального порога для распознавания свайпа. Только если порог превышен, выполняется закрытие модального окна.

    const swipeThreshold = 100; // минимальное смещение в пикселях

modal.addEventListener('touchend', () => {
    if (Math.abs(deltaY) > swipeThreshold && Math.abs(deltaY) > Math.abs(deltaX)) {
        $.featherlight.close(); // стандартный метод закрытия Featherlight
    }
    deltaX = 0;
    deltaY = 0;
});

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

Направление свайпа может быть настроено под конкретные задачи. Например, модальные окна часто закрываются свайпом вниз:

  • Для закрытия вниз: deltaY > порог
  • Для закрытия вверх: deltaY < -порог
  • Для горизонтального закрытия: проверяется deltaX

Чувствительность задаётся пороговым значением swipeThreshold. Меньшее значение делает окно более чувствительным к движению, но повышает риск случайного закрытия, большее — требует более решительного жеста.

function handleSwipe(deltaX, deltaY) {
    const threshold = 120;
    if (deltaY > threshold) {
        $.featherlight.close();
    }
}

Интеграция с Featherlight

Featherlight предоставляет гибкую структуру для подключения пользовательских обработчиков событий. Для добавления свайп-закрытия можно использовать хуки afterOpen и afterClose:

$.featherlight('<p>Свайп вниз, чтобы закрыть</p>', {
    afterOpen: function(event) {
        const modal = this.$content[0];

        let startY = 0;
        let deltaY = 0;

        modal.addEventListener('touchstart', (e) => {
            startY = e.touches[0].clientY;
        });

        modal.addEventListener('touchmove', (e) => {
            deltaY = e.touches[0].clientY - startY;
        });

        modal.addEventListener('touchend', () => {
            if (deltaY > 100) {
                $.featherlight.close();
            }
            deltaY = 0;
        });
    }
});

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

Визуальная обратная связь

Для улучшения UX полезно добавлять визуальные эффекты при движении пальца. Например, плавное смещение модального окна вниз во время свайпа:

modal.addEventListener('touchmove', (e) => {
    deltaY = e.touches[0].clientY - startY;
    if (deltaY > 0) {
        modal.style.transform = `translateY(${deltaY}px)`;
        modal.style.transition = 'transform 0s';
    }
});

modal.addEventListener('touchend', () => {
    if (deltaY > swipeThreshold) {
        $.featherlight.close();
    } else {
        modal.style.transform = 'translateY(0)';
        modal.style.transition = 'transform 0.3s';
    }
});

Такой подход делает жест более естественным, создавая ощущение, что окно следует за пальцем.

Поддержка мобильных платформ

Featherlight и свайп-закрытие корректно работают на iOS и Android при соблюдении нескольких правил:

  • Не препятствовать нативной прокрутке страницы (e.preventDefault() только в крайних случаях).
  • Ограничить свайпы только по нужной оси (обычно вертикальной).
  • Учитывать разные размеры экранов и DPI для порога свайпа.

Резюме ключевых моментов

  • Свайп-закрытие повышает удобство работы на мобильных устройствах.
  • Основные события: touchstart, touchmove, touchend.
  • Пороговое значение (swipeThreshold) определяет чувствительность жеста.
  • Можно комбинировать с визуальными эффектами, чтобы окно следовало за движением пальца.
  • Интеграция с Featherlight осуществляется через хуки afterOpen и afterClose.
  • Важно тестировать на разных устройствах для корректной работы.

Закрытие свайпом в Featherlight — мощный инструмент для создания современных, отзывчивых интерфейсов, обеспечивающий естественное и интуитивное взаимодействие с модальными окнами.

Оглавление