Описание функционала кода checkbox_popup.js
1. Основная цель
Код заменяет стандартное отображение полей с чекбоксами (.field.checkbox-field) на сайте, скрывая оригинальный список чекбоксов и заменяя его на интерактивный элемент управления (по умолчанию — стилизованный под выпадающий список). При клике на этот элемент открывается попап с улучшенным интерфейсом для выбора опций.
2. Основные элементы интерфейса
Триггер для открытия попапа:
По умолчанию используется элемент .flynax-select-trigger, стилизованный под выпадающий список (с текстом "Открыть список" и стрелкой вниз).
Альтернативный вариант (закомментирован) — кнопка .flynax-button-trigger с текстом "Открыть список".
Текст триггера меняется на "Закрыть список", когда попап открыт.
Триггер добавляется в каждый блок .field.checkbox-field вместо стандартного списка чекбоксов.
Попап (.flynax-checkbox-popup):
Модальное окно, которое появляется по центру экрана при клике на триггер.
Содержит:
Заголовок (например, "Выберите бытовую технику").
Поле поиска (.flynax-checkbox-popup-search).
Кнопки "Выбрать все" и "Отменить все" (.flynax-checkbox-bar).
Список чекбоксов (.flynax-checkbox-popup-content).
Кнопку "Закрыть" (.flynax-checkbox-popup-close).
3. Функционал попапа
Список чекбоксов:
Оригинальный список чекбоксов из .field.checkbox-field .row клонируется и отображается в попапе.
Чекбоксы отображаются в виде сетки (по умолчанию) с помощью display: grid.
Каждый чекбокс синхронизирован с оригинальным: изменение состояния в попапе сразу отражается на оригинальном чекбоксе, и наоборот.
Поиск (.flynax-checkbox-popup-search):
Поле ввода позволяет фильтровать чекбоксы по тексту.
При вводе текста:
Чекбоксы, не соответствующие запросу, скрываются (добавляется класс .hidden).
Список переключается в компактный режим (display: block вместо сетки) для удобства.
Совпадающие элементы сортируются: сначала те, что начинаются с введённого текста, затем остальные (по позиции совпадения).
При очистке поля поиска список возвращается в исходное состояние (сетка, все чекбоксы видны).
Кнопки управления (.flynax-checkbox-bar):
"Выбрать все": Отмечает все чекбоксы в попапе и синхронизирует состояние с оригинальными чекбоксами.
"Отменить все": Снимает отметки со всех чекбоксов в попапе и синхронизирует с оригинальными.
Кнопка "Закрыть" (.flynax-checkbox-popup-close):
Закрывает попап.
Сбрасывает поле поиска.
Восстанавливает исходный порядок чекбоксов (если был поиск).
Обновляет текст триггера на "Открыть список".
4. Синхронизация состояния
Состояние чекбоксов в попапе всегда синхронизировано с оригинальными чекбоксами:
При открытии попапа чекбоксы в нём получают состояние оригинальных.
При изменении чекбокса в попапе это изменение сразу применяется к оригинальному.
При повторном открытии попапа состояние чекбоксов обновляется в соответствии с оригинальными.
5. Мультиязычность
Код поддерживает мультиязычность:
Тексты (заголовок, плейсхолдер поиска, кнопки, текст триггера) берутся из функции rlLang (если доступна) или из локального объекта translations.
Поддерживаются два языка: русский (ru) и английский (en).
Язык определяется по:
Cookie (lang).
URL (например, /ru/ или /en/).
По умолчанию используется ru.
Тексты динамически обновляются при смене языка (без перезагрузки страницы, через setInterval).
6. Адаптивность
Код адаптирован для разных устройств:
Попап:
На десктопе: ширина 600px, максимальная высота 80vh.
На планшетах (≤768px): ширина 90%, уменьшенные шрифты и отступы.
На мобильных (≤480px): ширина 95%, список чекбоксов становится одноколоночным.
Триггер:
На десктопе: ширина 200px.
На планшетах (≤768px): ширина 180px, шрифт уменьшен.
На мобильных (≤480px): ширина 160px, шрифт ещё меньше.
Все элементы (заголовок, поле поиска, кнопки, чекбоксы) уменьшаются на меньших экранах для удобства.
7. Динамическое добавление полей
Код отслеживает динамическое добавление новых полей .field.checkbox-field с помощью MutationObserver.
Если новые поля появляются на странице (например, через AJAX), они автоматически обрабатываются и получают триггер для открытия попапа.
8. Закрытие других попапов
При открытии одного попапа все остальные автоматически закрываются.
Текст триггеров других попапов обновляется на "Открыть список".
9. Сохранение состояния при поиске
Перед началом поиска оригинальный порядок чекбоксов сохраняется.
После очистки поля поиска или закрытия попапа список возвращается в исходное состояние (с сохранением текущих отметок чекбоксов).
10. Стилизация
Триггер (.flynax-select-trigger):
Стилизован под выпадающий список: светлый фон (#f9f9f9), рамка, стрелка вниз :after).
При наведении: рамка становится жёлтой (#f1c40f), фон белым.
Попап:
Белый фон, тень, скруглённые углы.
Заголовок с жёлтой подчёркивающей линией.
Поле поиска с эффектом фокуса (жёлтая рамка).
Кнопки "Выбрать все / Отменить все" и "Закрыть" с жёлтым фоном (#f1c40f) и эффектом наведения.
Чекбоксы:
Отображаются в сетке (на десктопе) или списке (при поиске/на мобильных).
Текст чекбоксов меняет цвет на жёлтый при наведении.
11. Дополнительные особенности
Скрытие оригинальных элементов:
Оригинальные чекбоксы (.field.checkbox-field .row) и кнопки управления (.checkbox_bar) скрываются с помощью display: none !important.
Это сделано, чтобы пользователь взаимодействовал только с новым интерфейсом.
Обработка смены языка:
При клике на переключатель языка (.lang_switcher) страница перезагружается для применения нового языка.
Также есть динамическое обновление текста через setInterval (каждую секунду проверяется смена языка).
Итог
Этот код создаёт удобный и современный интерфейс для работы с чекбоксами:
Заменяет стандартный список чекбоксов на триггер (выпадающий список или кнопку), который открывает попап.
В попапе доступны: выбор чекбоксов, поиск, массовое управление ("Выбрать все / Отменить все").
Поддерживает мультиязычность, адаптивность, синхронизацию состояния и динамическое добавление полей.
Стили соответствуют современным стандартам: светлый фон, жёлтые акценты, скруглённые углы, эффекты наведения.
Вы сможете написать отзыв только после скачивания файла.
Отзывов нет