Проверка состояния

Featherlight — это лёгкая библиотека для создания модальных окон на JavaScript, ориентированная на минимальный размер и простоту использования. Она позволяет открывать различные типы контента: изображения, HTML, AJAX-запросы и даже iframe. Основное взаимодействие с библиотекой происходит через вызов метода $.featherlight, который принимает содержимое модального окна и опциональные настройки.

$.featherlight('<p>Пример текста в модальном окне</p>');

Контент может быть как строкой HTML, так и элементом DOM:

$.featherlight($('#hiddenElement'));

Инициализация и базовые настройки

Featherlight позволяет конфигурировать модальные окна через объект настроек. Ключевые параметры:

  • targetAttr — атрибут, указывающий источник контента (href по умолчанию).
  • variant — класс CSS, добавляемый к окну, что позволяет создавать различные стили.
  • closeIcon — HTML для кнопки закрытия модального окна.
  • beforeOpen, afterOpen, beforeClose, afterClose — события, выполняемые на разных этапах жизненного цикла окна.

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

$.featherlight('<p>Контент с событиями</p>', {
    variant: 'custom-lightbox',
    closeIcon: '&#10006;',
    beforeOpen: function(event){
        console.log('Модальное окно готовится к открытию');
    },
    afterClose: function(event){
        console.log('Модальное окно закрыто');
    }
});

Проверка состояния модального окна

Featherlight предоставляет инструменты для отслеживания состояния модального окна. Основное значение имеет свойство $.featherlight.current(), которое возвращает объект текущего открытого окна или undefined, если окно закрыто.

if ($.featherlight.current()) {
    console.log('Окно открыто');
} else {
    console.log('Окно закрыто');
}

Этот объект содержит полезные свойства и методы:

  • $instance — jQuery-объект, представляющий текущее модальное окно.
  • $content — jQuery-объект с содержимым окна.
  • open() и close() — методы для управления состоянием окна.
  • isOpen — булево значение, указывающее, открыто окно или нет.

Пример проверки состояния и управления окном:

var fl = $.featherlight.current();

if (fl && fl.isOpen) {
    fl.close();
}

Взаимодействие с несколькими окнами

Featherlight поддерживает стек модальных окон. Каждое новое окно добавляется поверх предыдущего. Для работы с несколькими окнами можно использовать массив $.featherlight.opened, где хранятся все активные экземпляры:

$.featherlight.opened.forEach(function(instance, index){
    console.log('Окно номер', index + 1, 'открыто:', instance.isOpen);
});

Закрытие всех окон сразу выполняется через вызов close() для каждого экземпляра:

$.featherlight.opened.forEach(function(instance){
    instance.close();
});

Динамическая проверка содержимого

Для контроля контента в реальном времени можно использовать свойство $content. Например, для изменения текста или применения стилей без закрытия окна:

var fl = $.featherlight.current();
if (fl) {
    fl.$content.html('<p>Обновлённый контент</p>');
    fl.$content.css('color', 'blue');
}

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

Программное открытие и закрытие

Открытие модального окна программно выполняется через $.featherlight(content, options), а закрытие — через close() текущего экземпляра:

var fl = $.featherlight('<p>Программное окно</p>');
fl.open(); // можно вызвать повторно для синхронизации
fl.close(); // закрытие окна

Отслеживание событий жизненного цикла

Для проверки состояния окна полезно использовать события:

  • beforeOpen — выполняется перед открытием.
  • afterOpen — после завершения анимации открытия.
  • beforeClose — перед закрытием.
  • afterClose — после закрытия окна.

Пример привязки событий к существующему экземпляру:

var fl = $.featherlight('<p>Окно с событиями</p>');
fl.$instance.on('afterClose', function(){
    console.log('Модальное окно полностью закрыто');
});

Использование вариантов CSS для контроля состояния

С помощью параметра variant можно менять внешний вид окна в зависимости от состояния. Например, для предупреждения о закрытии:

var fl = $.featherlight('<p>Содержимое</p>', {
    variant: 'warning'
});

if (fl.isOpen) {
    fl.$instance.addClass('highlight');
}

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

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

Комбинация методов current(), массива opened, событий жизненного цикла и свойств экземпляра позволяет полностью контролировать состояние модальных окон. Проверка, открытие, закрытие, изменение контента и стиль окна могут выполняться динамически в зависимости от логики приложения, обеспечивая гибкость и интерактивность интерфейса.

Оглавление