reddit-tweaks-ffe/popup/popup.js

(function () {
  "use strict";

  var picker = null;
  var activeSwatchEl = null;
  var saveDebounceTimer = null;
  var subredditEntries = [];

  var COLOR_KEYS = [
    "light.subredditBgColor",
    "light.subredditBorderColor",
    "light.subredditTextColor",
    "light.commentsBgColor",
    "light.commentsBorderColor",
    "light.commentsTextColor",
    "dark.subredditBgColor",
    "dark.subredditBorderColor",
    "dark.subredditTextColor",
    "dark.commentsBgColor",
    "dark.commentsBorderColor",
    "dark.commentsTextColor",
  ];

  function getColorValue(el) {
    return el.dataset.value || "#ffffff";
  }

  function setColorValue(el, val) {
    el.dataset.value = val;
    el.style.backgroundColor = val;
  }

  function debouncedSave() {
    clearTimeout(saveDebounceTimer);
    saveDebounceTimer = setTimeout(saveFromControls, 200);
  }

  function openPickerForSwatch(swatchEl, onBeforeChange) {
    if (!picker) {
      picker = window.RedditTweaks.colorPicker.create();
    }

    if (picker.isOpen() && activeSwatchEl === swatchEl) {
      closePicker();
      return;
    }
    closePicker();

    activeSwatchEl = swatchEl;
    var parent = swatchEl.closest("label") || swatchEl.parentNode;
    parent.parentNode.insertBefore(picker.el, parent.nextSibling);

    picker.open(getColorValue(swatchEl), function (hex) {
      setColorValue(swatchEl, hex);
      if (onBeforeChange) onBeforeChange();
      debouncedSave();
    });
  }

  function closePicker() {
    if (picker && picker.isOpen()) picker.close();
    activeSwatchEl = null;
  }

  function populateControls(settings) {
    document.getElementById("enabled").checked = settings.enabled;
    document.getElementById("badgeLayout").checked = settings.badgeLayout;
    document.getElementById("fontOverride").checked = settings.fontOverride;
    document.getElementById("darkMode").value = settings.darkMode;
    document.getElementById("cardLayout").checked = settings.cardLayout;
    document.getElementById("cardDensity").value = settings.cardDensity;
    document.getElementById("cardBackground").value = settings.cardBackground;
    document.getElementById("cardGap").value = String(settings.cardGap);

    COLOR_KEYS.forEach(function (key) {
      var el = document.getElementById(key);
      if (el) setColorValue(el, settings[key] || "#ffffff");
    });

    renderSubredditOverrides(settings.subredditColors || {});
  }

  function renderSubredditOverrides(overrides) {
    var list = document.getElementById("subredditList");
    list.innerHTML = "";
    subredditEntries = [];

    Object.entries(overrides).forEach(function (pair) {
      addSubredditEntry(pair[0], pair[1]);
    });
  }

  function addSubredditEntry(name, modeColors) {
    var list = document.getElementById("subredditList");
    var el = document.createElement("div");
    el.className = "subreddit-entry";

    var header = document.createElement("div");
    header.className = "subreddit-entry-header";

    var nameInput = document.createElement("input");
    nameInput.type = "text";
    nameInput.placeholder = "subreddit";
    nameInput.value = name || "";

    header.appendChild(nameInput);

    var modeRow = document.createElement("div");
    modeRow.className = "subreddit-entry-mode";

    var modeSelect = document.createElement("select");
    modeSelect.innerHTML = '<option value="light">Light</option><option value="dark">Dark</option>';
    modeSelect.value = "light";
    modeRow.appendChild(modeSelect);

    var colorsDiv = document.createElement("div");
    colorsDiv.className = "subreddit-entry-colors";

    var lightColors = modeColors && modeColors.light ? modeColors.light : {};
    var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};

    var bgSwatch = document.createElement("div");
    bgSwatch.className = "rt-color-swatch";
    setColorValue(bgSwatch, lightColors.bg || "#ffffff");
    bgSwatch.title = "Background";

    var borderSwatch = document.createElement("div");
    borderSwatch.className = "rt-color-swatch";
    setColorValue(borderSwatch, lightColors.border || "#ffffff");
    borderSwatch.title = "Border";

    var textSwatch = document.createElement("div");
    textSwatch.className = "rt-color-swatch";
    setColorValue(textSwatch, lightColors.text || "#ffffff");
    textSwatch.title = "Text";

    colorsDiv.appendChild(bgSwatch);
    colorsDiv.appendChild(borderSwatch);
    colorsDiv.appendChild(textSwatch);

    var state = {
      nameInput: nameInput,
      bgSwatch: bgSwatch,
      borderSwatch: borderSwatch,
      textSwatch: textSwatch,
      modeSelect: modeSelect,
      colorState: {
        light: { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) },
        dark: { bg: darkColors.bg || "#ffffff", border: darkColors.border || "#ffffff", text: darkColors.text || "#ffffff" },
      },
      hadOverride: {
        light: !!(modeColors && modeColors.light),
        dark: !!(modeColors && modeColors.dark),
      },
      dirtyModes: { light: false, dark: false },
    };
    subredditEntries.push(state);

    var removeBtn = document.createElement("button");
    removeBtn.className = "btn-remove";
    removeBtn.textContent = "\u00d7";
    removeBtn.addEventListener("click", function () {
      closePicker();
      var idx = subredditEntries.indexOf(state);
      if (idx !== -1) subredditEntries.splice(idx, 1);
      el.remove();
      saveFromControls();
    });
    header.appendChild(removeBtn);

    modeSelect.addEventListener("change", function () {
      closePicker();
      var prev = modeSelect.value === "dark" ? "light" : "dark";
      state.dirtyModes[prev] = true;
      state.colorState[prev] = { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) };
      var next = state.colorState[modeSelect.value];
      setColorValue(bgSwatch, next.bg);
      setColorValue(borderSwatch, next.border);
      setColorValue(textSwatch, next.text);
    });

    [bgSwatch, borderSwatch, textSwatch].forEach(function (swatch) {
      swatch.addEventListener("click", function () {
        openPickerForSwatch(swatch, function () {
          state.dirtyModes[modeSelect.value] = true;
        });
      });
    });

    nameInput.addEventListener("change", function () {
      saveFromControls();
    });

    el.appendChild(header);
    el.appendChild(modeRow);
    el.appendChild(colorsDiv);

    list.appendChild(el);
  }

  function collectSubredditOverrides() {
    var overrides = {};
    subredditEntries.forEach(function (state) {
      var name = state.nameInput.value.trim().replace(/^r\//, "");
      if (!name) return;

      var currentMode = state.modeSelect.value;
      state.colorState[currentMode] = {
        bg: getColorValue(state.bgSwatch),
        border: getColorValue(state.borderSwatch),
        text: getColorValue(state.textSwatch),
      };

      var entryOverrides = {};
      if (state.hadOverride.light || state.dirtyModes.light) {
        entryOverrides.light = state.colorState.light;
      }
      if (state.hadOverride.dark || state.dirtyModes.dark) {
        entryOverrides.dark = state.colorState.dark;
      }

      if (entryOverrides.light || entryOverrides.dark) {
        overrides[name] = entryOverrides;
      }
    });
    return overrides;
  }

  function renderPopupPresets(presets) {
    window.RedditTweaks.presets.render(
      document.getElementById("presetList"),
      presets,
      function (p) {
        setColorValue(document.getElementById("light.subredditBgColor"), p.bg);
        setColorValue(document.getElementById("light.subredditBorderColor"), p.border);
        setColorValue(document.getElementById("light.subredditTextColor"), p.text);
        closePicker();
        saveFromControls();
      },
      function (index) {
        window.RedditTweaks.presets.delete(index, renderPopupPresets);
      }
    );
  }

  function addPopupPreset() {
    window.RedditTweaks.presets.save(
      {
        bg: getColorValue(document.getElementById("light.subredditBgColor")),
        border: getColorValue(document.getElementById("light.subredditBorderColor")),
        text: getColorValue(document.getElementById("light.subredditTextColor")),
      },
      renderPopupPresets
    );
  }

  async function saveFromControls() {
    var settings = {
      enabled: document.getElementById("enabled").checked,
      badgeLayout: document.getElementById("badgeLayout").checked,
      fontOverride: document.getElementById("fontOverride").checked,
      darkMode: document.getElementById("darkMode").value,
      cardLayout: document.getElementById("cardLayout").checked,
      cardDensity: document.getElementById("cardDensity").value,
      cardBackground: document.getElementById("cardBackground").value,
      cardGap: parseInt(document.getElementById("cardGap").value, 10),
      subredditColors: collectSubredditOverrides(),
    };

    COLOR_KEYS.forEach(function (key) {
      var el = document.getElementById(key);
      if (el) settings[key] = getColorValue(el);
    });

    try {
      await window.RedditTweaks.saveSettings(settings);
    } catch (err) {
      console.error("Reddit Tweaks: failed to save settings", err);
    }
  }

  async function init() {
    var settings = await window.RedditTweaks.loadSettings();
    populateControls(settings);

    document.getElementById("enabled").addEventListener("change", saveFromControls);
    document.getElementById("badgeLayout").addEventListener("change", saveFromControls);
    document.getElementById("fontOverride").addEventListener("change", saveFromControls);
    document.getElementById("darkMode").addEventListener("change", saveFromControls);
    document.getElementById("cardLayout").addEventListener("change", saveFromControls);
    document.getElementById("cardDensity").addEventListener("change", saveFromControls);
    document.getElementById("cardBackground").addEventListener("change", saveFromControls);
    document.getElementById("cardGap").addEventListener("change", saveFromControls);

    COLOR_KEYS.forEach(function (key) {
      var el = document.getElementById(key);
      if (el) {
        el.addEventListener("click", function () {
          openPickerForSwatch(el);
        });
      }
    });

    renderPopupPresets(settings.colorPresets || []);
    document.getElementById("addPreset").addEventListener("click", addPopupPreset);

    document.getElementById("addSubreddit").addEventListener("click", function () {
      closePicker();
      addSubredditEntry("", {});
    });

    document.getElementById("resetLight").addEventListener("click", async function () {
      closePicker();
      var settings = await window.RedditTweaks.loadSettings();
      var DEFAULTS = window.RedditTweaks.DEFAULTS;
      Object.keys(DEFAULTS).forEach(function (key) {
        if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
      });
      await window.RedditTweaks.saveSettings(settings);
      populateControls(settings);
    });

    document.getElementById("resetDark").addEventListener("click", async function () {
      closePicker();
      var settings = await window.RedditTweaks.loadSettings();
      var DEFAULTS = window.RedditTweaks.DEFAULTS;
      Object.keys(DEFAULTS).forEach(function (key) {
        if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
      });
      await window.RedditTweaks.saveSettings(settings);
      populateControls(settings);
    });

    document.getElementById("resetAll").addEventListener("click", async function () {
      if (confirm("Reset all settings to defaults?")) {
        closePicker();
        await window.RedditTweaks.resetSettings();
        var settings = await window.RedditTweaks.loadSettings();
        populateControls(settings);
      }
    });
  }

  init();
})();