Сохранение состояния

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

Модальные окна Featherlight создаются с использованием стандартных HTML-элементов и JQuery. Основной вызов выглядит так:

$.featherlight('<p>Содержимое модального окна</p>');

При этом библиотека автоматически создаёт контейнер, затемнённый фон и кнопку закрытия. Featherlight поддерживает как встроенное содержимое, так и загрузку данных через Ajax или из других DOM-элементов.

Конфигурация и параметры

Featherlight предлагает гибкую систему настроек через объект options, который передается при вызове:

$.featherlight('<p>Текст окна</p>', {
    closeOnClick: 'background',
    closeOnEsc: true,
    targetAttr: 'href',
    persist: true
});

Ключевые параметры:

  • closeOnClick — позволяет закрывать окно при клике на фон. Значения: 'background', 'anywhere', false.
  • closeOnEsc — закрытие окна при нажатии клавиши Esc. Булевый тип.
  • persist — если true, содержимое модального окна не удаляется при закрытии, что позволяет сохранять состояние.
  • targetAttr — атрибут HTML-элемента, содержащий ссылку на контент, например href или data-featherlight.

Сохранение состояния модального окна

Сохранение состояния (state persistence) особенно важно, когда модальное окно содержит формы, вкладки или динамический контент. Featherlight предоставляет два подхода:

  1. Сохранение DOM-элемента через persist: true
$.featherlight('#myContent', {
    persist: true
});

При этом элемент #myContent не клонируется, а перемещается в модальное окно и остаётся доступным после закрытия. Изменения, внесённые пользователем, сохраняются, потому что это тот же самый элемент, который был в DOM.

  1. Сохранение состояния через пользовательские колбэки

Featherlight поддерживает хуки событий: beforeOpen, afterOpen, beforeClose, afterClose. Они позволяют сохранить данные формы или настройки интерфейса.

$('#openModal').featherlight('#formContent', {
    afterClose: function(event){
        localStorage.setItem('formData', $('#formContent').serialize());
    },
    afterOpen: function(event){
        var data = localStorage.getItem('formData');
        if(data) $('#formContent').deserialize(data);
    }
});

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

Работа с динамическим контентом

Featherlight позволяет загружать данные через Ajax, что полезно для больших форм или контента, генерируемого на сервере:

$.featherlight({
    ajax: '/getContent',
    persist: true,
    afterOpen: function(event){
        console.log('Контент загружен и готов к использованию');
    }
});

С флагом persist: true повторное открытие окна не требует повторной загрузки Ajax-запроса, что сокращает нагрузку на сервер и повышает скорость интерфейса.

Кастомизация и расширение

Библиотека предоставляет возможность расширять функционал через прототипы. Например, можно создать модифицированный тип модального окна с сохранением состояния вкладок:

$.featherlight.prototype.afterClose = function(event){
    var activeTab = $(this.$content).find('.tab.active').index();
    localStorage.setItem('activeTab', activeTab);
};

$.featherlight.prototype.afterOpen = function(event){
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab !== null) $(this.$content).find('.tab').eq(activeTab).addClass('active');
};

В этом примере сохраняется активная вкладка между открытиями модального окна, что важно для сложных интерфейсов.

Управление несколькими окнами

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

$.featherlight('#firstModal', {persist: true});
$.featherlight('#secondModal', {persist: true});

Каждое окно сохраняет своё состояние независимо, что обеспечивает корректную работу форм и элементов управления.

Итоговое понимание

Ключевое преимущество Featherlight в контексте сохранения состояния заключается в:

  • Использовании опции persist для сохранения исходного DOM-элемента.
  • Применении колбэков событий для сохранения и восстановления пользовательских данных.
  • Возможности интеграции с localStorage или другими механизмами сохранения.
  • Простоте расширения функционала через прототипы и хуки.

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

Оглавление