Переопределение поведения

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

События Unpoly и их обработка

Все действия в Unpoly инициируются событиями, которые можно перехватывать и модифицировать. Основные события:

  • up:click — срабатывает при клике на ссылку с атрибутом up-target или при обычном клике на ссылку, если используется прогрессивная подгрузка.
  • up:submit — срабатывает при отправке формы, предназначенной для частичного обновления.
  • up:layer:opened / up:layer:closed — события для модальных слоёв (layers).
  • up:fragment:loaded — событие, возникающее после успешной подгрузки HTML-фрагмента.

Каждое из этих событий можно перехватить и отменить стандартное поведение, используя метод event.preventDefault(). Например:

up.on('up:click', 'a[data-skip]', function(event) {
  event.preventDefault();
  console.log('Переопределённое поведение ссылки');
});

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

Переопределение загрузки фрагментов

Unpoly позволяет изменять способ подгрузки HTML-фрагментов через хуки up:fragment:fetch и up:fragment:loaded. Это даёт возможность контролировать запросы и ответы:

up.on('up:fragment:fetch', function(event) {
  // Изменение URL запроса
  event.request.url = '/custom-endpoint';
});

up.on('up:fragment:loaded', function(event) {
  // Добавление анимации при подгрузке нового контента
  event.fragment.classList.add('fade-in');
});

Ключевой момент: up:fragment:fetch позволяет модифицировать запрос ДО его отправки на сервер, а up:fragment:loaded — после получения и вставки фрагмента в DOM.

Кастомизация поведения форм

Формы в Unpoly можно настраивать через атрибуты (up-target, up-method, up-on) и через события. Для полного контроля над отправкой формы применяется up:submit:

up.on('up:submit', 'form[data-ajax]', function(event) {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  
  fetch('/api/submit', {
    method: 'POST',
    body: formData
  })
  .then(response => response.text())
  .then(html => {
    up.replace(event.target.closest('[up-target]'), html);
  });
});

Здесь стандартная отправка формы отменяется, выполняется ручной AJAX-запрос, и результат вставляется в нужный контейнер.

Переопределение анимаций

Unpoly поддерживает анимации вставки и удаления фрагментов через CSS-классы и встроенные опции. Для динамического управления анимацией можно использовать up:fragment:before-show:

up.on('up:fragment:before-show', function(event) {
  if(event.fragment.matches('.highlight')) {
    event.animation = 'slide-down';
  }
});

event.animation задаёт анимацию, которая будет применена к фрагменту при показе. Можно условно изменять поведение для разных блоков страницы.

Контроль слоёв (layers)

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

  • up:layer:opening / up:layer:opened
  • up:layer:closing / up:layer:closed

Пример переопределения закрытия слоя:

up.on('up:layer:closing', function(event) {
  if(!confirm('Закрыть слой?')) {
    event.preventDefault();
  }
});

Таким образом, можно внедрять пользовательские проверки перед закрытием модального окна или отменять закрытие полностью.

Глобальные переопределения

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

up.link.config.transition = 'fade';
up.form.config.method = 'PUT';

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

Вывод

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

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

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

Оглавление