document.addEventListener('DOMContentLoaded', function() {
// Intersection Observer for Fade Animation on Scroll Up and Down
const observerOptions = {
threshold: [0, 0.15], // Trigger at 0% and 15% visibility
rootMargin: '0px 0px -100px 0px'
};
// Group cards into pairs (assuming two cards per row)
const cards = document.querySelectorAll('.scroll-trigger');
const cardPairs = [];
for (let i = 0; i < cards.length; i += 2) {
cardPairs.push([cards[i], cards[i + 1]].filter(Boolean)); // Handle odd number of cards
}
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
const card = entry.target;
// Find the pair index for the current card
const pairIndex = cardPairs.findIndex(pair => pair.includes(card));
const pair = cardPairs[pairIndex];
if (entry.isIntersecting) {
// Fade in the pair with a delay based on pair index
pair.forEach((cardInPair, index) => {
setTimeout(() => {
cardInPair.classList.add('active');
}, pairIndex * 300); // 300ms delay between pairs
});
} else {
// Fade out the pair when exiting viewport
pair.forEach(cardInPair => {
cardInPair.classList.remove('active');
});
}
});
}, observerOptions);
// Observe each card individually
cards.forEach(card => {
observer.observe(card);
});
});
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('toggleMore');
if (!btn) return; // If there are <=5 items, no need for the button
var extras = document.querySelectorAll('#blogroll li.extra');
btn.addEventListener('click', function () {
var anyHidden = Array.prototype.some.call(extras, function (li) {
return li.classList.contains('d-none');
});
extras.forEach(function (li) {
if (anyHidden) {
li.classList.remove('d-none');
li.classList.add('show'); // Show with smooth transition
} else {
li.classList.add('d-none');
li.classList.remove('show'); // Hide smoothly
}
});
// Update the button text and aria-expanded attribute
btn.textContent = anyHidden ? 'View less' : 'View more';
btn.setAttribute('aria-expanded', anyHidden ? 'true' : 'false');
});
});
(function () {
var fallbackImageSrc = "/static/blogapp/assets/images/breaking-news/img-1.jpg";
console.log("[ImageFallback] Initialized with fallback:", fallbackImageSrc);
function applyFallback(img) {
if (!img || img.dataset.fallbackApplied === "1") {
return;
}
var failedSrc = img.currentSrc || img.src || "";
img.dataset.fallbackApplied = "1";
img.onerror = null;
img.src = fallbackImageSrc;
console.warn("[ImageFallback] Replaced broken image:", {
failedSrc: failedSrc,
fallbackSrc: fallbackImageSrc,
alt: img.alt || "",
});
}
document.querySelectorAll("img").forEach(function (img) {
if (img.complete && img.naturalWidth === 0) {
console.warn("[ImageFallback] Found broken image at load, applying fallback.", {
failedSrc: img.currentSrc || img.src || "",
alt: img.alt || "",
});
applyFallback(img);
}
});
document.addEventListener(
"error",
function (event) {
var target = event.target;
if (target && target.tagName === "IMG") {
applyFallback(target);
}
},
true
);
})();
x server on