`;
}
// --- САМООБНОВЛЕНИЕ ---
// Запускаем асинхронный процесс, который отработает ПОСЛЕ того, как HTML будет вставлен на страницу (document.write).
if (updateQueue.length > 0) {
setTimeout(async () => {
log(`🔄 [Related] Начинаю обновление статусов для ${updateQueue.length} элементов...`);
// Используем Promise.all или последовательно (зависит от мощности apiRequest).
// apiRequest имеет очередь, так что можно кидать все сразу, они выстроятся.
// Вариант: Запускаем все запросы параллельно (в очередь) и обновляем по мере прихода
updateQueue.forEach(async (task) => {
const rate = await fetchUserRate(currentUser, task.targetId, task.targetType);
// Если статус есть (не null), обновляем кнопку
if (rate) {
const container = document.getElementById(task.domId);
if (container) {
const newHtml = renderUserRateButton(task.targetId, task.targetType, currentUser.USER_ID, rate);
container.innerHTML = newHtml;
}
}
});
log("[Related] Все статусы обновлены");
}, 100); // Небольшая задержка, чтобы DOM точно успел построиться после document.write
}
return html;
};
const renderScreenshotsAndVideos = (screenshots, videos) => {
let html = "";
// --- 1. Скриншоты ---
if (Array.isArray(screenshots) && screenshots.length > 0) {
// Формируем массив HTML-строк для каждого скриншота
const screenshotItems = screenshots.map((scr, index) => {
const preview = getFullUrl(scr.x166Url);
const original = getFullUrl(scr.originalUrl);
const title = `Кадр ${index + 1}`; // Можно добавить название аниме, если прокинуть его сюда
return `
`;
});
// Оборачиваем в expandable (показываем 4, остальные скрываем)
// Важно: isInline = true, чтобы картинки шли в ряд
const screenshotsHtml = renderExpandable(
screenshotItems,
4,
"показать все кадры",
);
html += `
Кадры
${screenshotsHtml}
`;
}
// --- 2. Видео ---
if (Array.isArray(videos) && videos.length > 0) {
const videoItems = videos.map((vid, index) => {
const name = vid.name || vid.kind.toUpperCase();
// Используем playerUrl если есть, иначе url
// const link = vid.playerUrl || vid.url;
// В твоем примере API imageUrl пустой ("//img..jpg"), поэтому лучше поставить заглушку или убрать картинку
const thumb =
vid.imageUrl && vid.imageUrl.length > 10
? vid.imageUrl
: "/assets/globals/missing_video.png";
// ВАЖНО: Тут можно поменять target="_blank" на вызов своего плеера
return `
`;
if (isMain) {
return gridHtml;
} else {
// Для второстепенных добавляем обертку и заголовок, так как они находятся вне основного блока в шаблоне
return `
Второстепенные герои
${gridHtml}
`;
}
};
html = html.replaceAll(
"{{MAIN_CHARACTERS}}",
renderCharacters(data.ROLES.main, true),
);
html = html.replaceAll(
"{{SUPPORTING_CHARACTERS}}",
renderCharacters(data.ROLES.supporting, false),
);
function renderStaffBlock(staff) {
if (!Array.isArray(staff) || staff.length === 0) {
return '
`;
}
html = html.replaceAll("{{NEWS}}", renderNewsHTML(data.NEWS));
html = html.replaceAll(
"{{COMMENTS}}",
data.COMMENTS?.map(
(c) => `${c.user || "Anon"}: ${c.text_preview}`,
).join("\n") || "",
);
function renderExternalLinks(links) {
if (!Array.isArray(links) || links.length === 0) return "";
return links
.map((l) => {
const url = l.url || "#";
const siteName = l.site || "Unknown";
// Use the raw kind for the class. If it's missing, default to 'unknown'
const siteClass = l.kind || "unknown";
return `
${siteName}
`;
})
.join("\n");
}
html = html.replaceAll(
"{{EXTERNAL_LINKS}}",
renderExternalLinks(data.EXTERNAL_LINKS),
);
return html;
};
// === ---------------- ===
// === Финальная логика ===
// === ---------------- ===
// === Поддержка кнопки "Ответить" ===
const setupReplyButtons = () => {
const textarea = document.querySelector(
'textarea[name="comment[body]"]',
);
if (!textarea) {
log("Редактор не найден — кнопка Ответить не будет работать");
return false;
}
document.addEventListener("click", (e) => {
const btn = e.target.closest(".item-reply");
if (!btn) return;
const comment = btn.closest(".b-comment");
if (!comment) return;
const commentId =
comment.id.replace("comment-", "") ||
comment.dataset.track_comment;
const userId = comment.dataset.user_id;
const nickname =
comment.dataset.user_nickname ||
comment.querySelector(".name a")?.textContent.trim() ||
"анон";
if (!commentId || !userId) return;
e.preventDefault();
const tag = `[comment=${commentId};${userId}], `;
const val = textarea.value;
const insert = val && !val.endsWith("\n") ? "\n" + tag : tag;
textarea.value = val + insert;
textarea.focus();
textarea.setSelectionRange(
textarea.value.length,
textarea.value.length,
);
textarea.scrollIntoView({ behavior: "smooth", block: "center" });
// Кнопка "назад"
const back = document.querySelector(".return-to-reply");
if (back) {
back.style.visibility = "visible";
back.textContent = `к @${nickname}`;
back.onclick = () => {
comment.scrollIntoView({
behavior: "smooth",
block: "center",
});
};
}
// Визуальный отклик
btn.style.opacity = "0.5";
setTimeout(() => (btn.style.opacity = ""), 200);
});
log("Кнопка «Ответить» активирована");
return true;
};
// === Поддержка кнопки "Цитировать" ===
const setupQuoteButtons = () => {
const textarea = document.querySelector(
'textarea[name="comment[body]"]',
);
if (!textarea) {
log("Редактор не найден — кнопка Цитировать не будет работать");
return false;
}
document.addEventListener("click", (e) => {
const btn = e.target.closest(".item-quote");
if (!btn) return;
const comment = btn.closest(".b-comment");
if (!comment) return;
const commentId = comment.id || comment.dataset.track_comment;
const userId = comment.dataset.user_id;
const nickname =
comment.dataset.user_nickname ||
comment.querySelector(".name a")?.textContent.trim() ||
"анон";
e.preventDefault();
// Пытаемся получить выделенный текст
let selectedText = "";
const selection = window.getSelection();
// Проверяем, есть ли выделение внутри текущего комментария
if (selection.rangeCount > 0 && selection.toString().trim()) {
const range = selection.getRangeAt(0);
const selectedNode = range.commonAncestorContainer;
// Проверяем, находится ли выделение внутри этого комментария
if (comment.contains(selectedNode)) {
selectedText = selection.toString().trim();
}
}
let quoteText;
if (selectedText) {
// Если есть выделенный текст - используем его
quoteText = selectedText;
log(
`Цитируется выделенный текст: ${quoteText.substring(
0,
100,
)}...`,
);
} else {
// Если нет выделения - берем весь текст комментария
const commentBody = comment.querySelector(".body");
if (!commentBody) return;
const commentText =
commentBody.textContent || commentBody.innerText;
const maxLength = 50000;
quoteText =
commentText.length > maxLength
? commentText.substring(0, maxLength) + "..."
: commentText;
log(`Выделения нет, цитируется весь комментарий`);
}
// Очищаем текст для форматирования
const cleanText = quoteText
.replace(/\n\s*\n/g, "\n\n")
.replace(/[ \t]+/g, " ")
.trim();
if (!cleanText) {
log("Нет текста для цитирования");
return;
}
// Формируем тег цитаты
const quoteTag = `[quote=${commentId.replace(
"comment-",
"",
)};${userId};${nickname}]${cleanText}[/quote]\n\n`;
// Вставляем в текстовое поле
const val = textarea.value;
const insert =
val && !val.endsWith("\n") ? "\n" + quoteTag : quoteTag;
textarea.value = val + insert;
textarea.focus();
textarea.setSelectionRange(
textarea.value.length,
textarea.value.length,
);
textarea.scrollIntoView({ behavior: "smooth", block: "center" });
// Снимаем выделение после цитирования
if (selection.rangeCount > 0) {
selection.removeAllRanges();
}
// Визуальный отклик
btn.style.opacity = "0.5";
setTimeout(() => (btn.style.opacity = ""), 200);
log(
`Цитата добавлена: комментарий ${commentId}, пользователь ${nickname}`,
);
});
// Также добавляем обработку для мобильной версии
document.addEventListener("click", (e) => {
const btn = e.target.closest(".item-quote-mobile");
if (!btn) return;
// Находим соответствующую обычную кнопку
const comment = btn.closest(".b-comment");
const mainBtn = comment?.querySelector(".item-quote");
if (mainBtn) {
mainBtn.click();
}
});
log("Кнопка «Цитировать» активирована (с поддержкой выделения текста)");
return true;
};
// --- Если кратко, оно кривое
// === Поддержка кнопок списков (Dropdown + API Request) ===
const setupAddToListButtons = () => {
// Словарь для отображения статусов и CSS классов
const STATUS_MAP = {
planned: { label: "Запланировано", class: "planned" },
watching: { label: "Смотрю", class: "watching" },
rewatching: { label: "Пересматриваю", class: "rewatching" },
completed: { label: "Просмотрено", class: "completed" },
on_hold: { label: "Отложено", class: "on_hold" },
dropped: { label: "Брошено", class: "dropped" },
};
// Единый слушатель на body (делегирование событий)
document.body.addEventListener("click", async (e) => {
// 1. Клик по ТРИГГЕРУ (открыть/закрыть меню)
const trigger = e.target.closest(".b-add_to_list .trigger");
if (trigger) {
e.preventDefault();
e.stopPropagation(); // Чтобы не сработал клик "снаружи"
const container = trigger.closest(".b-add_to_list");
const expanded = container.querySelector(".expanded-options");
// Закрываем все другие открытые меню на странице
document.querySelectorAll(".expanded-options").forEach((el) => {
if (el !== expanded) el.style.display = "none";
});
// Тогглим текущее
const isVisible = expanded.style.display === "block";
expanded.style.display = isVisible ? "none" : "block";
return;
}
// 2. Клик по ОПЦИИ (выбор статуса)
const option = e.target.closest(
".b-add_to_list .expanded-options .option",
);
if (option) {
e.preventDefault();
const container = option.closest(".b-add_to_list");
const expanded = container.querySelector(".expanded-options");
const form = container.querySelector("form");
// Получаем данные
const newStatus = option.dataset.status; // completed, planned...
const targetId = form.querySelector(
'input[name="user_rate[target_id]"]',
).value;
const targetType = form.querySelector(
'input[name="user_rate[target_type]"]',
).value;
const userId = form.querySelector(
'input[name="user_rate[user_id]"]',
).value; // Если нужно
// Визуально обновляем СРАЗУ (оптимистичный UI)
updateUI(container, newStatus);
// Закрываем меню
expanded.style.display = "none";
// Отправляем запрос на сервер
try {
const csrfToken = document.querySelector(
'meta[name="csrf-token"]',
)?.content;
const response = await fetch("/api/v2/user_rates", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRF-Token": csrfToken, // Важно для Rails
"User-Agent": CONFIG.USER_AGENT,
},
body: JSON.stringify({
user_rate: {
target_id: targetId,
target_type: targetType,
status: newStatus,
user_id: userId,
},
}),
});
if (!response.ok) throw new Error("Failed to update rate");
log(`✅ Статус обновлен на: ${newStatus}`);
} catch (err) {
error("Ошибка при обновлении статуса:", err);
alert("Не удалось обновить статус. Проверьте консоль.");
// Можно откатить UI обратно, если нужно
}
return;
}
// 3. Клик ВНЕ меню (закрыть всё)
if (!e.target.closest(".b-add_to_list")) {
document.querySelectorAll(".expanded-options").forEach((el) => {
el.style.display = "none";
});
}
});
// Вспомогательная функция обновления внешнего вида кнопки
function updateUI(container, statusKey) {
const map = STATUS_MAP[statusKey] || {
label: statusKey,
class: "planned",
};
// 1. Меняем класс контейнера (цвет кнопки)
// Удаляем старые классы статусов
Object.values(STATUS_MAP).forEach((s) =>
container.classList.remove(s.class),
);
// Добавляем новый
container.classList.add(map.class);
// 2. Меняем текст
const textSpan = container.querySelector(".trigger .status-name");
if (textSpan) {
textSpan.textContent = map.label;
textSpan.setAttribute("data-text", map.label);
}
// 3. Меняем значение в скрытом инпуте (на всякий случай)
const input = container.querySelector(
'input[name="user_rate[status]"]',
);
if (input) input.value = statusKey;
}
log("Кнопки «Добавить в список» активированы (Native Fetch)");
};
const setupShowMoreHandlers = () => {
document.body.addEventListener("click", (e) => {
// Клик по "+ показать всех"
if (e.target.matches(".b-show_more")) {
const showBtn = e.target;
// Ищем общий контейнер
const wrapper = showBtn.closest(".expandable-wrapper");
if (!wrapper) return; // Защита, если используется старая верстка где-то
const hiddenContent = wrapper.querySelector(
".b-show_more-content",
);
const hideBtn = wrapper.querySelector(".hide-more");
if (hiddenContent) {
showBtn.style.display = "none"; // Скрываем кнопку "+"
hiddenContent.style.display = "inline"; // Показываем контент (inline чтобы не ломать сетку)
if (hideBtn) hideBtn.style.display = "block"; // Показываем кнопку "-"
}
}
// Клик по "— спрятать"
if (e.target.matches(".hide-more")) {
const hideBtn = e.target;
const wrapper = hideBtn.closest(".expandable-wrapper");
if (!wrapper) return;
const hiddenContent = wrapper.querySelector(
".b-show_more-content",
);
const showBtn = wrapper.querySelector(".b-show_more");
if (hiddenContent) {
hiddenContent.style.display = "none"; // Скрываем контент
hideBtn.style.display = "none"; // Скрываем кнопку "-"
if (showBtn) showBtn.style.display = "block"; // Возвращаем кнопку "+"
}
}
});
log("Обработчики Show More активированы (версия 2.0)");
};
// Вспомогательные функции для кнопки избраного
async function add_favorite(e, t) {
const n = document.querySelector('meta[name="csrf-token"]')?.content;
if (!n) return !1;
try {
return (
await fetch(`/api/favorites/${e}/${t}`, {
method: "POST",
headers: {
"X-CSRF-Token": n,
"X-Requested-With": "XMLHttpRequest",
Accept: "application/json",
},
credentials: "include",
})
).ok;
} catch {
return !1;
}
}
async function delete_favorite(e, t) {
const n = document.querySelector('meta[name="csrf-token"]')?.content;
if (!n) return !1;
try {
return (
await fetch(`/api/favorites/${e}/${t}`, {
method: "DELETE",
headers: {
"X-CSRF-Token": n,
"X-Requested-With": "XMLHttpRequest",
Accept: "application/json",
},
credentials: "include",
})
).ok;
} catch {
return !1;
}
}
// Кнопка избранного
async function setupFavoriteButton() {
const JSON_HEADERS = {
"X-Requested-With": "XMLHttpRequest",
Accept: "application/json",
};
const FAVORITE_TEXT = {
add: "Добавить в избранное",
remove: "Удалить из избранного",
};
const fetchJSON = async (url) => {
const response = await fetch(url, {
method: "GET",
headers: JSON_HEADERS,
credentials: "include",
});
if (!response.ok) {
throw new Error(`Request failed: ${url}`);
}
return response.json();
};
const setButtonState = (button, isFavorite) => {
const action = isFavorite ? "remove" : "add";
button.classList.toggle("fav-add", !isFavorite);
button.classList.toggle("fav-remove", isFavorite);
button.setAttribute("title", FAVORITE_TEXT[action]);
button.setAttribute("original-title", FAVORITE_TEXT[action]);
if (button.hasAttribute("data-text")) {
button.setAttribute("data-text", FAVORITE_TEXT[action]);
}
};
const resolveFavoritesKey = (type, kind) => {
if (type === "Person") {
switch (kind) {
case "Mangaka":
return "mangakas";
case "Seyu":
return "seyu";
case "Producer":
return "producers";
default:
return "people";
}
}
const base = type.toLowerCase();
return base === "ranobe" ? base : `${base}s`;
};
let user;
let favourites;
try {
user = await fetchJSON("/api/users/whoami");
favourites = await fetchJSON(`/api/users/${user.id}/favourites`);
} catch (error) {
error(error.message);
return;
}
const buttons = document.querySelectorAll(
'a.b-subposter-action[data-remote="true"][href^="/api/favorites/"]',
);
buttons.forEach((button) => {
const parts = button.getAttribute("href").split("/");
const type = parts.at(-2);
const id = Number(parts.at(-1));
const kind = button.getAttribute("data-kind") || "";
const key = resolveFavoritesKey(type, kind);
const favList = favourites[key] || [];
const isFavorite = favList.some((item) => item.id === id);
setButtonState(button, isFavorite);
button.addEventListener("click", async (e) => {
e.preventDefault();
const adding = button.classList.contains("fav-add");
const success = adding
? await add_favorite(type, id)
: await delete_favorite(type, id);
if (!success) {
error("Failed to toggle favorite");
return;
}
setButtonState(button, adding);
});
});
}
const setupUserRateHandlers = () => {
// Используем делегирование: вешаем один слушатель на body
document.body.addEventListener("click", async (e) => {
// 1. КЛИК ПО СТРЕЛКЕ ИЛИ ТЕЛУ КНОПКИ (Открыть/Закрыть меню)
const trigger = e.target.closest(".b-add_to_list .trigger");
if (trigger) {
e.preventDefault();
e.stopPropagation();
const container = trigger.closest(".b-add_to_list");
const expanded = container.querySelector(".expanded-options");
// Закрываем все остальные открытые меню
document.querySelectorAll(".expanded-options").forEach((el) => {
if (el !== expanded) el.style.display = "none";
if (el !== expanded)
el.closest(".b-add_to_list")?.classList.remove(
"expanded",
);
});
// Тогглим текущее
const isVisible = expanded.style.display === "block";
expanded.style.display = isVisible ? "none" : "block";
container.classList.toggle("expanded", !isVisible);
return;
}
// 2. КЛИК ПО ОПЦИИ (Смена статуса или Удаление)
const option = e.target.closest(
".b-add_to_list .expanded-options .option",
);
const directAdd = e.target.closest(
".b-add_to_list .trigger .add-trigger",
);
const actionElement = option || directAdd;
if (actionElement) {
e.preventDefault();
const container = actionElement.closest(".b-add_to_list");
const form = container.querySelector("form");
const expanded = container.querySelector(".expanded-options");
const newStatus = actionElement.dataset.status;
const targetType = form.querySelector(
'input[name="user_rate[target_type]"]',
).value;
const targetId = form.querySelector(
'input[name="user_rate[target_id]"]',
).value;
const userId = form.querySelector(
'input[name="user_rate[user_id]"]',
).value;
const csrfToken = document.querySelector(
'meta[name="csrf-token"]',
)?.content;
// --- ЛОГИКА УДАЛЕНИЯ ---
if (newStatus === "delete") {
const deleteUrl = form.getAttribute("action");
// 1. Сбрасываем внешний вид на "Запланировано" (синяя кнопка)
container.className = "b-add_to_list planned";
container.classList.remove("expanded"); // Убираем стрелочку вверх
// 2. Восстанавливаем триггер "Добавить в список"
const triggerDiv = container.querySelector(".trigger");
triggerDiv.innerHTML = `
`;
// 3. ВОССТАНАВЛИВАЕМ СПИСОК ОПЦИЙ (Fix бага с пустым списком)
// Нам нужно вернуть список (Смотрю, В планах...), но БЕЗ кнопки удалить
const typeKey = targetType.toLowerCase();
const texts = STATUS_DATA[typeKey]; // Берем тексты из глобальной константы
const optionsHtml = Object.keys(STATUS_CLASSES).map(key => `