Продолжаем расширять функционал скрипта. На этот раз была добавлена форма массовой рассылки. Оригинальная форма uCoz теперь автоматически скрывается, а вместо неё отображается моя кастомная форма с собственным дизайном и стилями.
Новая форма была полностью протестирована и работает стабильно. Кроме того, в скрипт были внесены различные изменения, исправления и улучшения.
Несмотря на то, что код постепенно становится больше, это никак не сказывается на производительности. Наоборот, скрипт становится более продуманным и интеллектуальным: во время работы подключаются только те функции, которые действительно необходимы для выполнения текущих задач, а весь остальной функционал уже встроен в систему и активируется только при необходимости.
Все возможности, которые ранее были реализованы в отдельных версиях и темах, теперь уже присутствуют в одном скрипте. Каждая новая версия получает всё более широкий и продуманный функционал.
Работа над проектом ведётся постоянно и активно. В будущем я надеюсь значительно улучшить систему личных сообщений. Однако для этого необходим открытый доступ к API личных сообщений. Это позволит вывести функционал на совершенно новый уровень приблизить его к полноценным диалогам, как в социальной сети «ВКонтакте», вместо нынешней системы обычных писем с ограничениями и лимитами почтового ящика.
Исходный код личных сообщений uCoz
Код
<!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-role02.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-message01.css?v=2" 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-message07.js?v=4"></script>
</body>
</html>