Этот скрипт реализует интерактивные превью (тултипы) при наведении на ссылки на профили и темы на форуме. Работает только на десктопе (отключено на экранах ≤768px).
🔧 Основные компоненты
1. Инициализация и ограничения
● Скрипт не запускается на мобильных устройствах.
● Установлен максимальный уровень вложенности (MAX_NESTING_LEVEL = 10) для защиты от бесконечной рекурсии в цитатах/спойлерах.
2. Извлечение ID из URL
Функция getJid(href) парсит URL вида:
profile.php?id=123
viewtopic.php?id=456
и возвращает числовой ID.
3. Система управления тултипами
● Поддерживается только один активный тултип одновременно.
● При попытке открыть новый, пока предыдущий закрывается — цель ставится в очередь (pendingTarget).
● Тултип автоматически скрывается через 2 секунды бездействия (scheduleHide).
● При наведении на тултип — таймер сбрасывается.
● При клике вне тултипа — он закрывается.
4. Позиционирование
● Тултип позиционируется над целевым элементом.
● Для тем — смещается вправо для лучшей читаемости.
● Учитывается ширина окна: тултип не выходит за границы экрана.
👤 Превью профиля
1. Запрашивается API: /api.php?method=users.get&user_id=...
2. Полученные данные:
● аватар (с fallback)
● ник
● группа (через group_id → CSS-класс usTitle-{id})
● пол, возраст, дата регистрации, количество сообщений, уважение, последняя активность
3. Отображается в структурированном виде с разделителями (<hr>).
💬 Превью темы
1. Запрашиваются первое и последнее сообщения параллельно через:
/api.php?method=post.get&topic_id=...&sort_dir=asc
/api.php?method=post.get&topic_id=...&sort_dir=desc
● Отображаются вкладки: «Первое сообщение» / «Последнее сообщение».
● Сообщение проходит обработку через processMessage():
● Удаляются или заменяются опасные/неподдерживаемые BB-теги ([html], [table], [media]).
● Заменяются <details> на <div class="old-details">.
● Все вложенные блоки (цитаты, код, спойлеры) рекурсивно преобразуются в кастомные аккордеоны.
● Медиа-элементы масштабируются (max-width: 100%).
● Упоминания и цитаты заменяются на заглушки с последующей подгрузкой имён.
🧩 Кастомные аккордеоны
● Реализованы без использования <details>, чтобы избежать конфликтов со стилями форума.
● Каждый блок (цитата, код, спойлер) оборачивается в:
Код
<div class="preview-accordion collapsed" data-type="quote">
<div class="preview-summary">📌 [Цитата]</div>
<div class="preview-content">...</div>
</div>
● Раскрытие/сворачивание управляется только через CSS-классы (expanded / collapsed).
● Рекурсивная обработка вложенных блоков с ограничением глубины.
● При раскрытии — заголовок получает цветовую индикацию по типу (синий для цитат, зелёный для таблиц и т.д.).
Таким образом, этот код — полноценная система интерактивных превью, сочетающая:
● API-интеграцию (запросы к /api.php),
● Безопасную обработку контента,
● Рекурсивную трансформацию вложенных структур,
● Адаптивное позиционирование,
● Поддержку тёмной темы,
● Оптимизацию UX (очередь, таймеры, плавные анимации).
Он не использует внешние библиотеки, кроме jQuery, и полностью автономен внутри замыкания.
🎨 Стилизация (CSS)
● Тултипы имеют тень, скругления, указатель (треугольник).
● Для тем — градиентная полоса снизу.
● Аватары масштабируются с object-fit: contain.
● Группы пользователей стилизуются через CSS-классы (usTitle-1, usTitle-2 и т.д.).
● Поддержка тёмной темы через body.dark-theme.
● Все вложенные элементы в аккордеонах обнуляют отступы (margin: 0 !important), чтобы избежать визуального "наложения".
⚙️ Применяемые алгоритмы и паттерны
● Управление состоянием тултипа:
State machine с флагами activeTooltip, isClosing, pendingTarget
● Обработка вложенных блоков:
Рекурсивный обход DOM с ограничением глубины
● Параллельная загрузка данных
$.when() для одновременного запроса первого и последнего сообщения
● Ленивая подгрузка имён
Замена текста на заглушки → асинхронная подстановка имён по post_id
● Позиционирование
Динамический расчёт координат с учётом границ окна
● Изоляция стилей
Использование прямых потомков (>) и !important для предотвращения конфликтов
● Таймеры и отмена
setTimeout + clearTimeout для управления временем жизни тултипа
Этот код — полноценная система интерактивных превью, сочетающая:
● API-интеграцию (запросы к /api.php),
● Безопасную обработку контента,
● Рекурсивную трансформацию вложенных структур,
● Адаптивное позиционирование,
● Поддержку тёмной темы,
● Оптимизацию UX (очередь, таймеры, плавные анимации).
Он не использует внешние библиотеки, кроме jQuery, и полностью автономен внутри замыкания.
