`;
document.body.appendChild(panel);
panel.querySelector('h4').addEventListener('click', () => {
panel.classList.toggle('mgo-minimized');
});
document.getElementById('mgo-compact-toggle').addEventListener('change', (e) => {
CONFIG.compactMode = e.target.checked;
rerender();
showStatus(e.target.checked ? 'Compact mode ON' : 'Compact mode OFF');
});
document.getElementById('mgo-collapse-all').addEventListener('click', () => {
commentsData.forEach(d => collapsedState.items.add(d.id));
collapsedState.save();
rerender();
showStatus('All collapsed');
});
document.getElementById('mgo-expand-all').addEventListener('click', () => {
collapsedState.items.clear();
collapsedState.save();
rerender();
showStatus('All expanded');
});
}
// Keyboard navigation - track by element reference, not index
let currentHighlighted = null;
function getVisibleComments() {
// Only return comments that are actually visible (not hidden by thread collapse)
return Array.from(document.querySelectorAll('.mgo-comment')).filter(c => c.style.display !== 'none');
}
function focusComment(commentEl) {
// Remove highlight from previous
if (currentHighlighted) {
currentHighlighted.classList.remove('mgo-highlighted');
}
// Highlight the selected one
if (commentEl && commentEl.style.display !== 'none') {
commentEl.classList.add('mgo-highlighted');
currentHighlighted = commentEl;
} else {
currentHighlighted = null;
}
}
function navigate(dir) {
const comments = getVisibleComments();
if (comments.length === 0) return;
// Find current position in visible list
let currentIndex = currentHighlighted ? comments.indexOf(currentHighlighted) : -1;
// If current is not in visible list (was hidden), start from beginning or end
if (currentIndex === -1) {
currentIndex = dir > 0 ? -1 : comments.length;
}
// Move in direction
let newIndex = currentIndex + dir;
if (newIndex < 0) newIndex = 0;
if (newIndex >= comments.length) newIndex = comments.length - 1;
// Update highlight
focusComment(comments[newIndex]);
}
function getCurrentComment() {
// Get current highlighted comment if it's still visible
if (currentHighlighted && currentHighlighted.style.display !== 'none') {
return currentHighlighted;
}
return null;
}
function setupKeyboard() {
document.addEventListener('keydown', (e) => {
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.isContentEditable) return;
switch (e.key) {
case 'j':
e.preventDefault();
navigate(1);
break;
case 'k':
e.preventDefault();
navigate(-1);
break;
case 'Enter':
e.preventDefault();
const current = getCurrentComment();
if (current) {
toggleCollapse(current);
}
break;
case 'x':
e.preventDefault();
document.getElementById('mgo-compact-toggle').click();
break;
case '?':
e.preventDefault();
document.querySelector('.mgo-control-panel').classList.toggle('mgo-minimized');
break;
}
});
}
// Track votes to prevent multiple clicks (reset on page reload)
const votedComments = new Map(); // commentId -> 'upvote' | 'downvote'
// Handle vote - optimistic UI update (max once per comment per session)
function handleVote(commentId, action) {
const previousVote = votedComments.get(commentId);
// Already voted same direction - ignore
if (previousVote === action) return;
const voteContainer = commentsContainer.querySelector(`.mgo-votes[data-comment-id="${commentId}"]`);
const countEl = voteContainer?.querySelector('.mgo-vote-count');
const commentData = commentsData.find(d => d.numericId === commentId);
// Optimistically update UI immediately
if (countEl) {
const currentCount = parseInt(countEl.textContent, 10) || 0;
let delta;
if (previousVote) {
// Switching vote direction: undo previous (+/-1) and apply new (+/-1) = +/-2
delta = action === 'upvote' ? 2 : -2;
} else {
// First vote on this comment
delta = action === 'upvote' ? 1 : -1;
}
countEl.textContent = currentCount + delta;
if (commentData) commentData.voteCount = currentCount + delta;
}
// Track this vote
votedComments.set(commentId, action);
// Fire API call (don't wait for response)
fetch(`/mgo_vote/comment/${commentId}/${action}`, {
method: 'GET',
credentials: 'same-origin'
}).then(response => {
if (response.ok) return response.json();
}).then(data => {
// If server returns actual count, use it (corrects any drift)
if (data?.count !== undefined && countEl) {
countEl.textContent = data.count;
if (commentData) commentData.voteCount = data.count;
}
}).catch(err => {
console.error('Vote error:', err);
});
}
// Setup click handlers on the comments container
function setupClickHandlers() {
if (!commentsContainer) return;
commentsContainer.addEventListener('click', (e) => {
const comment = e.target.closest('.mgo-comment');
// Handle collapse button click
if (e.target.classList.contains('mgo-collapse-btn')) {
e.preventDefault();
e.stopPropagation();
if (comment) toggleCollapse(comment);
return;
}
// Handle vote button click
const voteBtn = e.target.closest('.mgo-vote-btn');
if (voteBtn) {
e.preventDefault();
e.stopPropagation();
const votesContainer = voteBtn.closest('.mgo-votes');
const commentId = votesContainer?.dataset?.commentId;
const action = voteBtn.dataset.action;
if (commentId && action) {
handleVote(commentId, action);
}
return;
}
// Handle click on comment to focus it
if (comment && !e.target.closest('a') && !e.target.closest('button')) {
focusComment(comment);
}
});
}
// Persistent loading indicator
let loadingEl;
function showLoading(msg) {
if (!loadingEl) {
loadingEl = document.createElement('div');
loadingEl.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #00274c;
color: #ffcb05;
padding: 20px 30px;
border-radius: 8px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
z-index: 10002;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
`;
document.body.appendChild(loadingEl);
}
loadingEl.textContent = msg;
loadingEl.style.display = 'block';
}
function hideLoading() {
if (loadingEl) loadingEl.style.display = 'none';
}
// Main initialization - DOM rewrite approach
async function init() {
// Extract data from all existing comments first
const articles = Array.from(document.querySelectorAll('article.comment'));
if (articles.length === 0) return;
// Find the container that holds all comments by walking up from first article
// Look for .field--name-comment-forum or a container with .thread-wrapper children
let commentSection = articles[0].closest('.field--name-comment-forum');
if (!commentSection) {
// Find the common ancestor that contains thread-wrappers
commentSection = articles[0].closest('.region-content')?.querySelector('.field--name-comment-forum, .view-comments');
}
if (!commentSection) {
// Fallback: find parent that contains all articles
commentSection = articles[0].parentElement;
while (commentSection && commentSection.querySelectorAll('article.comment').length < articles.length) {
commentSection = commentSection.parentElement;
}
}
if (!commentSection) return;
// Load collapsed state
collapsedState.load();
// Inject styles
injectStyles();
// Extract comments from current page (page 0)
commentsData = articles.map(extractCommentData);
// Check if there are more pages to load
const totalPages = getTotalPages();
const viewConfig = getDrupalViewConfig();
if (totalPages > 1 && viewConfig) {
showLoading(`Loading comments... (1/${totalPages} pages)`);
// Fetch additional pages
const additionalComments = await fetchAdditionalPages(viewConfig, totalPages, showLoading);
commentsData = commentsData.concat(additionalComments);
hideLoading();
}
// Create new container for enhanced comments
commentsContainer = document.createElement('div');
commentsContainer.id = 'mgo-enhanced-comments';
// Render all comments
rerender();
// Hide original comments section and insert new one
commentSection.style.display = 'none';
commentSection.parentElement.insertBefore(commentsContainer, commentSection);
// Also hide the pager since we loaded all comments
const pager = document.querySelector('.pager');
if (pager) pager.style.display = 'none';
// Setup interactions
setupClickHandlers();
createControlPanel();
setupKeyboard();
console.log(`MGoBlog Enhance v2.10.0: Rendered ${commentsData.length} comments from ${totalPages} page(s)`);
}
// Run initialization
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();