// ==UserScript==
// @name Trim Reddit
// @namespace stgeorge
// @description Trimmer for Reddit
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @match *://old.reddit.com/*
// @match *://www.reddit.com/*
// @grant GM.xmlHttpRequest
// @grant GM.getValue
// @grant GM.setValue
// @grant GM.deleteValue
// @version 2.5
// @license MIT
// @run-at document-end
// ==/UserScript==
(() => {
let side = null;
const OPT_NEW_LINK = true;
// 0 => load links in same tab
// 1 => image links in new tab
// 2 => all links in new tab.
const OPT_LINK_LOAD = 2;
const IMG_LINKS = $([
'imgur.com',
'i.imgur.com',
'preview.redd.it',
'youtube.com']);
function trim() {
$(`<style>
.selected .choice {
color: red !important;
}
.choice {
color: black !important;
}
#search {
text-align: center;
padding: 5px;
position: revert !important;
margin-top: 0 !important;
}
.tabmenu {
margin: 10px 0 10px 0;
}
.tabmenu li a {
font-weight: normal !important;
}
#body-wrapper {
display: flex;
background: white;
height: calc(100vh - 50px);
}
#header {
height: revert !important;
position: sticky !important;
font-size: 0.7rem;
background: white !important;
color: black !important;
border-bottom: solid 1px black !important;
}
#header * {
background-color: #fefefe !important;
color: black !important;
}
#newr {
color: red !important;
}
#header::after {
position: revert !important;
}
.thing {
background-color:white;
}
.link {
margin-right: revert !important;
}
body div.content {
margin: 5px !important;
}
.sitetable {
border-bottom: 0 !important;
border-left: 0 !important;
border-right:solid 1px #eeeeff !important;
margin-right: revert !important;
}
.linklisting.sitetable {
margin-right: 0 !important;
}
.listing-page #siteTable {
margin-right: 0;
}
#siteTable::before {
margin: 5px 0 5px 0 !important;
}
.side * {
font-size: 16px !important;
}
.side a {
color: revert !important;
background-color: revert !important;
}
.side {
background: url('') !important;
background-color: transparent;
box-shadow: revert;
width:100% !important;
margin:5px;
overflow-y:auto;
padding-top: 0;
}
.side::before {
content: revert !important;
background: revert !important;
}
.side:after {
content: '';
}
.side .commentarea {
margin-right: revert !important;
}
.expando-button {
position: relative !important;
}
.md {
background: white !important;
}
div.md>blockquote>p {
position: inherit !important;
}
.content:before {
background-color: revert !important;
background-image: revert !important;
height:0px !important;
}
.clicked {
background-color: #f8fefe !important;
border: solid 1px black !important;
}
.ui-resizable-e {
cursor: e-resize;
width: 2px;
right: -1px;
top: 0;
bottom: 0;
background-color: blue;
}
#popup {
position: fixed;
top: 0;
left:0;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
.menuarea,a[name="content"] {
visibility:hidden;
display:none;
}
</style>`).appendTo('head');
let tabmenu = $('.tabmenu').detach();
$('.infobar').remove();
$('.footer-parent').remove();
$('#sr-header-area').siblings().remove();
let content = $('.content[role="main"]');
content.css({
width:'35%',
// height: '1000px',
'overflow-y': 'auto',
resize:'horizontal',
margin: '0',
});
//
// We make the right-hand side sidebar (.side) bigger and empty its
// contents. Then, we make the main pane (.content) thinner and
// use it show the list of articles. (We mark it as resizable horizontally
// so that it can be widened.) When an article is clicked on in
// the .content pane, we show its threaded comments in the .side pane.
//
// +----------------------------------------------------+
// | #header |
// +----------------------------------------------------+
// | #body-wrapper (new) |
// | +-------------+----------------------------------+ |
// | | .content | .side | |
// | |+-----------+| | |
// | || tabmenu || | |
// | |+-----------+| | |
// | || #search || Post and comments | |
// | |+-----------+| | |
// | || Post list || | |
// | || ... || | |
// | |+-----------+| | |
// | +-------------+----------------------------------+ |
// +----------------------------------------------------+
//
let wrapper = $('<div id="body-wrapper"></div>');
$('#header').after(wrapper);
wrapper.append(content);
let search = $('#search').detach();
let href = top.location.href;
subs = /r\/(\w+)\/$/i.exec(href);
if (subs.length > 1)
search.children('input[name="q"]').first().val('subreddit:'+subs[1]+' ');
content.prepend(search);
content.prepend(tabmenu);
side = $('.side');
side.empty();
wrapper.append(side);
let curbg = 'white';
let first = null;
retargetLinks($('.entry').add('.search-result'));
$('.entry a').add('.search-result a').add('a.title')
.each(function(k,v) {
let t = $(this).closest('.thing');
if (t.length == 0)
t = $(this).closest('.search-result');
let a = $(this);
let href = a.attr('href');
if (href.indexOf('/comments/') != -1) {
a.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
t.css({'background-color':'#ffeeee'});
t.addClass('clicked');
t.siblings().css({'background-color':curbg});
t.siblings().removeClass('clicked');
href = href.replace('www.reddit.com', 'old.reddit.com').
replace('//reddit.com', '//www.reddit.com');
(async () => {await GM.setValue('lastseen', href)})();
loadComment(href);
});
if (first === null && !t.hasClass('stickied')) {
first = a;
}
}
});
(async() => {
let last_seen = await GM.getValue('lastseen', null);
GM.deleteValue('lastseen');
let l = null;
if (last_seen) {
l = $('a[href="'+last_seen+'"]');
}
let to_show = (l && l.length > 0) ? l : first;
if (to_show) {
to_show.click();
}
})();
}
function retargetLinks(div) {
if (OPT_LINK_LOAD > 0) {
div.find('a').each(function(k,v) {
let anchor = $(this);
let href = anchor.attr('href');
if (!href) return true;
if (OPT_LINK_LOAD == 1) {
IMG_LINKS.each(function(x,y) {
if (href.indexOf('/'+y+'/') != -1) {
anchor.attr('rel','noopener');
anchor.attr('target','_blank');
return false;
}
});
} else if ((href.startsWith('http://') || href.startsWith('https://')) &&
href.indexOf('.reddit.com/') == -1) {
anchor.attr('rel','noopener');
anchor.attr('target','_blank');
}
});
}
}
function loadComment(u) {
GM.xmlHttpRequest({
method: "GET",
url: u+'?sort=new',
onload: function(response) {
side.html($.parseHTML(response.responseText));
let c = side.find('.content[role="main"]').detach();
side.empty();
side.append(c);
c.css({margin:'10px'});
side.find('.infobar').detach();
side.find('.thing .child .expand').click(); // Collapse sub-comments.
retargetLinks(side);
let url = document.URL;
if (url.indexOf('/user/') != -1) {
let first = null;
side.find('a[href="'+url+'"]').each(function(k,v) {
let a = $(this);
if (!first) first = a;
a.css({'color':'red', 'fontWeight':'bold'});
});
if (first) {
setTimeout(function() {
side.scrollTop(first.offset().top - 400);
}, 500);
}
} else {
setTimeout(function() {
$(document).scrollTop(0);
side.scrollTop(0);
}, 500);
}
}
});
}
function fixHeader() {
//
// If OPT_NEW_LINK is set, we add a 'new' link to to the header
// to toggle between old and new reddits.
if (OPT_NEW_LINK) {
let bars = $('#sr-bar');
let i = 0;
bars.find('li').each(function(k,v) {
if (i++ == 1) {
let li = $(this);
let x = li.clone(true);
let new_url = top.location.href.replace('old','www');
let a = x.find('a').first();
let span = x.find('span').first();
a.text('new');
a.attr('id', 'newr');
a.attr('href',new_url.indexOf('/') != -1 ? new_url : '/r/'+new_url);
a.attr('title', 'New Reddit');
span.before(a);
bars.prepend(x);
return false;
}
});
}
}
function addOldButton() {
//
// If we're in the 'new' reddit, add an 'Old' button to help
// us switch to old reddit.
//
if (document.URL.indexOf('www.reddit.com') != -1) {
let x = $('#email-verification-tooltip-id');
$('#email-verification-tooltip-id').
before($('<button title="Old Reddit" id="old-button" type="button">Old</button>'));
let old = $('#old-button');
old.css({
margin: '10px',
border: 'solid 1px #0079d3',
padding: '8px',
width: '120px',
'border-radius': '9999px',
color: '#0079d3',
'font-weight': 'bold',
});
old.on('click', function() {
top.location.hostname = 'old.reddit.com';
});
return;
}
}
// Main.
// The setTimeout is there to handle race conditions to run our
// script after reddit loads all its scripts. Doesn't seem to work
// always :-(
//
setTimeout(function() {
addOldButton();
// If we're already in the comments page, nothing more to do.
if (document.URL.indexOf('/comments/') == -1) {
trim();
fixHeader();
}
}, 1000);
})();