94 lines
3.5 KiB
JavaScript
94 lines
3.5 KiB
JavaScript
// Main JavaScript file for Palina theme
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('Palina theme loaded!');
|
|
|
|
const htmlElement = document.documentElement;
|
|
// Remove 'hidden' class from html to prevent FOUC
|
|
htmlElement.classList.remove('hidden');
|
|
|
|
// Staggered fade-in animation for post grid
|
|
const gridItems = document.querySelectorAll('.post-grid-item');
|
|
gridItems.forEach((item, index) => {
|
|
item.style.animationDelay = `${index * 100}ms`;
|
|
item.classList.add('animate-fadeInUp');
|
|
});
|
|
|
|
// Lightbox for post images
|
|
const lightbox = document.getElementById('lightbox');
|
|
if (lightbox) {
|
|
const lightboxImage = document.getElementById('lightbox-image');
|
|
const lightboxClose = document.getElementById('lightbox-close');
|
|
|
|
const images = document.querySelectorAll('.kg-image-card img, .post-content img');
|
|
|
|
images.forEach(image => {
|
|
image.style.cursor = 'pointer';
|
|
image.addEventListener('click', () => {
|
|
lightbox.classList.remove('hidden');
|
|
lightbox.classList.add('show');
|
|
lightboxImage.src = image.src;
|
|
});
|
|
});
|
|
|
|
lightboxClose.addEventListener('click', () => {
|
|
lightbox.classList.add('hidden');
|
|
lightbox.classList.remove('show');
|
|
lightboxImage.src = '';
|
|
});
|
|
|
|
lightbox.addEventListener('click', (e) => {
|
|
if (e.target.id !== 'lightbox-image') {
|
|
lightbox.classList.add('hidden');
|
|
lightbox.classList.remove('show');
|
|
lightboxImage.src = '';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Theme Switcher
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
// const htmlElement = document.documentElement; // Already defined above
|
|
|
|
const currentTheme = localStorage.getItem('theme');
|
|
if (currentTheme) {
|
|
htmlElement.setAttribute('data-theme', currentTheme);
|
|
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
|
|
// Default to light theme if system preference is light
|
|
htmlElement.setAttribute('data-theme', 'light');
|
|
}
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
let newTheme = htmlElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
htmlElement.setAttribute('data-theme', newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
});
|
|
}
|
|
|
|
// Mobile Menu
|
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
|
const mobileMenuClose = document.getElementById('mobile-menu-close');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (mobileMenuToggle && mobileMenu && mobileMenuClose) {
|
|
mobileMenuToggle.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('-translate-x-full');
|
|
mobileMenu.classList.add('translate-x-0');
|
|
});
|
|
|
|
mobileMenuClose.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('translate-x-0');
|
|
mobileMenu.classList.add('-translate-x-full');
|
|
});
|
|
|
|
// Close menu if a link is clicked
|
|
const mobileNavLinks = mobileMenu.querySelectorAll('a');
|
|
mobileNavLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
mobileMenu.classList.remove('translate-x-0');
|
|
mobileMenu.classList.add('-translate-x-full');
|
|
});
|
|
});
|
|
}
|
|
});
|