Настройка истории

Unpoly предоставляет мощные средства для управления историей браузера, что позволяет создавать динамичные веб-приложения с плавной навигацией без перезагрузки страниц. Основная концепция заключается в том, что каждый переход по ссылке или отправка формы может быть обработана асинхронно, а состояние браузера обновляется через HTML5 History API.

Работа с History API

Unpoly использует встроенные механизмы History API для управления URL и состояния страницы. Это включает методы pushState, replaceState и события popstate. Основные моменты:

  • pushState добавляет новую запись в историю, сохраняя текущий URL и состояние страницы.
  • replaceState заменяет текущую запись истории, не создавая новую.
  • popstate срабатывает при навигации назад или вперед, позволяя Unpoly корректно восстановить состояние страницы.

Unpoly автоматически синхронизирует URL и контент при асинхронных переходах. Например, при клике на ссылку, загружаемую через up-target, URL обновляется без полной перезагрузки страницы, а предыдущие состояния сохраняются для навигации «назад».

Управление состояниями страниц

Каждое состояние страницы в Unpoly хранит следующие ключевые элементы:

  • URL текущей страницы.
  • HTML-контент выбранного блока (target).
  • Заголовки страницы (document.title).
  • Пользовательские данные состояния, если применяются методы up.layer.data() или up.setState().

Состояния можно модифицировать программно:

up.layer.data('filter', { category: 'books', sort: 'asc' });
up.setState({ tab: 'details' });

Это позволяет сохранять пользовательские фильтры, активные вкладки или позиции прокрутки при навигации.

Настройка поведения истории

Unpoly позволяет детально настраивать работу истории через глобальные и локальные параметры:

  • up.options.history – включает или отключает сохранение состояний страницы. Значение true по умолчанию.
  • up.options.scroll – определяет, как будет происходить прокрутка при переходе: к началу страницы, сохранение позиции или прокрутка к якорю.
  • up.options.restoreScroll – управляет восстановлением прокрутки при возврате к предыдущему состоянию.

Пример настройки:

up.options.history = true;
up.options.scroll = 'restore';
up.options.restoreScroll = true;

Навигация между состояниями

Unpoly предоставляет API для программной навигации:

  • up.visit(url, options) – переход к новому URL с опциональной настройкой истории.
  • up.back() – переход к предыдущему состоянию истории.
  • up.forward() – переход к следующему состоянию истории, если таковой существует.

Параметры метода up.visit позволяют управлять состоянием:

up.visit('/products', {
  target: '#main-content',
  history: true, // добавить в историю
  scroll: 'top'  // прокрутка к верху страницы
});

События, связанные с историей

Для полной интеграции навигации Unpoly предоставляет события:

  • up:visit – срабатывает перед началом перехода.
  • up:layer:opened – после того, как новый слой с контентом был добавлен.
  • up:popstate – при восстановлении предыдущего состояния истории.

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

Работа с якорями и фрагментами URL

Unpoly автоматически обрабатывает фрагменты URL (#anchor) при переходах:

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

Пример:

<a href="/section#features" up-target="#content">Особенности</a>

Unpoly при загрузке секции #features обновит URL и прокрутит страницу к указанному элементу, сохраняя возможность возврата к предыдущему положению.

Интеграция с формами и фильтрами

При отправке форм через up-form история автоматически обновляется. Это особенно полезно для фильтров и пагинации:

<form up-target="#results" up-history="true">
  <select name="category" oncha nge="this.form.submit()">
    <option value="books">Книги</option>
    <option value="movies">Фильмы</option>
  </select>
</form>

Каждое изменение отправляет форму асинхронно, обновляет контент в #results и добавляет состояние в историю, что позволяет пользователю возвращаться к предыдущим фильтрам без полной перезагрузки страницы.

Рекомендации по организации истории

  • Использовать up-layer для логической структуры контента: основной слой страницы, модальные окна, панели фильтров.
  • Настраивать up.options.history в зависимости от необходимости сохранения состояния.
  • Использовать события up:popstate для восстановления пользовательских интерфейсов после навигации назад.
  • Управлять прокруткой с помощью up.options.scroll и якорей для плавного и предсказуемого поведения.

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

Оглавление