Интеграция с роутингом

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

Управление состоянием через URL

Featherlight не имеет встроенного роутинга, поэтому для синхронизации с URL используется сочетание событий открытия/закрытия и API History.

Пример базового подхода:

$('.open-modal').featherlight({
  afterOpen: function(event){
    const modalId = $(event.currentTarget).data('modal-id');
    history.pushState({modal: modalId}, '', `?modal=${modalId}`);
  },
  afterClose: function(){
    history.pushState({}, '', window.location.pathname);
  }
});

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

afterOpen и afterClose позволяют реагировать на события открытия и закрытия.
history.pushState добавляет состояние в историю браузера без перезагрузки страницы.
URL-параметр modal служит индикатором открытого окна, что упрощает восстановление состояния при обновлении страницы.

Обработка навигации назад и вперед

Чтобы Featherlight корректно реагировал на кнопки браузера «назад» и «вперед», необходимо слушать событие popstate:

window.addEventListener('popstate', function(event){
  const modalId = event.state && event.state.modal;
  if(modalId){
    $.featherlight($('#' + modalId));
  } else {
    $.featherlight.current() && $.featherlight.current().close();
  }
});

Особенности:

Проверка event.state.modal позволяет определить, нужно ли открыть конкретное окно.
Если состояния нет — текущее модальное окно закрывается.
Это обеспечивает синхронизацию истории браузера с состоянием интерфейса.

Динамическая загрузка контента по маршруту

Featherlight поддерживает загрузку HTML через Ajax, что удобно для интеграции с роутером на клиенте.

$('.open-ajax-modal').featherlight({
  ajax: '/modals/content.html',
  afterOpen: function(event){
    const modalId = 'ajaxModal';
    history.pushState({modal: modalId}, '', `?modal=${modalId}`);
  }
});

Примечания:

Использование опции ajax позволяет подгружать контент только при открытии окна.
Комбинация с History API поддерживает корректное управление навигацией.
Можно расширить функционал, загружая данные через API на основе параметров URL.

Интеграция с клиентскими фреймворками

Featherlight легко комбинируется с SPA-фреймворками, такими как React, Vue или Angular, при условии обработки состояния через роутер фреймворка.

Пример с React Router:

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import $ from 'jquery';
import 'featherlight';

export default function ModalManager() {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const modalId = params.get('modal');
    if(modalId){
      $.featherlight($('#' + modalId));
    } else {
      $.featherlight.current() && $.featherlight.current().close();
    }
  }, [location]);

  useEffect(() => {
    $(document).on('featherlight:close', function() {
      navigate(location.pathname, { replace: true });
    });
  }, [navigate, location.pathname]);

  return null;
}

Особенности:

Использование useLocation позволяет отслеживать изменения URL и открывать соответствующие модальные окна.
Подписка на событие featherlight:close синхронизирует роутер с закрытием модального окна.
Такой подход обеспечивает предсказуемое поведение при SPA-навигации.

Настройка поведения при обновлении страницы

Если URL содержит параметр открытого окна, необходимо автоматически открывать модальное окно при загрузке страницы:

$(document).ready(function(){
  const params = new URLSearchParams(window.location.search);
  const modalId = params.get('modal');
  if(modalId){
    $.featherlight($('#' + modalId));
  }
});

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

Использование данных атрибутов для роутинга

Для упрощения управления состоянием можно использовать data- атрибуты:

<button class="open-modal" data-modal-id="loginModal">Вход</button>
<div id="loginModal" style="display:none;">
  <h2>Авторизация</h2>
</div>

JS:

$('.open-modal').featherlight({
  afterOpen: function(event){
    const modalId = $(event.currentTarget).data('modal-id');
    history.pushState({modal: modalId}, '', `?modal=${modalId}`);
  }
});

Преимущества:

Атрибуты позволяют избежать жёсткой привязки к селекторам.
Легко масштабировать систему модальных окон.
Совместимо с любым роутером или фреймворком.