Настройка слоев

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

Понятие слоев

В Unpoly слой — это область, в которой отображается контент, загружаемый через AJAX. Слои бывают двух основных типов:

  • Основной слой (base layer) — слой, соответствующий основной странице. Все остальные слои являются его потомками.
  • Вспомогательные слои (overlay layer) — слои, создаваемые для модальных окон, всплывающих панелей или вложенных фрагментов. Они позволяют пользователю взаимодействовать с новым контентом, не теряя контекста основной страницы.

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

Создание и управление слоями

Слои создаются автоматически при использовании таких атрибутов, как up-target и up-layer. Основные операции со слоями:

  1. Загрузка контента в слой
<a href="/profile/edit" up-target=".layer" up-layer="modal">Редактировать профиль</a>

Здесь:

  • up-target указывает CSS-селектор контейнера для загрузки нового контента.
  • up-layer="modal" создаёт новый слой поверх текущего, имитируя модальное окно.
  1. Обновление существующего слоя
up.fragment.reload('.layer', { cache: false });

Метод up.fragment.reload перезагружает фрагмент в указанном слое. Опция cache: false гарантирует получение свежих данных с сервера.

  1. Закрытие слоя
up.layer.close('.layer');

Метод up.layer.close закрывает указанный слой, автоматически возвращая фокус на родительский.

Вложенные слои

Unpoly поддерживает вложенные слои, что особенно полезно для многоуровневых диалогов. Основные принципы:

  • Каждый слой имеет ссылку на родительский слой.
  • Закрытие родительского слоя автоматически закрывает все его потомки.
  • События up:layer:opened и up:layer:closed позволяют отслеживать открытие и закрытие каждого слоя.

Пример вложенного слоя:

<div class="layer">
  <a href="/comments/new" up-target=".layer" up-layer="overlay">Добавить комментарий</a>
</div>

При нажатии на ссылку создаётся новый слой поверх текущего, сохраняя родительский контент.

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

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

  • Тип слоя (up-layer)

    • modal — модальные окна.
    • overlay — всплывающие панели.
    • default — обычный фрагмент в текущем слое.

  • Фокусировка и взаимодействие

    • up-focus — элемент, который получает фокус при открытии слоя.
    • up-close-on-escape — автоматически закрывает слой при нажатии Esc.

  • Анимация и переходы

    • up-transition позволяет задавать анимацию при открытии и закрытии слоев.
<div class="layer" up-transition="fade">
  Содержимое с плавным появлением
</div>

  • Контроль кеширования

    • up-cache управляет хранением содержимого слоя в памяти для повторного использования без запроса к серверу.

Программное управление слоями

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

  • Открытие нового слоя
up.layer.open('/settings', { layer: 'modal', target: '.layer' });
  • Получение информации о слоях
let topLayer = up.layer.getTop();
let allLayers = up.layer.all();
  • Манипуляция историей

Unpoly автоматически интегрирует слои с историей браузера. Каждое открытие слоя создаёт отдельную запись в history.pushState. Это позволяет:

  • Вернуться к предыдущему слою с помощью кнопки «Назад».
  • Изменять URL без полной перезагрузки страницы.

События слоев

Unpoly генерирует ряд событий, связанных с жизненным циклом слоя:

  • up:layer:opened — после полной загрузки и отображения слоя.
  • up:layer:closed — после закрытия слоя.
  • up:layer:changing — до изменения контента слоя.
  • up:layer:changed — после обновления содержимого слоя.

Пример подписки на событие:

up.on('up:layer:opened', '.layer', function(event) {
  console.log('Слой открыт:', event.target);
});

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

Практические рекомендации

  • Каждый слой должен иметь уникальный контейнер для предотвращения конфликтов при вложенных модальных окнах.
  • Для модальных окон рекомендуется использовать up-layer="modal" и up-close-on-escape, чтобы обеспечить привычное поведение.
  • Использование up-transition улучшает визуальное восприятие и плавность интерфейса.
  • Вложенные слои должны быть короткоживущими и закрываться при завершении операции, чтобы не создавать чрезмерно глубокую структуру DOM.

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

Оглавление