Параметр beforeClose

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

Основное назначение

Параметр beforeClose представляет собой функцию обратного вызова (callback), которая вызывается сразу перед тем, как окно будет закрыто. Она позволяет:

  • Проверять состояние данных внутри модального окна и отменять закрытие при необходимости.
  • Выполнять анимации, очистку ресурсов или сохранение данных.
  • Добавлять условную логику, которая решает, разрешено ли закрытие окна в текущий момент.

Синтаксис параметра:

$.featherlight(content, {
    beforeClose: function(event) {
        // Логика перед закрытием
        return true; // или false для отмены закрытия
    }
});

Параметры функции

Функция beforeClose получает один аргумент — объект события event. Этот объект позволяет:

  • Определять источник события закрытия (например, клик по кнопке или нажатием клавиши ESC).
  • Отменять стандартное поведение закрытия через возврат false.

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

$.featherlight('<p>Содержимое окна</p>', {
    beforeClose: function(event) {
        if(event && event.type === 'click') {
            console.log('Закрытие инициировано кликом');
        }
        return true;
    }
});

Управление закрытием

Возврат значения из функции beforeClose определяет дальнейшее поведение окна:

  • true или undefined — окно закрывается.
  • false — закрытие отменяется.

Это позволяет реализовать проверки перед закрытием, например, при незаполненной форме:

$.featherlight('<form id="myForm"><input required></form>', {
    beforeClose: function() {
        const form = $('#myForm')[0];
        if(!form.checkValidity()) {
            alert('Форма не заполнена корректно');
            return false; // отмена закрытия
        }
        return true; // закрытие разрешено
    }
});

Асинхронные действия перед закрытием

Featherlight не поддерживает асинхронное ожидание внутри beforeClose напрямую. Однако можно использовать промисы или таймеры для задержки закрытия, если требуется выполнить асинхронные операции. Для этого нужно вручную вызвать метод close() после завершения действия:

$.featherlight('<p>Данные сохраняются...</p>', {
    beforeClose: function() {
        saveDataAsync().then(() => {
            this.close(); // закрытие после завершения асинхронной операции
        });
        return false; // временно отменяем закрытие
    }
});

Контекст выполнения (this)

Внутри функции beforeClose объект this ссылается на текущий экземпляр Featherlight, что позволяет использовать методы и свойства окна:

  • this.$content — содержимое модального окна.
  • this.$instance — корневой элемент окна.
  • this.close() — закрытие окна программно.

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

$.featherlight('<p>Проверка контента</p>', {
    beforeClose: function() {
        if(this.$content.text().includes('не закрывать')) {
            return false; // запрещаем закрытие
        }
        return true;
    }
});

Взаимодействие с другими параметрами

beforeClose часто используется совместно с другими параметрами Featherlight:

  • afterClose — вызывается после закрытия окна. beforeClose позволяет отменить закрытие, а afterClose выполняется только если окно действительно закрылось.
  • closeOnClick — если отключено закрытие по клику, beforeClose может использоваться для условного разрешения закрытия при определённых кликах.
  • persist — если окно создаётся один раз и используется повторно, beforeClose помогает контролировать моменты, когда окно может быть скрыто или закрыто.

Практические примеры

  1. Подтверждение перед закрытием:
$.featherlight('<p>Вы уверены?</p>', {
    beforeClose: function() {
        return confirm('Закрыть окно?');
    }
});
  1. Сохранение данных формы перед закрытием:
$.featherlight('<form id="editForm"><input required></form>', {
    beforeClose: function() {
        const form = $('#editForm')[0];
        if(form.checkValidity()) {
            saveFormData(form);
            return true;
        }
        alert('Пожалуйста, заполните все поля');
        return false;
    }
});
  1. Остановка закрытия при определённом условии контента:
$.featherlight('<p>Содержимое нельзя закрыть</p>', {
    beforeClose: function() {
        if(this.$content.text().includes('нельзя')) {
            console.log('Закрытие заблокировано');
            return false;
        }
        return true;
    }
});

Параметр beforeClose обеспечивает гибкий контроль поведения модальных окон, позволяя внедрять проверки, сохранение данных и условное закрытие без изменения ядра библиотеки. Он является одним из основных инструментов для создания интерактивных и безопасных интерфейсов с использованием Featherlight.

Оглавление