Продолжаем совершенствовать форму комментариев. Я решил разделить функционал: в одной теме можно использовать комментарии без рейтинга, а в этой теме будет реализована система лайков и дизлайков.
Теоретически форму комментариев можно улучшать бесконечно дорабатывать дизайн, добавлять новые функции и вносить различные изменения. Однако рано или поздно нужно будет остановиться и признать результат достаточным.
Самое главное мне удалось заставить работать стандартную форму комментариев на главной странице. По сути, любую функцию можно вынести и встроить практически в любое место сайта, главное, чтобы она поддерживалась на 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.v3.js"></script>
Видео