360 lines
12 KiB
JavaScript
360 lines
12 KiB
JavaScript
(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("badgeLayout").checked = settings.badgeLayout;
|
|
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,
|
|
badgeLayout: document.getElementById("badgeLayout").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("badgeLayout").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();
|
|
})();
|