old-reddit-mobile.user.js

old-reddit-mobile.user.js

// ==UserScript==
// @name Reddit Tweaks
// @version 0.0.5
// @match *://old.reddit.com/*
// @downloadURL https://gist.githubusercontent.com/evanreichard/968eee1cf83da38c81c155fb775cf3c6/raw/old-reddit-mobile.user.js
// @grant GM.addStyle
// @grant GM.registerMenuCommand
// @grant GM.unregisterMenuCommand
// @grant GM.getValue
// @grant GM.setValue
// @grant GM_getValue
// @noframes
// @run-at document-start
// ==/UserScript==

let isEnabled = GM_getValue("enabled");

async function toggleStyle() {
  let currentlyEnabled = await GM.getValue("enabled", true);

  if (currentlyEnabled) {
    GM.unregisterMenuCommand("Style - Disable");
    GM.registerMenuCommand("Style - Enable", toggleStyle);
    window.location.reload(true);
  } else {
    applyStyle();
    applyDOMTweaks();
    GM.unregisterMenuCommand("Style - Enable");
    GM.registerMenuCommand("Style - Disable", toggleStyle);
  }

  isEnabled = !currentlyEnabled;
  await GM.setValue("enabled", isEnabled);
}

function applyStyle() {
  // Add Mobile Styles
  GM.addStyle(`

  :root {
    --color1: rgba(230, 240, 255, 0.7); /* Very light blue */
    --color2: rgba(255, 240, 230, 0.7); /* Very light peach */
    --color3: rgba(240, 255, 240, 0.7); /* Very light green */
    --color4: rgba(255, 240, 255, 0.7); /* Very light magenta */
  }
  
  /* Hide Headers, Siders, Promoted & Rank */
  .side,
  .footer-parent,
  .rank,
  #sr-header-area,
  .mobile-web-redirect-bar,
  .link.promotedlink,
  .infobar.listingsignupbar {
    display: none;
  }

  /* Override Last Clicked Style */
  .link.last-clicked {
    border: unset;
    border-bottom: 1px solid;
    background-color: #DDDDDD;
  }

  /* Comment Border Removal */
  .comment .child, .comment .showreplies {
    border-left: unset;
  }

  /* Comment Colors */
  .comment {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #bbbbbb;
    margin: 5px 0px;
    background-color: var(--color1);
    filter: hue-rotate(90deg);
  }

  .comment .entry {
    filter: hue-rotate(-90deg);
  }

  .link {
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
  }

  #header-bottom-right {
    top: 0;
    bottom: unset;
    border-bottom-left-radius: 7px;
    border-top-left-radius: unset;
  }

  #header-bottom-left {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .tabmenu {
    width: 100%;
    display: flex;
    margin-bottom: 2px;
  }

  .tabmenu li a {
    padding: 2px 15px 2px 15px;
  }

  .pagename, .tabmenu {
    align-content: end;
  }

  .expando .md {
    max-width: unset;
  }

  .nextprev {
    display: flex;
    justify-content: center;
    gap: 100px;
  }

  .nextprev a {
    height: 30px;
    display: block;
    width: 100px;
    text-align: center;
    align-content: center;
  }

  .nextprev .separator {
    display: none;
  }
  `);

  // Enable Better Mobile Scaling
  let metaViewportElement = document.createElement("meta");
  metaViewportElement.setAttribute("name", "viewport");
  metaViewportElement.setAttribute(
    "content",
    "width=device-width, initial-scale=0.9",
  );
  document.head.appendChild(metaViewportElement);

  // Remove Subreddit Style
  document.head.querySelector("[ref=applied_subreddit_stylesheet]")?.remove();
}

function applyDOMTweaks() {
  // Remove Subreddit Header Image
  let aElem = document.querySelector("#header-bottom-left a");
  if (aElem) {
    aElem.outerHTML = `<a href="/" id="header-img" class="default-header" title="">reddit.com</a>`;
  }

  // Move Expando -> Full Width
  Array.from(document.querySelectorAll(".expando")).forEach((item) => {
    item.parentElement?.parentElement?.appendChild(item);
  });

  // Remove Pagination Text
  let allNodes = document.querySelector(".nextprev")?.childNodes || [];
  if (allNodes.length > 0 && allNodes[0].textContent === "view more: ")
    allNodes[0].remove();
}

// Expand / Collapse on Comment Click
document.addEventListener("click", (evt) => {
  if (!isEnabled) return;

  const isExpand = evt.target.classList.contains("expand");
  if (isExpand) return;

  const foundComment = evt.target.closest(".comment");
  if (!foundComment) return;

  const foundExpander = foundComment.querySelector(".expand");
  if (!foundExpander) return;
  foundExpander.click();
});

// Post List Thumbnail Click -> Expand
document.addEventListener("click", (evt) => {
  let targetElement;
  if (evt.target.classList.contains("thumbnail")) {
    targetElement = evt.target;
  } else if (evt.target.parentElement.classList.contains("thumbnail")) {
    targetElement = evt.target.parentElement;
  }

  if (!targetElement) return;

  evt.preventDefault();

  const foundExpander =
    targetElement.parentElement.querySelector(".expando-button");
  if (!foundExpander) return;
  foundExpander.click();
});

if (isEnabled === true) {
  applyStyle();
  document.addEventListener("DOMContentLoaded", applyDOMTweaks);
  GM.registerMenuCommand("Style - Disable", toggleStyle);
} else {
  GM.registerMenuCommand("Style - Enable", toggleStyle);
}