Приветствую, друзья технологии!

Сегодня в мире постоянно меняющихся технологий и уникальных разработок смартфонов, планшетов и других устройств, оказаться "в тренде" - это как настоящее искусство. Каждый из нас хочет использовать устройства, которые позволяют нам легко и интуитивно взаимодействовать с миром цифровых возможностей. Одной из фантастических новинок, которая взрывает сознание пользователей и разработчиков, является свайп-сайдбар – это гениальное решение для эффективной навигации и управления контентом!

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

В этой увлекательной статье мы окунемся в мир свайп-сайдбаров, расскажу, как они работают, как создать свой собственный сервис для свайпов, прикрутим все это дело к Vue + Typescript. Не волнуйтесь, если вы новичок в программировании или разработке, я проведу вас через каждый шаг, чтобы вы могли освоить это волшебство свайпов!

Немного логики

Представьте себе, что весь этот процесс — это настоящее путешествие в мир магии и волшебства, где вы становитесь волшебником своего приложения или веб-страницы, способным управлять им лишь прикосновением вашего пальца.

Ваш сервис на TypeScript, будь-то мудрый старец или мудрая старица, отвечает за отслеживание каждого движения пальца по горизонтали и вертикали. И когда он распознает ваше магическое движение, он возвращает это знание Vue компоненту, чтобы выполнить заклинание открытия сайдбара!

В Vue компоненте, ваша роль — это как раз таинственный архитектор, который создает уникальный контейнер для отображения сайдбара. Вы создаете экземпляр класса сервиса для свайпа в любом месте, что пожелаете. Теперь ваш компонент обладает магической силой, способной обрабатывать жесты касания!

И вот, когда пользователь делает первый шаг, касаясь вашего компонента, вы ловите этот момент, как настоящий охотник за тенями, и активируете обработчик touchstart. Как будто вы дотрагиваетесь до магической сферы, которая раскрывается перед вами!

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

Когда вашему взору предстанет финальное место, куда ведет жест, вы с умением оракула применяете заклинание touchend. Теперь, когда ваш сервис TypeScript передаст всю информацию о касании, вы открываете свой сокровищницу — ваш сайдбар!

Таким образом, волшебное сочетание сервиса TypeScript и компонента Vue дает вам возможность создать увлекательное путешествие для пользователей, где они могут легко и интуитивно взмахом пальца открывать и закрывать сайдбар. Вы — настоящий маг в своем роде, привносящий чудеса в каждое касание!

К главному

Ну, надеюсь я вас заинтересовал таким загадочным текстом :) Теперь перейдем к самому коду!:

В коде определено два класса: RootSwipeable и SwipeableService.

RootSwipeable - это класс, представляющий простой объект, отвечающий за обработку свайпов. Этот класс не взаимодействует с непосредственно с интерфейсом пользователя и предназначен для внутреннего использования в SwipeableService.

RootSwipeable содержит следующие поля:

p_offset: число, представляющее смещение (порог), которое определяет, насколько далеко нужно свайпнуть, чтобы считать это свайпом влево или вправо.

p_previous: объект с полем x, которое содержит предыдущее положение по оси X. Изначально установлено в null.

  private readonly p_offset: number; // Минимальное смещение для определения свайпа
  private p_previous: { x: number | null }; // Предыдущее положение по оси X

  constructor({ offset }: { offset: number }) {
    this.p_offset = offset; // Установка минимального смещения
    this.p_previous = {x: null}; // Инициализация предыдущего положения
  }

updatePreviousState - это метод класса RootSwipeable, который обновляет значение p_previous.x, записывая в него текущее положение по оси X из переданного события TouchEvent.

  // Обновление предыдущего положения на основе события TouchEvent
  updatePreviousState(event: TouchEvent): void {
    this.p_previous.x = event.changedTouches[0].screenX;
  }

init - это метод класса RootSwipeable, предназначенный для инициализации начального состояния свайпа. Если p_previous.x равно null, вызывается метод updatePreviousState с переданным событием TouchEvent.

  // Инициализация начального состояния свайпа
  init(event: TouchEvent): void {
    !this.p_previous.x && this.updatePreviousState(event);
  }

handleGesture - это метод класса RootSwipeable, который обрабатывает жесты (свайпы) на основе изменений TouchEvent. Он принимает объект со свойствами onLeft и onRight, которые представляют собой функции обратного вызова (колбэки) для обработки свайпов влево и вправо соответственно.

Метод handleGesture сравнивает текущее положение по оси X с предыдущим положением p_previous.x. Если разница между ними превышает значение p_offset, то считается, что был совершен свайп влево или вправо. В зависимости от направления свайпа вызывается соответствующий колбэк onLeft или onRight, и обновляется значение p_previous.x на текущее положение.

  // Обработка жестов (свайпов) на основе изменений TouchEvent
  handleGesture(event: TouchEvent, {
    onLeft = () => {}, // Колбэк для свайпа влево
    onRight = () => {} // Колбэк для свайпа вправо
  }: {
    onLeft: () => void,
    onRight: () => void
  }) {
    if (!this.p_previous.x) {
      return; // Если предыдущее положение не определено, выход из метода
    }
    let screenX = event.changedTouches[0].screenX; // Текущее положение по оси X

    // Если смещение вправо превышает минимальное значение
    if (this.p_previous.x + this.p_offset < screenX) {
      this.updatePreviousState(event); // Обновление предыдущего положения
      onRight(); // Вызов колбэка для свайпа вправо
      return;
    }

    // Если смещение влево превышает минимальное значение
    if (this.p_previous.x - this.p_offset > screenX) {
      this.updatePreviousState(event); // Обновление предыдущего положения
      onLeft(); // Вызов колбэка для свайпа влево
    }
  }

Метод kill обнуляет значение p_previous.x, что означает завершение жеста.
И теперь подрезюмируем весь класс:

class RootSwipeable {
  private readonly p_offset: number; // Минимальное смещение для определения свайпа
  private p_previous: { x: number | null }; // Предыдущее положение по оси X

  constructor({ offset }: { offset: number }) {
    this.p_offset = offset; // Установка минимального смещения
    this.p_previous = {x: null}; // Инициализация предыдущего положения
  }

  // Обновление предыдущего положения на основе события TouchEvent
  updatePreviousState(event: TouchEvent): void {
    this.p_previous.x = event.changedTouches[0].screenX;
  }

  // Инициализация начального состояния свайпа
  init(event: TouchEvent): void {
    !this.p_previous.x && this.updatePreviousState(event);
  }

  // Обработка жестов (свайпов) на основе изменений TouchEvent
  handleGesture(event: TouchEvent, {
    onLeft = () => {}, // Колбэк для свайпа влево
    onRight = () => {} // Колбэк для свайпа вправо
  }: {
    onLeft: () => void,
    onRight: () => void
  }) {
    if (!this.p_previous.x) {
      return; // Если предыдущее положение не определено, выход из метода
    }
    let screenX = event.changedTouches[0].screenX; // Текущее положение по оси X

    // Если смещение вправо превышает минимальное значение
    if (this.p_previous.x + this.p_offset < screenX) {
      this.updatePreviousState(event); // Обновление предыдущего положения
      onRight(); // Вызов колбэка для свайпа вправо
      return;
    }

    // Если смещение влево превышает минимальное значение
    if (this.p_previous.x - this.p_offset > screenX) {
      this.updatePreviousState(event); // Обновление предыдущего положения
      onLeft(); // Вызов колбэка для свайпа влево
    }
  }

  // Обнуление предыдущего положения, завершение свайпа
  kill() {
    this.p_previous = {x: null};
  }
}

SwipeableService - это класс, который предоставляет обертку над RootSwipeable для удобного использования в интерфейсе пользователя.

  root: RootSwipeable; // Экземпляр класса RootSwipeable
  pageWidth: number; // Ширина страницы
  minSwipe: number; // Минимальное значение для определения свайпа
  touchstart: { x: number }; // Начальное положение пальца по оси X
  touchend: { x: number }; // Конечное положение пальца по оси X

  constructor({offset}: { offset: number }) {
    this.root = new RootSwipeable({ offset }); // Создание экземпляра RootSwipeable
    this.pageWidth = window.innerWidth || document.body.clientWidth; // Определение ширины страницы
    this.minSwipe = Math.max(1, Math.floor(0.01 * (this.pageWidth))); // Вычисление минимального значения для свайпа
    this.touchstart = {x: 0}; // Инициализация начального положения
    this.touchend = {x: 0}; // Инициализация конечного положения
  }

touchStart - это метод класса SwipeableService, который вызывается при событии touchstart. Он инициализирует начальное состояние свайпа, вызывая init у RootSwipeable и записывая начальное положение по оси X в touchstart.x.

// Обработчик события touchstart
  touchStart(event: TouchEvent) {
    this.root.init(event); // Инициализация начального состояния свайпа
    this.touchstart.x = event.changedTouches[0].screenX; // Сохранение начального положения пальца
  }

touchMove - это метод класса SwipeableService, который вызывается при событии touchmove. Он обновляет touchend.x и затем вызывает метод handleGesture у RootSwipeable с переданными колбэками onLeft и onRight.

// Обработчик события touchmove
  touchMove(event: TouchEvent, {
    onLeft = () => {}, // Колбэк для свайпа влево
    onRight = () => {} // Колбэк для свайпа вправо
  }) {
    this.touchend.x = event.changedTouches[0].screenX; // Сохранение конечного положения пальца
    this.handleGesture(event, {onLeft, onRight}); // Вызов метода handleGesture для обработки свайпа
  }

touchEnd - это метод класса SwipeableService, который вызывается при событии touchend. Он завершает жест, вызывая kill у RootSwipeable и обнуляя touchstart.x и touchend.x.

export default class SwipeableService {
  root: RootSwipeable; // Экземпляр класса RootSwipeable
  pageWidth: number; // Ширина страницы
  minSwipe: number; // Минимальное значение для определения свайпа
  touchstart: { x: number }; // Начальное положение пальца по оси X
  touchend: { x: number }; // Конечное положение пальца по оси X

  constructor({offset}: { offset: number }) {
    this.root = new RootSwipeable({ offset }); // Создание экземпляра RootSwipeable
    this.pageWidth = window.innerWidth || document.body.clientWidth; // Определение ширины страницы
    this.minSwipe = Math.max(1, Math.floor(0.01 * (this.pageWidth))); // Вычисление минимального значения для свайпа
    this.touchstart = {x: 0}; // Инициализация начального положения
    this.touchend = {x: 0}; // Инициализация конечного положения
  }

  // Обработчик события touchstart
  touchStart(event: TouchEvent) {
    this.root.init(event); // Инициализация начального состояния свайпа
    this.touchstart.x = event.changedTouches[0].screenX; // Сохранение начального положения пальца
  }

  // Обработчик события touchmove
  touchMove(event: TouchEvent, {
    onLeft = () => {}, // Колбэк для свайпа влево
    onRight = () => {} // Колбэк для свайпа вправо
  }) {
    this.touchend.x = event.changedTouches[0].screenX; // Сохранение конечного положения пальца
    this.handleGesture(event, {onLeft, onRight}); // Вызов метода handleGesture для обработки свайпа
  }

  // Обработчик жестов (свайпов) на основе изменений TouchEvent
  handleGesture(event: TouchEvent,
                {onLeft, onRight}:
                  {
                    onLeft: (e: TouchEvent, x: number) => void,
                    onRight: (e: TouchEvent, x: number) => void
                  }
  ) {
    let x = this.touchend.x - this.touchstart.x; // Вычисление смещения по оси X
    if (Math.abs(x) > this.minSwipe) { // Если смещение превышает минимальное значение для свайпа
      this.root.handleGesture(event, {
        onRight: () => onRight(event, x), // Вызов колбэка для свайпа вправо с параметрами события и смещения
        onLeft: () => onLeft(event, x) // Вызов колбэка для свайпа влево с параметрами события и смещения
      });
    }
  }

  // Обработчик события touchend
  touchEnd() {
    this.root.kill(); // Завершение свайпа
    this.touchstart = {x: 0}; // Обнуление начального положения
    this.touchend = {x: 0}; // Обнуление конечного положения
  }
}

Важно отметить, что SwipeableService делегирует основную функциональность свайпов в RootSwipeable, а самостоятельно обрабатывает только начальное и завершающее состояния свайпов, а также вызывает соответствующие колбэки при определенных условиях свайпа.

В принципе, на этом наш сервис готов, осталось только его прикрутить к Vue компоненту

Связываем наш сервис с Vue

Небольшая отметочка - сайдбар я задумывал слева, поэтому вся логика будет относиться к случаю, когда сайдбар слева :) Но не трудно переписать и на правый, просто инвертировать обработчики left, right.

Для начала напишем структуру для компонента:

<template>
  <div class="main">
    <div class="main-page">
      <main class="main-page_content">
        <div class="sidebar"
             style="transition: all .2s linear"
             ref="sidebar"
             @touchstart="touchStart($event)"
             @touchend="touchEnd($event)"
             @touchmove="touchMove($event)">
          <button style="background:#2654ac; padding: 5px; color:#fff;" class="toggler" @click="toggleSidebar($event)">X</button>
        </div>
      </main>
    </div>
  </div>
</template>

И да, у Vue под капотом уже есть встроенная функция для работы с touch событиями, нам остается только пришабашить наш новоиспеченный сервис как нибудь к этим событиям. Делается это довольно несложно, логика никакая не меняется, т.к. нужно просто вызывать методы класса сервиса. Добавятся лишь стили, которые будут убирать или выдвигать наш сайдбар!

Нам потребуется всего лишь 3 переменные:

swipeable: new Swipeable({offset: 2}), // Экземпляр класса
currentPosition: 0, // текущая позиция касания
isSidebarOpened: true, // открыт ли сайдбар?

Как я и говорил выше, логика в плане касаний не меняется, мы просто вызываем те же самые функции, только уже с прикрутом touch событий по компоненту:

    // как раз те самые функции, которые @touchStart="touchStart($event)"
    touchStart(e) { 
      this.swipeable.touchStart(e)
    },
    touchMove(e) {
      this.swipeable.touchMove(e, {onLeft: this.handleLeftTouch, onRight: this.handleRightTouch})
    },
    touchEnd(e) {
      this.currentPosition = parseInt(e.target.style.left, 10)
      this.swipeable.touchEnd(e)
    },

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

    handleLeftTouch(e, x) {
      const blockInstance = e.target;
      const blockInstanceWidth = blockInstance.offsetWidth
      if (x + this.currentPosition > 0) {
        // Если свайп пытается выйти за пределы
        blockInstance.style.left = `0`
      } else if (Math.abs(x + this.currentPosition) >  blockInstanceWidth / 2) {
        // Если наш свайп был больше чем на половину, закроем его
        blockInstance.style.left = `-${blockInstanceWidth}px`
        this.isSidebarOpened = false;
      } else {
        // В остальных случаях просто посмотрим, на сколько свайпнули и изменим положение сайдбара
        blockInstance.style.left = `${x + this.currentPosition}px`
        console.log('свайп на ', x, 'px влево')
      }
    },
    handleRightTouch(e, x) {
      const blockInstance = e.target;
      // Та же проверка на пределы
      if (x + this.currentPosition > 0) {
        blockInstance.style.left = `0`
        return;
      }
      blockInstance.style.left = `${x + this.currentPosition}px`
      console.log('свайп на ', x, 'px вправо')
    },

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

    toggleSidebar(e) {
      const sidebarNode = e.target.offsetParent

      if (this.isSidebarOpened) {
        sidebarNode.style.left = `-${sidebarNode.offsetWidth}px`
        this.isSidebarOpened = false;
      } else {
        sidebarNode.style.left = "0";
        this.currentPosition = 0;
        this.isSidebarOpened = true;
      }
    },

Вот и подошли к итоговой версии кода! Поздравляю всех, кто дочитал до этого места :)

Демонстрация

Полный код на моем гитхабе (в нем также есть и JS версия)

Вот и весь секрет свайпов!

Надеюсь статья была полезна для вас! Удачи!