Custom mastodon theming

mastodon_necroforger.user.js

// ==UserScript==
// @name         mastodon_necroforger
// @version      1.4
// @description  personalizing mastodon
// @author       Necroforger
// @match        *://mastodon.social/*
// @grant        none
// ==/UserScript==

(async function () {
  'use strict';

  // ======[ OPTIONS ]=========================
  const hideFirefoxScrollbars = true;
  // ==========================================

  const styleSheet = `
.column {
  width: 80vw;
}
article
, .detailed-status {
  resize: both;
  max-width: 600px;
  margin: 0px auto;
}
.account-gallery__item {
  max-width: 300px;
}
.column-header__wrapper {
  z-index: 100;
}
.blocker {
  width: 17px;
  position: absolute;
  z-index: 10;
  background-color: #282c37;
  height: 100%;
  right: 10px;
  pointer-events: none;
}
`;

  const styleScrollDisabled = `
  .scrollable { overflow: hidden; }
`;

  async function waitForDOMLoad() {
    return new Promise((resolve, reject) => {
      window.addEventListener("load", () => {
        resolve();
      });
    })
  }

  /**
   * Appends the style sheet with the given body to the document
   * @param {String} text style sheet
   */
  function addStyle(text) {
    let style = document.createElement('style');
    style.innerHTML = text;
    document.body.appendChild(style);
  }

  /**
   * unscroll attempts to hide the scrollbar of a scrollable window
   * @param {Node} elem 
   */
  function unscroll(elem) {
    // Ensure that a blocker isn't already present within the scrollable element
    if (elem.parentNode.querySelector(".blocker")) {
      return;
    }

    elem.style.overflowY = "scroll";
    elem.classList.add("unscrolled");

    let blocker = document.createElement('div');
    blocker.classList.add('blocker');
    console.log(blocker);

    // Ensure there is only one blocker present at a time
    if (!elem.parentNode.querySelector(".blocker")) {
      elem.parentNode.appendChild(blocker);
    }
  }

  async function sleep(t) {
    return new Promise((resolve) => setTimeout(resolve, t));
  }

  /**
   * waitForelements waits for elements to appear
   * @param {String} query query to search for
   * @returns {Promise<NodeList>}
   */
  async function waitForElements(query, time = 500) {
    return new Promise(async (resolve, reject) => {
      for (; ;) {
        let k = document.querySelectorAll(query);
        if (k.length != 0) {
          resolve(k);
          return;
        }
        await sleep(time); // Sleep for 500 milliseconds then try scanning again
      }
    });
  }

  addStyle(styleSheet);

  if (hideFirefoxScrollbars) {

    addStyle(styleScrollDisabled);

    (async function () {
      await waitForDOMLoad();

      // When a new scrollable element is found, attempt to hide the scrollbar
      for (; ;) {
        console.log("Looking for scrollable elements");
        let scrollables = await waitForElements(".scrollable:not(.unscrolled)")
        console.log("Found new scrollable elements, hiding scrollbars");
        scrollables.forEach(unscroll);
        await sleep(500);
      }
    })()
  }
})();