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

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

  • Страница 1 из 1
  • 1
Шаблон "Личные сообщения V3.0" для uCoz новый функционал
Дата: Вторник, 07.07.2026, 14:48 | Сообщение # 1 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

Продолжаем работу с модулем «Личные сообщения». Основной текущий этап оптимизация и улучшение внутренней логики скрипта, повышение стабильности и подготовка к дальнейшему развитию.

Шаблон "Личные сообщения V3.0" для uCoz новый функционал

В первую очередь была проведена работа с системой логирования. Все консольные логи были скрыты и временно деактивированы. Ранее в скрипте находилось более 40 диагностических логов, которые использовались преимущественно во время разработки и поиска ошибок. Их отключение позволило снизить лишнюю нагрузку и повысить производительность примерно на 15%, так как постоянный вывод информации в консоль создавал дополнительные операции.

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

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

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

Отдельное внимание было уделено механизму массовой рассылки. Были внесены изменения в процесс скрытия оригинальной формы сообщений и ее замены на кастомный интерфейс. Теперь переход происходит быстрее и выглядит более естественно.

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

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

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

Был обновлен внешний вид элементов сообщений:

уменьшен размер даты, чтобы она занимала меньше места;
скорректировано отображение ника пользователя;
изменены небольшие уведомления;
уменьшен размер самого текста сообщения для более компактного вида, аналогично современным мессенджерам.

В общей сложности было внесено большое количество изменений, основной акцент которых был сделан не только на внешний вид, но и на производительность. После оптимизации работа скрипта стала примерно на 30% быстрее и стабильнее.

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

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

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



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

Код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BRO Chat |Твои диалоги</title>

<script>
// Передаём переменные uCoz в глобальные переменные
window.USER_DATA = {
avatar: '$USER_AVATAR_URL$',
username: '$USERNAME$',
group: '$USER_GROUP$',
country: '$USER_COUNTRY$'
};
</script>

<script src="https://bro.usite.pro/js/pm-header-role03.js"></script>
<link rel="stylesheet" href="/.s/src/base.min.css" />
<link rel="stylesheet" href="/.s/src/layer7.min.css" />
<link rel="stylesheet" href="https://bro.usite.pro/css/bro-message02.css?v=3" media="all">

</head>

<body>

<!-- МЕНЮ -->
<div class="header">
<div class="header-inner">

<a href="/" class="logo">DOM <span class="logo-box">LinkUp</span></a>

<form class="vk-search" action="/search" method="get">
<span class="vk-search-icon"></span>
<input type="text" name="q" placeholder="Поиск" />
</form>

$GLOBAL_GLOCKE$

<?if($USER_LOGGED_IN$)?>
<div class="nav-cta-wrapper">
<div class="nav-cta">

<!-- Пользователь -->
<div class="user-box" id="userMenu">

<!-- Аватар -->

<img src="$USER_AVATAR_URL$"
alt="$USERNAME$"
class="user-avatar real-avatar"
onerror="this.style.display='none';
this.nextElementSibling.style.display='block';">

<!-- Дефолтный аватар -->
<img src="/.s/src/profile/img/profile_photo_thumbnail.png"
alt="default"
class="user-avatar default-avatar"
style="display:none;">

<!-- Выпадающее меню -->
<div class="user-dropdown">
<div class="user-dropdown-header">
<span class="username">$USERNAME$</span>
</div>

<a href="/index/14" class="dropdown-item icon-messages">Личные сообщения</a>
<a href="/index/11" class="dropdown-item icon-settings">Настройки</a>
<a href="/index/8" class="dropdown-item icon-profile">Моя страница</a>
<a href="/index/15" class="dropdown-item icon-users">Пользователи</a>

<div class="dropdown-separator"></div>

<a href="$LOGOUT_LINK$" class="dropdown-item icon-logout logout">Выход</a>

</div>

</div>

</div>
</div>

<script>
document.addEventListener("click", function (e) {
const userBox = document.getElementById("userMenu");
if (!userBox) return;

if (userBox.contains(e.target)) {
userBox.classList.toggle("active");
} else {
userBox.classList.remove("active");
}
});
</script>
<?endif?>

</div>
</div>
</div>

</div>
</div>

<!-- КОНТЕНТ -->
<div class="container">
<!-- Левая колонка -->
<aside class="left-col">
$GLOBAL_MENU$
</aside>


<!-- Центральная колонка -->
<main class="center-col">
<div class="center-content" id="ajaxBody">
$BODY$
</div>
</main>

<!-- Правая колонка -->
<aside class="right-col">
<div class="right-block">
<div class="right-block-header">Действия</div>
<div class="right-block-content">
<!-- Сюда JavaScript добавит кнопки меню -->
</div>
</div>

<!-- Блок информации -->
<div class="right-block">
<div class="right-block-header">Информация</div>
<div class="right-block-content">
<!-- Сюда можно добавить информацию о пользователе -->

<div class="info-widget">

<!-- Статистика профиля -->
<div class="iw-stats">
<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 2V3.5M13.5 2V3.5M3 7.5H17M4 4.5C4 3.67157 4.67157 3 5.5 3H14.5C15.3284 3 16 3.67157 16 4.5V15.5C16 16.3284 15.3284 17 14.5 17H5.5C4.67157 17 4 16.3284 4 15.5V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 10.5H13M7 13H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">На сайте</span>
<span class="iw-stat-value">$USER_REG_DAYS$ дн.</span>
</div>

<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H17M10 3C12.5 5.5 12.5 14.5 10 17C7.5 14.5 7.5 5.5 10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">Страна</span>
<span class="iw-stat-value">$USER_COUNTRY$</span>
</div>
<!-- Блок информации -->

</div>

</div>
</div>
</aside>
</div>
<script src="https://bro.usite.pro/js/hide-old-pm-form.js"></script>
<script src="https://bro.usite.pro/js/pm-message08.js?v=3"></script>

</body>
</html>


Это более мощная версия скрипта.
На момент создания и записи видео все основные функции полностью работают и проходят проверку в реальных условиях.

Мурчанн

Признаюсь, не знаю почему, но глядя на звезды мне всегда хочется мечтать.
Дата: Пятница, Вчера, 14:06 | Сообщение # 2 | | Написал: Известный
Автор темы
Мурчанн не в сети
        Сообщений:288
         Регистрация:20.10.2016
За уважение окружающих За уважение окружающих За хорошее поведение За преданность форуму За любовь народа

Обновление: Исправлена функция массового удаления сообщений. 27

Код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BRO Chat |Твои диалоги</title>

<script>
window.USER_DATA = {
username: "<?$JSENCODE$($USERNAME$)?>",
group: "<?$JSENCODE$($USER_GROUP$)?>",
groupId: "$GROUP_ID$",
avatar: "<?$JSENCODE$($USER_AVATAR_URL$)?>",
country: "<?$JSENCODE$($USER_COUNTRY$)?>",
isAdmin: <?if($IS_GROUP_1$ || $IS_GROUP_2$)?>true<?else?>false<?endif?>,
isModer: <?if($IS_GROUP_3$)?>true<?else?>false<?endif?>,
isVip: <?if($IS_GROUP_4$)?>true<?else?>false<?endif?>,
userId: "$USER_ID$",
balance: "$USER_SHOP_BALANCE_RAW$"
};
</script>

<script src="https://bro.usite.pro/js/pm-header-role03.js"></script>
<link rel="stylesheet" href="/.s/src/base.min.css" />
<link rel="stylesheet" href="/.s/src/layer7.min.css" />
<link rel="stylesheet" href="https://bro.usite.pro/css/bro-message02.css?v=3" media="all">

</head>

<body>

<!-- МЕНЮ -->
<div class="header">
<div class="header-inner">

<a href="/" class="logo">DOM <span class="logo-box">LinkUp</span></a>

<form class="vk-search" action="/search" method="get">
<span class="vk-search-icon"></span>
<input type="text" name="q" placeholder="Поиск" />
</form>

$GLOBAL_GLOCKE$

<?if($USER_LOGGED_IN$)?>
<div class="nav-cta-wrapper">
<div class="nav-cta">

<!-- Пользователь -->
<div class="user-box" id="userMenu">

<!-- Аватар -->

<img src="$USER_AVATAR_URL$"
alt="$USERNAME$"
class="user-avatar real-avatar"
onerror="this.style.display='none';
this.nextElementSibling.style.display='block';">

<!-- Дефолтный аватар -->
<img src="/.s/src/profile/img/profile_photo_thumbnail.png"
alt="default"
class="user-avatar default-avatar"
style="display:none;">

<!-- Выпадающее меню -->
<div class="user-dropdown">
<div class="user-dropdown-header">
<span class="username">$USERNAME$</span>
</div>

<a href="/index/14" class="dropdown-item icon-messages">Личные сообщения</a>
<a href="/index/11" class="dropdown-item icon-settings">Настройки</a>
<a href="/index/8" class="dropdown-item icon-profile">Моя страница</a>
<a href="/index/15" class="dropdown-item icon-users">Пользователи</a>

<div class="dropdown-separator"></div>

<a href="$LOGOUT_LINK$" class="dropdown-item icon-logout logout">Выход</a>

</div>

</div>

</div>
</div>

<script>
document.addEventListener("click", function (e) {
const userBox = document.getElementById("userMenu");
if (!userBox) return;

if (userBox.contains(e.target)) {
userBox.classList.toggle("active");
} else {
userBox.classList.remove("active");
}
});
</script>
<?endif?>

</div>
</div>
</div>

</div>
</div>

<!-- КОНТЕНТ -->
<div class="container">
<!-- Левая колонка -->
<aside class="left-col">
$GLOBAL_MENU$
</aside>

<!-- Центральная колонка -->
<main class="center-col">
<div class="center-content" id="ajaxBody">
$BODY$
</div>
</main>

<!-- Правая колонка -->
<aside class="right-col">
<div class="right-block">
<div class="right-block-header">Действия</div>
<div class="right-block-content">
<!-- Сюда JavaScript добавит кнопки меню -->
</div>
</div>

<!-- Блок информации -->
<div class="right-block">
<div class="right-block-header">Информация</div>
<div class="right-block-content">
<!-- Сюда можно добавить информацию о пользователе -->

<div class="info-widget">

<!-- Статистика профиля -->
<div class="iw-stats">
<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.5 2V3.5M13.5 2V3.5M3 7.5H17M4 4.5C4 3.67157 4.67157 3 5.5 3H14.5C15.3284 3 16 3.67157 16 4.5V15.5C16 16.3284 15.3284 17 14.5 17H5.5C4.67157 17 4 16.3284 4 15.5V4.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 10.5H13M7 13H10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">На сайте</span>
<span class="iw-stat-value">$USER_REG_DAYS$ дн.</span>
</div>

<div class="iw-stat-row">
<div class="iw-stat-icon">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10H17M10 3C12.5 5.5 12.5 14.5 10 17C7.5 14.5 7.5 5.5 10 3Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<span class="iw-stat-label">Страна</span>
<span class="iw-stat-value">$USER_COUNTRY$</span>
</div>
<!-- Блок информации -->

</div>

</div>
</div>
</aside>
</div>

<script src="https://bro.usite.pro/js/hide-old-pm-form.js"></script>
<script src="https://bro.usite.pro/js/pm-message09.js?v=9"></script>

</body>
</html>

Мурчанн

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