beforeClose

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

Подключение и синтаксис

Событие beforeClose можно использовать через объект настроек при инициализации Featherlight:

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

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

event — объект события jQuery, связанный с попыткой закрытия окна.
this внутри функции указывает на текущий экземпляр Featherlight, что позволяет обращаться к его методам и свойствам.

Возвращаемое значение функции имеет особое значение:

Если функция возвращает false, закрытие модального окна отменяется.
Если функция не возвращает значение или возвращает true, окно закрывается как обычно.

Контекст использования

beforeClose используется в ситуациях, когда необходимо:

Проверить состояние формы внутри модального окна перед его закрытием.
Предотвратить потерю данных, если пользователь случайно закрывает окно.
Запустить анимацию или процесс сохранения данных перед исчезновением окна.

Пример проверки состояния формы:

$.featherlight('#myForm', {
    beforeClose: function() {
        var isDirty = $(this.$content).find('input').filter(function() {
            return $(this).val() !== '';
        }).length > 0;

        if (isDirty) {
            return confirm("Есть несохранённые изменения. Закрыть окно?");
        }
    }
});

В этом примере закрытие будет отменено, если пользователь не подтвердит действие в диалоговом окне confirm.

Доступные свойства объекта Featherlight в `beforeClose`

this.$content — jQuery-объект, содержащий контент модального окна.
this.$instance — контейнер всего модального окна.
this.$overlay — затемнённый фон под окном.
this.opts — объект с текущими настройками Featherlight.
Методы: this.close(), this.open(), this.afterClose(), что позволяет комбинировать различные события.

Использование свойств внутри beforeClose даёт гибкость, например, для сохранения данных или управления анимацией:

$.featherlight('#info', {
    beforeClose: function() {
        console.log("Окно закроется, но сначала можно обработать контент");
        // Добавление класса анимации перед закрытием
        this.$instance.addClass('fadeOut');
    }
});

Применение с кастомной логикой

Событие можно комбинировать с асинхронными операциями, хотя библиотека изначально не поддерживает async/await в прямом виде для отмены закрытия. Решение заключается в ручном управлении закрытием через this.close() и возврате false:

$.featherlight('#asyncModal', {
    beforeClose: function() {
        var self = this;
        setTimeout(function() {
            console.log("Выполнена асинхронная операция перед закрытием");
            self.close(); // Закрытие вручную после завершения
        }, 1000);
        return false; // Предотвращаем автоматическое закрытие
    }
});

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

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

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

beforeOpen
afterOpen
beforeClose
afterClose

Событие beforeClose вызывается после всех внутренних проверок и перед afterClose. Это позволяет:

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

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

$.featherlight('#example', {
    beforeClose: function() {
        if (!confirm("Вы уверены, что хотите закрыть окно?")) {
            return false;
        }
    },
    afterClose: function() {
        console.log("Модальное окно закрыто и все данные обработаны");
    }
});