Список пользователей

1
Админ
Постов: 288
2
VIP
Постов: 75
3
Элита
Постов: 62
4
Проверенные
Постов: 46
5
Проверенные
Постов: 45
6
Проверенные
Постов: 39
7
VIP
Постов: 36
8
VIP
Постов: 35

  • Страница 1 из 1
  • 1
VK Комментарии v5.0 — новый функционал для uCoz ...Июнь 2026
Дата: Четверг, 11.06.2026, 12:08 | Сообщение # 1 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

BRO Comments - современная система комментариев для uCoz на основе нативного API платформы

BRO Comments - это не просто кастомное оформление стандартных комментариев uCoz. Фактически скрипт представляет собой полноценную надстройку над встроенной системой платформы, которая сохраняет совместимость со всеми штатными механизмами uCoz, но полностью меняет пользовательский опыт работы с комментариями.

Главная идея проекта заключалась не в создании очередного виджета комментариев, а в построении независимого интерфейсного слоя, который способен работать с существующей системой uCoz максимально незаметно и безопасно. Пользователь продолжает взаимодействовать с привычной инфраструктурой сайта, однако получает современный интерфейс, динамическую загрузку данных и функциональность, сопоставимую с социальными сетями.

Особенностью решения является то, что скрипт не вмешивается в работу серверной части и не требует изменения стандартной логики uCoz. Вместо этого используется интеллектуальная система обмена данными через скрытые iframe-окна, благодаря чему сохраняется полная совместимость с внутренними механизмами платформы.

Архитектура работы

В основе системы лежит специальный скрытый iframe, который используется как промежуточный слой между интерфейсом пользователя и стандартным модулем комментариев uCoz.

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

После обработки информация преобразуется в собственную структуру интерфейса и отображается уже в современном виде внутри ленты новостей.

Такой подход даёт сразу несколько преимуществ:

1.сохраняется совместимость со штатной системой комментариев;
2.не требуется собственный сервер или API;
3. продолжают работать права доступа uCoz;
4. сохраняются механизмы модерации;
5. используются стандартные формы отправки комментариев;
6. отсутствует риск нарушения внутренних процессов платформы.

Фактически скрипт использует существующую инфраструктуру сайта как источник данных, создавая поверх неё полностью независимый пользовательский интерфейс.

Интеллектуальное кэширование

Одной из самых сложных частей системы является механизм локального кэширования.

После первой загрузки комментарии сохраняются в LocalStorage вместе с дополнительной информацией о количестве сообщений, времени сохранения и структуре обсуждения. При повторном открытии комментариев данные мгновенно отображаются из локального хранилища без обращения к серверу.

При этом система постоянно отслеживает изменения количества комментариев на странице. Если счётчик комментариев изменился хотя бы на единицу, скрипт автоматически понимает, что кэш устарел, удаляет старые данные и выполняет полную синхронизацию с сервером.

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

Автоматическая синхронизация

Скрипт регулярно проверяет актуальность информации без участия пользователя.

Если кто-то оставил новый комментарий, изменил существующий или удалил сообщение через стандартные средства uCoz, система самостоятельно обнаруживает изменения и обновляет локальную копию обсуждения.

Пользователь практически всегда работает с актуальной версией комментариев без необходимости обновлять страницу вручную.

Работа с рейтингами

Отдельного внимания заслуживает реализация системы лайков и дизлайков.

При нажатии на кнопку рейтинг изменяется мгновенно на стороне интерфейса, создавая ощущение моментального отклика системы. Одновременно отправляется запрос в штатную систему оценки uCoz.

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

Подобная схема значительно улучшает пользовательский опыт по сравнению со стандартным поведением платформы.

Система редактирования и модерации

При редактировании комментариев скрипт не пытается заменить стандартный редактор uCoz собственным решением.

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

Похожим образом реализованы инструменты модерации.

Удаление комментариев сопровождается анимацией исчезновения, обновлением счётчиков и последующей синхронизацией данных с сервером. Всё это происходит без перезагрузки страницы и без нарушения штатной логики платформы.

Динамическая подгрузка страниц комментариев

Для больших обсуждений реализован механизм ленивой загрузки.

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

Это позволяет значительно уменьшить первоначальный объём загружаемых данных и сохранить высокую скорость открытия публикаций даже при очень больших обсуждениях.

Онлайн-статусы пользователей

Скрипт интегрирован с системой пользователей сайта и способен определять присутствие участников в режиме реального времени.

Для этого анализируется список пользователей, находящихся онлайн, после чего рядом с аватаром автора комментария отображается соответствующий индикатор активности.

Подобная функция обычно встречается в социальных сетях и редко реализуется в стандартных системах комментариев.

Автоматическое обнаружение нового контента

Для поддержки динамически создаваемых публикаций используется MutationObserver.

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

Это позволяет системе корректно работать даже внутри AJAX-лент и динамических новостных потоков.

Итог

BRO Comments представляет собой полноценную клиентскую систему управления комментариями, построенную вокруг стандартного функционала uCoz. Вместо переписывания платформы решение использует её сильные стороны и аккуратно расширяет возможности за счёт сложной клиентской логики, iframe-синхронизации, интеллектуального кэширования, автоматического обновления данных и глубокой интеграции со штатными механизмами сайта.

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



Главная
Управление дизайном
Каталог статей
Вид матераилов


Исходный код:

Код
<!-- ЛЕНТА НОВОСТЕЙ -->
<link rel="stylesheet" href="https://bro.usite.pro/css/broUcozCommentForm.v3.css?v=2" media="all">

<div class="vk-modern-feed">
<div class="vk-modern-post">

<!-- HEADER -->
<div class="vk-modern-header">
<div class="vk-modern-avatar">
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="$USERNAME$"><?else?><img src="https://bro.usite.pro/icon/p1_3004531_da07dd0f.jpg"><?endif?>
</div>

<div class="vk-modern-author">
<div class="vk-modern-name"><a href="$PROFILE_URL$">$USERNAME$</a></div>
<div class="vk-modern-time" title="$TIME$">
<img src="https://bro.usite.pro/icon/clock-icon.png" alt="Дата публикации" height="22">
<span>$DATE$</span>
</div>
</div>

<?if($MODER_PANEL$)?><div class="entry-moder-container">$MODER_PANEL$</div><?endif?>

<script>
(function() {
function initMPanels(root = document) {
root.querySelectorAll('.u-mpanel').forEach(panel => {
if (panel.querySelector('.custom-edit-btn')) return;

const btn = document.createElement('div');
btn.className = 'custom-edit-btn';
btn.textContent = '•••';
panel.prepend(btn);

btn.addEventListener('click', function(e) {
e.stopPropagation();
const toggle = panel.querySelector('.u-mpanel-toggle');
if (toggle) toggle.click();
});
});
}

document.addEventListener('DOMContentLoaded', () => initMPanels());

const observer = new MutationObserver(mutations => {
for (const m of mutations) {
if (m.addedNodes.length) {
m.addedNodes.forEach(node => {
if (node.nodeType !== 1) return;
if (node.classList?.contains('u-mpanel')) initMPanels(node.parentNode);
if (node.querySelectorAll) {
const panels = node.querySelectorAll('.u-mpanel');
if (panels.length) initMPanels(node);
}
});
}
}
});

observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

</div>

<!-- TEXT -->
<?if($MESSAGE$)?><div class="vk-modern-text">
<div class="post" data-id="$ID$">$MESSAGE$</div>
</div><?endif?>

<!-- IMAGE -->
<?if($COVER_IMAGE$)?><div class="vk-modern-attach">
<picture>
<source srcset="$COVER_SMALL_URL$" media="(min-width:769px)">
<img src="$COVER_URL$" alt="$TITLE$" loading="lazy">
</picture>
</div><?endif?>

<!-- ACTIONS -->
<div class="vk-modern-actions">
<div class="vk-actions-left">

<div class="vk-like" data-entryid="$ID$">
<span class="likeHeart" title="Поставить лайк"></span>
<span class="uLikeCount">$RATED$</span>
</div>

<script src="/js/likeSystem.js" defer></script>

<?if($COMMENTS_URL$)?>
<a class="vk-action vk-comment-toggle" href="$COMMENTS_URL$" data-bro-ucoz-comment-toggle data-bro-ucoz-comments-url="$COMMENTS_URL$" aria-expanded="false" title="Комментарии">
<svg viewBox="0 0 24 24">
<path d="M21 6h-18v10h4v4l4-4h10z"/>
</svg>
<span>$COMMENTS_NUM$</span>
</a>
<?endif?>

<div class="vk-action">
<button class="vkShareBtn" onclick="vkShare(event)" aria-label="Поделиться" title="Поделиться">
<span class="vkShareRipple"></span>
<svg viewBox="0 0 24 24" class="vkShareIcon">
<path d="M11.996 3.725A2.15 2.15 0 0 0 10 5.87l-.001 2.117-.02.005a9.904 9.904 0 0 0-7.827 10.721c.083.811 1.116 1.103 1.611.455l.187-.237a9.08 9.08 0 0 1 5.836-3.265l.213-.026.001 2.494a2.15 2.15 0 0 0 3.476 1.692l7.824-6.132a2.15 2.15 0 0 0 0-3.384l-7.824-6.132a2.15 2.15 0 0 0-1.326-.458z"
fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>

<script>
function vkShare(e){
const btn = e.currentTarget;
const url = location.href;
const rect = btn.getBoundingClientRect();
const ripple = btn.querySelector('.vkShareRipple');
ripple.style.left = (e.clientX - rect.left) + 'px';
ripple.style.top = (e.clientY - rect.top) + 'px';
ripple.classList.remove('show');
void ripple.offsetWidth;
ripple.classList.add('show');

if (navigator.share) {
navigator.share({ url });
} else {
window.open('https://vk.com/share.php?url=' + encodeURIComponent(url),'_blank');
}
}
</script>

</div>
</div>

<a class="vkViewBtn" href="$ENTRY_URL$" title="Перейти к новости">
<svg viewBox="0 0 24 24" class="vkViewIcon" width="20" height="20">
<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="3" fill="currentColor"/>
</svg>
<span class="vkViewCount"> $READS$ </span>
</a>
</div>

<?if($COMMENTS_URL$)?>
<div class="bro-ucoz-comment-panel" data-bro-ucoz-comment-panel >

<!-- БЛОК ПРЕВЬЮ КОММЕНТАРИЕВ -->
<div class="bro-ucoz-comments-preview"
data-bro-ucoz-comments-preview
data-bro-ucoz-comments-url="$COMMENTS_URL$"
data-post-id="$ID$"> <!-- ← Очень важно! -->

<div class="bro-ucoz-comments-preview__state"
data-bro-ucoz-comments-state
hidden></div>

<div class="bro-ucoz-comments-preview__list" data-bro-ucoz-comments-list></div>
<button class="bro-ucoz-comments-preview__more" type="button" data-bro-ucoz-comments-more hidden>Загрузить ещё</button>
</div>

<!-- ФОРМА ОТПРАВКИ КОММЕНТАРИЯ -->
<div class="bro-ucoz-comment" data-bro-ucoz-comment-form data-bro-ucoz-comment-url="$COMMENTS_URL$">
<div class="bro-ucoz-comment__editor" data-bro-ucoz-comment-editor>
<img class="bro-ucoz-comment__avatar" data-bro-ucoz-comment-avatar src="/.s/src/profile/img/profile_photo_thumbnail.png" alt="Аватар">

<div class="bro-ucoz-comment__field-wrap">
<textarea class="bro-ucoz-comment__textarea" data-bro-ucoz-comment-message rows="1" placeholder="Написать комментарий"></textarea>

<div class="bro-ucoz-comment__tools">
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-attach title="Вставить ссылку" aria-label="Вставить ссылку">
<svg viewBox="0 0 24 24"><path d="M8.6 17.9 18.2 8.3a3 3 0 0 0-4.2-4.2L4.6 13.5a5 5 0 0 0 7.1 7.1l8.2-8.2" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-photo title="Добавить фото" aria-label="Добавить фото">
<svg viewBox="0 0 24 24"><path d="M4.5 7.5h3l1.4-2h6.2l1.4 2h3a2 2 0 0 1 2 2v8.2a2 2 0 0 1-2 2h-15a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2Z" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><circle cx="12" cy="13.3" r="3.4" fill="none" stroke="currentColor" stroke-width="1.7"/></svg>
</button>
<button class="bro-ucoz-comment__tool" type="button" data-bro-ucoz-comment-smile-toggle title="Смайлы" aria-label="Смайлы">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M8.4 14.3c.8 1.2 2 1.8 3.6 1.8s2.8-.6 3.6-1.8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="9" cy="10" r="1.1" fill="currentColor"/><circle cx="15" cy="10" r="1.1" fill="currentColor"/></svg>
</button>
</div>

<div class="bro-ucoz-comment__smiles" data-bro-ucoz-comment-smiles hidden>
<button type="button" data-bro-ucoz-smile=">("><img src="/.s/sm/2/angry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":D"><img src="/.s/sm/2/biggrin.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="B)"><img src="/.s/sm/2/cool.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":'("><img src="/.s/sm/2/cry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="<_<"><img src="/.s/sm/2/dry.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="^_^"><img src="/.s/sm/2/happy.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":("><img src="/.s/sm/2/sad.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":)"><img src="/.s/sm/2/smile.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":o"><img src="/.s/sm/2/surprised.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=":p"><img src="/.s/sm/2/tongue.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile="%)"><img src="/.s/sm/2/wacko.gif" alt=""></button>
<button type="button" data-bro-ucoz-smile=";)"><img src="/.s/sm/2/wink.gif" alt=""></button>
</div>
</div>

<!-- Кнопка отправки -->
<button class="bro-ucoz-comment__send" type="button" data-bro-ucoz-comment-send title="Отправить" aria-label="Отправить комментарий">
<svg viewBox="0 0 24 24"><path d="M4.4 4.7 21 12 4.4 19.3l2.1-6.1L14 12 6.5 10.8 4.4 4.7Z" fill="currentColor"/></svg>
</button>
</div>

<!-- Модальное окно для вставки ссылки/фото -->
<div class="bro-ucoz-comment__attach-modal" data-bro-ucoz-attach-modal hidden>
<div class="bro-ucoz-comment__attach-overlay" data-bro-ucoz-attach-close></div>
<div class="bro-ucoz-comment__attach-box">
<div class="bro-ucoz-comment__attach-title" data-bro-ucoz-attach-title>Вставьте ссылку</div>
<input class="bro-ucoz-comment__attach-input" type="text" data-bro-ucoz-attach-input placeholder="https://">
<div class="bro-ucoz-comment__attach-actions">
<button class="bro-ucoz-comment__attach-cancel" type="button" data-bro-ucoz-attach-close>Отмена</button>
<button class="bro-ucoz-comment__attach-ok" type="button" data-bro-ucoz-attach-ok>OK</button>
</div>
</div>
</div>
</div>
</div>
<?endif?>

</div>
</div>

<iframe id="broUcozCommentFrame" style="width:0;height:0;border:0;position:absolute;left:-9999px;" title="comment-frame"></iframe>

<div class="bro-ucoz-comment-toast" id="broUcozCommentToast" aria-live="polite">
<span class="bro-ucoz-comment-toast__icon">✓</span>
<span class="bro-ucoz-comment-toast__text">Комментарий успешно отправлен</span>
</div>

<script src="https://bro.usite.pro/js/broUcozCommentForm.v7.js"></script>


Видео обзор.. 2

Мурчанн

Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
  • Страница 1 из 1
  • 1
Поиск: