reddit-tweaks-ffe/content/tweaks/cards.js

(function () {
  "use strict";

  function processPost(post) {
    if (post.classList.contains("rt-card")) return;
    post.classList.add("rt-card");

    var rank = post.querySelector(":scope > .rank");
    if (rank) {
      rank.classList.add("rt-rank-badge");
      post.appendChild(rank);
    }
  }

  function processPosts() {
    var posts = document.querySelectorAll("div.thing.link:not(.rt-card)");
    for (var i = 0; i < posts.length; i++) {
      processPost(posts[i]);
    }
  }

  function applyDarkMode(settings) {
    if (window.RedditTweaks.isDarkMode(settings)) {
      document.documentElement.classList.add("rt-dark");
    } else {
      document.documentElement.classList.remove("rt-dark");
    }
  }

  function applyBackground(settings) {
    if (settings.cardBackground === "shadcn") {
      document.documentElement.classList.add("rt-card-bg-shadcn");
    } else {
      document.documentElement.classList.remove("rt-card-bg-shadcn");
    }
  }

  function applyGap(settings) {
    var siteTable = document.getElementById("siteTable");
    if (siteTable) {
      siteTable.style.setProperty("--rt-card-gap", settings.cardGap + "px");
    }
  }

  var DENSITY_CLASSES = ["rt-density-cozy", "rt-density-modern", "rt-density-extra"];

  function applyDensity(settings) {
    var html = document.documentElement;
    for (var i = 0; i < DENSITY_CLASSES.length; i++) {
      html.classList.remove(DENSITY_CLASSES[i]);
    }
    var cls = "rt-density-" + (settings.cardDensity || "modern");
    html.classList.add(cls);
  }

  function initSelection() {
    document.addEventListener("mousedown", function (e) {
      var clickedCard = e.target.closest(".rt-card");
      var prev = document.querySelectorAll(".rt-card.rt-selected");
      for (var i = 0; i < prev.length; i++) {
        prev[i].classList.remove("rt-selected");
      }
      if (clickedCard) {
        clickedCard.classList.add("rt-selected");
      }
    });
  }

  function apply(settings) {
    document.documentElement.classList.add("rt-card-enabled");
    applyDarkMode(settings);
    applyBackground(settings);
    applyDensity(settings);
    applyGap(settings);
    processPosts();
    initSelection();
  }

  function updateSettings(settings) {
    applyDarkMode(settings);
    applyBackground(settings);
    applyDensity(settings);
    applyGap(settings);
  }

  window.RedditTweaks = window.RedditTweaks || {};
  window.RedditTweaks.cardTweak = {
    apply: apply,
    updateSettings: updateSettings,
    processNewPosts: processPosts,
  };
})();