Filtres:
${filtersHtml}
@@ -932,13 +1020,18 @@ function renderBackgroundStudioPanel(panel) {
function applyNoteVisualState(element, note) {
if (!element || !note) return;
- const resolvedColorOption = getColorOption(note.color || "default");
- const color = resolvedColorOption ? resolvedColorOption.key : "default";
- const colorValue = getThemeColorValue(resolvedColorOption);
+ const rawColor = note.color || "default";
+ const isCustomColor = typeof rawColor === "string" && rawColor.startsWith("custom:");
+ const customHex = isCustomColor ? rawColor.substring(7) : "";
+
+ const resolvedColorOption = isCustomColor ? null : getColorOption(rawColor);
+ const color = isCustomColor ? "custom" : (resolvedColorOption ? resolvedColorOption.key : "default");
+ const colorValue = isCustomColor ? customHex : getThemeColorValue(resolvedColorOption);
const foregroundColor = getReadableForegroundForBackground(colorValue);
const filter = normalizeFilterKey(note.filter || "none");
const normalizedBackground = normalizeBackgroundKey(note.background || "");
const background = normalizedBackground || "none";
+ const fontColor = note.fontColor || "auto";
element.classList.forEach((cls) => {
if (cls.startsWith("note-color-")) element.classList.remove(cls);
@@ -960,6 +1053,19 @@ function applyNoteVisualState(element, note) {
element.style.setProperty("--note-card-fg", foregroundColor);
}
+ if (fontColor && fontColor !== "auto") {
+ let fontValue = null;
+ if (typeof fontColor === "string" && fontColor.startsWith("custom:")) {
+ fontValue = fontColor.substring(7);
+ } else {
+ const opt = NOTE_FONT_COLOR_OPTIONS.find((o) => o.key === fontColor);
+ if (opt && opt.value && opt.value !== "auto") fontValue = opt.value;
+ }
+ if (fontValue) {
+ element.style.setProperty("--note-card-fg", fontValue);
+ }
+ }
+
if (background && background !== "none") {
const bgUrl = getNoteBackgroundUrl(background);
if (bgUrl) {
@@ -978,19 +1084,45 @@ function applyNoteVisualState(element, note) {
}
element.dataset.color = color;
+ if (isCustomColor && customHex) {
+ element.dataset.customColor = customHex;
+ } else {
+ element.dataset.customColor = "";
+ }
element.dataset.filter = filter;
+ element.dataset.fontColor = fontColor;
}
function extractNoteVisualStateFromTags(tags) {
const safeTags = Array.isArray(tags) ? tags : [];
let color = "default";
- const foundColorTag = safeTags.find((t) => typeof t === "string" && t.startsWith("note-"));
+ const foundColorTag = safeTags.find((t) => typeof t === "string" && t.startsWith(NOTE_COLOR_TAG_PREFIX));
if (foundColorTag) {
- const candidate = foundColorTag.substring(5);
- if (NOTE_COLOR_OPTIONS.some((opt) => opt.key === candidate)) {
+ const candidate = foundColorTag.substring(NOTE_COLOR_TAG_PREFIX.length);
+ if (/^[0-9A-Fa-f]{6}$/.test(candidate)) {
+ color = `custom:#${candidate.toUpperCase()}`;
+ } else if (NOTE_COLOR_OPTIONS.some((opt) => opt.key === candidate)) {
color = candidate;
}
+ } else {
+ // Backward compat: legacy note-custom-
+ const legacyCustomTag = safeTags.find((t) => typeof t === "string" && t.startsWith("note-custom-"));
+ if (legacyCustomTag) {
+ const candidate = legacyCustomTag.substring("note-custom-".length);
+ if (/^[0-9A-Fa-f]{6}$/.test(candidate)) {
+ color = `custom:#${candidate.toUpperCase()}`;
+ }
+ }
+
+ // Backward compat: legacy note-
+ const legacyColorTag = safeTags.find((t) => typeof t === "string" && t.startsWith("note-"));
+ if (legacyColorTag) {
+ const candidate = legacyColorTag.substring(5);
+ if (NOTE_COLOR_OPTIONS.some((opt) => opt.key === candidate)) {
+ color = candidate;
+ }
+ }
}
let filter = "none";
@@ -1011,7 +1143,17 @@ function extractNoteVisualStateFromTags(tags) {
}
}
- return { color, filter, background };
+ let fontColor = "auto";
+ const foundFontTag = safeTags.find((t) => typeof t === "string" && t.startsWith(NOTE_FONT_COLOR_TAG_PREFIX));
+ if (foundFontTag) {
+ const raw = foundFontTag.substring(NOTE_FONT_COLOR_TAG_PREFIX.length);
+ const hex = raw.startsWith("#") ? raw : `#${raw}`;
+ if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+ fontColor = `custom:${hex.toUpperCase()}`;
+ }
+ }
+
+ return { color, filter, background, fontColor };
}
function initBookmarkPaletteButtons() {
@@ -1023,8 +1165,8 @@ function initBookmarkPaletteButtons() {
if (!cardId) return;
const tags = Array.from(card.querySelectorAll(".link-tag a")).map((a) => (a.textContent || "").trim());
- const { color, filter, background } = extractNoteVisualStateFromTags(tags);
- applyNoteVisualState(card, { color, filter, background });
+ const { color, filter, background, fontColor } = extractNoteVisualStateFromTags(tags);
+ applyNoteVisualState(card, { color, filter, background, fontColor });
const actions = card.querySelector(".link-actions");
if (!actions) return;
@@ -1066,6 +1208,7 @@ function initBookmarkPaletteButtons() {
currentColor: getElementVisualColor(card),
currentFilter: getElementVisualFilter(card),
currentBackground: getElementVisualBackground(card),
+ currentFontColor: getElementVisualFontColor(card),
title: "Mes images & couleurs",
});
});
@@ -1497,6 +1640,7 @@ function initNoteView(linkList, container) {
currentColor: modalCard ? getElementVisualColor(modalCard) : "default",
currentFilter: modalCard ? getElementVisualFilter(modalCard) : "none",
currentBackground: modalCard ? getElementVisualBackground(modalCard) : "none",
+ currentFontColor: modalCard ? getElementVisualFontColor(modalCard) : "auto",
title: "Mes images & couleurs",
});
});
@@ -1611,28 +1755,29 @@ function parseNoteFromLink(linkEl) {
const urlEl = linkEl.querySelector(".link-url");
const url = urlEl ? urlEl.textContent.trim() : "";
- const tags = [];
- let color = "default";
- let filter = "none";
- let background = "none";
+ const rawTags = [];
linkEl.querySelectorAll(".link-tag-list a").forEach((tag) => {
- const t = tag.textContent.trim();
- // Check for color tag
- if (t.startsWith("note-")) {
- const potentialColor = t.substring(5);
- const knownColor = NOTE_COLOR_OPTIONS.some((opt) => opt.key === potentialColor);
- if (knownColor) {
- color = potentialColor;
- } else {
- tags.push(t);
- }
- } else if (t.startsWith(NOTE_FILTER_TAG_PREFIX)) {
- filter = normalizeFilterKey(t.substring(NOTE_FILTER_TAG_PREFIX.length)) || "none";
- } else if (t.startsWith(NOTE_BACKGROUND_TAG_PREFIX)) {
- background = normalizeBackgroundKey(t.substring(NOTE_BACKGROUND_TAG_PREFIX.length)) || "none";
- } else {
- tags.push(t);
- }
+ const t = (tag.textContent || "").trim();
+ if (t) rawTags.push(t);
+ });
+
+ const { color, filter, background, fontColor } = extractNoteVisualStateFromTags(rawTags);
+
+ const isLegacyNoteColorTag = (t) => {
+ if (typeof t !== "string") return false;
+ if (!t.startsWith("note-")) return false;
+ const candidate = t.substring(5);
+ return NOTE_COLOR_OPTIONS.some((opt) => opt.key === candidate);
+ };
+
+ const tags = rawTags.filter((t) => {
+ if (t.startsWith(NOTE_COLOR_TAG_PREFIX)) return false;
+ if (t.startsWith("note-custom-")) return false;
+ if (isLegacyNoteColorTag(t)) return false;
+ if (t.startsWith(NOTE_FILTER_TAG_PREFIX)) return false;
+ if (t.startsWith(NOTE_BACKGROUND_TAG_PREFIX)) return false;
+ if (t.startsWith(NOTE_FONT_COLOR_TAG_PREFIX)) return false;
+ return true;
});
const isPinnedByTag = tags.includes("shaarli-pin");
@@ -1645,7 +1790,7 @@ function parseNoteFromLink(linkEl) {
// User requested "availability of the tag 'shaarli-pin' as the main source"
const isPinned = tags.includes("shaarli-pin");
- return { id, title, descHtml, descText, coverImage, url, tags, color, filter, background, editUrl, deleteUrl, pinUrl, isPinned };
+ return { id, title, descHtml, descText, coverImage, url, tags, color, filter, background, fontColor, editUrl, deleteUrl, pinUrl, isPinned };
}
function renderNotes(container, notes, viewMode) {
@@ -1907,19 +2052,15 @@ function generatePaletteButtons(note) {
window.setNoteColor = function (noteId, color, editUrl) {
// 1. Visual Update (Immediate feedback)
- const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
- if (card) {
- const filter = card.dataset.filter || "none";
- applyNoteVisualState(card, { color, filter });
- }
+ setNoteColorVisual(noteId, color);
const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
if (bookmarkCard) {
- const filter = bookmarkCard.dataset.filter || "none";
- applyNoteVisualState(bookmarkCard, { color, filter });
const palettePopup = bookmarkCard.querySelector(".bookmark-palette .palette-popup");
if (palettePopup) {
- palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, color, filter);
+ const currentColor = getElementVisualColor(bookmarkCard);
+ const currentFilter = getElementVisualFilter(bookmarkCard);
+ palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, currentColor, currentFilter);
}
}
@@ -1962,7 +2103,13 @@ window.setNoteColor = function (noteId, color, editUrl) {
let currentTags = formData.get("lf_tags") || "";
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
- // Remove existing color tags
+ // Remove existing color tags (only one note-color-* allowed)
+ tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_COLOR_TAG_PREFIX));
+
+ // Backward compat cleanup: remove legacy note-custom-
+ tagsArray = tagsArray.filter((t) => !t.startsWith("note-custom-"));
+
+ // Backward compat cleanup: remove legacy note-
tagsArray = tagsArray.filter((t) => {
if (!t.startsWith("note-")) return true;
const colorKey = t.substring(5);
@@ -1971,7 +2118,12 @@ window.setNoteColor = function (noteId, color, editUrl) {
// Add new color tag (unless default)
if (color !== "default") {
- tagsArray.push(`note-${color}`);
+ if (typeof color === "string" && color.startsWith("custom:")) {
+ const cleanColor = color.substring(7).replace("#", "");
+ tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${cleanColor}`);
+ } else {
+ tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${color}`);
+ }
}
formData.set("lf_tags", tagsArray.join(" "));
@@ -2503,3 +2655,661 @@ function togglePinTag(id, editUrl, btn) {
})
.catch((err) => console.error(err));
}
+
+/* ==========================================================
+ COLOR PICKER PANEL
+ ========================================================== */
+let colorPickerPanelInitialized = false;
+
+function ensureColorPickerPanel() {
+ if (colorPickerPanelInitialized) return;
+ if (document.getElementById("shaarli-color-picker")) {
+ colorPickerPanelInitialized = true;
+ return;
+ }
+
+ const panel = document.createElement("div");
+ panel.id = "shaarli-color-picker";
+ panel.className = "color-picker-panel";
+ panel.setAttribute("role", "dialog");
+ panel.setAttribute("aria-modal", "false");
+ panel.setAttribute("aria-hidden", "true");
+ panel.style.display = "none";
+ document.body.appendChild(panel);
+
+ document.addEventListener("click", (e) => {
+ const p = document.getElementById("shaarli-color-picker");
+ if (!p || !p.classList.contains("open")) return;
+ if (e.target.closest("#shaarli-color-picker")) return;
+ if (e.target.closest("#shaarli-bg-studio")) return;
+ closeColorPickerPanel();
+ });
+
+ document.addEventListener("keydown", (e) => {
+ if (e.key !== "Escape") return;
+ const p = document.getElementById("shaarli-color-picker");
+ if (!p || !p.classList.contains("open")) return;
+ closeColorPickerPanel();
+ });
+
+ colorPickerPanelInitialized = true;
+}
+
+function closeColorPickerPanel() {
+ const panel = document.getElementById("shaarli-color-picker");
+ if (!panel) return;
+
+ const type = panel.dataset.type || "background";
+ const skipRestore = panel.dataset.skipRestore === "1";
+ if (!skipRestore && type === "font") {
+ const prevFontColorKey = panel.dataset.prevFontColorKey || "auto";
+ const mode = panel.dataset.mode || "entity";
+ const entityId = panel.dataset.entityId || "";
+ if (mode === "modal") {
+ setModalNoteFontColorVisual(prevFontColorKey);
+ } else {
+ setNoteFontColorVisual(entityId, prevFontColorKey);
+ }
+ }
+
+ if (!skipRestore && type === "background") {
+ const prevColorKey = panel.dataset.prevColorKey || "default";
+ const mode = panel.dataset.mode || "entity";
+ const entityId = panel.dataset.entityId || "";
+ if (mode === "modal") {
+ setModalNoteColorVisual(prevColorKey);
+ } else {
+ setNoteColorVisual(entityId, prevColorKey);
+ }
+ }
+
+ panel.dataset.skipRestore = "0";
+ panel.classList.remove("open");
+ panel.style.display = "none";
+ panel.setAttribute("aria-hidden", "true");
+}
+
+function openColorPickerPanel({ mode, entityId, editUrl, type }) {
+ ensureColorPickerPanel();
+ const panel = document.getElementById("shaarli-color-picker");
+ if (!panel) return;
+
+ panel.dataset.mode = mode || "entity";
+ panel.dataset.entityId = entityId || "";
+ panel.dataset.editUrl = editUrl || "";
+ panel.dataset.type = type || "background";
+
+ const isDark = getCurrentThemeMode() === "dark";
+ const defaultColor = isDark ? "#20293A" : "#ffffff";
+
+ if ((type || "background") === "font") {
+ let prevFontColorKey = "auto";
+ if ((mode || "entity") === "modal") {
+ const modal = document.querySelector(".note-modal-overlay");
+ const modalCard = modal ? modal.querySelector(".note-modal") : null;
+ prevFontColorKey = (modalCard && modalCard.dataset.fontColor) ? modalCard.dataset.fontColor : "auto";
+ } else {
+ const noteCard = document.querySelector(`.note-card[data-id="${entityId}"]`);
+ const bookmarkCard = document.querySelector(`.link-outer[data-id="${entityId}"]`);
+ prevFontColorKey = (noteCard && noteCard.dataset.fontColor) ? noteCard.dataset.fontColor : ((bookmarkCard && bookmarkCard.dataset.fontColor) ? bookmarkCard.dataset.fontColor : "auto");
+ }
+ panel.dataset.prevFontColorKey = prevFontColorKey;
+ } else {
+ panel.dataset.prevFontColorKey = "";
+ }
+
+ if ((type || "background") === "background") {
+ let prevColorKey = "default";
+ if ((mode || "entity") === "modal") {
+ const modal = document.querySelector(".note-modal-overlay");
+ const modalCard = modal ? modal.querySelector(".note-modal") : null;
+ if (modalCard) {
+ const isCustom = modalCard.dataset.color === "custom";
+ const cc = modalCard.dataset.customColor || "";
+ prevColorKey = isCustom && cc ? `custom:${cc}` : getElementVisualColor(modalCard);
+ }
+ } else {
+ const noteCard = document.querySelector(`.note-card[data-id="${entityId}"]`);
+ const bookmarkCard = document.querySelector(`.link-outer[data-id="${entityId}"]`);
+ const el = noteCard || bookmarkCard;
+ if (el) {
+ const isCustom = el.dataset.color === "custom";
+ const cc = el.dataset.customColor || "";
+ prevColorKey = isCustom && cc ? `custom:${cc}` : getElementVisualColor(el);
+ }
+ }
+ panel.dataset.prevColorKey = prevColorKey;
+ } else {
+ panel.dataset.prevColorKey = "";
+ }
+
+ panel.innerHTML = `
+
+
+
+ `;
+
+ // Initialize color picker state
+ let currentHue = 210;
+ let currentSaturation = 50;
+ let currentValue = 50;
+ let currentHex = defaultColor;
+
+ const gradient = panel.querySelector("#color-gradient");
+ const cursor = panel.querySelector("#color-cursor");
+ const hueSlider = panel.querySelector("#hue-slider");
+ const hexInput = panel.querySelector("#hex-input");
+ const preview = panel.querySelector("#color-preview");
+
+ function hsvToHex(h, s, v) {
+ const c = v * s;
+ const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+ const m = v - c;
+ let r, g, b;
+
+ if (h < 60) { r = c; g = x; b = 0; }
+ else if (h < 120) { r = x; g = c; b = 0; }
+ else if (h < 180) { r = 0; g = c; b = x; }
+ else if (h < 240) { r = 0; g = x; b = c; }
+ else if (h < 300) { r = x; g = 0; b = c; }
+ else { r = c; g = 0; b = x; }
+
+ const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0");
+ return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+ }
+
+ function hexToHsv(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ if (!result) return { h: 0, s: 0, v: 0 };
+
+ const r = parseInt(result[1], 16) / 255;
+ const g = parseInt(result[2], 16) / 255;
+ const b = parseInt(result[3], 16) / 255;
+
+ const max = Math.max(r, g, b);
+ const min = Math.min(r, g, b);
+ const d = max - min;
+
+ let h = 0;
+ if (d !== 0) {
+ if (max === r) h = ((g - b) / d + 6) % 6 * 60;
+ else if (max === g) h = ((b - r) / d + 2) * 60;
+ else h = ((r - g) / d + 4) * 60;
+ }
+
+ const s = max === 0 ? 0 : d / max;
+ const v = max;
+
+ return { h, s, v };
+ }
+
+ function updateColor() {
+ currentHex = hsvToHex(currentHue, currentSaturation / 100, currentValue / 100);
+ gradient.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${currentHue}, 100%, 50%))`;
+ cursor.style.left = `${currentSaturation}%`;
+ cursor.style.top = `${100 - currentValue}%`;
+ preview.style.backgroundColor = currentHex;
+ hexInput.value = currentHex;
+
+ if ((panel.dataset.type || "background") === "font") {
+ const previewKey = `custom:${currentHex}`;
+ const pMode = panel.dataset.mode || "entity";
+ const pEntityId = panel.dataset.entityId || "";
+ if (pMode === "modal") {
+ setModalNoteFontColorVisual(previewKey);
+ } else {
+ setNoteFontColorVisual(pEntityId, previewKey);
+ }
+ }
+
+ if ((panel.dataset.type || "background") === "background") {
+ const previewKey = `custom:${currentHex}`;
+ const pMode = panel.dataset.mode || "entity";
+ const pEntityId = panel.dataset.entityId || "";
+ if (pMode === "modal") {
+ setModalNoteColorVisual(previewKey);
+ } else {
+ setNoteColorVisual(pEntityId, previewKey);
+ }
+ }
+ }
+
+ function setFromHex(hex) {
+ const hsv = hexToHsv(hex);
+ currentHue = hsv.h;
+ currentSaturation = hsv.s * 100;
+ currentValue = hsv.v * 100;
+ hueSlider.value = currentHue;
+ updateColor();
+ }
+
+ // Event listeners
+ let isDragging = false;
+
+ gradient.addEventListener("mousedown", (e) => {
+ isDragging = true;
+ const rect = gradient.getBoundingClientRect();
+ currentSaturation = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+ currentValue = Math.max(0, Math.min(100, 100 - ((e.clientY - rect.top) / rect.height) * 100));
+ updateColor();
+ });
+
+ document.addEventListener("mousemove", (e) => {
+ if (!isDragging) return;
+ const rect = gradient.getBoundingClientRect();
+ currentSaturation = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
+ currentValue = Math.max(0, Math.min(100, 100 - ((e.clientY - rect.top) / rect.height) * 100));
+ updateColor();
+ });
+
+ document.addEventListener("mouseup", () => {
+ isDragging = false;
+ });
+
+ hueSlider.addEventListener("input", (e) => {
+ currentHue = parseInt(e.target.value);
+ updateColor();
+ });
+
+ hexInput.addEventListener("input", (e) => {
+ const hex = e.target.value;
+ if (/^#[0-9A-F]{6}$/i.test(hex)) {
+ setFromHex(hex);
+ }
+ });
+
+ // Initialize
+ if ((panel.dataset.type || "background") === "font") {
+ const prevFontColorKey = panel.dataset.prevFontColorKey || "auto";
+ let initialHex = defaultColor;
+ if (typeof prevFontColorKey === "string" && prevFontColorKey.startsWith("custom:")) {
+ initialHex = prevFontColorKey.substring(7);
+ } else if (prevFontColorKey !== "auto") {
+ const opt = NOTE_FONT_COLOR_OPTIONS.find((o) => o.key === prevFontColorKey);
+ if (opt && opt.value && opt.value !== "auto") initialHex = opt.value;
+ }
+ setFromHex(initialHex);
+ } else if ((panel.dataset.type || "background") === "background") {
+ const prevColorKey = panel.dataset.prevColorKey || "default";
+ let initialHex = defaultColor;
+ if (typeof prevColorKey === "string" && prevColorKey.startsWith("custom:")) {
+ initialHex = prevColorKey.substring(7);
+ }
+ setFromHex(initialHex);
+ } else {
+ setFromHex(defaultColor);
+ }
+
+ // Position the color picker panel
+ positionColorPickerPanel(panel, mode);
+
+ panel.style.display = "block";
+ panel.classList.add("open");
+ panel.setAttribute("aria-hidden", "false");
+}
+
+function positionColorPickerPanel(panel, mode) {
+ if (!panel) return;
+
+ const bgPanel = document.getElementById("shaarli-bg-studio");
+ const viewportPadding = 12;
+
+ // Default position if bgPanel is not available
+ let anchorRect = null;
+
+ if (bgPanel && bgPanel.classList.contains("open")) {
+ const bgRect = bgPanel.getBoundingClientRect();
+ // Position to the right of the bg-studio panel
+ let left = bgRect.right + 10;
+ let top = bgRect.top;
+
+ // Check if it fits on the right
+ if (left + panel.offsetWidth > window.innerWidth - viewportPadding) {
+ // Position to the left instead
+ left = bgRect.left - panel.offsetWidth - 10;
+ }
+
+ // Ensure it stays within viewport
+ if (left < viewportPadding) left = viewportPadding;
+ if (top + panel.offsetHeight > window.innerHeight - viewportPadding) {
+ top = window.innerHeight - viewportPadding - panel.offsetHeight;
+ }
+ if (top < viewportPadding) top = viewportPadding;
+
+ panel.style.left = `${Math.round(left)}px`;
+ panel.style.top = `${Math.round(top)}px`;
+ panel.style.right = "";
+ panel.style.bottom = "";
+ } else {
+ // Center in viewport if bg panel not available
+ const panelRect = panel.getBoundingClientRect();
+ const left = Math.max(viewportPadding, (window.innerWidth - panelRect.width) / 2);
+ const top = Math.max(viewportPadding, (window.innerHeight - panelRect.height) / 2);
+ panel.style.left = `${Math.round(left)}px`;
+ panel.style.top = `${Math.round(top)}px`;
+ }
+}
+
+// Handle color picker actions
+document.addEventListener("click", (e) => {
+ const actionBtn = e.target.closest("[data-color-picker-action]");
+ if (!actionBtn) return;
+
+ const panel = document.getElementById("shaarli-color-picker");
+ if (!panel) return;
+
+ const action = actionBtn.dataset.colorPickerAction;
+
+ if (action === "close") {
+ closeColorPickerPanel();
+ return;
+ }
+
+ if (action === "apply") {
+ const mode = panel.dataset.mode || "entity";
+ const entityId = panel.dataset.entityId || "";
+ const editUrl = panel.dataset.editUrl || "";
+ const type = panel.dataset.type || "background";
+ const hexInput = panel.querySelector("#hex-input");
+ const color = hexInput ? hexInput.value : "#ffffff";
+
+ if (type === "font") {
+ if (mode === "modal") {
+ setModalCustomFontColor(color);
+ } else {
+ setNoteFontColor(entityId, `custom:${color}`, editUrl);
+ }
+ } else {
+ if (mode === "modal") {
+ setModalCustomNoteColor(color);
+ } else {
+ setNoteColor(entityId, `custom:${color}`, editUrl);
+ }
+ }
+
+ panel.dataset.skipRestore = "1";
+ closeColorPickerPanel();
+ }
+});
+
+function setNoteFontColorVisual(noteId, fontColorKey) {
+ const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
+ const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
+
+ let colorValue = "auto";
+ if (typeof fontColorKey === "string" && fontColorKey.startsWith("custom:")) {
+ colorValue = fontColorKey.substring(7);
+ } else if (fontColorKey !== "auto") {
+ const option = NOTE_FONT_COLOR_OPTIONS.find((opt) => opt.key === fontColorKey);
+ colorValue = option ? option.value : "auto";
+ }
+
+ const applyTo = (element) => {
+ if (!element) return;
+ if (colorValue === "auto") element.style.removeProperty("--note-card-fg");
+ else element.style.setProperty("--note-card-fg", colorValue);
+ element.dataset.fontColor = fontColorKey;
+ };
+
+ applyTo(card);
+ applyTo(bookmarkCard);
+
+ const modal = document.querySelector(".note-modal-overlay");
+ if (modal && modal.currentNote && String(modal.currentNote.id) === String(noteId)) {
+ const modalCard = modal.querySelector(".note-modal");
+ applyTo(modalCard);
+ }
+}
+
+function setModalNoteFontColorVisual(fontColorKey) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+ setNoteFontColorVisual(modal.currentNote.id, fontColorKey);
+}
+
+function setNoteColorVisual(noteId, colorKey) {
+ const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
+ const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
+
+ const applyTo = (element) => {
+ if (!element) return;
+ const currentState = {
+ color: getElementVisualColor(element),
+ filter: getElementVisualFilter(element),
+ background: getElementVisualBackground(element),
+ fontColor: getElementVisualFontColor(element),
+ };
+
+ if (typeof colorKey === "string" && colorKey.startsWith("custom:")) {
+ const hex = colorKey.substring(7);
+ element.classList.forEach((cls) => {
+ if (cls.startsWith("note-color-")) element.classList.remove(cls);
+ });
+ element.classList.add("note-color-custom");
+ element.style.backgroundColor = hex;
+ element.style.borderColor = "transparent";
+ element.dataset.color = "custom";
+ element.dataset.customColor = hex;
+ const fg = getReadableForegroundForBackground(hex);
+ if (fg) element.style.setProperty("--note-card-fg", fg);
+ return;
+ }
+
+ element.dataset.customColor = "";
+ applyNoteVisualState(element, { ...currentState, color: colorKey });
+ };
+
+ applyTo(card);
+ applyTo(bookmarkCard);
+
+ const modal = document.querySelector(".note-modal-overlay");
+ if (modal && modal.currentNote && String(modal.currentNote.id) === String(noteId)) {
+ const modalCard = modal.querySelector(".note-modal");
+ applyTo(modalCard);
+ }
+}
+
+function setModalNoteColorVisual(colorKey) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+ setNoteColorVisual(modal.currentNote.id, colorKey);
+}
+
+/* ==========================================================
+ FONT COLOR FUNCTIONS
+ ========================================================== */
+function setNoteFontColor(noteId, fontColorKey, editUrl) {
+ // 1. Visual Update (Immediate feedback)
+ setNoteFontColorVisual(noteId, fontColorKey);
+
+ // 2. Persistence via AJAX Form Submission
+ fetch(editUrl)
+ .then((response) => response.text())
+ .then((html) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, "text/html");
+ const form = doc.querySelector('form[name="linkform"]');
+
+ if (!form) throw new Error("Could not find edit form");
+
+ const formData = new URLSearchParams();
+ const inputs = form.querySelectorAll("input, textarea");
+
+ inputs.forEach((input) => {
+ if (input.type === "checkbox") {
+ if (input.checked) formData.append(input.name, input.value || "on");
+ } else if (input.name) {
+ formData.append(input.name, input.value);
+ }
+ });
+
+ let currentTags = formData.get("lf_tags") || "";
+ let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
+
+ // Remove existing font color tags
+ tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FONT_COLOR_TAG_PREFIX));
+
+ // Add new font color tag (unless auto)
+ if (fontColorKey !== "auto") {
+ if (fontColorKey.startsWith("custom:")) {
+ tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${fontColorKey.substring(7).replace("#", "")}`);
+ } else {
+ const option = NOTE_FONT_COLOR_OPTIONS.find((opt) => opt.key === fontColorKey);
+ if (option && option.value !== "auto") {
+ tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${option.value.substring(1)}`);
+ }
+ }
+ }
+
+ formData.set("lf_tags", tagsArray.join(" "));
+ formData.append("save_edit", "1");
+
+ return fetch(form.action, {
+ method: "POST",
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ body: formData.toString(),
+ });
+ })
+ .then((response) => {
+ if (response.ok) {
+ console.log(`Font color ${fontColorKey} saved for note ${noteId}`);
+ } else {
+ throw new Error("Failed to save font color");
+ }
+ })
+ .catch((err) => {
+ console.error("Error saving note font color:", err);
+ });
+}
+
+function setModalNoteFontColor(fontColorKey) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+
+ const currentNote = modal.currentNote;
+ setNoteFontColor(currentNote.id, fontColorKey, currentNote.editUrl);
+
+ currentNote.fontColor = fontColorKey;
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ let colorValue = "auto";
+ if (fontColorKey.startsWith("custom:")) {
+ colorValue = fontColorKey.substring(7);
+ } else if (fontColorKey !== "auto") {
+ const option = NOTE_FONT_COLOR_OPTIONS.find((opt) => opt.key === fontColorKey);
+ colorValue = option ? option.value : "auto";
+ }
+
+ if (colorValue === "auto") {
+ modalCard.style.removeProperty("--note-card-fg");
+ } else {
+ modalCard.style.setProperty("--note-card-fg", colorValue);
+ }
+ modalCard.dataset.fontColor = fontColorKey;
+ }
+}
+
+function setModalCustomFontColor(color) {
+ setModalNoteFontColor(`custom:${color}`);
+}
+
+/* ==========================================================
+ CUSTOM NOTE COLOR FUNCTIONS
+ ========================================================== */
+function setModalCustomNoteColor(color) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+
+ const currentNote = modal.currentNote;
+
+ // Apply custom color visually
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ modalCard.style.backgroundColor = color;
+ modalCard.style.borderColor = "transparent";
+ modalCard.dataset.color = "custom";
+ modalCard.dataset.customColor = color;
+ }
+
+ // Save via AJAX
+ fetch(currentNote.editUrl)
+ .then((response) => response.text())
+ .then((html) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, "text/html");
+ const form = doc.querySelector('form[name="linkform"]');
+
+ if (!form) throw new Error("Could not find edit form");
+
+ const formData = new URLSearchParams();
+ const inputs = form.querySelectorAll("input, textarea");
+
+ inputs.forEach((input) => {
+ if (input.type === "checkbox") {
+ if (input.checked) formData.append(input.name, input.value || "on");
+ } else if (input.name) {
+ formData.append(input.name, input.value);
+ }
+ });
+
+ let currentTags = formData.get("lf_tags") || "";
+ let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
+
+ // Remove existing color tags (only one note-color-* allowed)
+ tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_COLOR_TAG_PREFIX));
+
+ // Backward compat cleanup: remove legacy note-custom-
+ tagsArray = tagsArray.filter((t) => !t.startsWith("note-custom-"));
+
+ // Backward compat cleanup: remove legacy note-
+ tagsArray = tagsArray.filter((t) => {
+ if (!t.startsWith("note-")) return true;
+ const colorKey = t.substring(5);
+ return !NOTE_COLOR_OPTIONS.some((opt) => opt.key === colorKey);
+ });
+
+ // Add custom color tag
+ const cleanColor = color.replace("#", "");
+ tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${cleanColor}`);
+
+ formData.set("lf_tags", tagsArray.join(" "));
+ formData.append("save_edit", "1");
+
+ return fetch(form.action, {
+ method: "POST",
+ headers: { "Content-Type": "application/x-www-form-urlencoded" },
+ body: formData.toString(),
+ });
+ })
+ .then((response) => {
+ if (!response.ok) throw new Error("Failed to save custom color");
+ console.log(`Custom color ${color} saved for note ${currentNote.id}`);
+ })
+ .catch((err) => {
+ console.error("Error saving custom color:", err);
+ });
+}