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

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

  • Страница 1 из 1
  • 1
VK Comments v4.0 — форма статуса и ответов для uCoz
Дата: Понедельник, 08.06.2026, 13:34 | Сообщение # 1 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

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

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

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

Параллельно был проведён серьёзный рефакторинг кода: скрипты очищены от накопившегося мусора, оптимизированы, улучшена защита от ошибок. Код стал заметно чище и стабильнее.

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

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

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



Вид материалов исходный код:

Код
<!-- ЛЕНТА НОВОСТЕЙ -->
<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.v4.js"></script>


Мурчанн

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