Reveal-стратегии

Библиотека Unpoly предлагает гибкую модель обновления интерфейса через частичные загрузки. Центральной частью этой модели являются Reveal-стратегии — правила, которые управляют тем, как именно браузер будет показывать обновлённый контент при навигации или выполнении действий.

Понятие Reveal

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

Основные Reveal-стратегии определяют:

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

Основные Reveal-стратегии

reveal: auto

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

Отличительная черта — адаптивность, ориентированная на минимальное вмешательство в положение пользователя.

reveal: show

Стратегия принудительного вывода фрагмента в видимую область. Если обновление проходит «ниже» текущего скролла, Unpoly прокрутит страницу до появления фрагмента, даже если контент ранее был уже почти видим.

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

reveal: focus

Стратегия, при которой внимание переносится на первый фокусируемый элемент внутри обновлённого фрагмента. Часто применяется в формах, диалогах, областях ввода. Если фокусируемого элемента нет, Unpoly ведёт себя так, как при reveal: show.

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

reveal: top

Выравнивает обновлённый фрагмент к верхней границе видимой области. Независимо от текущей позиции скролла, Unpoly перемещает фрагмент так, чтобы его начало располагалось в верхней части окна.

Характерно для контента, где важно фиксированное положение, например при сложных формах или пошаговых интерфейсах.

reveal: cover

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

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

Специальные варианты и дополнительные возможности

Пропуск Reveal

Для некоторых действий может быть полезно полностью отключить Reveal-поведение. Через reveal: false обновление происходит без изменения положения, даже если новый фрагмент оказывается вне видимости.

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

Комбинированные Reveal-паттерны

Unpoly позволяет сочетать Reveal со стратегиями обновления (up-target, up-layer) и навигации (up-follow). Например, для модальных слоёв Reveal зачастую не требуется, поскольку слой сам управляет восприятием контента.

В случае вложенных действий Reveal может наследоваться или переопределяться локально атрибутами up-reveal.

Поведение при навигации и формах

Навигация между страницами через up-follow или отправка форм через up-submit тесно связаны с Reveal. При обновлении длинных форм Reveal-стратегии помогают автоматически подвести фрагмент к зоне ошибки или фокуса. Это обеспечивает удобную валидацию и более плавное взаимодействие.

Unpoly распознаёт системные элементы вроде сообщений об ошибке, информационных блоков, подсказок и может корректировать Reveal-логику в их пользу.

Взаимодействие с историей и слоями

Reveal-стратегии работают независимо от истории браузера, однако слой (up-layer) влияет на восприятие Reveal. Например:

  • в модальном слое Reveal может игнорироваться;
  • в форм-диалогах reveal: focus становится наиболее естественным;
  • в фоновых слоях Reveal может быть отключён.

История (up.history.push, up.history.replace) сохраняет только пользовательский URL и не влияет на поведение Reveal.

Управление через JavaScript API

Reveal можно контролировать не только атрибутами, но и программно через вызовы API:

up.render({
  target: '.content',
  reveal: 'cover',
  focus: 'input[name="email"]'
})

Параметр reveal принимает те же значения, что и атрибуты в HTML, а также допускает false для полного отключения. Вызов может сочетаться с focus, scroll, layer и подобными параметрами.

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

Особенности при плавных переходах

При использовании анимаций Reveal-стратегии вступают в силу после завершения трансформаций. Это предотвращает скачки интерфейса и обеспечивает визуальную непрерывность. Например, при reveal: top фрагмент сначала отрисовывается, затем происходит прокрутка.

Анимации не отменяют Reveal, но могут модифицировать момент его выполнения.

Типичные шаблоны применения

  • длинные статьи и справочные материалы: reveal: auto;
  • формы и авторизация: reveal: focus;
  • результаты поиска и фильтры: reveal: top или reveal: auto;
  • уведомления и ошибки: reveal: show или reveal: cover;
  • локальные обновления кнопок и счётчиков: reveal: false.

Эти шаблоны отражают практические приёмы, сложившиеся при многократной интеграции Unpoly в реальные проекты.

Значение Reveal в UX-модели Unpoly

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

Это делает Reveal одним из ключевых механизмов, обеспечивающих ощущение «живой» и отзывчивой страницы без тяжёлых SPA-фреймворков.

Оглавление