Продолжаю совершенствовать форму комментариев и систему отправки сообщений.

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

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

Вся логика написана на JavaScript. Для тестирования производительности я использую старый компьютер, чтобы убедиться, что интерфейс остаётся быстрым и отзывчивым даже на слабом оборудовании. На данный момент всё работает достаточно плавно и без заметных задержек.

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

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

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

Форма комментариев -VK социальная сеть V 1.0 uCoz функционал

Не буду подробно объяснять, как работает скрипт , он сделан для того, чтобы помогать вам. Всё, что нужно знать, вы найдёте прямо в исходном коде: открывайте его и исследуйте сами.

Форма комментариев и сами комментарии работают вместе с шаблоном «Вид материалов».

Сам скрипт можно адаптировать практически под любой раздел сайта, будь то «Каталог файлов», «Блог» или другой модуль uCoz. В данном случае для примера был выбран именно «Каталог статей», поскольку остальные модули я использую для других разработок и экспериментов.

Вид материалов каталога статей:

Код

<!-- ЛЕНТА НОВОСТЕЙ -->
<link rel="stylesheet" href="https://bro.usite.pro/css/broUcozCommentForm.v2.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 hidden>

<!-- БЛОК ПРЕВЬЮ КОММЕНТАРИЕВ -->
<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>Загрузка комментариев...</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.v2.js"></script>

Мурчанн

1