Adds an expando button to show the first few comments under posts on old.reddit.com, with a next button, and RES dark mode support.
// ==UserScript==
// @name Old Reddit Comment Expando
// @namespace http://tampermonkey.net/
// @version 1.6
// @description Adds an expando button to show the first few comments under posts on old.reddit.com, with a next button, and RES dark mode support.
// @author greenwithenvy
// @include *.reddit.com/*
// @include *./reddit.com/user/*/submitted
// @license WTFPL
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
GM_addStyle(`
.comment-expando {
cursor: pointer;
color: #888;
margin-right: 4px;
font-size: 10px;
font-weight: bold;
}
.comment-preview {
margin-top: 5px;
padding: 5px;
border-left: 2px solid #0079d3;
background: #f6f7f8;
font-size: 12px;
color: #1a1a1b;
}
.comment-next {
display: block;
margin-top: 5px;
cursor: pointer;
color: #ff4500;
font-size: 12px;
}
.comment-loading {
color: #ff4500;
font-size: 14px;
text-align: center;
}
body.res-nightmode .comment-preview {
background: #1a1a1b;
color: #d7dadc;
border-left: 2px solid #ff4500;
}
.comment-author {
font-weight: bold;
color: #0079d3;
cursor: pointer;
}
body.res-nightmode .comment-author {
color: #ffb000;
}
`);
document.querySelectorAll('.thing.link').forEach(post => {
let postUrl = post.querySelector('a.comments')?.href;
if (!postUrl) return;
let expandoBtn = document.createElement('span');
expandoBtn.textContent = '[+ preview comments]';
expandoBtn.className = 'comment-expando';
expandoBtn.addEventListener('click', function() {
if (expandoBtn.nextSibling && expandoBtn.nextSibling.classList.contains('comment-preview')) {
expandoBtn.nextSibling.remove();
expandoBtn.textContent = '[+ preview comments]';
return;
}
loadComments(expandoBtn, postUrl);
});
post.querySelector('.flat-list.buttons')?.prepend(expandoBtn);
});
function loadComments(expandoBtn, postUrl) {
let loadingText = document.createElement('div');
loadingText.className = 'comment-loading';
loadingText.textContent = 'Loading comments...';
expandoBtn.after(loadingText);
GM_xmlhttpRequest({
method: 'GET',
url: postUrl + '.json',
onload: function(response) {
loadingText.remove();
let data = JSON.parse(response.responseText);
let comments = data[1].data.children.filter(c => c.kind === "t1").map(c => c.data);
let previewDiv = document.createElement('div');
previewDiv.className = 'comment-preview';
if (comments.length) {
let currentCommentIndex = 0;
previewDiv.innerHTML = formatComment(comments[currentCommentIndex], postUrl);
let nextBtn = document.createElement('span');
nextBtn.textContent = '[next]';
nextBtn.className = 'comment-next';
nextBtn.addEventListener('click', function() {
currentCommentIndex = (currentCommentIndex + 1) % comments.length;
previewDiv.innerHTML = formatComment(comments[currentCommentIndex], postUrl);
previewDiv.appendChild(nextBtn);
});
previewDiv.appendChild(nextBtn);
} else {
previewDiv.innerHTML = '<p>No comments yet.</p>';
}
expandoBtn.textContent = '[- hide comments]';
expandoBtn.after(previewDiv);
}
});
}
function formatComment(comment, postUrl) {
let commentLink = `${postUrl}${comment.id}`;
let commentBody = comment.body.length > 500 ? comment.body.substring(0, 500) + '...' : comment.body;
let commentHtml = `<p><a href="${commentLink}" target="_blank" class="comment-author">${comment.author}</a>: ${commentBody}</p>`;
return commentHtml;
}
})();