// =============================================================================
// Модуль «Друзья» для uCoz — стиль ВКонтакте 2026, обычные модальные окна
// Затемнение только сайта, окно чёткое, по центру, кнопки работают
// =============================================================================
(function() {
'use strict';
window.friends = window.friends || {};
const f = window.friends;
f.ucodes = f.ucodes || {
homepage: '/',
userid: 0,
_userid: 0,
username: 'Гость',
_username: 'Гость',
avatar: '//ucoz.net/i/noavatar.png',
own: 0,
isuser: false,
_profurl: ''
};
f.message1 = () => `Пользователь [url=${f.ucodes.homepage}index/8-${f.ucodes.userid}]${f.ucodes.username}[/url] добавил Вас в друзья.\nВы также можете его добавить по [url=${f.ucodes.homepage}index/8-${f.ucodes.userid}?friend]этой ссылке[/url].`;
f.message2 = () => `Пользователь [url=${f.ucodes.homepage}index/8-${f.ucodes.userid}]${f.ucodes.username}[/url] добавил Вас в друзья.`;
f.invite = false;
f.adnMess = '';
f.GR = 'Друг';
f.seckey = '';
f.isAdding = false;
// ── Стили + модалки ─────────────────────────────────────────────────────
if (!document.getElementById('vk-friends-modals')) {
const cont = document.createElement('div');
cont.id = 'vk-friends-modals';
cont.innerHTML = `
<style>
/* ===== OVERLAY ===== */
#vk-friends-modals .vk-overlay{
position:fixed !important;
inset:0 !important;
background:rgba(0,0,0,.45) !important;
z-index:100000 !important;
display:none !important;
}
/* ===== MODAL ===== */
#vk-friends-modals .vk-modal{
background:#fff !important;
width:460px !important;
border-radius:6px !important; /* старый ВК */
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
box-shadow:0 4px 18px rgba(0,0,0,.25) !important;
font-family:tahoma,arial,verdana,sans-serif !important;
font-size:13px !important;
color:#000 !important;
}
/* ===== HEADER (старый ВК) ===== */
#vk-friends-modals .vk-header{
background:#f0f2f5 !important;
border-bottom:1px solid #d4d7dc !important;
padding:10px 12px !important;
font-size:14px !important;
font-weight:bold !important;
color:#2a5885 !important;
}
/* ===== BODY ===== */
#vk-friends-modals .vk-body{
padding:14px !important;
}
/* ===== CLOSE (TOP RIGHT, OLD VK STYLE) ===== */
#vk-friends-modals .vk-close{
position:absolute !important;
top:8px !important;
right:10px !important;
background:none !important;
border:none !important;
padding:0 !important;
margin:0 !important;
font-size:22px !important;
line-height:1 !important;
font-weight:bold !important;
color:#6b6f76 !important;
cursor:pointer !important;
opacity:.8 !important;
}
#vk-friends-modals .vk-close:hover{
color:#000 !important;
opacity:1 !important;
}
#vk-friends-modals .vk-close:active{
transform:scale(.9) !important;
}
/* ===== AVATAR (OLD VK STYLE + EFFECTS) ===== */
#vk-friends-modals img.vk-avatar,
#vk-friends-modals .vk-avatar img{
width:100px !important;
height:100px !important;
border-radius:50% !important;
object-fit:cover !important;
border:1px solid #cfd3d7 !important;
box-shadow:
inset 0 0 0 1px #fff,
0 2px 6px rgba(0,0,0,.25) !important;
background:#fff !important;
}
#vk-friends-modals .vk-avatar img:hover{
box-shadow:
inset 0 0 0 1px #fff,
0 4px 12px rgba(0,0,0,.35) !important;
}
/* ===== BUTTONS (OLD VK) ===== */
#vk-friends-modals .vk-btn{
display:inline-block !important;
padding:6px 14px !important;
font-size:13px !important;
border-radius:3px !important;
border:1px solid #4a6fa5 !important;
cursor:pointer !important;
background:#5b7fa6 !important;
color:#fff !important;
}
#vk-friends-modals .vk-btn:hover{
background:#4a6fa5 !important;
}
#vk-friends-modals .vk-btn:active{
background:#3f628f !important;
}
#vk-friends-modals .vk-btn-secondary{
background:#e5e7ea !important;
border:1px solid #cfd3d7 !important;
color:#000 !important;
}
#vk-friends-modals .vk-btn-secondary:hover{
background:#d8dbe0 !important;
}
/* ===== INPUTS ===== */
#vk-friends-modals select,
#vk-friends-modals textarea,
#vk-friends-modals input{
font-size:13px !important;
border:1px solid #cfd3d7 !important;
padding:6px !important;
border-radius:3px !important;
background:#fff !important;
}
/* ===== TEXTAREA (сообщение, полностью тянется) ===== */
#vk-friends-modals textarea {
width: 100% !important; /* занимает всю ширину контейнера */
min-width: 200px !important; /* минимальная ширина */
max-width: 100% !important; /* не выходит за пределы модалки */
min-height: 100px !important; /* минимальная высота */
max-height: 400px !important; /* максимум по высоте */
padding: 10px 12px !important;
font-size: 14px !important;
line-height: 1.5 !important;
border: 1px solid #cfd3d7 !important;
border-radius: 4px !important;
background: #fff !important;
box-sizing: border-box !important;
font-family: Tahoma, Arial, sans-serif !important;
resize: both !important; /* тянуть и по горизонтали, и по вертикали */
overflow: auto !important; /* появление скролла при необходимости */
}
#vk-friends-modals select:focus,
#vk-friends-modals textarea:focus,
#vk-friends-modals input:focus{
border-color:#5b7fa6 !important;
outline:none !important;
}
/* ===== SUCCESS ===== */
#vk-friends-modals .vk-success-modal .vk-header{
background:#5b7fa6 !important;
color:#fff !important;
}
#vk-friends-modals .vk-success-title{
font-size:16px !important;
font-weight:bold !important;
}
</style>
<div id="vkOverlay" class="vk-overlay" onclick="friends.closeIfOverlay(event)"></div>
<div id="addFriendModal" class="vk-modal" style="display:none;">
<div class="vk-header">
<span>Добавление в друзья</span>
<button class="vk-close" onclick="friends.closeModal('addFriendModal')">×</button>
</div>
<div class="vk-body" id="addFriendBody"></div>
</div>
<div id="captchaModal" class="vk-modal" style="display:none; max-width:420px;">
<div class="vk-header">
<span>Подтверждение</span>
<button class="vk-close" onclick="friends.closeModal('captchaModal')">×</button>
</div>
<div class="vk-body" id="captchaBody"></div>
</div>
<div id="successModal" class="vk-modal vk-success-modal" style="display:none; max-width:420px;">
<div class="vk-header">
<span>Успешно!</span>
<button class="vk-close" onclick="friends.closeModal('successModal')">×</button>
</div>
<div class="vk-body" style="text-align:center;">
<div class="vk-success-icon"></div>
<div class="vk-success-title">Друг добавлен</div>
<div class="vk-success-text">
Запрос отправлен ${f.ucodes._username || 'пользователю'}<br>
Всё прошло отлично, спасибо!
</div>
<button class="vk-btn vk-btn-primary" style="margin-top:20px;" onclick="friends.closeModal('successModal')">
Закрыть
</button>
</div>
</div>
`;
document.body.appendChild(cont);
document.addEventListener('keydown', e => { if (e.key === 'Escape') f.closeAllModals(); });
}
f.showModal = function(id, title, html) {
const m = document.getElementById(id);
if (!m) return;
if (title) m.querySelector('.vk-header span').textContent = title;
const bodyId = id.replace('Modal','Body');
if (html && document.getElementById(bodyId)) {
document.getElementById(bodyId).innerHTML = html;
}
document.getElementById('vkOverlay').style.display = 'flex';
m.style.display = 'block';
};
f.closeModal = function(id) {
const m = document.getElementById(id);
if (m) m.style.display = 'none';
document.getElementById('vkOverlay').style.display = 'none';
};
f.closeAllModals = function() {
['addFriendModal','captchaModal','successModal'].forEach(id => f.closeModal(id));
};
f.closeIfOverlay = function(e) {
if (e.target.id === 'vkOverlay') f.closeAllModals();
};
f.showSuccess = function() {
f.showModal('successModal', 'Успешно!', '');
};
f.sAdd = function() {
if (f.ucodes._username === f.ucodes.username) return alert('Нельзя добавить самого себя');
if (!f.ucodes.isuser) return alert('Только зарегистрированным');
const html = `
<div style="display:flex; gap:20px; align-items:flex-start;">
<div style="flex-shrink:0;">
<img src="${f.ucodes.avatar || '//ucoz.net/i/noavatar.png'}" class="vk-avatar" alt="">
</div>
<div style="flex:1;">
<!-- Заголовок -->
<div style="font-size:19px; font-weight:600; margin-bottom:8px;">
Добавить <span style="color:#0077ff;">${f.ucodes._username}</span> в друзья?
</div>
<!-- Описание -->
<div style="font-size:13px; color:#4b4f56; background:#f0f2f5; border-radius:6px; padding:8px 12px; margin-bottom:16px; line-height:1.4;">
После принятия в друзья вы сможете обмениваться сообщениями, видеть обновления профиля и делиться контентом.
</div>
<!-- Горизонтальный блок "Группа" -->
<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
<label for="selGrFr" style="font-size:14px; color:#65676b;">Группа:</label>
<select id="selGrFr" style="padding:6px 10px; font-size:14px; border:1px solid #cfd3d7; border-radius:4px; background:#fff; max-width:200px;">
<option>Друг</option>
<option>Приятель</option>
<option>Знакомый</option>
<option>Семья</option>
<option>Коллега</option>
<option>Кумир</option>
</select>
</div>
<!-- Ссылка на личное сообщение -->
<div style="margin:12px 0 8px;">
<a href="javascript:void(0)" style="color:#0077ff; text-decoration:none; font-weight:500;"
onclick="let el=document.getElementById('vkMsgBlock');el.style.display=el.style.display==='none'?'block':'none';if(el.style.display==='block')document.getElementById('vkMsgTxt').focus();">
Добавить личное сообщение
</a>
</div>
<div id="vkMsgBlock" style="display:none;margin-top:12px;">
<textarea id="vkMsgTxt" placeholder="Напишите что-нибудь..."></textarea>
</div>
<div style="margin-top:28px; display:flex; gap:12px; justify-content:flex-end;">
<button class="vk-btn vk-btn-primary" onclick="
friends.adnMess = (document.getElementById('vkMsgTxt')||{}).value?.trim()||'';
friends.GR = document.getElementById('selGrFr').value;
friends.add();
friends.closeModal('addFriendModal');
">Добавить</button>
<button class="vk-btn vk-btn-secondary" onclick="friends.closeModal('addFriendModal')">Отмена</button>
</div>
</div>
</div>
`;
f.showModal('addFriendModal', 'Добавление в друзья', html);
};
f.add = function() {
if (f.isAdding) return;
f.isAdding = true;
document.body.style.cursor = 'wait';
const target = f.ucodes.userid || f.ucodes._userid || '';
$.get(`/blog/0-0-0-0-17-${target}?${Date.now()}`, data => {
if ($(data).find(`.nick:contains('${f.ucodes._username}')`).length > 0) {
alert(`${f.ucodes._username} уже в друзьях`);
resetCursor();
return;
}
$.get("/blog/0-0-0-0-1", form => {
const ssid = $('input[name="ssid"]', form).val();
if (!ssid) {
alert("Не удалось получить ssid");
resetCursor();
return;
}
$.post("/blog", {
title: f.ucodes._username,
other1: f.ucodes.avatar,
other2: f.GR,
other3: f.ucodes._profurl || '',
other4: f.ucodes.userid,
other5: f.ucodes._userid,
a: 2,
ssid
}).done(() => {
f.sendPmWrapper();
}).always(resetCursor);
}).always(resetCursor);
}).fail(resetCursor);
};
function resetCursor() {
document.body.style.cursor = 'default';
f.isAdding = false;
}
f.sendPmWrapper = function() {
$.get(`/index/14-${f.ucodes._userid}-0-1`, pm => {
if ($("#secuImg", pm).length) {
f.seckey = $("input[name='seckey']", pm).val() || '';
const capHtml = `
<div id="capImgSpan" style="margin:20px 0;"></div>
<input type="text" id="capcode" maxlength="6" placeholder="Код с картинки" style="font-size:20px;letter-spacing:4px;text-align:center;">
<div style="margin-top:24px;text-align:center;">
<button class="vk-btn vk-btn-primary" onclick="friends.sendPm(true)">Отправить</button>
</div>
`;
f.showModal('captchaModal', 'Подтверждение', capHtml);
$("#capImgSpan").html($("#secuImg", pm).clone());
$("#capcode").focus();
} else {
f.sendPm(false);
}
});
};
f.sendPm = function(withCap = false) {
const base = f.invite ? f.message2() : f.message1();
const extra = f.adnMess ? `\n\nСообщение:\n${f.adnMess}` : '';
const msg = base + extra + "\n\nХорошего дня!";
$.get(`/index/14-${f.ucodes._username}-0-1`, page => {
const ssid = $('input[name="ssid"]', page).val();
if (!ssid) {
f.showSuccess(); // друг уже добавлен → успех
return;
}
const data = {
s: f.ucodes._username,
subject: "Предложение дружбы",
message: msg,
a: 18,
ssid: ssid
};
if (withCap) {
const code = $("#capcode").val().trim();
if (!code) {
alert("Введите код");
return;
}
data.code = code;
data.seckey = f.seckey;
}
$.post("/index/", data, function(res) {
// Не проверяем текст ответа — просто показываем успех
// (так как друг уже добавлен, а сообщение — бонус)
if (withCap) f.closeModal('captchaModal');
f.showSuccess();
}, "text").fail(() => {
// даже если сообщение не ушло — успех
if (withCap) f.closeModal('captchaModal');
f.showSuccess();
});
}).fail(() => f.showSuccess()); // друг добавлен → успех
};
if (location.search.includes('?friend')) {
f.invite = true;
setTimeout(f.sAdd, 400);
}
if (location.search.includes('?myfriend')) {
setTimeout(f.sAdd, 400);
}
})();
