Touch-события

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

Поддержка событий касания

Featherlight изначально поддерживает стандартные события jQuery, такие как click. Для устройств с сенсорным экраном стандартный click может срабатывать с задержкой и создавать нежелательные эффекты. Поэтому рекомендуется использовать touch-события, такие как:

touchstart — возникает в момент касания экрана.
touchmove — возникает при перемещении пальца по экрану.
touchend — возникает при завершении касания.

Featherlight предоставляет возможность назначать кастомные обработчики для этих событий через callbacks и настройки beforeOpen, afterOpen, beforeClose, afterClose.

Пример базовой интеграции touch-событий:

$('.open-lightbox').on('touchstart', function(e) {
    e.preventDefault(); // предотвращение стандартного поведения
    $.featherlight('#lightbox-content', {
        afterOpen: function() {
            console.log('Модальное окно открыто через touchstart');
        }
    });
});

В этом примере модальное окно открывается сразу при касании, что сокращает задержку в сравнении с обычным кликом.

Настройка свайпов

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

$('#lightbox-content').on('touchstart', function(e) {
    this.startX = e.originalEvent.touches[0].clientX;
});

$('#lightbox-content').on('touchend', function(e) {
    var endX = e.originalEvent.changedTouches[0].clientX;
    if (this.startX - endX > 50) { // свайп влево
        $.featherlight.close();
    }
});

Здесь происходит фиксирование координаты при начале касания и вычисление смещения при окончании. Если смещение превышает порог (50 пикселей), окно закрывается.

Обработка pinch и multi-touch

Featherlight может использоваться совместно с событиями multi-touch, такими как touchmove с двумя пальцами для масштабирования. Например, при отображении изображений можно реализовать pinch-to-zoom:

$('#lightbox-image').on('touchmove', function(e) {
    if (e.originalEvent.touches.length === 2) {
        var touch1 = e.originalEvent.touches[0];
        var touch2 = e.originalEvent.touches[1];

        var distance = Math.hypot(
            touch2.clientX - touch1.clientX,
            touch2.clientY - touch1.clientY
        );

        $(this).css('transform', 'scale(' + (distance / 200) + ')');
    }
});

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

Настройки Featherlight для мобильных устройств

Featherlight имеет ряд конфигураций, влияющих на работу touch-событий:

closeOnClick — по умолчанию закрытие при клике по фону; для сенсорных экранов можно отключить и использовать свайпы.
closeOnEsc — возможность закрытия через клавиатуру, полезно для гибридных устройств.
beforeOpen / afterOpen / beforeClose / afterClose — хуки для интеграции touch-обработчиков.

Пример отключения закрытия по фону и добавления свайпа:

$.featherlight.defaults.closeOnClick = false;

$('#lightbox-content').on('touchend', function(e) {
    if (Math.abs(this.startX - e.originalEvent.changedTouches[0].clientX) > 50) {
        $.featherlight.close();
    }
});

Производительность и оптимизация

При работе с touch-событиями важно минимизировать нагрузку на DOM и избегать лишних пересчётов стилей:

Использовать e.preventDefault() только при необходимости.
Не навешивать обработчики на все элементы, а ограничиваться контейнерами модальных окон.
Применять requestAnimationFrame при сложной анимации движения пальцев.

Пример оптимизированного свайпа с requestAnimationFrame:

$('#lightbox-content').on('touchmove', function(e) {
    if (!this.ticking) {
        window.requestAnimationFrame(() => {
            var touch = e.originalEvent.touches[0];
            $(this).css('transform', 'translateX(' + touch.clientX + 'px)');
            this.ticking = false;
        });
        this.ticking = true;
    }
});

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

Интеграция с другими плагинами

Featherlight совместим с плагинами, которые расширяют возможности сенсорного ввода:

Hammer.js — детекция свайпов, pinch и rotate.
TouchSwipe jQuery — упрощённая обработка свайпов и касаний.

Пример с Hammer.js:

var hammer = new Hammer(document.getElementById('lightbox-content'));
hammer.on('swipeleft', function() {
    $.featherlight.close();
});
hammer.on('swiperight', function() {
    $.featherlight.close();
});

Такой подход делает управление модальными окнами на мобильных устройствах интуитивным и отзывчивым.