feat: inline color popover with mode toggle, live preview, and save/reset
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
300
content/tweaks/color-popover.js
Normal file
300
content/tweaks/color-popover.js
Normal file
@@ -0,0 +1,300 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var popoverEl = null;
|
||||
var currentSubreddit = null;
|
||||
var currentAnchor = null;
|
||||
var editState = { light: null, dark: null };
|
||||
var selectedMode = "light";
|
||||
|
||||
var els = {};
|
||||
|
||||
function getHelpers() {
|
||||
return {
|
||||
isDarkMode: window.RedditTweaks.badgeTweak.isDarkMode,
|
||||
getColorPrefix: window.RedditTweaks.badgeTweak.getColorPrefix,
|
||||
};
|
||||
}
|
||||
|
||||
function hexValid(val) {
|
||||
return /^#[0-9a-f]{6}$/i.test(val);
|
||||
}
|
||||
|
||||
function colorToHex(val) {
|
||||
if (!val) return "#ffffff";
|
||||
return val;
|
||||
}
|
||||
|
||||
function createPopover() {
|
||||
var el = document.createElement("div");
|
||||
el.className = "rt-color-popover";
|
||||
|
||||
el.innerHTML = [
|
||||
'<div class="rt-popover-header">',
|
||||
' <span class="rt-popover-title"></span>',
|
||||
' <button class="rt-popover-close" type="button">\u00d7</button>',
|
||||
"</div>",
|
||||
'<div class="rt-popover-mode">',
|
||||
' <select class="rt-popover-mode-select">',
|
||||
' <option value="light">Light</option>',
|
||||
' <option value="dark">Dark</option>',
|
||||
" </select>",
|
||||
"</div>",
|
||||
'<div class="rt-popover-body">',
|
||||
' <div class="rt-popover-row" data-prop="bg">',
|
||||
' <span class="rt-popover-row-label">Background</span>',
|
||||
' <div class="rt-popover-row-inputs">',
|
||||
' <input type="color" class="rt-color-swatch">',
|
||||
' <input type="text" class="rt-color-hex" maxlength="7">',
|
||||
" </div>",
|
||||
" </div>",
|
||||
' <div class="rt-popover-row" data-prop="border">',
|
||||
' <span class="rt-popover-row-label">Border</span>',
|
||||
' <div class="rt-popover-row-inputs">',
|
||||
' <input type="color" class="rt-color-swatch">',
|
||||
' <input type="text" class="rt-color-hex" maxlength="7">',
|
||||
" </div>",
|
||||
" </div>",
|
||||
' <div class="rt-popover-row" data-prop="text">',
|
||||
' <span class="rt-popover-row-label">Text</span>',
|
||||
' <div class="rt-popover-row-inputs">',
|
||||
' <input type="color" class="rt-color-swatch">',
|
||||
' <input type="text" class="rt-color-hex" maxlength="7">',
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
'<div class="rt-popover-preview">',
|
||||
' <span class="rt-badge rt-badge--subreddit rt-popover-preview-badge" style="padding-right:6px"></span>',
|
||||
"</div>",
|
||||
'<div class="rt-popover-footer">',
|
||||
' <button class="rt-btn-reset" type="button">Reset Default</button>',
|
||||
' <div class="rt-popover-footer-right">',
|
||||
' <button class="rt-btn-cancel" type="button">Cancel</button>',
|
||||
' <button class="rt-btn-save" type="button">Save</button>',
|
||||
" </div>",
|
||||
"</div>",
|
||||
].join("\n");
|
||||
|
||||
document.body.appendChild(el);
|
||||
popoverEl = el;
|
||||
|
||||
els.title = el.querySelector(".rt-popover-title");
|
||||
els.closeBtn = el.querySelector(".rt-popover-close");
|
||||
els.modeSelect = el.querySelector(".rt-popover-mode-select");
|
||||
els.preview = el.querySelector(".rt-popover-preview-badge");
|
||||
els.saveBtn = el.querySelector(".rt-btn-save");
|
||||
els.cancelBtn = el.querySelector(".rt-btn-cancel");
|
||||
els.resetBtn = el.querySelector(".rt-btn-reset");
|
||||
|
||||
els.rows = {};
|
||||
var rows = el.querySelectorAll(".rt-popover-row");
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
var prop = row.getAttribute("data-prop");
|
||||
els.rows[prop] = {
|
||||
swatch: row.querySelector(".rt-color-swatch"),
|
||||
hex: row.querySelector(".rt-color-hex"),
|
||||
};
|
||||
}
|
||||
|
||||
els.closeBtn.addEventListener("click", close);
|
||||
els.cancelBtn.addEventListener("click", close);
|
||||
els.saveBtn.addEventListener("click", save);
|
||||
els.resetBtn.addEventListener("click", resetToDefault);
|
||||
|
||||
els.modeSelect.addEventListener("change", function () {
|
||||
storeCurrentEdits();
|
||||
selectedMode = els.modeSelect.value;
|
||||
loadModeIntoInputs();
|
||||
updatePreview();
|
||||
});
|
||||
|
||||
var props = ["bg", "border", "text"];
|
||||
for (var p = 0; p < props.length; p++) {
|
||||
(function (prop) {
|
||||
var row = els.rows[prop];
|
||||
row.swatch.addEventListener("input", function () {
|
||||
row.hex.value = row.swatch.value;
|
||||
row.hex.classList.remove("rt-input-error");
|
||||
updatePreview();
|
||||
});
|
||||
row.hex.addEventListener("input", function () {
|
||||
if (hexValid(row.hex.value)) {
|
||||
row.swatch.value = row.hex.value;
|
||||
row.hex.classList.remove("rt-input-error");
|
||||
updatePreview();
|
||||
} else {
|
||||
row.hex.classList.add("rt-input-error");
|
||||
}
|
||||
});
|
||||
})(props[p]);
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", onDocumentMouseDown, true);
|
||||
document.addEventListener("keydown", onDocumentKeyDown, true);
|
||||
}
|
||||
|
||||
function onDocumentMouseDown(e) {
|
||||
if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
|
||||
if (popoverEl.contains(e.target)) return;
|
||||
|
||||
var active = document.activeElement;
|
||||
if (active && active.type === "color" && popoverEl.contains(active)) return;
|
||||
|
||||
close();
|
||||
}
|
||||
|
||||
function onDocumentKeyDown(e) {
|
||||
if (e.key === "Escape" && popoverEl && popoverEl.classList.contains("rt-popover-visible")) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function getDefaultsForMode(settings, mode) {
|
||||
return {
|
||||
bg: settings[mode + ".subredditBgColor"],
|
||||
border: settings[mode + ".subredditBorderColor"],
|
||||
text: settings[mode + ".subredditTextColor"],
|
||||
};
|
||||
}
|
||||
|
||||
function getColorsForMode(settings, subredditName, mode) {
|
||||
var entry = settings.subredditColors[subredditName];
|
||||
if (entry && entry[mode]) {
|
||||
return { bg: entry[mode].bg, border: entry[mode].border, text: entry[mode].text };
|
||||
}
|
||||
return getDefaultsForMode(settings, mode);
|
||||
}
|
||||
|
||||
function storeCurrentEdits() {
|
||||
editState[selectedMode] = {
|
||||
bg: els.rows.bg.swatch.value,
|
||||
border: els.rows.border.swatch.value,
|
||||
text: els.rows.text.swatch.value,
|
||||
};
|
||||
}
|
||||
|
||||
function loadModeIntoInputs() {
|
||||
var colors = editState[selectedMode];
|
||||
var props = ["bg", "border", "text"];
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var prop = props[i];
|
||||
var val = colorToHex(colors[prop]);
|
||||
els.rows[prop].swatch.value = val;
|
||||
els.rows[prop].hex.value = val;
|
||||
els.rows[prop].hex.classList.remove("rt-input-error");
|
||||
}
|
||||
}
|
||||
|
||||
function updatePreview() {
|
||||
var bg = els.rows.bg.swatch.value;
|
||||
var border = els.rows.border.swatch.value;
|
||||
var text = els.rows.text.swatch.value;
|
||||
els.preview.style.background = bg;
|
||||
els.preview.style.borderColor = border;
|
||||
els.preview.style.color = text;
|
||||
}
|
||||
|
||||
function positionPopover(anchorEl) {
|
||||
var rect = anchorEl.getBoundingClientRect();
|
||||
var gap = 6;
|
||||
|
||||
popoverEl.style.visibility = "hidden";
|
||||
popoverEl.classList.add("rt-popover-visible");
|
||||
|
||||
var popRect = popoverEl.getBoundingClientRect();
|
||||
var top = rect.bottom + window.scrollY + gap;
|
||||
var left = rect.left + window.scrollX;
|
||||
|
||||
if (rect.bottom + gap + popRect.height > window.innerHeight) {
|
||||
top = rect.top + window.scrollY - popRect.height - gap;
|
||||
}
|
||||
|
||||
var maxLeft = document.documentElement.scrollWidth - popRect.width - 8;
|
||||
if (left > maxLeft) left = maxLeft;
|
||||
if (left < 8) left = 8;
|
||||
|
||||
popoverEl.style.top = top + "px";
|
||||
popoverEl.style.left = left + "px";
|
||||
popoverEl.style.visibility = "";
|
||||
}
|
||||
|
||||
function applyDarkModeToPopover(settings) {
|
||||
var helpers = getHelpers();
|
||||
if (helpers.isDarkMode(settings)) {
|
||||
popoverEl.classList.add("rt-dark");
|
||||
} else {
|
||||
popoverEl.classList.remove("rt-dark");
|
||||
}
|
||||
}
|
||||
|
||||
function open(badgeEl, subredditName, settings) {
|
||||
if (!popoverEl) createPopover();
|
||||
|
||||
if (currentSubreddit === subredditName && popoverEl.classList.contains("rt-popover-visible")) {
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
currentSubreddit = subredditName;
|
||||
currentAnchor = badgeEl;
|
||||
|
||||
var helpers = getHelpers();
|
||||
selectedMode = helpers.getColorPrefix(settings);
|
||||
|
||||
editState.light = getColorsForMode(settings, subredditName, "light");
|
||||
editState.dark = getColorsForMode(settings, subredditName, "dark");
|
||||
|
||||
els.title.textContent = "r/" + subredditName;
|
||||
els.modeSelect.value = selectedMode;
|
||||
els.preview.textContent = "r/" + subredditName;
|
||||
|
||||
applyDarkModeToPopover(settings);
|
||||
loadModeIntoInputs();
|
||||
updatePreview();
|
||||
positionPopover(badgeEl);
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (!popoverEl) return;
|
||||
popoverEl.classList.remove("rt-popover-visible");
|
||||
currentSubreddit = null;
|
||||
currentAnchor = null;
|
||||
editState = { light: null, dark: null };
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!currentSubreddit) return;
|
||||
|
||||
storeCurrentEdits();
|
||||
|
||||
var settings = await window.RedditTweaks.loadSettings();
|
||||
var entry = settings.subredditColors[currentSubreddit] || {};
|
||||
|
||||
if (editState.light) entry.light = editState.light;
|
||||
if (editState.dark) entry.dark = editState.dark;
|
||||
|
||||
settings.subredditColors[currentSubreddit] = entry;
|
||||
await window.RedditTweaks.saveSettings(settings);
|
||||
close();
|
||||
}
|
||||
|
||||
async function resetToDefault() {
|
||||
if (!currentSubreddit) return;
|
||||
|
||||
var settings = await window.RedditTweaks.loadSettings();
|
||||
delete settings.subredditColors[currentSubreddit];
|
||||
await window.RedditTweaks.saveSettings(settings);
|
||||
|
||||
editState.light = getDefaultsForMode(settings, "light");
|
||||
editState.dark = getDefaultsForMode(settings, "dark");
|
||||
loadModeIntoInputs();
|
||||
updatePreview();
|
||||
}
|
||||
|
||||
window.RedditTweaks = window.RedditTweaks || {};
|
||||
window.RedditTweaks.colorPopover = {
|
||||
open: open,
|
||||
close: close,
|
||||
};
|
||||
})();
|
||||
@@ -20,6 +20,7 @@
|
||||
"js": [
|
||||
"lib/settings.js",
|
||||
"content/tweaks/badges.js",
|
||||
"content/tweaks/color-popover.js",
|
||||
"content/main.js"
|
||||
],
|
||||
"run_at": "document_idle"
|
||||
|
||||
Reference in New Issue
Block a user