multi language support for books and book page redesigned
This commit is contained in:
@@ -5,25 +5,367 @@ let bookSlug = null;
|
||||
|
||||
let allChapters = [];
|
||||
let filteredChapters = [];
|
||||
|
||||
let availableExtensions = [];
|
||||
let isLocal = false;
|
||||
|
||||
let currentLanguage = null;
|
||||
let uniqueLanguages = [];
|
||||
let isSortAscending = true;
|
||||
|
||||
const chapterPagination = Object.create(PaginationManager);
|
||||
chapterPagination.init(12, () => renderChapterTable());
|
||||
chapterPagination.init(6, () => renderChapterList());
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
init();
|
||||
setupModalClickOutside();
|
||||
document.getElementById('sort-btn')?.addEventListener('click', toggleSortOrder);
|
||||
});
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const urlData = URLUtils.parseEntityPath('book');
|
||||
if (!urlData) { showError("Book Not Found"); return; }
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
bookId = urlData.entityId;
|
||||
bookSlug = urlData.slug;
|
||||
|
||||
await loadBookMetadata();
|
||||
await checkLocalLibraryEntry();
|
||||
await loadAvailableExtensions();
|
||||
await loadChapters();
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Init Error:", err);
|
||||
showError("Error loading book");
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBookMetadata() {
|
||||
const source = extensionName || 'anilist';
|
||||
const fetchUrl = `/api/book/${bookId}?source=${source}`;
|
||||
|
||||
try {
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error || !data) { showError("Book Not Found"); return; }
|
||||
|
||||
const raw = Array.isArray(data) ? data[0] : data;
|
||||
bookData = raw;
|
||||
|
||||
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
|
||||
bookData.entry_type = metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
|
||||
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata, raw);
|
||||
updateExtensionPill();
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
showError("Error loading metadata");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard Books`;
|
||||
const titleEl = document.getElementById('title');
|
||||
if (titleEl) titleEl.innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata, rawData) {
|
||||
// 1. Cabecera (Score, Año, Status, Formato, Caps)
|
||||
const elements = {
|
||||
'description': metadata.description,
|
||||
'published-date': metadata.year,
|
||||
'status': metadata.status,
|
||||
'format': metadata.format,
|
||||
'chapters-count': metadata.chapters ? `${metadata.chapters} Ch` : '?? Ch',
|
||||
'genres': metadata.genres ? metadata.genres.replace(/,/g, ' • ') : '',
|
||||
'poster': metadata.poster,
|
||||
'hero-bg': metadata.banner
|
||||
};
|
||||
|
||||
if(document.getElementById('description')) document.getElementById('description').innerHTML = metadata.description;
|
||||
if(document.getElementById('poster')) document.getElementById('poster').src = metadata.poster;
|
||||
if(document.getElementById('hero-bg')) document.getElementById('hero-bg').src = metadata.banner;
|
||||
|
||||
['published-date','status','format','chapters-count','genres'].forEach(id => {
|
||||
const el = document.getElementById(id);
|
||||
if(el) el.innerText = elements[id];
|
||||
});
|
||||
|
||||
const scoreEl = document.getElementById('score');
|
||||
if (scoreEl) scoreEl.innerText = extensionName ? `${metadata.score}` : `${metadata.score}% Score`;
|
||||
|
||||
// 2. Sidebar: Sinónimos (Para llenar espacio vacío)
|
||||
if (rawData.synonyms && rawData.synonyms.length > 0) {
|
||||
const sidebarInfo = document.getElementById('sidebar-info');
|
||||
const list = document.getElementById('synonyms-list');
|
||||
if (sidebarInfo && list) {
|
||||
sidebarInfo.style.display = 'block';
|
||||
list.innerHTML = '';
|
||||
// Mostrar máx 5 sinónimos para no alargar demasiado
|
||||
rawData.synonyms.slice(0, 5).forEach(syn => {
|
||||
const li = document.createElement('li');
|
||||
li.innerText = syn;
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Renderizar Personajes
|
||||
if (rawData.characters && rawData.characters.nodes && rawData.characters.nodes.length > 0) {
|
||||
renderCharacters(rawData.characters.nodes);
|
||||
}
|
||||
|
||||
// 4. Renderizar Relaciones
|
||||
if (rawData.relations && rawData.relations.edges && rawData.relations.edges.length > 0) {
|
||||
renderRelations(rawData.relations.edges);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCharacters(nodes) {
|
||||
const container = document.getElementById('characters-list');
|
||||
if(!container) return;
|
||||
container.innerHTML = '';
|
||||
|
||||
nodes.forEach(char => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'character-item';
|
||||
|
||||
const img = char.image?.large || char.image?.medium || '/public/assets/no-image.png';
|
||||
const name = char.name?.full || 'Unknown';
|
||||
const role = char.role || 'Supporting';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="char-avatar"><img src="${img}" loading="lazy"></div>
|
||||
<div class="char-info">
|
||||
<div class="char-name">${name}</div>
|
||||
<div class="char-role">${role}</div>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function renderRelations(edges) {
|
||||
const container = document.getElementById('relations-list');
|
||||
const section = document.getElementById('relations-section');
|
||||
if(!container || !section) return;
|
||||
|
||||
if (!edges || edges.length === 0) {
|
||||
section.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
section.style.display = 'block';
|
||||
container.innerHTML = '';
|
||||
|
||||
edges.forEach(edge => {
|
||||
const node = edge.node;
|
||||
if (!node) return;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'relation-card-horizontal';
|
||||
|
||||
const img = node.coverImage?.large || node.coverImage?.medium || '/public/assets/no-image.png';
|
||||
const title = node.title?.romaji || node.title?.english || node.title?.native || 'Unknown';
|
||||
const type = edge.relationType ? edge.relationType.replace(/_/g, ' ') : 'Related';
|
||||
|
||||
el.innerHTML = `
|
||||
<img src="${img}" class="rel-img" alt="${title}" loading="lazy">
|
||||
<div class="rel-info">
|
||||
<span class="rel-type">${type}</span>
|
||||
<span class="rel-title">${title}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
el.onclick = () => {
|
||||
const targetType = node.type === 'ANIME' ? 'anime' : 'book';
|
||||
window.location.href = `/${targetType}/${node.id}`;
|
||||
};
|
||||
|
||||
container.appendChild(el);
|
||||
});
|
||||
}
|
||||
|
||||
function processChaptersData(chaptersData) {
|
||||
allChapters = chaptersData;
|
||||
const langSet = new Set(allChapters.map(ch => ch.language).filter(l => l));
|
||||
uniqueLanguages = Array.from(langSet);
|
||||
setupLanguageSelector();
|
||||
filterAndRenderChapters();
|
||||
setupReadButton();
|
||||
}
|
||||
|
||||
async function loadChapters(targetProvider = null) {
|
||||
const listContainer = document.getElementById('chapters-list');
|
||||
const loadingMsg = document.getElementById('loading-msg');
|
||||
|
||||
if(listContainer) listContainer.innerHTML = '';
|
||||
if(loadingMsg) loadingMsg.style.display = 'block';
|
||||
|
||||
if (!targetProvider) {
|
||||
const select = document.getElementById('provider-filter');
|
||||
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
|
||||
}
|
||||
|
||||
try {
|
||||
let fetchUrl;
|
||||
let isLocalRequest = targetProvider === 'local';
|
||||
|
||||
if (isLocalRequest) {
|
||||
fetchUrl = `/api/library/${bookId}/units`;
|
||||
} else {
|
||||
const source = extensionName || 'anilist';
|
||||
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
|
||||
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
|
||||
}
|
||||
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
|
||||
let rawData = [];
|
||||
if (isLocalRequest) {
|
||||
rawData = (data.units || []).map((unit, idx) => ({
|
||||
id: unit.id || idx, number: unit.number, title: unit.name,
|
||||
provider: 'local', index: idx, format: unit.format, language: 'local'
|
||||
}));
|
||||
} else {
|
||||
rawData = data.chapters || [];
|
||||
}
|
||||
processChaptersData(rawData);
|
||||
|
||||
} catch (err) {
|
||||
if(loadingMsg) loadingMsg.style.display = 'none';
|
||||
if(listContainer) listContainer.innerHTML = '<div style="text-align:center; color: #ef4444;">Error loading chapters.</div>';
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function setupLanguageSelector() {
|
||||
const selectorContainer = document.getElementById('language-selector-container');
|
||||
const select = document.getElementById('language-select');
|
||||
if (!selectorContainer || !select) return;
|
||||
|
||||
if (uniqueLanguages.length <= 1) {
|
||||
selectorContainer.classList.add('hidden');
|
||||
currentLanguage = uniqueLanguages[0] || null;
|
||||
return;
|
||||
}
|
||||
selectorContainer.classList.remove('hidden');
|
||||
select.innerHTML = '';
|
||||
|
||||
const langNames = { 'es': 'Español', 'es-419': 'Latino', 'en': 'English', 'pt-br': 'Português', 'ja': '日本語' };
|
||||
|
||||
uniqueLanguages.forEach(lang => {
|
||||
const option = document.createElement('option');
|
||||
option.value = lang;
|
||||
option.textContent = langNames[lang] || lang.toUpperCase();
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
if (uniqueLanguages.includes('es-419')) currentLanguage = 'es-419';
|
||||
else if (uniqueLanguages.includes('es')) currentLanguage = 'es';
|
||||
else currentLanguage = uniqueLanguages[0];
|
||||
select.value = currentLanguage;
|
||||
|
||||
select.onchange = (e) => {
|
||||
currentLanguage = e.target.value;
|
||||
chapterPagination.currentPage = 1;
|
||||
filterAndRenderChapters();
|
||||
};
|
||||
}
|
||||
|
||||
function filterAndRenderChapters() {
|
||||
let tempChapters = [...allChapters];
|
||||
if (currentLanguage && uniqueLanguages.length > 1) {
|
||||
tempChapters = tempChapters.filter(ch => ch.language === currentLanguage);
|
||||
}
|
||||
const searchQuery = document.getElementById('chapter-search')?.value.toLowerCase();
|
||||
if(searchQuery){
|
||||
tempChapters = tempChapters.filter(ch =>
|
||||
(ch.title && ch.title.toLowerCase().includes(searchQuery)) ||
|
||||
(ch.number && ch.number.toString().includes(searchQuery))
|
||||
);
|
||||
}
|
||||
tempChapters.sort((a, b) => {
|
||||
const numA = parseFloat(a.number) || 0;
|
||||
const numB = parseFloat(b.number) || 0;
|
||||
return isSortAscending ? numA - numB : numB - numA;
|
||||
});
|
||||
filteredChapters = tempChapters;
|
||||
chapterPagination.setTotalItems(filteredChapters.length);
|
||||
renderChapterList();
|
||||
}
|
||||
|
||||
function renderChapterList() {
|
||||
const container = document.getElementById('chapters-list');
|
||||
if(!container) return;
|
||||
container.innerHTML = '';
|
||||
const itemsToShow = chapterPagination.getCurrentPageItems(filteredChapters);
|
||||
|
||||
if (itemsToShow.length === 0) {
|
||||
container.innerHTML = '<div style="text-align:center; padding:2rem; color:#888;">No chapters found.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
itemsToShow.forEach(chapter => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'chapter-item';
|
||||
el.onclick = () => openReader(chapter.id, chapter.provider);
|
||||
|
||||
const dateStr = chapter.date ? new Date(chapter.date).toLocaleDateString() : '';
|
||||
const providerLabel = chapter.provider !== 'local' ? chapter.provider : '';
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="chapter-info">
|
||||
<span class="chapter-number">Chapter ${chapter.number}</span>
|
||||
<span class="chapter-title">${chapter.title || ''}</span>
|
||||
</div>
|
||||
<div class="chapter-meta">
|
||||
${providerLabel ? `<span class="lang-tag">${providerLabel}</span>` : ''}
|
||||
${dateStr ? `<span>${dateStr}</span>` : ''}
|
||||
<svg class="chapter-play-icon" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
chapterPagination.renderControls('pagination', 'page-info', 'prev-page', 'next-page');
|
||||
}
|
||||
|
||||
function toggleSortOrder() {
|
||||
isSortAscending = !isSortAscending;
|
||||
const btn = document.getElementById('sort-btn');
|
||||
if(btn) btn.style.transform = isSortAscending ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
filterAndRenderChapters();
|
||||
}
|
||||
|
||||
function setupReadButton() {
|
||||
const readBtn = document.getElementById('read-start-btn');
|
||||
if (!readBtn || allChapters.length === 0) return;
|
||||
const firstChapter = [...allChapters].sort((a,b) => a.index - b.index)[0];
|
||||
if (firstChapter) readBtn.onclick = () =>
|
||||
openReader(firstChapter.index ?? firstChapter.id, firstChapter.provider);
|
||||
|
||||
}
|
||||
|
||||
function openReader(chapterIndexOrId, provider) {
|
||||
const lang = currentLanguage ?? 'none';
|
||||
window.location.href =
|
||||
URLUtils.buildReadUrl(bookId, chapterIndexOrId, provider, extensionName || 'anilist')
|
||||
+ `?lang=${lang}`;
|
||||
}
|
||||
|
||||
async function checkLocalLibraryEntry() {
|
||||
try {
|
||||
const libraryType =
|
||||
bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
|
||||
|
||||
const libraryType = bookData?.entry_type === 'NOVEL' ? 'novels' : 'manga';
|
||||
const res = await fetch(`/api/library/${libraryType}/${bookId}`);
|
||||
if (!res.ok) return;
|
||||
|
||||
const data = await res.json();
|
||||
if (data.matched) {
|
||||
isLocal = true;
|
||||
@@ -36,34 +378,7 @@ async function checkLocalLibraryEntry() {
|
||||
pill.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error checking local status:", e);
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const urlData = URLUtils.parseEntityPath('book');
|
||||
if (!urlData) {
|
||||
showError("Book Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
extensionName = urlData.extensionName;
|
||||
bookId = urlData.entityId;
|
||||
bookSlug = urlData.slug;
|
||||
await loadBookMetadata();
|
||||
await checkLocalLibraryEntry();
|
||||
|
||||
await loadAvailableExtensions();
|
||||
await loadChapters();
|
||||
|
||||
await setupAddToListButton();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Metadata Error:", err);
|
||||
showError("Error loading book");
|
||||
}
|
||||
} catch (e) { console.error("Error checking local:", e); }
|
||||
}
|
||||
|
||||
async function loadAvailableExtensions() {
|
||||
@@ -71,220 +386,21 @@ async function loadAvailableExtensions() {
|
||||
const res = await fetch('/api/extensions/book');
|
||||
const data = await res.json();
|
||||
availableExtensions = data.extensions || [];
|
||||
|
||||
setupProviderFilter();
|
||||
} catch (err) {
|
||||
console.error("Error fetching extensions:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadBookMetadata() {
|
||||
const source = extensionName || 'anilist';
|
||||
const fetchUrl = `/api/book/${bookId}?source=${source}`;
|
||||
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.error || !data) {
|
||||
showError("Book Not Found");
|
||||
return;
|
||||
}
|
||||
|
||||
const raw = Array.isArray(data) ? data[0] : data;
|
||||
bookData = raw;
|
||||
|
||||
const metadata = MediaMetadataUtils.formatBookData(raw, !!extensionName);
|
||||
bookData.entry_type =
|
||||
metadata.format === 'MANGA' ? 'MANGA' : 'NOVEL';
|
||||
updatePageTitle(metadata.title);
|
||||
updateMetadata(metadata);
|
||||
updateExtensionPill();
|
||||
}
|
||||
|
||||
function updatePageTitle(title) {
|
||||
document.title = `${title} | WaifuBoard Books`;
|
||||
const titleEl = document.getElementById('title');
|
||||
if (titleEl) titleEl.innerText = title;
|
||||
}
|
||||
|
||||
function updateMetadata(metadata) {
|
||||
|
||||
const descEl = document.getElementById('description');
|
||||
if (descEl) descEl.innerHTML = metadata.description;
|
||||
|
||||
const scoreEl = document.getElementById('score');
|
||||
if (scoreEl) {
|
||||
scoreEl.innerText = extensionName
|
||||
? `${metadata.score}`
|
||||
: `${metadata.score}% Score`;
|
||||
}
|
||||
|
||||
const pubEl = document.getElementById('published-date');
|
||||
if (pubEl) pubEl.innerText = metadata.year;
|
||||
|
||||
const statusEl = document.getElementById('status');
|
||||
if (statusEl) statusEl.innerText = metadata.status;
|
||||
|
||||
const formatEl = document.getElementById('format');
|
||||
if (formatEl) formatEl.innerText = metadata.format;
|
||||
|
||||
const chaptersEl = document.getElementById('chapters');
|
||||
if (chaptersEl) chaptersEl.innerText = metadata.chapters;
|
||||
|
||||
const genresEl = document.getElementById('genres');
|
||||
if (genresEl) genresEl.innerText = metadata.genres;
|
||||
|
||||
const posterEl = document.getElementById('poster');
|
||||
if (posterEl) posterEl.src = metadata.poster;
|
||||
|
||||
const heroBgEl = document.getElementById('hero-bg');
|
||||
if (heroBgEl) heroBgEl.src = metadata.banner;
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if (!pill) return;
|
||||
|
||||
if (extensionName) {
|
||||
pill.textContent = extensionName.charAt(0).toUpperCase() + extensionName.slice(1).toLowerCase();
|
||||
pill.style.display = 'inline-flex';
|
||||
} else {
|
||||
pill.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !bookData) return;
|
||||
|
||||
ListModalManager.currentData = bookData;
|
||||
const entryType = ListModalManager.getEntryType(bookData);
|
||||
const idForCheck = extensionName ? bookSlug : bookId;
|
||||
|
||||
await ListModalManager.checkIfInList(
|
||||
idForCheck,
|
||||
extensionName || 'anilist',
|
||||
entryType
|
||||
);
|
||||
|
||||
updateCustomAddButton();
|
||||
|
||||
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn) return;
|
||||
|
||||
if (ListModalManager.isInList) {
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
|
||||
</svg>
|
||||
In Your Library
|
||||
`;
|
||||
btn.style.background = 'rgba(34, 197, 94, 0.2)';
|
||||
btn.style.color = '#22c55e';
|
||||
btn.style.borderColor = 'rgba(34, 197, 94, 0.3)';
|
||||
} else {
|
||||
btn.innerHTML = '+ Add to Library';
|
||||
btn.style.background = null;
|
||||
btn.style.color = null;
|
||||
btn.style.borderColor = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadChapters(targetProvider = null) {
|
||||
const tbody = document.getElementById('chapters-body');
|
||||
if (!tbody) return;
|
||||
|
||||
if (!targetProvider) {
|
||||
const select = document.getElementById('provider-filter');
|
||||
targetProvider = select ? select.value : (availableExtensions[0] || 'all');
|
||||
}
|
||||
|
||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">Loading chapters...</td></tr>';
|
||||
|
||||
try {
|
||||
let fetchUrl;
|
||||
let isLocalRequest = targetProvider === 'local';
|
||||
|
||||
if (isLocalRequest) {
|
||||
// Nuevo endpoint para archivos locales
|
||||
fetchUrl = `/api/library/${bookId}/units`;
|
||||
} else {
|
||||
const source = extensionName || 'anilist';
|
||||
fetchUrl = `/api/book/${bookId}/chapters?source=${source}`;
|
||||
if (targetProvider !== 'all') fetchUrl += `&provider=${targetProvider}`;
|
||||
}
|
||||
|
||||
const res = await fetch(fetchUrl);
|
||||
const data = await res.json();
|
||||
|
||||
// Mapeo de datos: Si es local usamos 'units', si no, usamos 'chapters'
|
||||
if (isLocalRequest) {
|
||||
allChapters = (data.units || []).map((unit, idx) => ({
|
||||
number: unit.number,
|
||||
title: unit.name,
|
||||
provider: 'local',
|
||||
index: idx, // ✅ índice (0,1,2…)
|
||||
format: unit.format
|
||||
}));
|
||||
} else {
|
||||
allChapters = data.chapters || [];
|
||||
}
|
||||
|
||||
filteredChapters = [...allChapters];
|
||||
applyChapterFilter();
|
||||
|
||||
const totalEl = document.getElementById('total-chapters');
|
||||
if (allChapters.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters found.</td></tr>';
|
||||
if (totalEl) totalEl.innerText = "0 Found";
|
||||
return;
|
||||
}
|
||||
|
||||
if (totalEl) totalEl.innerText = `${allChapters.length} Found`;
|
||||
|
||||
setupReadButton();
|
||||
chapterPagination.setTotalItems(filteredChapters.length);
|
||||
chapterPagination.reset();
|
||||
renderChapterTable();
|
||||
|
||||
} catch (err) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; color: #ef4444;">Error loading chapters.</td></tr>';
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
function applyChapterFilter() {
|
||||
const chapterParam = URLUtils.getQueryParam('chapter');
|
||||
if (!chapterParam) return;
|
||||
|
||||
const chapterNumber = parseFloat(chapterParam);
|
||||
if (isNaN(chapterNumber)) return;
|
||||
|
||||
filteredChapters = allChapters.filter(
|
||||
ch => parseFloat(ch.number) === chapterNumber
|
||||
);
|
||||
|
||||
chapterPagination.reset();
|
||||
} catch (err) { console.error(err); }
|
||||
}
|
||||
|
||||
function setupProviderFilter() {
|
||||
const select = document.getElementById('provider-filter');
|
||||
if (!select) return;
|
||||
|
||||
select.style.display = 'inline-block';
|
||||
select.innerHTML = '';
|
||||
|
||||
// Opción para cargar todo
|
||||
const allOpt = document.createElement('option');
|
||||
allOpt.value = 'all';
|
||||
allOpt.innerText = 'Load All (Slower)';
|
||||
allOpt.innerText = 'All Providers';
|
||||
select.appendChild(allOpt);
|
||||
|
||||
// NUEVO: Si es local, añadimos la opción 'local' al principio
|
||||
if (isLocal) {
|
||||
const localOpt = document.createElement('option');
|
||||
localOpt.value = 'local';
|
||||
@@ -292,7 +408,6 @@ function setupProviderFilter() {
|
||||
select.appendChild(localOpt);
|
||||
}
|
||||
|
||||
// Añadir extensiones normales
|
||||
availableExtensions.forEach(ext => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = ext;
|
||||
@@ -300,90 +415,43 @@ function setupProviderFilter() {
|
||||
select.appendChild(opt);
|
||||
});
|
||||
|
||||
// Lógica de selección automática
|
||||
if (isLocal) {
|
||||
select.value = 'local'; // Prioridad si es local
|
||||
} else if (extensionName && availableExtensions.includes(extensionName)) {
|
||||
select.value = extensionName;
|
||||
} else if (availableExtensions.length > 0) {
|
||||
select.value = availableExtensions[0];
|
||||
if (isLocal) select.value = 'local';
|
||||
else if (extensionName && availableExtensions.includes(extensionName)) select.value = extensionName;
|
||||
else if (availableExtensions.length > 0) select.value = availableExtensions[0];
|
||||
|
||||
select.onchange = () => loadChapters(select.value);
|
||||
}
|
||||
|
||||
function updateExtensionPill() {
|
||||
const pill = document.getElementById('extension-pill');
|
||||
if(pill && extensionName) { pill.innerText = extensionName; pill.style.display = 'inline-flex'; }
|
||||
}
|
||||
|
||||
async function setupAddToListButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if (!btn || !bookData) return;
|
||||
ListModalManager.currentData = bookData;
|
||||
const entryType = ListModalManager.getEntryType(bookData);
|
||||
const idForCheck = extensionName ? bookSlug : bookId;
|
||||
await ListModalManager.checkIfInList(idForCheck, extensionName || 'anilist', entryType);
|
||||
updateCustomAddButton();
|
||||
btn.onclick = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function updateCustomAddButton() {
|
||||
const btn = document.getElementById('add-to-list-btn');
|
||||
if(btn && ListModalManager.isInList) {
|
||||
btn.innerHTML = '✓ In Your List'; btn.style.background = 'rgba(34, 197, 94, 0.2)'; btn.style.color = '#22c55e'; btn.style.borderColor = '#22c55e';
|
||||
}
|
||||
|
||||
select.onchange = () => {
|
||||
loadChapters(select.value);
|
||||
};
|
||||
}
|
||||
|
||||
function setupReadButton() {
|
||||
const readBtn = document.getElementById('read-start-btn');
|
||||
if (!readBtn || filteredChapters.length === 0) return;
|
||||
|
||||
const firstChapter = filteredChapters[0];
|
||||
readBtn.onclick = () => openReader(0, firstChapter.provider);
|
||||
}
|
||||
|
||||
function renderChapterTable() {
|
||||
const tbody = document.getElementById('chapters-body');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (filteredChapters.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding: 2rem;">No chapters match this filter.</td></tr>';
|
||||
chapterPagination.renderControls(
|
||||
'pagination',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const pageItems = chapterPagination.getCurrentPageItems(filteredChapters);
|
||||
|
||||
pageItems.forEach((ch) => {
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${ch.number}</td>
|
||||
<td>${ch.title || 'Chapter ' + ch.number}</td>
|
||||
<td><span class="pill" style="font-size:0.75rem;">${ch.provider}</span></td>
|
||||
<td>
|
||||
<button class="read-btn-small" onclick="openReader('${ch.index}', '${ch.provider}')">
|
||||
Read
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
tbody.appendChild(row);
|
||||
});
|
||||
|
||||
chapterPagination.renderControls(
|
||||
'pagination',
|
||||
'page-info',
|
||||
'prev-page',
|
||||
'next-page'
|
||||
);
|
||||
}
|
||||
|
||||
function openReader(chapterId, provider) {
|
||||
const effectiveExtension = extensionName || 'anilist';
|
||||
|
||||
window.location.href = URLUtils.buildReadUrl(
|
||||
bookId, // SIEMPRE anilist
|
||||
chapterId, // número normal
|
||||
provider, // 'local' o extensión
|
||||
extensionName || 'anilist'
|
||||
);
|
||||
}
|
||||
|
||||
function setupModalClickOutside() {
|
||||
const modal = document.getElementById('add-list-modal');
|
||||
if (!modal) return;
|
||||
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') {
|
||||
ListModalManager.close();
|
||||
}
|
||||
});
|
||||
if (modal) {
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'add-list-modal') ListModalManager.close();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
@@ -391,21 +459,15 @@ function showError(message) {
|
||||
if (titleEl) titleEl.innerText = message;
|
||||
}
|
||||
|
||||
function saveToList() {
|
||||
// Exports
|
||||
window.openReader = openReader;
|
||||
window.saveToList = () => {
|
||||
const idToSave = extensionName ? bookSlug : bookId;
|
||||
ListModalManager.save(idToSave, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function deleteFromList() {
|
||||
};
|
||||
window.deleteFromList = () => {
|
||||
const idToDelete = extensionName ? bookSlug : bookId;
|
||||
ListModalManager.delete(idToDelete, extensionName || 'anilist');
|
||||
}
|
||||
|
||||
function closeAddToListModal() {
|
||||
ListModalManager.close();
|
||||
}
|
||||
|
||||
window.openReader = openReader;
|
||||
window.saveToList = saveToList;
|
||||
window.deleteFromList = deleteFromList;
|
||||
window.closeAddToListModal = closeAddToListModal;
|
||||
};
|
||||
window.closeAddToListModal = () => ListModalManager.close();
|
||||
window.openAddToListModal = () => ListModalManager.open(bookData, extensionName || 'anilist');
|
||||
Reference in New Issue
Block a user