Включение и отключение модификаторов

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

Структура модификатора

Каждый модификатор в Popper.js описывается объектом со следующими ключевыми свойствами:

  • name — уникальное имя модификатора. Используется для идентификации в конфигурации.
  • enabled — булевое значение, определяющее, активен модификатор или нет.
  • phase — этап жизненного цикла Popper, на котором модификатор будет выполняться (beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite).
  • fn — функция, выполняющая основную логику модификатора.
  • options — объект с дополнительными настройками, уникальными для каждого модификатора.

Пример простого модификатора:

const customModifier = {
  name: 'customModifier',
  enabled: true,
  phase: 'main',
  fn({ state, name }) {
    console.log(`${name} работает!`);
  }
};

Здесь ключевой параметр enabled: true определяет, что модификатор активен. Если его установить в false, функция fn выполняться не будет, и модификатор фактически будет отключён.

Динамическое включение и отключение

Popper.js позволяет изменять активность модификаторов после создания экземпляра с помощью объекта конфигурации. Например, модификатор можно временно деактивировать в зависимости от состояния интерфейса:

const popperInstance = Popper.createPopper(referenceElement, popperElement, {
  modifiers: [
    {
      name: 'offset',
      options: { offset: [0, 8] },
      enabled: true
    },
    {
      name: 'flip',
      enabled: true
    }
  ]
});

// Отключение модификатора flip
popperInstance.setOptions(options => ({
  ...options,
  modifiers: options.modifiers.map(mod => 
    mod.name === 'flip' ? { ...mod, enabled: false } : mod
  )
}));

В этом примере flip временно отключается, и Popper больше не будет автоматически менять положение всплывающего элемента при ограниченном пространстве.

Использование условного включения

Часто требуется активировать модификатор только при определённых условиях, например, при изменении размера окна или состояния страницы. Для этого можно обновлять конфигурацию Popper на лету:

window.addEventListener('resize', () => {
  const shouldEnableFlip = window.innerWidth > 768;

  popperInstance.setOptions(options => ({
    ...options,
    modifiers: options.modifiers.map(mod => 
      mod.name === 'flip' ? { ...mod, enabled: shouldEnableFlip } : mod
    )
  }));
});

Таким образом, модификатор flip будет активен только на больших экранах и отключён на мобильных устройствах.

Влияние отключения модификатора

Отключение модификатора не удаляет его из конфигурации, оно просто блокирует выполнение функции fn. При повторном включении модификатор будет работать с сохранёнными опциями. Это позволяет динамически управлять поведением Popper без необходимости пересоздавать экземпляр.

  • enabled: true — модификатор участвует в расчётах позиции.
  • enabled: false — модификатор игнорируется движком Popper.
  • options остаются неизменными при выключении, что упрощает повторное включение.

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

  1. Группировка модификаторов по логике — объединение схожих модификаторов в массив позволяет проще включать и отключать их по событию.
  2. Минимизация количества включений/выключений — частое изменение состояния может влиять на производительность.
  3. Использование колбэков — модификаторы с функцией fn могут проверять условия внутри себя и включать/выключать части логики без полного отключения.

Примеры встроенных модификаторов

  • flip — управляет изменением позиции при недостатке места.
  • offset — задаёт смещение относительно опорного элемента.
  • preventOverflow — предотвращает выход Popper за пределы видимой области.

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

Управление включением и отключением модификаторов в Popper.js является ключевым инструментом для тонкой настройки поведения всплывающих элементов, позволяя адаптировать интерфейс к любым условиям без пересоздания Popper-экземпляров.

Оглавление