☰

Reddit - Old School

Automatically redirects you to old.reddit.com when you're on the atrocious new site. Also enables smooth scrolling for image expansion with increased click areas and left/right arrow key navigation.

当前为 2019-07-18 提交的版本，查看 最新版本。

// ==UserScript==
// @name     Reddit - Old School
// @version  1.3
// @grant    none
// @include  https://*.reddit.com/*
// @namespace  selbi
// @description Automatically redirects you to old.reddit.com when you're on the atrocious new site. Also enables smooth scrolling for image expansion with increased click areas and left/right arrow key navigation.
// ==/UserScript==

////////////////////////

// Entry Point
let url = window.location.href;
if (url.includes("old.reddit.com")) {
  if (url.includes("/comments/")) {
    redditScrollToComments();    
  } else {
    redditScrollToPost();
  }
} else {
  redditRedirectToOld();
}

////////////////////////

// Redirect
function redditRedirectToOld() {
  url = url.replace("//www.", "//old.");
  window.location.href = url;
}

////////////////////////

// Global variable to keep track of the currently selected post
let currentPost = null;

// Scrolling
function redditScrollToComments() {
  document.querySelector(".commentarea .sitetable").addEventListener('click', function(event) {
    let targetElem = event.target;
    if (isIgnoredElem(targetElem) || window.getSelection().toString() !== "") {
      return;
    }
    let entry = findParentElemByClass(targetElem, "entry", 5);
    if (entry !== null) {
      entry.querySelector(".expand").click();
      scrollToY(entry);
    }
  });
}

function redditScrollToPost() {
  document.getElementById("siteTable").addEventListener('click', function(event) {
    let targetElem = event.target;
    scrollToTarget(targetElem);
  });
}

function scrollToTarget(targetElem) {
  if (targetElem.classList.contains("expando-button")) {
    scrollToY(targetElem.parentElement);
  } else {
    let entry = findParentElemByClass(targetElem, "entry", 4);
    if (entry !== null) {
      entry.querySelector(".expando-button").click();
      currentPost = entry;
    }
  }
}

function findParentElemByClass(elem, className, maxSearchDepth) {
  if (maxSearchDepth <= 0) {
    return null; 
  } else if (elem.classList.contains(className)) {
    return elem; 
  }
  return findParentElemByClass(elem.parentElement, className, maxSearchDepth - 1);
}

function scrollToY(elem) {
  let scroll = elem.getBoundingClientRect().top + window.scrollY;
  window.scroll({
    top: scroll,
    left: 0,
    behavior: 'smooth'
  });
}

// CSS for the scrolling
addGlobalStyle(`
  .entry:hover, .res-nightmode .entry.res-selected:hover {
    background-color: rgba(255,255,255, 0.1) !important;
    cursor: pointer;
  }
`);

function addGlobalStyle(css) {
  let head, style;
  head = document.getElementsByTagName('head')[0];
  if (!head) return;
  style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = css;
  head.appendChild(style);
}

const IGNORED_TAG_TYPES = ["a", "textarea", "input"];
function isIgnoredElem(elem) {
  let tag = elem.tagName.toLowerCase();
  return IGNORED_TAG_TYPES.includes(tag);
}

////////////////////////

// Arrow Keys Navigation
const ARR_UP    = '38';
const ARR_DOWN  = '40';
const ARR_LEFT  = '37';
const ARR_RIGHT = '39';

document.onkeydown = function browseContent(e) {
  // Fetch the key code and only allow left/right
  let key = e.keyCode;
  if (key != ARR_RIGHT && key != ARR_LEFT) {
  	return; 
  }
  
  // Don't scroll the page if we're currently in a textbox
  if (isIgnoredElem(document.activeElement)) {
    return;
  }
  
  // If no post is set yet, jump to the very top one
  if (currentPost === null) {
    scrollToTarget(document.querySelector(".sitetable .entry"));
    return;
  }
  
  // Find the parent container for the post
  let post = findParentElemByClass(currentPost, "thing", 2);
  
  
  // Set the relative browsing methods depending on whether left or right was pressed
  let sibling, child;
  if (key == ARR_RIGHT) {
    sibling = function(post) {return post.nextElementSibling;}
    child = function(post) {return post.firstChild;}
  } else if (key == ARR_LEFT) {
    sibling = function(post) {return post.previousElementSibling;}
    child = function(post) {return post.lastChild;}
  }
  
  // Find the new sibling post relative to the currently opened one
  // (Plus some fluff to make page transitions seamless and skipping over non-expandable posts)
  do {
    let siblingPost = sibling(post);
    if (siblingPost === null) {
      post = post.parentElement;
    } else if (siblingPost.classList.contains("sitetable")) {
      post = child(siblingPost);
    } else {
      post = siblingPost; 
    }
  } while (!post.classList.contains("thing") || !post.querySelector(".expando-button") || post.classList.contains("promoted"));

  // Close the previous post, if it was still open
  let expando = currentPost.querySelector(".expando-button");
  if (expando.classList.contains("expanded")) {
    expando.click();
  }
  // Open the new post and scorll to it
  let scrollTarget = post.querySelector(".entry");
  scrollToTarget(scrollTarget);
}

////////////////////////