433 lines
15 KiB
JavaScript
433 lines
15 KiB
JavaScript
// Pagination state
|
|
let allArticles = [];
|
|
let filteredArticles = [];
|
|
let displayedCount = 0;
|
|
const ARTICLES_PER_PAGE = 5;
|
|
let isLoading = false;
|
|
let searchQuery = '';
|
|
|
|
// Load news on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadNews();
|
|
loadStats();
|
|
setupInfiniteScroll();
|
|
loadCategories();
|
|
});
|
|
|
|
async function loadCategories() {
|
|
try {
|
|
const response = await fetch('/api/categories');
|
|
const data = await response.json();
|
|
const categories = data.categories || [];
|
|
|
|
const container = document.getElementById('categoryCheckboxes');
|
|
container.innerHTML = '';
|
|
|
|
categories.forEach(category => {
|
|
const label = document.createElement('label');
|
|
label.className = 'flex items-center space-x-3 cursor-pointer';
|
|
label.innerHTML = `
|
|
<input type="checkbox" value="${category.id}" checked class="w-5 h-5 rounded border-2 border-white/30 bg-white/20 checked:bg-white checked:border-white focus:ring-2 focus:ring-white/50">
|
|
<span class="text-white text-sm">${category.icon} ${category.name}</span>
|
|
`;
|
|
container.appendChild(label);
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to load categories:', error);
|
|
}
|
|
}
|
|
|
|
async function loadNews() {
|
|
const newsGrid = document.getElementById('newsGrid');
|
|
newsGrid.innerHTML = '<div class="text-center py-10 text-gray-500">Loading news...</div>';
|
|
|
|
try {
|
|
const response = await fetch('/api/news');
|
|
const data = await response.json();
|
|
|
|
if (data.articles && data.articles.length > 0) {
|
|
allArticles = data.articles;
|
|
filteredArticles = data.articles;
|
|
displayedCount = 0;
|
|
newsGrid.innerHTML = '';
|
|
updateSearchStats();
|
|
loadMoreArticles();
|
|
} else {
|
|
newsGrid.innerHTML = '<div class="text-center py-10 text-gray-500">No news available at the moment. Check back later!</div>';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading news:', error);
|
|
newsGrid.innerHTML = '<div class="text-center py-10 text-gray-500">Failed to load news. Please try again later.</div>';
|
|
}
|
|
}
|
|
|
|
function loadMoreArticles() {
|
|
if (isLoading || displayedCount >= filteredArticles.length) return;
|
|
|
|
isLoading = true;
|
|
const newsGrid = document.getElementById('newsGrid');
|
|
|
|
// Remove loading indicator if exists
|
|
const loadingIndicator = document.getElementById('loadingIndicator');
|
|
if (loadingIndicator) loadingIndicator.remove();
|
|
|
|
// Get next batch of articles
|
|
const nextBatch = filteredArticles.slice(displayedCount, displayedCount + ARTICLES_PER_PAGE);
|
|
|
|
nextBatch.forEach((article, index) => {
|
|
const card = createNewsCard(article, displayedCount + index);
|
|
newsGrid.appendChild(card);
|
|
});
|
|
|
|
displayedCount += nextBatch.length;
|
|
|
|
// Add loading indicator if more articles available
|
|
if (displayedCount < filteredArticles.length) {
|
|
const loader = document.createElement('div');
|
|
loader.id = 'loadingIndicator';
|
|
loader.className = 'text-center py-8 text-gray-400';
|
|
loader.innerHTML = '<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div><p class="mt-2">Loading more...</p>';
|
|
newsGrid.appendChild(loader);
|
|
} else if (filteredArticles.length > 0) {
|
|
// Add end message
|
|
const endMessage = document.createElement('div');
|
|
endMessage.className = 'text-center py-8 text-gray-400 text-sm';
|
|
endMessage.textContent = `✓ All ${filteredArticles.length} articles loaded`;
|
|
newsGrid.appendChild(endMessage);
|
|
}
|
|
|
|
isLoading = false;
|
|
}
|
|
|
|
function setupInfiniteScroll() {
|
|
window.addEventListener('scroll', () => {
|
|
if (isLoading || displayedCount >= filteredArticles.length) return;
|
|
|
|
const scrollPosition = window.innerHeight + window.scrollY;
|
|
const threshold = document.documentElement.scrollHeight - 500;
|
|
|
|
if (scrollPosition >= threshold) {
|
|
loadMoreArticles();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Search functionality
|
|
function handleSearch() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
const clearBtn = document.getElementById('clearSearch');
|
|
searchQuery = searchInput.value.trim().toLowerCase();
|
|
|
|
// Show/hide clear button
|
|
if (searchQuery) {
|
|
clearBtn.classList.remove('hidden');
|
|
} else {
|
|
clearBtn.classList.add('hidden');
|
|
}
|
|
|
|
// Filter articles
|
|
if (searchQuery === '') {
|
|
filteredArticles = allArticles;
|
|
} else {
|
|
filteredArticles = allArticles.filter(article => {
|
|
const title = article.title.toLowerCase();
|
|
const summary = (article.summary || '').toLowerCase().replace(/<[^>]*>/g, '');
|
|
const source = formatSourceName(article.source).toLowerCase();
|
|
|
|
return title.includes(searchQuery) ||
|
|
summary.includes(searchQuery) ||
|
|
source.includes(searchQuery);
|
|
});
|
|
}
|
|
|
|
// Reset display
|
|
displayedCount = 0;
|
|
const newsGrid = document.getElementById('newsGrid');
|
|
newsGrid.innerHTML = '';
|
|
|
|
// Update stats
|
|
updateSearchStats();
|
|
|
|
// Load filtered articles
|
|
if (filteredArticles.length > 0) {
|
|
loadMoreArticles();
|
|
} else {
|
|
newsGrid.innerHTML = `
|
|
<div class="text-center py-16">
|
|
<div class="text-6xl mb-4">🔍</div>
|
|
<p class="text-xl text-gray-600 mb-2">No articles found</p>
|
|
<p class="text-gray-400">Try a different search term</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function clearSearch() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
searchInput.value = '';
|
|
handleSearch();
|
|
searchInput.focus();
|
|
}
|
|
|
|
function updateSearchStats() {
|
|
const searchStats = document.getElementById('searchStats');
|
|
if (searchQuery) {
|
|
searchStats.textContent = `Found ${filteredArticles.length} of ${allArticles.length} articles`;
|
|
} else {
|
|
searchStats.textContent = `Showing ${allArticles.length} articles`;
|
|
}
|
|
}
|
|
|
|
function createNewsCard(article, index) {
|
|
const card = document.createElement('div');
|
|
card.className = 'group bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer border border-gray-100 hover:border-primary/30';
|
|
card.onclick = () => window.open(article.link, '_blank');
|
|
|
|
// Extract image from summary if it's an img tag (from Süddeutsche)
|
|
let imageUrl = null;
|
|
let cleanSummary = article.summary || 'No summary available.';
|
|
|
|
if (cleanSummary.includes('<img')) {
|
|
const imgMatch = cleanSummary.match(/src="([^"]+)"/);
|
|
if (imgMatch) {
|
|
imageUrl = imgMatch[1];
|
|
}
|
|
// Remove img tag from summary
|
|
cleanSummary = cleanSummary.replace(/<img[^>]*>/g, '').replace(/<\/?p>/g, '').trim();
|
|
}
|
|
|
|
// Get source icon/emoji
|
|
const sourceIcon = getSourceIcon(article.source);
|
|
|
|
// Format source name
|
|
const sourceName = formatSourceName(article.source);
|
|
|
|
// Get word count badge
|
|
const wordCount = article.word_count || article.summary_word_count;
|
|
const readTime = wordCount ? Math.ceil(wordCount / 200) : null;
|
|
|
|
card.innerHTML = `
|
|
<div class="flex flex-col sm:flex-row">
|
|
<!-- Image -->
|
|
<div class="relative w-full sm:w-64 h-48 sm:h-auto bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-5xl overflow-hidden flex-shrink-0">
|
|
${imageUrl ? `<img src="${imageUrl}" alt="${article.title}" class="w-full h-full object-cover" onerror="this.style.display='none'; this.parentElement.innerHTML='${sourceIcon}';">` : sourceIcon}
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="p-6 flex flex-col flex-1">
|
|
<!-- Source Badge -->
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="w-1.5 h-1.5 bg-primary rounded-full"></span>
|
|
<span class="text-xs font-bold text-primary uppercase tracking-wide">${sourceName}</span>
|
|
${readTime ? `<span class="text-xs text-gray-400 ml-auto">📖 ${readTime} min read</span>` : ''}
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h3 class="text-xl font-bold text-gray-900 mb-3 leading-tight group-hover:text-primary transition-colors">${article.title}</h3>
|
|
|
|
<!-- Summary -->
|
|
<p class="text-sm text-gray-600 mb-4 leading-relaxed line-clamp-2">${cleanSummary}</p>
|
|
|
|
<!-- Footer -->
|
|
<div class="flex items-center gap-4 mt-auto">
|
|
<a href="${article.link}" target="_blank" onclick="event.stopPropagation()" class="text-primary font-semibold text-sm hover:gap-2 flex items-center gap-1 transition-all">
|
|
Read full article <span class="group-hover:translate-x-1 transition-transform">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Add staggered animation
|
|
card.style.opacity = '0';
|
|
card.style.animation = `fadeIn 0.5s ease-out ${(index % ARTICLES_PER_PAGE) * 0.1}s forwards`;
|
|
|
|
return card;
|
|
}
|
|
|
|
// Add animation keyframes
|
|
if (!document.getElementById('animations')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'animations';
|
|
style.textContent = `
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
function getSourceIcon(source) {
|
|
const icons = {
|
|
'abendzeitung-muenchen': '📰',
|
|
'sueddeutsche': '📄',
|
|
'muenchen': '🏛️',
|
|
'default': '📰'
|
|
};
|
|
return icons[source] || icons.default;
|
|
}
|
|
|
|
function formatSourceName(source) {
|
|
const names = {
|
|
'abendzeitung-muenchen': 'Abendzeitung München',
|
|
'sueddeutsche': 'Süddeutsche Zeitung',
|
|
'muenchen': 'München.de'
|
|
};
|
|
return names[source] || source.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const response = await fetch('/api/stats');
|
|
const data = await response.json();
|
|
|
|
if (data.subscribers !== undefined) {
|
|
document.getElementById('subscriberCount').textContent = data.subscribers.toLocaleString();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading stats:', error);
|
|
}
|
|
}
|
|
|
|
async function subscribe() {
|
|
const emailInput = document.getElementById('emailInput');
|
|
const subscribeBtn = document.getElementById('subscribeBtn');
|
|
const formMessage = document.getElementById('formMessage');
|
|
|
|
const email = emailInput.value.trim();
|
|
|
|
if (!email || !email.includes('@')) {
|
|
formMessage.textContent = 'Please enter a valid email address';
|
|
formMessage.className = 'text-red-200 font-medium';
|
|
return;
|
|
}
|
|
|
|
// Get selected categories
|
|
const checkboxes = document.querySelectorAll('#categoryCheckboxes input[type="checkbox"]:checked');
|
|
const categories = Array.from(checkboxes).map(cb => cb.value);
|
|
|
|
if (categories.length === 0) {
|
|
formMessage.textContent = 'Please select at least one category';
|
|
formMessage.className = 'text-red-200 font-medium';
|
|
return;
|
|
}
|
|
|
|
subscribeBtn.disabled = true;
|
|
subscribeBtn.textContent = 'Subscribing...';
|
|
subscribeBtn.classList.add('opacity-75', 'cursor-not-allowed');
|
|
formMessage.textContent = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/subscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
email: email,
|
|
categories: categories
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
formMessage.textContent = data.message || 'Successfully subscribed! Check your email for confirmation.';
|
|
formMessage.className = 'text-green-200 font-medium';
|
|
emailInput.value = '';
|
|
loadStats(); // Refresh stats
|
|
} else {
|
|
formMessage.textContent = data.error || 'Failed to subscribe. Please try again.';
|
|
formMessage.className = 'text-red-200 font-medium';
|
|
}
|
|
} catch (error) {
|
|
formMessage.textContent = 'Network error. Please try again later.';
|
|
formMessage.className = 'text-red-200 font-medium';
|
|
} finally {
|
|
subscribeBtn.disabled = false;
|
|
subscribeBtn.textContent = 'Subscribe Free';
|
|
subscribeBtn.classList.remove('opacity-75', 'cursor-not-allowed');
|
|
}
|
|
}
|
|
|
|
// Allow Enter key to submit
|
|
document.getElementById('emailInput').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
subscribe();
|
|
}
|
|
});
|
|
|
|
function showUnsubscribe() {
|
|
document.getElementById('unsubscribeModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeUnsubscribe() {
|
|
document.getElementById('unsubscribeModal').classList.add('hidden');
|
|
document.getElementById('unsubscribeEmail').value = '';
|
|
document.getElementById('unsubscribeMessage').textContent = '';
|
|
document.getElementById('unsubscribeMessage').className = '';
|
|
}
|
|
|
|
async function unsubscribe() {
|
|
const emailInput = document.getElementById('unsubscribeEmail');
|
|
const unsubscribeMessage = document.getElementById('unsubscribeMessage');
|
|
|
|
const email = emailInput.value.trim();
|
|
|
|
if (!email || !email.includes('@')) {
|
|
unsubscribeMessage.textContent = 'Please enter a valid email address';
|
|
unsubscribeMessage.className = 'text-red-600 font-medium';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/unsubscribe', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ email: email })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
unsubscribeMessage.textContent = data.message || 'Successfully unsubscribed.';
|
|
unsubscribeMessage.className = 'text-green-600 font-medium';
|
|
emailInput.value = '';
|
|
setTimeout(() => {
|
|
closeUnsubscribe();
|
|
loadStats();
|
|
}, 2000);
|
|
} else {
|
|
unsubscribeMessage.textContent = data.error || 'Failed to unsubscribe. Please try again.';
|
|
unsubscribeMessage.className = 'text-red-600 font-medium';
|
|
}
|
|
} catch (error) {
|
|
unsubscribeMessage.textContent = 'Network error. Please try again later.';
|
|
unsubscribeMessage.className = 'text-red-600 font-medium';
|
|
}
|
|
}
|
|
|
|
// Close modal when clicking outside
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('unsubscribeModal');
|
|
if (event.target === modal) {
|
|
closeUnsubscribe();
|
|
}
|
|
}
|
|
|