Параметр namespace

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

Назначение `namespace`

Параметр namespace используется для создания префикса, который добавляется ко всем CSS-классам и событиям, генерируемым Featherlight. По умолчанию используется значение "featherlight". Это означает, что все элементы модального окна получают классы вида:

<div class="featherlight">
  <div class="featherlight-content"></div>
</div>

Если задать свой namespace, например "customlight", классы будут изменены:

<div class="customlight">
  <div class="customlight-content"></div>
</div>

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

Настройка через опции

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

$.featherlight('<p>Пример контента</p>', {
    namespace: 'customlight'
});

После этого все внутренние элементы будут иметь префикс customlight. Это также влияет на события jQuery, которые используют этот префикс:

customlight:open
customlight:close
customlight:beforeClose

Применение собственного namespace позволяет легко фильтровать события для конкретного окна, не вмешиваясь в другие модальные элементы.

Глобальная настройка

Можно задать namespace для всех будущих экземпляров Featherlight через глобальные настройки:

$.featherlight.defaults.namespace = 'globalcustom';

Теперь любое окно, созданное без явного указания namespace, будет использовать globalcustom вместо стандартного featherlight. Это удобно при масштабных проектах, где необходимо поддерживать единый стиль и единый префикс для всех модальных окон.

Влияние на CSS и селекторы

namespace напрямую используется в CSS для стилизации модальных окон. Например, при стандартном namespace:

.featherlight {
    background: rgba(0,0,0,0.8);
    padding: 20px;
}
.featherlight-content {
    font-size: 16px;
}

Если используется кастомный namespace:

.customlight {
    background: rgba(255,255,255,0.95);
    padding: 30px;
}
.customlight-content {
    font-size: 18px;
}

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

Взаимодействие с событиями

Все события Featherlight, такие как open, close, beforeClose, afterOpen, генерируются с учётом namespace. Это позволяет подписываться на события конкретного окна:

$(document).on('customlight:open', function(event){
    console.log('Окно открыто:', event.target);
});

Без указания собственного namespace события будут использовать стандартное имя featherlight:open, что может привести к пересечению обработчиков при работе с несколькими плагинами.

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

Изоляция стилей для нескольких модальных окон:

$.featherlight('<p>Первое окно</p>', {
    namespace: 'firstlight'
});

$.featherlight('<p>Второе окно</p>', {
    namespace: 'secondlight'
});

Каждое окно имеет свои собственные классы, что позволяет применять разные CSS-наборы и слушатели событий для первого и второго модального окна.

Использование глобального namespace в проекте:

$.featherlight.defaults.namespace = 'projectlight';

$('.open-light').featherlight({
    targetAttr: 'data-light'
});

Все окна, открываемые через .open-light, автоматически получают префикс projectlight, что упрощает поддержку и стилизацию.