Это обновлённая версия модуля подарков с рядом усовершенствований. Внесены изменения в отображение информации: теперь, если подарки отсутствуют, в окне появляется уведомление о том, что они станут доступны, как только будут вручены. Логика счётчика переработана, значительно увеличена скрытая загрузка деталей, что повышает производительность.
Блок подарков получил визуальные улучшения: верхняя панель теперь окрашена в синий цвет, а кнопка «Вручить подарок» была изменена для более удобного взаимодействия. Все изменения выполнялись с целью максимально приблизить стилистику к дизайну платформы ВКонтакте. Поскольку я не профессиональный дизайнер, я реализую всё в рамках своих возможностей, ориентируясь на гармоничное сочетание элементов, а не на точное копирование.
Наша цель , создание собственной стилистики, которая перекликается с визуальной эстетикой ВКонтакте, без прямого заимствования. Те, кто стремится полностью скопировать дизайн, обычно используют прямой рип исходного кода. Мы идём другим путём и интересуемся не копированием, а разработкой уникального подхода к оформлению интерфейса.
Инициализация и конфигурация
Старый скрипт:
Код
Жёстко привязан к элементам gifts-container, gifts-count и PHP-переменной userId.
Стиль и контейнеры прописаны в начале через <style> и напрямую вставляются в head.
Новый скрипт:
Использует объект CONFIG для настройки container, counter и userId.
Гибче: можно подставить кастомные ID, есть проверка на отсутствие элементов.
Встроенные стили перенесены , упор сделан на JS-логику и рендеринг.
Логика загрузки и кэширования подарков
Старый скрипт:
Обогащает все подарки при fullRefresh() (до 40).
Есть задержка каждые 4 подарка (i%4===3) 350 мс.
При рендере предпросмотра (renderPreview) всегда отображает первые 3 подарка, без проверки на пустой список (нет блока с сообщением о пустых подарках).
Новый скрипт:
Обогащает только первые 30 подарков (чтобы быстрее).
Задержка каждые 5 подарков (i%5===4) 200 мс.
Если подарков нет создаётся специальный div с сообщением: «Похоже, у вас пока нет подарков…».
Это улучшает UX: пользователь видит уведомление, вместо пустого контейнера.
Работа с попапом и кнопкой «Вручить подарок»
Старый скрипт:
Кнопка «Вручить подарок» есть только если recipientId ≠ userId.
В блоке .vk-reply добавляется текст 'Нельзя вручить себе' для собственных подарков.
Есть отображение онлайн/оффлайн статуса (statusDot) через глобальный список uc-online-list.
Новый скрипт:
Убрано сообщение 'Нельзя вручить себе'.
Кнопка «Вручить подарок» создаётся только если recipientId ≠ userId.
Онлайн-статус больше не рендерится.
Попап упрощён, но рендерит nick, avatar, comment, date, profile.
Сортировка и рендеринг
Старый скрипт:
После обогащения сортирует подарки по дате (b.date||0).
renderPreview() просто вставляет первые 3 картинки без проверки пустого списка.
Новый скрипт:
Сортировка сохранена.
renderPreview() теперь обрабатывает случай отсутствия подарков, добавляет стилизованный div.
Фоновая проверка количества подарков
Старый скрипт:
Выводит в консоль информацию о состоянии кэша и изменениях (console.log).
Проверяет изменения: если liveCount === cachedCount — не грузит заново.
Новый скрипт:
Логика сохранена, но убраны подробные console.log.
Проверка: если кэш есть и liveCount совпадает с cachedCount, обновление не выполняется.
Новый скрипт более лёгкий, оптимизированный и ориентирован на UX: добавлено сообщение при отсутствии подарков, уменьшена нагрузка на браузер (обогащение первых 30 подарков), упрощён попап и рендер кнопки «Вручить подарок». Старый скрипт более «полный» и отображает статус онлайн, больше логов, больше обогащаемых подарков.
Сделал упор на оптимизацию и упрощение: уменьшил нагрузку на браузер, сократили количество одновременно обрабатываемых подарков, убрал лишние детали вроде онлайн-статусов и логов, добавил удобные уведомления для пользователя и сделал интерфейс более лёгким и быстрым.
То есть цель быстрее, проще и удобнее, сохраняя функциональность и UX, но без излишней «тяжести» старого кода.
Это не окончательная версия блока подарков , впереди нас ждут новые обновления и улучшения.
