added gallery section
This commit is contained in:
251
src/scripts/gallery/gallery.js
Normal file
251
src/scripts/gallery/gallery.js
Normal file
@@ -0,0 +1,251 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const providerSelector = document.getElementById('provider-selector');
|
||||
const searchInput = document.getElementById('gallery-search-input');
|
||||
const resultsContainer = document.getElementById('gallery-results');
|
||||
const loadMoreBtn = document.getElementById('load-more-btn');
|
||||
|
||||
let currentPage = 1;
|
||||
let currentProvider = '';
|
||||
let currentQuery = '';
|
||||
const perPage = 48;
|
||||
|
||||
let msnry = null;
|
||||
|
||||
// --- MASONRY INITIALIZATION ---
|
||||
function initializeMasonry() {
|
||||
if (typeof Masonry === 'undefined') {
|
||||
setTimeout(initializeMasonry, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (msnry) {
|
||||
msnry.destroy();
|
||||
}
|
||||
|
||||
msnry = new Masonry(resultsContainer, {
|
||||
itemSelector: '.gallery-card',
|
||||
columnWidth: '.gallery-card',
|
||||
percentPosition: true,
|
||||
gutter: 0,
|
||||
transitionDuration: '0.4s'
|
||||
});
|
||||
msnry.layout();
|
||||
}
|
||||
|
||||
initializeMasonry();
|
||||
|
||||
// --- UTILS ---
|
||||
|
||||
/**
|
||||
* Crea un elemento de tarjeta de resultado de galería.
|
||||
*/
|
||||
function createGalleryCard(item) {
|
||||
const card = document.createElement('a');
|
||||
card.className = 'gallery-card grid-item';
|
||||
|
||||
const itemProvider = item.provider || currentProvider;
|
||||
|
||||
// **********************************************
|
||||
// CAMBIO: Nueva URL para la página de visualización
|
||||
card.href = `/gallery/${itemProvider}/${item.id}`;
|
||||
// **********************************************
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.className = 'gallery-card-img';
|
||||
img.src = item.image;
|
||||
img.alt = item.tags ? item.tags.join(', ') : 'Gallery Image';
|
||||
img.loading = 'lazy';
|
||||
|
||||
img.onload = () => {
|
||||
if (msnry) {
|
||||
msnry.layout();
|
||||
card.classList.add('is-loaded');
|
||||
}
|
||||
};
|
||||
img.onerror = () => {
|
||||
if (msnry) {
|
||||
msnry.layout();
|
||||
card.classList.add('is-loaded');
|
||||
}
|
||||
};
|
||||
|
||||
card.appendChild(img);
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
/**
|
||||
* Muestra las tarjetas de esqueleto. (Sin cambios)
|
||||
*/
|
||||
function showSkeletons(count, append = false) {
|
||||
const skeletonMarkup = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;
|
||||
|
||||
if (!append) {
|
||||
resultsContainer.innerHTML = '';
|
||||
initializeMasonry();
|
||||
}
|
||||
|
||||
let newElements = [];
|
||||
for (let i = 0; i < count; i++) {
|
||||
const tempDiv = document.createElement('div');
|
||||
tempDiv.innerHTML = skeletonMarkup.trim();
|
||||
const skeletonEl = tempDiv.firstChild;
|
||||
resultsContainer.appendChild(skeletonEl);
|
||||
newElements.push(skeletonEl);
|
||||
}
|
||||
|
||||
if (msnry) {
|
||||
msnry.appended(newElements);
|
||||
msnry.layout();
|
||||
}
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
// --- FETCH DATA --- (Sin cambios en loadExtensions y searchGallery)
|
||||
async function loadExtensions() {
|
||||
try {
|
||||
const response = await fetch('/api/extensions/gallery');
|
||||
const data = await response.json();
|
||||
|
||||
providerSelector.innerHTML = '';
|
||||
|
||||
if (data.extensions && data.extensions.length > 0) {
|
||||
const defaultOption = document.createElement('option');
|
||||
defaultOption.value = '';
|
||||
defaultOption.textContent = 'Global Search';
|
||||
providerSelector.appendChild(defaultOption);
|
||||
|
||||
data.extensions.forEach(ext => {
|
||||
const option = document.createElement('option');
|
||||
option.value = ext;
|
||||
option.textContent = ext;
|
||||
providerSelector.appendChild(option);
|
||||
});
|
||||
|
||||
currentProvider = '';
|
||||
|
||||
} else {
|
||||
providerSelector.innerHTML = '<option value="">No extensions found</option>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading gallery extensions:', error);
|
||||
providerSelector.innerHTML = '<option value="">Error loading extensions</option>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function searchGallery(isLoadMore = false) {
|
||||
const query = searchInput.value.trim();
|
||||
const provider = providerSelector.value;
|
||||
const page = isLoadMore ? currentPage + 1 : 1;
|
||||
|
||||
if (!isLoadMore && currentQuery === query && currentProvider === provider && currentPage === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
currentQuery = query;
|
||||
currentProvider = provider;
|
||||
|
||||
if (!isLoadMore) {
|
||||
currentPage = 1;
|
||||
showSkeletons(perPage, false);
|
||||
} else {
|
||||
showSkeletons(8, true);
|
||||
}
|
||||
|
||||
try {
|
||||
let url;
|
||||
if (provider && provider !== '') {
|
||||
url = `/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
|
||||
} else {
|
||||
url = `/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
let newRealElements = [];
|
||||
if (data.results && data.results.length > 0) {
|
||||
data.results.forEach(item => {
|
||||
newRealElements.push(createGalleryCard(item));
|
||||
});
|
||||
}
|
||||
|
||||
const allSkeletons = Array.from(resultsContainer.querySelectorAll('.gallery-card.skeleton'));
|
||||
let skeletonsToRemove = isLoadMore ? allSkeletons.slice(-8) : allSkeletons;
|
||||
|
||||
if (msnry) {
|
||||
msnry.remove(skeletonsToRemove);
|
||||
skeletonsToRemove.forEach(s => s.remove());
|
||||
}
|
||||
|
||||
if (newRealElements.length > 0) {
|
||||
newRealElements.forEach(el => resultsContainer.appendChild(el));
|
||||
|
||||
if (msnry) {
|
||||
msnry.appended(newRealElements);
|
||||
}
|
||||
currentPage = isLoadMore ? currentPage + 1 : 1;
|
||||
|
||||
} else if (!isLoadMore) {
|
||||
resultsContainer.innerHTML = '<p style="text-align:center; color: var(--text-secondary); padding: 2rem;">No results found for this search.</p>';
|
||||
}
|
||||
|
||||
if (msnry) {
|
||||
msnry.layout();
|
||||
}
|
||||
|
||||
if (data.hasNextPage) {
|
||||
loadMoreBtn.style.display = 'block';
|
||||
} else {
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error during gallery search:', error);
|
||||
if (!isLoadMore) {
|
||||
resultsContainer.innerHTML = '<p style="text-align:center; color: red; padding: 2rem;">An error occurred while fetching results.</p>';
|
||||
}
|
||||
loadMoreBtn.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// --- EVENT LISTENERS (Sin cambios) ---
|
||||
|
||||
providerSelector.addEventListener('change', () => {
|
||||
searchGallery(false);
|
||||
});
|
||||
|
||||
let searchTimeout;
|
||||
searchInput.addEventListener('input', () => {
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchGallery(false);
|
||||
}, 500);
|
||||
});
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
clearTimeout(searchTimeout);
|
||||
searchGallery(false);
|
||||
}
|
||||
});
|
||||
|
||||
loadMoreBtn.addEventListener('click', () => {
|
||||
searchGallery(true);
|
||||
});
|
||||
|
||||
loadExtensions().then(() => {
|
||||
searchGallery(false);
|
||||
});
|
||||
|
||||
const navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
139
src/scripts/gallery/image.js
Normal file
139
src/scripts/gallery/image.js
Normal file
@@ -0,0 +1,139 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const itemContentContainer = document.getElementById('item-content');
|
||||
|
||||
// Función para parsear la URL y obtener :provider y :id
|
||||
function getUrlParams() {
|
||||
// La URL esperada es /gallery/providerName/itemId
|
||||
const pathSegments = window.location.pathname.split('/').filter(segment => segment);
|
||||
|
||||
// Verifica si la estructura es /gallery/provider/id
|
||||
if (pathSegments.length >= 3 && pathSegments[0] === 'gallery') {
|
||||
return {
|
||||
provider: pathSegments[1],
|
||||
id: pathSegments.slice(2).join('/') // El ID puede contener barras, así que unimos el resto
|
||||
};
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function fetchGalleryItem(provider, id) {
|
||||
try {
|
||||
// Llama al endpoint de la API con los parámetros obtenidos
|
||||
const url = `/api/gallery/fetch/${id}?provider=${provider}`;
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `Failed to fetch item from ${provider}.`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Verifica los campos clave del nuevo formato de respuesta
|
||||
if (!data.fullImage) {
|
||||
throw new Error("Invalid item structure: Missing 'fullImage' URL.");
|
||||
}
|
||||
|
||||
// Normalizar los datos para la plantilla (usando 'publishedBy' como título si 'title' no existe)
|
||||
data.title = data.publishedBy || data.id;
|
||||
|
||||
renderItem(data);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Fetch Gallery Item Error:", error);
|
||||
renderError(`The requested item could not be found or an error occurred. (${error.message})`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Renderiza el contenido del ítem de la galería.
|
||||
* @param {Object} item - Objeto de respuesta de la API.
|
||||
*/
|
||||
function renderItem(item) {
|
||||
const title = item.title;
|
||||
document.getElementById('page-title').textContent = `WaifuBoard - ${title}`;
|
||||
|
||||
// Limpiar el esqueleto
|
||||
itemContentContainer.innerHTML = '';
|
||||
|
||||
const imageUrl = item.fullImage || item.resizedImageUrl; // Usar fullImage para la más alta resolución
|
||||
|
||||
const itemHTML = `
|
||||
<div class="image-col">
|
||||
<img id="main-image" class="item-image" src="${imageUrl}" alt="${title}">
|
||||
</div>
|
||||
<div class="info-col">
|
||||
<div class="info-header">
|
||||
<span class="provider-name">Source: ${item.provider} / Published By: ${item.publishedBy || 'N/A'}</span>
|
||||
<h1>${title}</h1>
|
||||
</div>
|
||||
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tag-list" id="tag-list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="${imageUrl}" download="${title.replace(/ /g, '_')}_${item.id.replace(/-/g, '_')}.jpg" class="download-btn">
|
||||
<i class="fa-solid fa-download"></i> Download Full Image
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
itemContentContainer.innerHTML = itemHTML;
|
||||
|
||||
// Renderizar Tags
|
||||
const tagListContainer = document.getElementById('tag-list');
|
||||
if (item.tags && item.tags.length > 0) {
|
||||
item.tags.forEach(tag => {
|
||||
const tagEl = document.createElement('a');
|
||||
tagEl.className = 'tag-item';
|
||||
tagEl.textContent = tag;
|
||||
// Enlazar a una búsqueda en la galería por el tag y el provider
|
||||
tagEl.href = `/art?provider=${item.provider}&q=${encodeURIComponent(tag)}`;
|
||||
tagListContainer.appendChild(tagEl);
|
||||
});
|
||||
} else {
|
||||
tagListContainer.innerHTML = '<p class="tag-item" style="background:none; color:var(--text-secondary);">No tags available.</p>';
|
||||
}
|
||||
|
||||
// Habilitar fade-in de la imagen una vez que se carga
|
||||
const mainImage = document.getElementById('main-image');
|
||||
mainImage.onload = () => {
|
||||
mainImage.classList.add('loaded');
|
||||
};
|
||||
// Para imágenes que ya están en caché
|
||||
if (mainImage.complete) {
|
||||
mainImage.classList.add('loaded');
|
||||
}
|
||||
}
|
||||
|
||||
function renderError(message) {
|
||||
itemContentContainer.innerHTML = `
|
||||
<div style="text-align:center; padding: 5rem 0; width: 100%;">
|
||||
<i class="fa-solid fa-circle-exclamation" style="font-size: 3rem; color: #ff5c5c;"></i>
|
||||
<h2 style="color: #ff5c5c; margin-top: 1rem;">Item Not Found</h2>
|
||||
<p style="color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem;">${message}</p>
|
||||
<a href="/art" class="btn-primary" style="margin-top: 2rem;">Go back to Gallery</a>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// --- Inicialización ---
|
||||
const params = getUrlParams();
|
||||
if (params && params.provider && params.id) {
|
||||
fetchGalleryItem(params.provider, params.id);
|
||||
} else {
|
||||
renderError("Invalid URL format. Expected: /gallery/<provider>/<id>");
|
||||
}
|
||||
|
||||
// Estilo de Navbar (reutilizado)
|
||||
const navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 50) {
|
||||
navbar.classList.add('scrolled');
|
||||
} else {
|
||||
navbar.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user