reddit-tweaks-ffe/popup/popup.js

(function () {
  "use strict";

  var picker = null;
  var activeSwatchEl = null;
  var saveDebounceTimer = null;

  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 colorToHex(val) {
    if (!val) return "#ffffff";
    return val;
  }

  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("darkMode").value = settings.darkMode;

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

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

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

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

  function addSubredditEntry(name, modeColors) {
    var list = document.getElementById("subredditList");
    var entry = document.createElement("div");
    entry.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 || "";

    var removeBtn = document.createElement("button");
    removeBtn.className = "btn-remove";
    removeBtn.textContent = "\u00d7";
    removeBtn.addEventListener("click", function () {
      closePicker();
      entry.remove();
      saveFromControls();
    });

    header.appendChild(nameInput);
    header.appendChild(removeBtn);

    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, colorToHex(lightColors.bg));
    bgSwatch.title = "Background";

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

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

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

    entry._colorState = {
      light: { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) },
      dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
    };
    entry._hadOverride = {
      light: !!(modeColors && modeColors.light),
      dark: !!(modeColors && modeColors.dark),
    };
    entry._dirtyModes = { light: false, dark: false };

    modeSelect.addEventListener("change", function () {
      closePicker();
      var prev = modeSelect.value === "dark" ? "light" : "dark";
      entry._dirtyModes[prev] = true;
      entry._colorState[prev] = { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) };
      var next = entry._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 () {
          entry._dirtyModes[modeSelect.value] = true;
        });
      });
    });

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

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

    entry._nameInput = nameInput;
    entry._bgSwatch = bgSwatch;
    entry._borderSwatch = borderSwatch;
    entry._textSwatch = textSwatch;
    entry._modeSelect = modeSelect;

    list.appendChild(entry);
  }

  function collectSubredditOverrides() {
    var overrides = {};
    var entries = document.querySelectorAll(".subreddit-entry");
    entries.forEach(function (entry) {
      var name = entry._nameInput.value.trim().replace(/^r\//, "");
      if (!name) return;

      var currentMode = entry._modeSelect.value;
      entry._colorState[currentMode] = {
        bg: getColorValue(entry._bgSwatch),
        border: getColorValue(entry._borderSwatch),
        text: getColorValue(entry._textSwatch),
      };

      var entryOverrides = {};
      if (entry._hadOverride.light || entry._dirtyModes.light) {
        entryOverrides.light = entry._colorState.light;
      }
      if (entry._hadOverride.dark || entry._dirtyModes.dark) {
        entryOverrides.dark = entry._colorState.dark;
      }

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

  function renderPopupPresets(presets) {
    var list = document.getElementById("presetList");
    list.innerHTML = "";
    for (var i = 0; i < presets.length; i++) {
      (function (index) {
        var p = presets[index];
        var badge = document.createElement("span");
        badge.className = "rt-preset-badge";
        badge.style.background = p.bg;
        badge.style.borderColor = p.border;
        badge.style.color = p.text;
        badge.textContent = "Aa";
        badge.title = "Click to apply to light subreddit colors";
        badge.addEventListener("click", function () {
          setColorValue(document.getElementById("light.subredditBgColor"), p.bg);
          setColorValue(document.getElementById("light.subredditBorderColor"), p.border);
          setColorValue(document.getElementById("light.subredditTextColor"), p.text);
          closePicker();
          saveFromControls();
        });

        var del = document.createElement("span");
        del.className = "rt-preset-delete";
        del.textContent = "\u00d7";
        del.addEventListener("click", function (e) {
          e.stopPropagation();
          deletePopupPreset(index);
        });
        badge.appendChild(del);
        list.appendChild(badge);
      })(i);
    }
  }

  async function addPopupPreset() {
    var preset = {
      bg: getColorValue(document.getElementById("light.subredditBgColor")),
      border: getColorValue(document.getElementById("light.subredditBorderColor")),
      text: getColorValue(document.getElementById("light.subredditTextColor")),
    };
    var settings = await window.RedditTweaks.loadSettings();
    var presets = settings.colorPresets || [];
    presets.push(preset);
    settings.colorPresets = presets;
    await window.RedditTweaks.saveSettings(settings);
    renderPopupPresets(presets);
  }

  async function deletePopupPreset(index) {
    var settings = await window.RedditTweaks.loadSettings();
    var presets = settings.colorPresets || [];
    presets.splice(index, 1);
    settings.colorPresets = presets;
    await window.RedditTweaks.saveSettings(settings);
    renderPopupPresets(presets);
  }

  async function saveFromControls() {
    var settings = {
      enabled: document.getElementById("enabled").checked,
      darkMode: document.getElementById("darkMode").value,
      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("darkMode").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();
})();