`;
});
container.innerHTML = html;
}
groupPostsByCategory() {
return this.posts.reduce((acc, post) => {
const category = post.category || 'Uncategorized';
if (!acc[category]) {
acc[category] = [];
}
acc[category].push(post);
return acc;
}, {});
}
scrollCategory(categoryId, direction) {
const track = document.getElementById(`track-${categoryId}`);
if (!track) return;
const cardWidth = 280 + 16;
const visibleWidth = track.parentElement.clientWidth;
const scrollAmount = Math.floor(visibleWidth / cardWidth) * cardWidth;
const currentTransform = track.style.transform || 'translateX(0px)';
const match = currentTransform.match(/-?\d+/);
const currentX = match ? parseInt(match[0], 10) : 0;
let newX = direction === 'next' ? currentX - scrollAmount : currentX + scrollAmount;
const maxScroll = -(track.scrollWidth - visibleWidth);
newX = Math.max(maxScroll, Math.min(0, newX));
track.style.transform = `translateX(${newX}px)`;
}
async openPost(postId) {
this.scrollPosition = window.scrollY;
document.body.classList.add('modal-open');
const wrapper = document.querySelector('.immersion-gateway-wrapper');
if (wrapper) wrapper.style.top = `-${this.scrollPosition}px`;
const newUrl = `${window.location.pathname}?post=${postId}`;
history.pushState({ postId }, '', newUrl);
try {
const response = await fetch(`/wp-json/wp/v2/gateway-content/${postId}?_embed`);
if (!response.ok) throw new Error('Post not found');
const post = await response.json();
this.selectedPost = {
id: post.id,
title: post.title.rendered,
content: post.content.rendered,
date: new Date(post.date).toLocaleDateString(),
thumbnailUrl: post._embedded?.['wp:featuredmedia']?.[0]?.source_url || null,
category: post._embedded?.['wp:term']?.[0]?.[0]?.name || 'Uncategorized',
relatedPosts: [] // Optional: You can fetch related posts based on category here
};
this.renderModal();
this.modal.style.display = 'block';
const closeBtn = this.modal.querySelector('.modal-close');
if (closeBtn) closeBtn.focus();
} catch (error) {
console.error('Failed to load post:', error);
this.closePost();
}
}
closePost() {
const baseUrl = window.location.pathname;
history.pushState({}, '', baseUrl);
this.modal.style.display = 'none';
this.selectedPost = null;
document.body.classList.remove('modal-open');
const wrapper = document.querySelector('.immersion-gateway-wrapper');
if (wrapper) wrapper.style.top = '0';
setTimeout(() => {
window.scrollTo(0, this.scrollPosition);
}, 0);
}
renderModal() {
if (!this.selectedPost) return;
const modalBody = this.modal.querySelector('.modal-body');
if (!modalBody) return;
modalBody.innerHTML = `
${this.escapeHtml(this.selectedPost.title)}
${this.selectedPost.category}
•
${this.selectedPost.date}
${this.selectedPost.content}
`;
}
setupEventListeners() {
const closeBtn = this.modal.querySelector('.modal-close');
const backdrop = this.modal.querySelector('.modal-backdrop');
if (closeBtn) closeBtn.addEventListener('click', () => this.closePost());
if (backdrop) backdrop.addEventListener('click', () => this.closePost());
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && this.selectedPost) {
this.closePost();
}
});
window.addEventListener('popstate', () => {
const urlParams = new URLSearchParams(window.location.search);
const postId = urlParams.get('post');
if (postId && !this.selectedPost) {
this.openPost(Number(postId));
} else if (!postId && this.selectedPost) {
this.closePost();
}
});
}
handleInitialURL() {
const urlParams = new URLSearchParams(window.location.search);
const postId = urlParams.get('post');
if (postId) setTimeout(() => this.openPost(Number(postId)), 100);
}
integrateWithSliderRevolution() {
setTimeout(() => {
const sliderElements = document.querySelectorAll('.tp-caption, .tp-button, [data-post-id]');
sliderElements.forEach(element => {
const postId = element.getAttribute('data-post-id');
if (postId) {
element.addEventListener('click', (e) => {
e.preventDefault();
this.openPost(Number(postId));
});
}
});
}, 1000);
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
getPlaceholderImage(title) {
return `/wp-content/themes/your-theme/images/placeholder.jpg`;
}
}
window.gateway = new ImmersionGatewayEnhanced();
