Система классов

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

Featherlight строится вокруг единственного конструктора, который создаёт экземпляры модальных окон и управляет их жизненным циклом. Каждый экземпляр — это отдельный объект с собственными методами и настройками.

Классы и наследование

В основе Featherlight лежит система классов, реализованная через jQuery-подобное наследование. Главный класс называется $.Featherlight. Его можно расширять для создания кастомных модальных окон.

Создание нового класса

var CustomLightbox = $.Featherlight.extend({
    // Опции по умолчанию
    defaults: {
        variant: 'custom',
        closeOnClick: true
    },

    // Переопределение метода инициализации
    setup: function() {
        this.$instance.addClass('custom-lightbox');
    },

    // Логика открытия модального окна
    open: function(event) {
        console.log('Открывается кастомное окно');
        this.super('open', event); // Вызов метода родителя
    }
});

Ключевые моменты:

  • extend() создаёт новый класс, наследующий функционал базового $.Featherlight.
  • Свойство defaults задаёт стандартные настройки для всех экземпляров нового класса.
  • Методы setup, open, close можно переопределять для кастомного поведения.
  • this.super('метод', args) позволяет вызывать оригинальную реализацию метода родителя.

Экземпляры модальных окон

Каждое окно, созданное через Featherlight, является объектом с определёнными свойствами и методами:

  • $instance — jQuery-объект, содержащий DOM модального окна.
  • $content — контент внутри окна.
  • options — объект с опциями конкретного экземпляра.
  • open(event) — метод для открытия окна.
  • close(event) — метод для закрытия окна.
  • destroy() — удаляет экземпляр и освобождает ресурсы.

Пример создания и открытия окна вручную:

var fl = new $.Featherlight('<p>Контент модального окна</p>', {
    variant: 'manual',
    closeOnClick: false
});

fl.open();

Опции и конфигурация

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

  • variant — добавляет CSS-класс к корневому элементу окна.
  • closeOnClick — закрытие при клике вне окна (true по умолчанию).
  • closeOnEsc — закрытие по клавише Escape.
  • persist — позволяет повторно использовать контент без его клонирования.
  • afterOpen, beforeClose, afterClose — колбэки, вызываемые в определённые моменты жизненного цикла.

Пример использования колбэков:

$.featherlight('<p>Динамический контент</p>', {
    afterOpen: function() {
        console.log('Окно открыто');
    },
    beforeClose: function() {
        console.log('Окно готово к закрытию');
    }
});

Варианты (Variants)

Variants позволяют создавать разные визуальные стили окон без дублирования кода. Variant — это CSS-класс, добавляемый к корневому элементу окна.

$.featherlight('<p>Окно с кастомным стилем</p>', {
    variant: 'fancy'
});

CSS-пример:

.featherlight.fancy {
    background-color: #222;
    color: #fff;
    border-radius: 8px;
}

Наследование и расширение функциональности

Благодаря классовой системе можно создавать специализированные окна, например, для изображений, форм или AJAX-контента.

Пример расширения для загрузки AJAX-контента:

var AjaxLightbox = $.Featherlight.extend({
    loadContent: function() {
        var self = this;
        $.get(this.options.url).done(function(data) {
            self.setContent(data);
        });
    }
});

new AjaxLightbox({ url: '/data/modal-content.html' }).open();

Особенности:

  • Метод loadContent переопределяет стандартное поведение setContent.
  • Любой кастомный класс наследует базовые методы: open, close, destroy, что упрощает управление окнами.

Работа с событиями

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

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

Пример:

$(document).on('afterOpen.fb', function(event, instance){
    console.log('Окно полностью открыто', instance);
});

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

Практическая архитектура

Система классов Featherlight даёт возможность строить модульную архитектуру модальных окон:

  1. Базовый класс управляет общими методами и структурой окна.
  2. Производные классы добавляют специфические функции (AJAX, галерея, формы).
  3. Variants и колбэки позволяют менять стиль и поведение без изменения JavaScript-кода.
  4. Экземпляры создаются динамически или заранее, обеспечивая гибкость и контроль за жизненным циклом окна.

Эта структура делает Featherlight мощным инструментом для создания лёгких и адаптивных модальных окон, подходящих как для небольших сайтов, так и для сложных веб-приложений с большим количеством интерактивных элементов.

Оглавление