Доступ к экземпляру

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

Получение экземпляра

Каждое модальное окно, созданное с помощью Featherlight, инкапсулируется в объект Featherlight, который хранит текущее состояние окна и ссылки на DOM-элементы. Доступ к экземпляру осуществляется через метод $.featherlight.current(). Этот метод возвращает объект текущего открытого окна.

$.featherlight('#myModal'); // открытие окна
var instance = $.featherlight.current(); // получение текущего экземпляра
console.log(instance.$content); // доступ к содержимому окна

Ключевые свойства экземпляра:

  • $content — jQuery-объект с контентом модального окна. Позволяет изменять HTML, добавлять события и манипулировать содержимым динамически.
  • $instance — корневой элемент окна (обертка Featherlight). Используется для управления стилями, анимациями и классами.
  • $overlay — слой затемнения. С помощью него можно менять прозрачность, цвета и слушать события закрытия окна.
  • settings — объект с настройками текущего окна, включая кастомные параметры, переданные при инициализации.

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

Экземпляр Featherlight предоставляет методы, которые позволяют управлять жизненным циклом окна:

  • open() — открывает окно, если оно было закрыто.
  • close(event) — закрывает окно, инициируя событие закрытия.
  • resize(content) — пересчитывает размеры окна в зависимости от контента. Полезно при динамически загружаемом HTML или изображениях.

Пример динамического изменения содержимого и размеров окна:

var instance = $.featherlight.current();
instance.$content.html('<p>Новый контент</p>');
instance.resize();

Доступ к конкретным экземплярам

Featherlight позволяет создавать несколько окон одновременно. Для получения доступа к определенному экземпляру можно хранить ссылку на объект при создании:

var myLightbox = $.featherlight('<div>Контент</div>', {
    afterOpen: function() {
        console.log('Окно открыто', this);
    }
});

// Позже можно закрыть окно через сохранённый экземпляр
myLightbox.close();

Отличие от current(): $.featherlight.current() возвращает только активное окно, тогда как сохранённый экземпляр позволяет управлять окном независимо от других открытых модалей.

Настройка и доступ к параметрам

Все параметры, переданные при инициализации Featherlight, доступны через объект settings экземпляра. Это позволяет динамически менять поведение окна после его открытия:

var instance = $.featherlight.current();
instance.settings.persist = true; // окно не удаляется при закрытии
instance.settings.closeOnClick = false; // отключение закрытия по клику вне окна

Основные параметры в settings:

  • targetAttr — атрибут ссылки, содержащий селектор контента.
  • closeIcon — HTML для иконки закрытия.
  • afterOpen, afterClose, beforeOpen, beforeClose — коллбэки жизненного цикла окна.

Коллбэки получают экземпляр в качестве контекста (this), что упрощает управление содержимым и поведением окна на лету.

Примеры продвинутого использования

  1. Динамическая замена содержимого с анимацией:
var instance = $.featherlight.current();
instance.$content.fadeOut(200, function() {
    instance.$content.html('<h2>Обновленный контент</h2>').fadeIn(200);
    instance.resize();
});
  1. Подключение событий к элементам внутри окна:
var instance = $.featherlight.current();
instance.$content.find('button.save').on('click', function() {
    console.log('Сохранение данных');
    instance.close();
});
  1. Изменение стиля overlay после открытия:
var instance = $.featherlight.current();
instance.$overlay.css({ backgroundColor: 'rgba(0,0,0,0.8)' });

Резюме по доступу к экземпляру

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

  • $.featherlight.current() — получение активного окна.
  • Сохранённый объект при инициализации — управление конкретным экземпляром независимо от других открытых окон.

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

Оглавление