Свайп-жесты на мобильных

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

Основы работы с библиотекой BasicLightbox

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

Для интеграции свайп-жестов с библиотекой BasicLightbox, нужно учитывать, что эта библиотека изначально не поддерживает такую функциональность “из коробки”. Однако, благодаря её гибкости, можно легко добавить поддержку свайпов с использованием стандартных JavaScript и дополнительных библиотек для работы с событиями на мобильных устройствах.

Подключение библиотеки BasicLightbox

Для начала необходимо подключить саму библиотеку BasicLightbox. Это можно сделать через CDN или установить её с помощью npm:

<!-- Подключение через CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/baselightbox/dist/basicLightbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/baselightbox/dist/basicLightbox.min.js"></script>

Или с использованием npm:

npm install basiclightbox

После подключения библиотеки, можно создать базовое модальное окно:

const lightbox = basicLightbox.create(`
  <img src="image.jpg" width="800" height="600">
`);

lightbox.show();

Реализация свайп-жестов для навигации

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

  1. Отслеживание жестов: Для начала необходимо добавить обработчики событий для отслеживания свайпов. Для этого нужно создать слушатели на элементы, в которых будет отображаться изображение.
let startX, startY;

document.querySelector('.basicLightbox').addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  startX = touch.pageX;
  startY = touch.pageY;
});

document.querySelector('.basicLightbox').addEventListener('touchend', function(e) {
  const touch = e.changedTouches[0];
  const deltaX = touch.pageX - startX;
  const deltaY = touch.pageY - startY;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    // Горизонтальный свайп
    if (deltaX > 0) {
      console.log("Свайп вправо");
    } else {
      console.log("Свайп влево");
    }
  }
});

В этом примере мы отслеживаем начальную и конечную точку касания, затем вычисляем разницу по оси X и Y. Если разница по оси X больше, чем по оси Y, то это считается горизонтальным свайпом, и можно выполнить нужное действие (например, переключить изображение влево или вправо).

  1. Плавное переключение изображений: При свайпе вправо или влево можно добавить плавное переключение между изображениями. Важно, чтобы интерфейс был максимально удобным, и пользователь не ощущал задержек при переключении.
let currentIndex = 0;
const images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

function updateImage(index) {
  const img = document.querySelector('img');
  img.src = images[index];
}

document.querySelector('.basicLightbox').addEventListener('touchend', function(e) {
  const touch = e.changedTouches[0];
  const deltaX = touch.pageX - startX;

  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    if (deltaX > 0) {
      currentIndex = (currentIndex === 0) ? images.length - 1 : currentIndex - 1;
    } else {
      currentIndex = (currentIndex === images.length - 1) ? 0 : currentIndex + 1;
    }
    updateImage(currentIndex);
  }
});

В данном случае массив images хранит ссылки на изображения. При свайпе влево или вправо происходит изменение индекса текущего изображения и обновление содержимого модального окна.

Обработка вертикальных свайпов

Иногда необходимо учитывать вертикальные свайпы для выполнения других действий, например, для закрытия модального окна. Для этого можно добавить обработку свайпов по вертикали:

document.querySelector('.basicLightbox').addEventListener('touchend', function(e) {
  const touch = e.changedTouches[0];
  const deltaX = touch.pageX - startX;
  const deltaY = touch.pageY - startY;

  if (Math.abs(deltaX) < Math.abs(deltaY)) {
    if (deltaY > 0) {
      console.log("Свайп вниз");
      lightbox.close();  // Закрытие окна при свайпе вниз
    } else {
      console.log("Свайп вверх");
    }
  }
});

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

Работа с несколькими окнами

Если необходимо работать с несколькими окнами BasicLightbox, можно добавить поддержку свайпов на каждое из них. Для этого нужно отслеживать активное окно и выполнять переключение изображений только в контексте этого окна.

let activeLightbox = null;

function openLightbox(index) {
  activeLightbox = basicLightbox.create(`
    <img src="image${index}.jpg" width="800" height="600">
  `);
  activeLightbox.show();
}

document.querySelector('.open-lightbox').addEventListener('click', function() {
  openLightbox(1);
});

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

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

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

let isSwiping = false;

document.querySelector('.basicLightbox').addEventListener('touchmove', function(e) {
  if (isSwiping) return;
  isSwiping = true;
  
  // Логика обработки свайпа
  
  setTimeout(() => {
    isSwiping = false;
  }, 200);
});

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

Заключение

Интеграция свайп-жестов в библиотеку BasicLightbox позволяет существенно улучшить взаимодействие с пользователем на мобильных устройствах. Простота и гибкость библиотеки в сочетании с возможностью добавления кастомных событий дают разработчику мощный инструмент для создания удобных и интерактивных интерфейсов.

Оглавление