(checkbox_popup.js). Код представляет собой jQuery-скрипт, который улучшает стандартный интерфейс чекбоксов на сайте (например, в системе Flynax) с помощью кастомного попапа. Мы заменили стандартное отображение списка чекбоксов на более удобный и современный интерфейс с попапом, добавили функционал поиска, управления чекбоксами и адаптивность.
Вот полное описание функционала:
Вот полное описание функционала:
Описание функционала кода 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), фон белым.
- Стилизован под выпадающий список: светлый фон (#f9f9f9), рамка, стрелка вниз
- Попап:
- Белый фон, тень, скруглённые углы.
- Заголовок с жёлтой подчёркивающей линией.
- Поле поиска с эффектом фокуса (жёлтая рамка).
- Кнопки "Выбрать все / Отменить все" и "Закрыть" с жёлтым фоном (#f1c40f) и эффектом наведения.
- Чекбоксы:
- Отображаются в сетке (на десктопе) или списке (при поиске/на мобильных).
- Текст чекбоксов меняет цвет на жёлтый при наведении.
11. Дополнительные особенности
- Скрытие оригинальных элементов:
- Оригинальные чекбоксы (.field.checkbox-field .row) и кнопки управления (.checkbox_bar) скрываются с помощью display: none !important.
- Это сделано, чтобы пользователь взаимодействовал только с новым интерфейсом.
- Обработка смены языка:
- При клике на переключатель языка (.lang_switcher) страница перезагружается для применения нового языка.
- Также есть динамическое обновление текста через setInterval (каждую секунду проверяется смена языка).
Итог
Этот код создаёт удобный и современный интерфейс для работы с чекбоксами:- Заменяет стандартный список чекбоксов на триггер (выпадающий список или кнопку), который открывает попап.
- В попапе доступны: выбор чекбоксов, поиск, массовое управление ("Выбрать все / Отменить все").
- Поддерживает мультиязычность, адаптивность, синхронизацию состояния и динамическое добавление полей.
- Стили соответствуют современным стандартам: светлый фон, жёлтые акценты, скруглённые углы, эффекты наведения.
