${thumb}
`;
})
.join("");
// Colors row with custom color picker button
const colorsRowHtml = colors
.filter((c) => c.key !== "default" && c.key !== "custom")
.map((c) => {
const isActive = color === c.key;
const hex = c.color || "";
return ``;
})
.join("") +
// Add custom color button (opens color picker)
``;
// Font colors row
const isCustomFontColor = typeof currentFontColor === "string" && currentFontColor.startsWith("custom:");
const fontColorsRowHtml = NOTE_FONT_COLOR_OPTIONS
.filter((c) => c.key !== "custom")
.map((c) => {
const isActive = currentFontColor === c.key;
const value = c.value || "auto";
const style =
value === "auto"
? "background: linear-gradient(135deg, #f5f7fb 50%, #202124 50%);"
: `background-color: ${value};`;
return ``;
})
.join("") +
// Add custom font color button
``;
const filterBtn = (key, icon, label) => {
const active = currentFilter === key;
return ``;
};
const filtersHtml = NOTE_FILTER_OPTIONS.map((f) => filterBtn(f.key, f.icon, f.label)).join("");
const showClear = !!(panel.dataset.query || "").trim();
panel.innerHTML = `
${item.label}
${title}
${galleryHtml}
Colors:
${colorsRowHtml}
Font:
${fontColorsRowHtml}
Filtres:
${filtersHtml}
Couleurs
${colorButtons}
Filtres
${filterButtons}
Créer une tâche...
`;
const collapsed = inputContainer.querySelector(".note-input-collapsed");
const openBtn = inputContainer.querySelector(".todo-open-draft-btn");
const openTodoDraftEditor = () => {
inputContainer.classList.add("is-editing", "todo-draft-mode");
inputContainer.innerHTML = `
`;
const titleInput = inputContainer.querySelector(".todo-draft-title");
const listEl = inputContainer.querySelector(".todo-draft-list");
const addBtn = inputContainer.querySelector(".todo-draft-add-btn");
const closeBtn = inputContainer.querySelector(".note-input-close-btn");
const paletteBtn = inputContainer.querySelector(".note-input-palette-btn");
let hasChanges = false;
let isSaving = false;
let draftVisual = { color: "default", filter: "none", background: "none", fontColor: "auto" };
applyNoteVisualState(inputContainer, draftVisual);
const buildDraftRow = (item = { text: "", checked: false }, focusInput = false) => {
if (!listEl) return null;
const row = document.createElement("div");
row.className = "todo-draft-row";
row.innerHTML = `
`;
listEl.appendChild(row);
const checkbox = row.querySelector(".todo-item-checkbox");
const textInput = row.querySelector(".todo-item-text");
const deleteBtn = row.querySelector(".todo-item-delete");
const syncCheckedState = () => {
row.classList.toggle("is-checked", !!(checkbox && checkbox.checked));
};
syncCheckedState();
checkbox?.addEventListener("change", () => {
hasChanges = true;
syncCheckedState();
});
textInput?.addEventListener("input", () => {
hasChanges = true;
});
deleteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
hasChanges = true;
row.remove();
if (!listEl.querySelector(".todo-draft-row")) {
buildDraftRow({ text: "", checked: false }, true);
}
});
if (focusInput && textInput) {
textInput.focus({ preventScroll: true });
}
return row;
};
const collectDraftItems = () => {
if (!listEl) return [];
return Array.from(listEl.querySelectorAll(".todo-draft-row"))
.map((row) => {
const checkbox = row.querySelector(".todo-item-checkbox");
const textInput = row.querySelector(".todo-item-text");
const text = textInput && typeof textInput.value === "string" ? textInput.value.trim() : "";
return { checked: !!(checkbox && checkbox.checked), text };
})
.filter((it) => it.text);
};
buildDraftRow({ text: "", checked: false }, false);
addBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
hasChanges = true;
buildDraftRow({ text: "", checked: false }, true);
});
titleInput?.addEventListener("input", () => {
hasChanges = true;
});
const saveIfNeededAndClose = async () => {
if (isSaving) return;
const title = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
const items = collectDraftItems();
if (!title && items.length === 0) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderTodoInputCollapsed();
return;
}
if (!hasChanges) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderTodoInputCollapsed();
return;
}
isSaving = true;
try {
await createNewTodoViaForm({ title, items, visual: draftVisual });
window.location.reload();
} catch (err) {
console.error("Error creating todo:", err);
alert("Erreur lors de la création de la tâche.");
isSaving = false;
}
};
closeBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
saveIfNeededAndClose();
});
const onOutsidePointerDown = (e) => {
if (e.target && e.target.closest && e.target.closest("#shaarli-bg-studio")) return;
if (e.target && e.target.closest && e.target.closest(".bg-studio-panel")) return;
if (inputContainer.contains(e.target)) return;
saveIfNeededAndClose();
};
document.addEventListener("pointerdown", onOutsidePointerDown, true);
paletteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openBackgroundStudioPanel({
anchorEl: paletteBtn,
mode: "draft",
entityId: "draft-new-todo",
editUrl: "",
currentColor: draftVisual.color || "default",
currentFilter: draftVisual.filter || "none",
currentBackground: draftVisual.background || "none",
currentFontColor: draftVisual.fontColor || "auto",
title: "Mes images & couleurs",
});
const panel = document.getElementById("shaarli-bg-studio");
if (panel) {
panel.__draftApply = (next) => {
draftVisual = { ...draftVisual, ...(next || {}) };
applyNoteVisualState(inputContainer, draftVisual);
};
}
});
titleInput?.focus({ preventScroll: true });
};
collapsed?.addEventListener("click", (e) => {
if (e.target.closest("button")) return;
openTodoDraftEditor();
});
openBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openTodoDraftEditor();
});
};
renderTodoInputCollapsed();
topBar.appendChild(inputContainer);
const tools = document.createElement("div");
tools.className = "notes-tools";
tools.innerHTML = `
`;
topBar.appendChild(tools);
wrapper.appendChild(topBar);
const contentArea = document.createElement("div");
contentArea.className = "notes-content-area";
const links = Array.from(linkList.querySelectorAll(".link-outer"));
const todos = links.map((link) => parseTodoFromLink(link)).filter((t) => t);
wrapper.appendChild(contentArea);
linkList.style.display = "none";
if (linkList.parentNode) {
linkList.parentNode.insertBefore(wrapper, linkList);
} else {
container.appendChild(wrapper);
}
renderTodos(contentArea, todos, "grid");
const modalOverlay = document.createElement("div");
modalOverlay.className = "note-modal-overlay todo-modal-overlay";
modalOverlay.innerHTML = `
`;
document.body.appendChild(modalOverlay);
const btnGrid = wrapper.querySelector("#btn-view-grid");
const btnList = wrapper.querySelector("#btn-view-list");
btnGrid.addEventListener("click", () => {
btnGrid.classList.add("active");
btnList.classList.remove("active");
renderTodos(contentArea, todos, "grid");
});
btnList.addEventListener("click", () => {
btnList.classList.add("active");
btnGrid.classList.remove("active");
renderTodos(contentArea, todos, "list");
});
modalOverlay.querySelector("#todo-modal-close").addEventListener("click", () => {
modalOverlay.classList.remove("open");
});
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) modalOverlay.classList.remove("open");
});
const modalPinBtn = modalOverlay.querySelector("#todo-modal-pin");
const modalColorBtn = modalOverlay.querySelector("#todo-modal-color-btn");
const modalColorPopup = modalOverlay.querySelector("#todo-modal-color-popup");
modalColorBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const modalCard = modalOverlay.querySelector(".note-modal");
openBackgroundStudioPanel({
anchorEl: modalColorBtn,
mode: "modal",
entityId: modalCard ? modalCard.dataset.todoId || "" : "",
editUrl: modalCard ? modalCard.dataset.editUrl || "" : "",
currentColor: modalCard ? getElementVisualColor(modalCard) : "default",
currentFilter: modalCard ? getElementVisualFilter(modalCard) : "none",
currentBackground: modalCard ? getElementVisualBackground(modalCard) : "none",
currentFontColor: modalCard ? getElementVisualFontColor(modalCard) : "auto",
title: "Mes images & couleurs",
});
});
modalPinBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const modalCard = modalOverlay.querySelector(".note-modal");
const todoId = modalCard.dataset.todoId;
const editUrl = modalCard.dataset.editUrl;
if (!todoId || !editUrl) return;
togglePinTag(todoId, editUrl, modalPinBtn);
const isPinned = modalPinBtn.classList.contains("active");
let tags = (modalCard.dataset.tags || "").split("||").filter((t) => t);
if (isPinned) {
if (!tags.includes("shaarli-pin")) tags.push("shaarli-pin");
} else {
tags = tags.filter((t) => t !== "shaarli-pin");
}
modalCard.dataset.tags = tags.join("||");
renderModalTags(modalOverlay.querySelector("#todo-modal-tags"), tags);
if (modalOverlay.currentTodo) {
modalOverlay.currentTodo.isPinned = isPinned;
modalOverlay.currentTodo.tags = tags;
}
});
modalOverlay.querySelector("#todo-modal-delete").addEventListener("click", () => {
const modalCard = modalOverlay.querySelector(".note-modal");
const deleteUrl = modalCard.dataset.deleteUrl;
if (deleteUrl && deleteUrl !== "#") {
window.location.href = deleteUrl;
}
});
modalOverlay.addEventListener("click", (e) => {
if (!e.target.closest(".note-modal-color-picker")) {
modalColorPopup.classList.remove("open");
}
});
modalOverlay.querySelector("#todo-modal-add-item").addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
if (!modalOverlay.currentTodo) return;
addTodoItem(modalOverlay, modalOverlay.currentTodo);
});
if (typeof initTagDisplayAndRemoval === "function") {
initTagDisplayAndRemoval();
}
}
function parseTodoFromLink(linkEl) {
if (!linkEl) return null;
const id = linkEl.dataset.id;
const titleEl = linkEl.querySelector(".link-title");
const title = titleEl ? titleEl.textContent.trim() : "";
const descEl = linkEl.querySelector(".link-description");
const descHtml = descEl ? descEl.innerHTML : "";
const descText = descEl ? descEl.textContent : "";
const rawTags = [];
linkEl.querySelectorAll(".link-tag-list a").forEach((tag) => {
const t = (tag.textContent || "").trim();
if (t) rawTags.push(t);
});
const { color, filter, background, fontColor } = extractNoteVisualStateFromTags(rawTags);
const tags = rawTags.filter((t) => {
if (t.startsWith(NOTE_COLOR_TAG_PREFIX)) return false;
if (t.startsWith("note-custom-")) 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 actionsEl = linkEl.querySelector(".link-actions");
const editUrl = actionsEl && actionsEl.querySelector('a[href*="admin/shaare"]') ? actionsEl.querySelector('a[href*="admin/shaare"]').href : "#";
const deleteUrl = actionsEl && actionsEl.querySelector('a[href*="delete"]') ? actionsEl.querySelector('a[href*="delete"]').href : "#";
const pinUrl = actionsEl && actionsEl.querySelector('a[href*="pin"]') ? actionsEl.querySelector('a[href*="pin"]').href : "#";
const isPinned = tags.includes("shaarli-pin");
const items = extractChecklistItemsFromDescription(descEl, descText);
const parsed = parseTodoMarkdown(descText);
return {
id,
title,
descHtml,
descText,
items,
_todoHeaderLines: parsed.headerLines,
_todoFooterLines: parsed.footerLines,
tags,
color,
filter,
background,
fontColor,
editUrl,
deleteUrl,
pinUrl,
isPinned,
};
}
function extractChecklistItemsFromDescription(descEl, descText) {
const items = [];
if (descEl) {
const checkboxEls = Array.from(descEl.querySelectorAll('input[type="checkbox"]'));
if (checkboxEls.length > 0) {
checkboxEls.forEach((cb) => {
const li = cb.closest("li") || cb.parentElement;
let text = "";
if (li) {
const clone = li.cloneNode(true);
clone.querySelectorAll('input[type="checkbox"]').forEach((i) => i.remove());
text = (clone.textContent || "").trim();
}
items.push({ checked: !!cb.checked, text });
});
return items;
}
}
const lines = String(descText || "").split(/\r?\n/);
const fallbackSource = descEl ? descEl.innerHTML : lines.join("\n");
const parsed = parseTodoMarkdown(fallbackSource);
return parsed.items;
}
function getFormFieldValue(input) {
if (!input) return "";
const tag = (input.tagName || "").toUpperCase();
if (tag === "TEXTAREA") {
const v = typeof input.value === "string" ? input.value : "";
if (v && v.trim() !== "") return v;
const t = typeof input.textContent === "string" ? input.textContent : "";
return t;
}
return input.value;
}
async function fetchShaareFormBaseData(url) {
const response = await fetch(url, { credentials: "same-origin" });
const html = await response.text();
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 baseData = new URLSearchParams();
const inputs = form.querySelectorAll("input, textarea");
inputs.forEach((input) => {
if (input.type === "checkbox") {
if (input.checked) baseData.append(input.name, input.value || "on");
} else if (input.name) {
baseData.append(input.name, getFormFieldValue(input));
}
});
return { action: form.action, baseData };
}
async function createNewNoteViaForm({ title, markdown, visual = null }) {
const basePath = typeof shaarli !== "undefined" && shaarli.basePath ? shaarli.basePath : "";
const formUrl = `${basePath}/admin/shaare?post=&tags=shaarli-note`;
const { action, baseData } = await fetchShaareFormBaseData(formUrl);
const formData = new URLSearchParams(baseData.toString());
formData.set("lf_url", "");
formData.set("lf_title", title || "");
formData.set("lf_description", markdown || "");
const currentTags = (formData.get("lf_tags") || "").trim();
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
// Ensure note tags exist (legacy + normalized) and todo tag is absent
tagsArray = tagsArray.filter((t) => t !== "shaarli-todo");
if (!tagsArray.includes("note")) tagsArray.push("note");
if (!tagsArray.includes("shaarli-note")) tagsArray.push("shaarli-note");
// Apply optional visual tags (note-color-*, notefilter-*, notebg-*, font-*)
if (visual) {
const colorKey = visual.color || "default";
const filterKey = normalizeFilterKey(visual.filter || "") || "none";
const bgKey = normalizeBackgroundKey(visual.background || "") || "none";
const fontColorKey = visual.fontColor || "auto";
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_COLOR_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FILTER_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_BACKGROUND_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FONT_COLOR_TAG_PREFIX));
if (colorKey && colorKey !== "default") {
if (typeof colorKey === "string" && colorKey.startsWith("custom:")) {
const clean = colorKey.substring(7).replace("#", "");
if (clean) tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${clean}`);
} else {
tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${colorKey}`);
}
}
if (filterKey && filterKey !== "none") {
tagsArray.push(`${NOTE_FILTER_TAG_PREFIX}${filterKey}`);
}
if (bgKey && bgKey !== "none") {
tagsArray.push(`${NOTE_BACKGROUND_TAG_PREFIX}${bgKey}`);
}
if (fontColorKey && fontColorKey !== "auto") {
if (typeof fontColorKey === "string" && fontColorKey.startsWith("custom:")) {
const clean = fontColorKey.substring(7).replace("#", "");
if (clean) tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${clean}`);
} else {
const option = NOTE_FONT_COLOR_OPTIONS.find((opt) => opt.key === fontColorKey);
if (option && option.value && option.value !== "auto") {
tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${option.value.substring(1)}`);
}
}
}
}
formData.set("lf_tags", tagsArray.join(" "));
if (!formData.get("returnurl")) {
formData.set("returnurl", window.location.href);
}
formData.append("save_edit", "1");
const response = await fetch(action, {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formData.toString(),
});
if (!response.ok) throw new Error(`Failed to create note (status ${response.status})`);
}
async function createNewTodoViaForm({ title, items = [], visual = null }) {
const basePath = typeof shaarli !== "undefined" && shaarli.basePath ? shaarli.basePath : "";
const formUrl = `${basePath}/admin/shaare?post=http%3A%2F%2Fshaarli-todo&tags=shaarli-todo`;
const { action, baseData } = await fetchShaareFormBaseData(formUrl);
const formData = new URLSearchParams(baseData.toString());
formData.set("lf_url", "http://shaarli-todo");
formData.set("lf_title", title || "");
const normalizedItems = (Array.isArray(items) ? items : [])
.map((it) => ({ checked: !!(it && it.checked), text: String((it && it.text) || "").trim() }))
.filter((it) => it.text);
const markdown = normalizedItems.map((it) => `- [${it.checked ? "x" : " "}] ${it.text}`).join("\n");
formData.set("lf_description", markdown);
const currentTags = (formData.get("lf_tags") || "").trim();
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
tagsArray = tagsArray.filter((t) => t !== "note" && t !== "shaarli-note");
if (!tagsArray.includes("shaarli-todo")) tagsArray.push("shaarli-todo");
if (visual) {
const colorKey = visual.color || "default";
const filterKey = normalizeFilterKey(visual.filter || "") || "none";
const bgKey = normalizeBackgroundKey(visual.background || "") || "none";
const fontColorKey = visual.fontColor || "auto";
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_COLOR_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FILTER_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_BACKGROUND_TAG_PREFIX));
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FONT_COLOR_TAG_PREFIX));
if (colorKey && colorKey !== "default") {
if (typeof colorKey === "string" && colorKey.startsWith("custom:")) {
const clean = colorKey.substring(7).replace("#", "");
if (clean) tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${clean}`);
} else {
tagsArray.push(`${NOTE_COLOR_TAG_PREFIX}${colorKey}`);
}
}
if (filterKey && filterKey !== "none") {
tagsArray.push(`${NOTE_FILTER_TAG_PREFIX}${filterKey}`);
}
if (bgKey && bgKey !== "none") {
tagsArray.push(`${NOTE_BACKGROUND_TAG_PREFIX}${bgKey}`);
}
if (fontColorKey && fontColorKey !== "auto") {
if (typeof fontColorKey === "string" && fontColorKey.startsWith("custom:")) {
const clean = fontColorKey.substring(7).replace("#", "");
if (clean) tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${clean}`);
} else {
const option = NOTE_FONT_COLOR_OPTIONS.find((opt) => opt.key === fontColorKey);
if (option && option.value && option.value !== "auto") {
tagsArray.push(`${NOTE_FONT_COLOR_TAG_PREFIX}${option.value.substring(1)}`);
}
}
}
}
formData.set("lf_tags", tagsArray.join(" "));
if (!formData.get("returnurl")) {
formData.set("returnurl", window.location.href);
}
formData.append("save_edit", "1");
const response = await fetch(action, {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formData.toString(),
});
if (!response.ok) throw new Error(`Failed to create todo (status ${response.status})`);
}
async function hydrateNoteFromEditForm(note) {
if (!note || !note.editUrl || note.editUrl === "#") return;
if (note._noteHydrated) return;
if (note._noteHydratePromise) return note._noteHydratePromise;
note._noteHydratePromise = (async () => {
try {
const { action, baseData } = await fetchShaareFormBaseData(note.editUrl);
note._noteEditAction = action;
note._noteEditBaseData = baseData;
note._noteMarkdown = baseData.get("lf_description") || "";
note._noteTitle = baseData.get("lf_title") || "";
note._noteHydrated = true;
} catch (e) {
console.error("Error hydrating note edit form:", e);
} finally {
note._noteHydratePromise = null;
}
})();
return note._noteHydratePromise;
}
async function persistNoteChanges(note, { title, markdown }, retryCount = 0) {
if (!note || !note.editUrl || note.editUrl === "#") return;
const refreshEditForm = async () => {
const { action, baseData } = await fetchShaareFormBaseData(note.editUrl);
note._noteEditAction = action;
note._noteEditBaseData = baseData;
};
if (!note._noteEditAction || !note._noteEditBaseData || !(note._noteEditBaseData.get && note._noteEditBaseData.get("token"))) {
await refreshEditForm();
}
const formData = new URLSearchParams(note._noteEditBaseData.toString());
formData.set("lf_title", title || "");
formData.set("lf_description", markdown || "");
const currentTags = (formData.get("lf_tags") || "").trim();
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
tagsArray = tagsArray.filter((t) => t !== "shaarli-todo");
if (!tagsArray.includes("note")) tagsArray.push("note");
if (!tagsArray.includes("shaarli-note")) tagsArray.push("shaarli-note");
formData.set("lf_tags", tagsArray.join(" "));
formData.append("save_edit", "1");
const response = await fetch(note._noteEditAction, {
method: "POST",
credentials: "same-origin",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formData.toString(),
});
if (!response.ok) {
if (response.status === 403 && retryCount < 1) {
note._noteEditAction = "";
note._noteEditBaseData = null;
await refreshEditForm();
return persistNoteChanges(note, { title, markdown }, retryCount + 1);
}
throw new Error("Failed to save note");
}
}
async function hydrateTodoFromEditForm(todo) {
if (!todo || !todo.editUrl || todo.editUrl === "#") return;
if (todo._todoHydrated) return;
if (todo._todoHydratePromise) return todo._todoHydratePromise;
todo._todoHydratePromise = (async () => {
try {
const response = await fetch(todo.editUrl, { credentials: "same-origin" });
if (!response.ok) {
console.error("Todo hydration failed (edit form fetch not ok).", { id: todo && todo.id, url: todo && todo.editUrl, status: response && response.status });
return;
}
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");
const form = doc.querySelector('form[name="linkform"]');
if (!form) {
console.error("Todo hydration failed (edit form not found).", { id: todo && todo.id, url: todo && todo.editUrl, status: response && response.status });
return;
}
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, getFormFieldValue(input));
}
});
todo._todoEditAction = form.action;
todo._todoEditBaseData = formData;
const rawMarkdown = formData.get("lf_description") || "";
const parsed = parseTodoMarkdown(rawMarkdown);
todo._todoHeaderLines = parsed.headerLines;
todo._todoFooterLines = parsed.footerLines;
todo.items = parsed.items;
if (!todo._todoDebugLogged && rawMarkdown && String(rawMarkdown).trim() && (!parsed.items || parsed.items.length === 0)) {
todo._todoDebugLogged = true;
console.warn("Todo parsed 0 items from lf_description; sample follows.", {
id: todo && todo.id,
url: todo && todo.editUrl,
sample: String(rawMarkdown).slice(0, 240),
});
}
updateTodoCardPreview(todo);
todo._todoHydrated = true;
} catch (e) {
console.error("Error hydrating todo markdown:", e);
} finally {
todo._todoHydratePromise = null;
}
})();
return todo._todoHydratePromise;
}
function renderTodos(container, todos, viewMode) {
if (!container) return;
container.innerHTML = "";
container.className = viewMode === "grid" ? "notes-masonry" : "notes-list-view";
const visibleTodos = (todos || []).slice();
visibleTodos.sort((a, b) => {
const aPinned = (a.tags || []).includes("shaarli-pin");
const bPinned = (b.tags || []).includes("shaarli-pin");
return bPinned - aPinned;
});
visibleTodos.forEach((todo) => {
const card = document.createElement("div");
card.className = "note-card todo-card";
card.dataset.id = todo.id;
card.dataset.editUrl = todo.editUrl || "";
card.dataset.tags = (todo.tags || []).filter((t) => t).join("||");
todo._todoCardEl = card;
applyNoteVisualState(card, todo);
if (viewMode === "list") card.classList.add("list-mode");
card.addEventListener("click", (e) => {
if (e.target.closest("button") || e.target.closest("a") || e.target.closest(".note-hover-actions")) return;
syncNoteFromCardElement(todo, card);
openTodoModal(todo);
});
const inner = document.createElement("div");
inner.className = "note-inner";
if (todo.title) {
const h3 = document.createElement("h3");
h3.className = "note-title";
h3.textContent = todo.title;
inner.appendChild(h3);
}
const body = document.createElement("div");
body.className = "note-body todo-checklist-preview-wrap";
body.innerHTML = buildTodoPreviewHtml(todo.items || []);
inner.appendChild(body);
if ((todo.tags || []).length > 0) {
const tagContainer = document.createElement("div");
tagContainer.className = "note-tags";
todo.tags.forEach((t) => {
if (isTechnicalTag(t)) return;
const pill = createTagPill({ tag: t, onRemoveClass: "note-tag-remove-btn", tagClass: "note-tag", canRemove: !!todo.editUrl && todo.editUrl !== "#" });
tagContainer.appendChild(pill);
});
inner.appendChild(tagContainer);
}
const actions = document.createElement("div");
actions.className = "note-hover-actions";
const paletteBtnId = `palette-${todo.id}`;
actions.innerHTML = `
- ${rows}${hasMore ? '
- ... ' : ""}
Créer une note...
`;
const collapsed = inputContainer.querySelector(".note-input-collapsed");
const noteBtn = inputContainer.querySelector(".note-create-note-btn");
const openEditor = (mode = "note") => {
if (mode === "list") {
inputContainer.classList.add("is-editing", "todo-draft-mode");
inputContainer.innerHTML = `
`;
const titleInput = inputContainer.querySelector(".todo-draft-title");
const listEl = inputContainer.querySelector(".todo-draft-list");
const addBtn = inputContainer.querySelector(".todo-draft-add-btn");
const closeBtn = inputContainer.querySelector(".note-input-close-btn");
const paletteBtn = inputContainer.querySelector(".note-input-palette-btn");
let hasChanges = false;
let isSaving = false;
let draftVisual = { color: "default", filter: "none", background: "none", fontColor: "auto" };
applyNoteVisualState(inputContainer, draftVisual);
const buildDraftRow = (item = { text: "", checked: false }, focusInput = false) => {
if (!listEl) return null;
const row = document.createElement("div");
row.className = "todo-draft-row";
row.innerHTML = `
`;
listEl.appendChild(row);
const checkbox = row.querySelector(".todo-item-checkbox");
const textInput = row.querySelector(".todo-item-text");
const deleteBtn = row.querySelector(".todo-item-delete");
const syncCheckedState = () => {
row.classList.toggle("is-checked", !!(checkbox && checkbox.checked));
};
syncCheckedState();
checkbox?.addEventListener("change", () => {
hasChanges = true;
syncCheckedState();
});
textInput?.addEventListener("input", () => {
hasChanges = true;
});
deleteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
hasChanges = true;
row.remove();
if (!listEl.querySelector(".todo-draft-row")) {
buildDraftRow({ text: "", checked: false }, true);
}
});
if (focusInput && textInput) {
textInput.focus({ preventScroll: true });
}
return row;
};
const collectDraftItems = () => {
if (!listEl) return [];
return Array.from(listEl.querySelectorAll(".todo-draft-row"))
.map((row) => {
const checkbox = row.querySelector(".todo-item-checkbox");
const textInput = row.querySelector(".todo-item-text");
const text = textInput && typeof textInput.value === "string" ? textInput.value.trim() : "";
return { checked: !!(checkbox && checkbox.checked), text };
})
.filter((it) => it.text);
};
buildDraftRow({ text: "", checked: false }, false);
addBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
hasChanges = true;
buildDraftRow({ text: "", checked: false }, true);
});
titleInput?.addEventListener("input", () => {
hasChanges = true;
});
const saveIfNeededAndClose = async () => {
if (isSaving) return;
const title = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
const items = collectDraftItems();
if (!title && items.length === 0) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderNoteInputCollapsed();
return;
}
if (!hasChanges) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderNoteInputCollapsed();
return;
}
isSaving = true;
try {
const markdown = items.map((it) => `- [${it.checked ? "x" : " "}] ${it.text}`).join("\n");
await createNewNoteViaForm({ title, markdown, visual: draftVisual });
window.location.reload();
} catch (err) {
console.error("Error creating checklist note:", err);
alert("Erreur lors de la création de la note liste.");
isSaving = false;
}
};
closeBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
saveIfNeededAndClose();
});
const onOutsidePointerDown = (e) => {
if (e.target && e.target.closest && e.target.closest("#shaarli-bg-studio")) return;
if (e.target && e.target.closest && e.target.closest(".bg-studio-panel")) return;
if (inputContainer.contains(e.target)) return;
saveIfNeededAndClose();
};
document.addEventListener("pointerdown", onOutsidePointerDown, true);
paletteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openBackgroundStudioPanel({
anchorEl: paletteBtn,
mode: "draft",
entityId: "draft-new-todo-from-note",
editUrl: "",
currentColor: draftVisual.color || "default",
currentFilter: draftVisual.filter || "none",
currentBackground: draftVisual.background || "none",
currentFontColor: draftVisual.fontColor || "auto",
title: "Mes images & couleurs",
});
const panel = document.getElementById("shaarli-bg-studio");
if (panel) {
panel.__draftApply = (next) => {
draftVisual = { ...draftVisual, ...(next || {}) };
applyNoteVisualState(inputContainer, draftVisual);
};
}
});
titleInput?.focus({ preventScroll: true });
return;
}
inputContainer.classList.add("is-editing");
inputContainer.innerHTML = `
`;
const titleInput = inputContainer.querySelector(".note-input-title");
const source = inputContainer.querySelector(".note-input-description-source");
const closeBtn = inputContainer.querySelector(".note-input-close-btn");
const paletteBtn = inputContainer.querySelector(".note-input-palette-btn");
const formatToggleBtn = inputContainer.querySelector(".note-input-format-btn");
const formattingBar = inputContainer.querySelector(".note-formatting-bar");
let hasChanges = false;
let isSaving = false;
let draftVisual = { color: "default", filter: "none", background: "none", fontColor: "auto" };
applyNoteVisualState(inputContainer, draftVisual);
const setFormattingVisible = (visible) => {
if (!formattingBar) return;
if (visible) {
formattingBar.classList.add("open");
formattingBar.setAttribute("aria-hidden", "false");
inputContainer.classList.add("show-formatting");
} else {
formattingBar.classList.remove("open");
formattingBar.setAttribute("aria-hidden", "true");
inputContainer.classList.remove("show-formatting");
}
};
formatToggleBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const isOpen = formattingBar && formattingBar.classList.contains("open");
setFormattingVisible(!isOpen);
});
inputContainer.querySelectorAll(".note-format-btn").forEach((btnEl) => {
btnEl.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
if (!source) return;
applyKeepNoteFormatting(source, btnEl.dataset.noteFormat || "");
hasChanges = true;
});
});
titleInput?.addEventListener("input", () => {
hasChanges = true;
});
source?.addEventListener("input", () => {
hasChanges = true;
});
const getValues = () => {
const t = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
const md = source && typeof source.value === "string" ? source.value.trim() : "";
return { title: t, markdown: md };
};
const saveIfNeededAndClose = async () => {
if (isSaving) return;
const { title, markdown } = getValues();
if (!title && !markdown) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderNoteInputCollapsed();
return;
}
if (!hasChanges) {
document.removeEventListener("pointerdown", onOutsidePointerDown, true);
renderNoteInputCollapsed();
return;
}
isSaving = true;
try {
await createNewNoteViaForm({ title, markdown, visual: draftVisual });
window.location.reload();
} catch (err) {
console.error("Error creating note:", err);
alert("Erreur lors de la création de la note.");
isSaving = false;
}
};
closeBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
saveIfNeededAndClose();
});
const onOutsidePointerDown = (e) => {
if (e.target && e.target.closest && e.target.closest("#shaarli-bg-studio")) return;
if (e.target && e.target.closest && e.target.closest(".bg-studio-panel")) return;
if (e.target && e.target.closest && e.target.closest(".note-formatting-bar")) return;
if (inputContainer.contains(e.target)) return;
saveIfNeededAndClose();
};
document.addEventListener("pointerdown", onOutsidePointerDown, true);
paletteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openBackgroundStudioPanel({
anchorEl: paletteBtn,
mode: "draft",
entityId: "draft-new-note",
editUrl: "",
currentColor: draftVisual.color || "default",
currentFilter: draftVisual.filter || "none",
currentBackground: draftVisual.background || "none",
currentFontColor: draftVisual.fontColor || "auto",
title: "Mes images & couleurs",
});
const panel = document.getElementById("shaarli-bg-studio");
if (panel) {
panel.__draftApply = (next) => {
draftVisual = { ...draftVisual, ...(next || {}) };
applyNoteVisualState(inputContainer, draftVisual);
};
}
});
titleInput?.focus({ preventScroll: true });
};
collapsed?.addEventListener("click", (e) => {
if (e.target.closest("button")) return;
openEditor("note");
});
noteBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openEditor("note");
});
};
renderNoteInputCollapsed();
topBarInner.appendChild(inputContainer);
topBar.appendChild(topBarInner);
// View Toggle and other tools
const tools = document.createElement("div");
tools.className = "notes-tools";
tools.innerHTML = `
`;
topBar.appendChild(tools);
wrapper.appendChild(topBar);
// 3. Content Area
const contentArea = document.createElement("div");
contentArea.className = "notes-content-area";
const links = Array.from(linkList.querySelectorAll(".link-outer"));
const notes = links.map((link) => parseNoteFromLink(link));
// Initial Render (Grid)
renderNotes(contentArea, notes, "grid");
wrapper.appendChild(contentArea);
// Replace original list
linkList.style.display = "none";
if (linkList.parentNode) {
linkList.parentNode.insertBefore(wrapper, linkList);
} else {
container.appendChild(wrapper);
}
// Check for hash parameter to auto-open a specific note
const hash = window.location.hash;
if (hash && hash.startsWith('#open-note-')) {
const noteId = hash.replace('#open-note-', '');
const targetNote = notes.find(n => String(n.id) === String(noteId));
if (targetNote) {
// Clear the hash to avoid reopening on refresh
history.replaceState(null, null, window.location.pathname + window.location.search);
// Open the note modal after a short delay to ensure DOM is ready
setTimeout(() => {
openNoteModal(targetNote);
}, 100);
}
}
// Modal Container
const modalOverlay = document.createElement("div");
modalOverlay.className = "note-modal-overlay";
modalOverlay.innerHTML = `
`;
document.body.appendChild(modalOverlay);
// Event Listeners for Toggles
const btnGrid = wrapper.querySelector("#btn-view-grid");
const btnList = wrapper.querySelector("#btn-view-list");
btnGrid.addEventListener("click", () => {
btnGrid.classList.add("active");
btnList.classList.remove("active");
renderNotes(contentArea, notes, "grid");
});
btnList.addEventListener("click", () => {
btnList.classList.add("active");
btnGrid.classList.remove("active");
renderNotes(contentArea, notes, "list");
});
const saveAndCloseModal = async () => {
try {
await saveOpenNoteEditorModal(modalOverlay);
modalOverlay.classList.remove("open");
document.body.classList.remove("note-modal-open");
} catch (e) {
console.error("Error saving note from modal:", e);
alert("Erreur lors de la sauvegarde de la note.");
}
};
modalOverlay.querySelector("#note-modal-close").addEventListener("click", (e) => {
e.preventDefault();
saveAndCloseModal();
});
modalOverlay.addEventListener("click", (e) => {
if (e.target === modalOverlay) saveAndCloseModal();
});
modalOverlay.querySelector("#note-modal-edit").addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const titleInput = modalOverlay.querySelector("#note-modal-title");
titleInput?.focus({ preventScroll: true });
});
const modalPinBtn = modalOverlay.querySelector("#note-modal-pin");
const modalColorBtn = modalOverlay.querySelector("#note-modal-color-btn");
const modalColorPopup = modalOverlay.querySelector("#note-modal-color-popup");
modalColorBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const modalCard = modalOverlay.querySelector(".note-modal");
openBackgroundStudioPanel({
anchorEl: modalColorBtn,
mode: "modal",
entityId: modalCard ? modalCard.dataset.noteId || "" : "",
editUrl: modalCard ? modalCard.dataset.editUrl || "" : "",
currentColor: modalCard ? getElementVisualColor(modalCard) : "default",
currentFilter: modalCard ? getElementVisualFilter(modalCard) : "none",
currentBackground: modalCard ? getElementVisualBackground(modalCard) : "none",
currentFontColor: modalCard ? getElementVisualFontColor(modalCard) : "auto",
title: "Mes images & couleurs",
});
});
modalPinBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const modalCard = modalOverlay.querySelector(".note-modal");
const noteId = modalCard.dataset.noteId;
const editUrl = modalCard.dataset.editUrl;
if (!noteId || !editUrl) return;
togglePinTag(noteId, editUrl, modalPinBtn);
const isPinned = modalPinBtn.classList.contains("active");
let tags = (modalCard.dataset.tags || "")
.split("||")
.filter((t) => t);
if (isPinned) {
if (!tags.includes("shaarli-pin")) tags.push("shaarli-pin");
} else {
tags = tags.filter((t) => t !== "shaarli-pin");
}
modalCard.dataset.tags = tags.join("||");
renderModalTags(modalOverlay.querySelector("#note-modal-tags"), tags);
if (modalOverlay.currentNote) {
modalOverlay.currentNote.isPinned = isPinned;
modalOverlay.currentNote.tags = tags;
}
});
modalOverlay.querySelector("#note-modal-delete").addEventListener("click", () => {
const modalCard = modalOverlay.querySelector(".note-modal");
const deleteUrl = modalCard.dataset.deleteUrl;
if (deleteUrl && deleteUrl !== "#") {
window.location.href = deleteUrl;
}
});
modalOverlay.querySelector("#note-modal-archive").addEventListener("click", (e) => {
e.preventDefault();
const modalCard = modalOverlay.querySelector(".note-modal");
const noteId = modalCard.dataset.noteId;
const editUrl = modalCard.dataset.editUrl;
if (!noteId || !editUrl) return;
addTagToNote(editUrl, "shaarli-archive")
.then(() => {
if (modalOverlay.currentNote) {
if (!modalOverlay.currentNote.tags.includes("shaarli-archive")) {
modalOverlay.currentNote.tags.push("shaarli-archive");
}
}
const noteCard = document.querySelector(`.note-card[data-id="${noteId}"]`);
if (noteCard) noteCard.remove();
const index = notes.findIndex((n) => String(n.id) === String(noteId));
if (index > -1) notes.splice(index, 1);
modalOverlay.classList.remove("open");
document.body.classList.remove("note-modal-open");
})
.catch((err) => {
console.error("Error archiving note:", err);
alert("Erreur lors de l'archivage de la note.");
});
});
modalOverlay.addEventListener("click", (e) => {
if (!e.target.closest(".note-modal-color-picker")) {
modalColorPopup.classList.remove("open");
}
});
document.addEventListener("click", (e) => {
if (!e.target.closest(".note-hover-actions .palette-popup") || e.target.closest('.note-hover-actions [id^="palette-"]')) {
return;
}
document.querySelectorAll(".note-hover-actions .palette-popup.open").forEach((p) => {
p.classList.remove("open");
});
});
}
/**
* Initialize the Archive view (similar to Notes but for archived notes)
*/
function initArchiveView(linkList, container) {
document.body.classList.add("view-notes", "view-archive");
// Hide standard toolbar
const toolbar = document.querySelector(".content-toolbar");
if (toolbar) toolbar.style.display = "none";
// 1. Create Layout Wrapper
const wrapper = document.createElement("div");
wrapper.className = "notes-wrapper archive-wrapper";
// 2. Create Title Area (Top)
const topBar = document.createElement("div");
topBar.className = "notes-top-bar archive-top-bar";
// Title for archive view
const titleContainer = document.createElement("div");
titleContainer.className = "archive-title-container";
titleContainer.innerHTML = `
Archive
Notes archivées
`; topBar.appendChild(titleContainer); // View Toggle and other tools const tools = document.createElement("div"); tools.className = "notes-tools"; tools.innerHTML = ` `; topBar.appendChild(tools); wrapper.appendChild(topBar); // 3. Content Area const contentArea = document.createElement("div"); contentArea.className = "notes-content-area"; const links = Array.from(linkList.querySelectorAll(".link-outer")); const notes = links.map((link) => parseNoteFromLink(link)); // Filter only archived notes const archivedNotes = notes.filter((note) => (note.tags || []).includes("shaarli-archive")); // Initial Render (Grid) renderNotes(contentArea, archivedNotes, "grid", true); // true = archive mode wrapper.appendChild(contentArea); // Replace original list linkList.style.display = "none"; if (linkList.parentNode) { linkList.parentNode.insertBefore(wrapper, linkList); } else { container.appendChild(wrapper); } // Modal Container (reuse the same modal as notes) const modalOverlay = document.createElement("div"); modalOverlay.className = "note-modal-overlay"; modalOverlay.innerHTML = ` `; document.body.appendChild(modalOverlay); // Event Listeners for Toggles const btnGrid = wrapper.querySelector("#btn-view-grid"); const btnList = wrapper.querySelector("#btn-view-list"); btnGrid.addEventListener("click", () => { btnGrid.classList.add("active"); btnList.classList.remove("active"); renderNotes(contentArea, archivedNotes, "grid", true); }); btnList.addEventListener("click", () => { btnList.classList.add("active"); btnGrid.classList.remove("active"); renderNotes(contentArea, archivedNotes, "list", true); }); // Close Modal modalOverlay.querySelector("#note-modal-close").addEventListener("click", () => { modalOverlay.classList.remove("open"); }); modalOverlay.addEventListener("click", (e) => { if (e.target === modalOverlay) modalOverlay.classList.remove("open"); }); const modalPinBtn = modalOverlay.querySelector("#note-modal-pin"); const modalColorBtn = modalOverlay.querySelector("#note-modal-color-btn"); const modalColorPopup = modalOverlay.querySelector("#note-modal-color-popup"); modalColorBtn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const modalCard = modalOverlay.querySelector(".note-modal"); openBackgroundStudioPanel({ anchorEl: modalColorBtn, mode: "modal", entityId: modalCard ? modalCard.dataset.noteId || "" : "", editUrl: modalCard ? modalCard.dataset.editUrl || "" : "", currentColor: modalCard ? getElementVisualColor(modalCard) : "default", currentFilter: modalCard ? getElementVisualFilter(modalCard) : "none", currentBackground: modalCard ? getElementVisualBackground(modalCard) : "none", currentFontColor: modalCard ? getElementVisualFontColor(modalCard) : "auto", title: "Mes images & couleurs", }); }); modalPinBtn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const modalCard = modalOverlay.querySelector(".note-modal"); const noteId = modalCard.dataset.noteId; const editUrl = modalCard.dataset.editUrl; if (!noteId || !editUrl) return; togglePinTag(noteId, editUrl, modalPinBtn); const isPinned = modalPinBtn.classList.contains("active"); let tags = (modalCard.dataset.tags || "") .split("||") .filter((t) => t); if (isPinned) { if (!tags.includes("shaarli-pin")) tags.push("shaarli-pin"); } else { tags = tags.filter((t) => t !== "shaarli-pin"); } modalCard.dataset.tags = tags.join("||"); renderModalTags(modalOverlay.querySelector("#note-modal-tags"), tags); if (modalOverlay.currentNote) { modalOverlay.currentNote.isPinned = isPinned; modalOverlay.currentNote.tags = tags; } }); modalOverlay.querySelector("#note-modal-delete").addEventListener("click", () => { const modalCard = modalOverlay.querySelector(".note-modal"); const deleteUrl = modalCard.dataset.deleteUrl; if (deleteUrl && deleteUrl !== "#") { window.location.href = deleteUrl; } }); // Unarchive button in modal modalOverlay.querySelector("#note-modal-unarchive").addEventListener("click", (e) => { e.preventDefault(); const modalCard = modalOverlay.querySelector(".note-modal"); const noteId = modalCard.dataset.noteId; const editUrl = modalCard.dataset.editUrl; if (!noteId || !editUrl) return; removeTagFromEntity(editUrl, "shaarli-archive") .then(() => { if (modalOverlay.currentNote) { modalOverlay.currentNote.tags = (modalOverlay.currentNote.tags || []).filter((t) => t !== "shaarli-archive"); } const noteCard = document.querySelector(`.note-card[data-id="${noteId}"]`); if (noteCard) noteCard.remove(); const index = archivedNotes.findIndex((n) => String(n.id) === String(noteId)); if (index > -1) archivedNotes.splice(index, 1); modalOverlay.classList.remove("open"); }) .catch((err) => { console.error("Error unarchiving note:", err); alert("Erreur lors du désarchivage de la note."); }); }); modalOverlay.addEventListener("click", (e) => { if (!e.target.closest(".note-modal-color-picker")) { modalColorPopup.classList.remove("open"); } }); document.addEventListener("click", (e) => { if (!e.target.closest(".note-hover-actions .palette-popup") || e.target.closest('.note-hover-actions [id^="palette-"]')) { return; } document.querySelectorAll(".note-hover-actions .palette-popup.open").forEach((p) => { p.classList.remove("open"); }); }); } function parseNoteFromLink(linkEl) { const id = linkEl.dataset.id; const titleEl = linkEl.querySelector(".link-title"); const title = titleEl ? titleEl.textContent.trim() : ""; const descEl = linkEl.querySelector(".link-description"); const descHtml = descEl ? descEl.innerHTML : ""; const descText = descEl ? descEl.textContent : ""; // Extract Image from Description (First image as cover) let coverImage = null; if (descEl) { const img = descEl.querySelector("img"); if (img) { coverImage = img.src; // Optionally remove img from body text if it's purely a cover // But usually we keep it or hide it via CSS if we construct a custom card } } const urlEl = linkEl.querySelector(".link-url"); const url = urlEl ? urlEl.textContent.trim() : ""; const rawTags = []; linkEl.querySelectorAll(".link-tag-list a").forEach((tag) => { 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"); const actionsEl = linkEl.querySelector(".link-actions"); const editUrl = actionsEl && actionsEl.querySelector('a[href*="admin/shaare"]') ? actionsEl.querySelector('a[href*="admin/shaare"]').href : "#"; const deleteUrl = actionsEl && actionsEl.querySelector('a[href*="delete"]') ? actionsEl.querySelector('a[href*="delete"]').href : "#"; const pinUrl = actionsEl && actionsEl.querySelector('a[href*="pin"]') ? actionsEl.querySelector('a[href*="pin"]').href : "#"; // 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, fontColor, editUrl, deleteUrl, pinUrl, isPinned }; } function renderNotes(container, notes, viewMode, isArchiveMode = false) { container.innerHTML = ""; container.className = viewMode === "grid" ? "notes-masonry" : "notes-list-view"; // Filter notes based on archive mode let visibleNotes; if (isArchiveMode) { // In archive mode: show only notes with shaarli-archive tag visibleNotes = notes.filter((note) => (note.tags || []).includes("shaarli-archive")); } else { // In normal notes mode: hide archived notes visibleNotes = notes.filter((note) => !(note.tags || []).includes("shaarli-archive")); } // Sort: Pinned items first visibleNotes.sort((a, b) => { const aPinned = a.tags.includes("shaarli-pin"); const bPinned = b.tags.includes("shaarli-pin"); return bPinned - aPinned; }); visibleNotes.forEach((note) => { const card = document.createElement("div"); card.className = "note-card"; card.dataset.id = note.id; card.dataset.editUrl = note.editUrl || ""; card.dataset.tags = (note.tags || []).filter((t) => t).join("||"); applyNoteVisualState(card, note); if (viewMode === "list") card.classList.add("list-mode"); // Main Click to Open Modal card.addEventListener("click", (e) => { // Prevent if clicking buttons if (e.target.closest("button") || e.target.closest("a") || e.target.closest(".note-hover-actions")) return; syncNoteFromCardElement(note, card); openNoteModal(note); }); // Cover Image if (note.coverImage && viewMode === "grid") { // Show cover mainly in grid const imgContainer = document.createElement("div"); imgContainer.className = "note-cover"; imgContainer.innerHTML = `') || textToRender.trim().startsWith('<')) {
body.innerHTML = textToRender;
} else {
body.innerHTML = renderMarkdown(textToRender);
}
}
inner.appendChild(body);
}
// Tags (Labels)
if (note.tags.length > 0) {
const tagContainer = document.createElement("div");
tagContainer.className = "note-tags";
note.tags.forEach((t) => {
if (isTechnicalTag(t)) return;
const pill = createTagPill({ tag: t, onRemoveClass: "note-tag-remove-btn", tagClass: "note-tag", canRemove: !!note.editUrl && note.editUrl !== "#" });
tagContainer.appendChild(pill);
});
inner.appendChild(tagContainer);
}
// Hover Actions (Keep style: at bottom, visible on hover)
const actions = document.createElement("div");
actions.className = "note-hover-actions";
// Palette Button Logic
const paletteBtnId = `palette-${note.id}`;
const archiveBtnId = `archive-${note.id}`;
actions.innerHTML = `
`;
const openEditorBtn = actions.querySelector(".note-open-editor-btn");
openEditorBtn?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
syncNoteFromCardElement(note, card);
openNoteModal(note);
});
// Palette Toggle
const paletteBtn = actions.querySelector(`#${paletteBtnId}`);
paletteBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
openBackgroundStudioPanel({
anchorEl: paletteBtn,
mode: "entity",
entityId: note.id,
editUrl: note.editUrl,
currentColor: getElementVisualColor(card),
currentFilter: getElementVisualFilter(card),
currentBackground: getElementVisualBackground(card),
title: "Mes images & couleurs",
});
});
// Archive button handler
const archiveBtn = actions.querySelector(`#${archiveBtnId}`);
archiveBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
if (!note.editUrl || note.editUrl === "#") return;
addTagToNote(note.editUrl, "shaarli-archive")
.then(() => {
// Remove the card from the view
card.remove();
console.log(`Note ${note.id} archived`);
})
.catch((err) => {
console.error("Error archiving note:", err);
alert("Erreur lors de l'archivage de la note.");
});
});
inner.appendChild(actions);
card.appendChild(inner);
container.appendChild(card);
});
}
function setModalPinButtonState(button, isPinned) {
if (!button) return;
button.classList.toggle("active", isPinned);
button.title = isPinned ? "Désépingler" : "Épingler";
const icon = button.querySelector("i");
if (icon) {
icon.className = `mdi ${isPinned ? "mdi-pin" : "mdi-pin-outline"}`;
}
}
function renderModalTags(container, tags) {
if (!container) return;
container.innerHTML = "";
const visibleTags = (tags || []).filter((tag) => tag && !isTechnicalTag(tag));
const modal = container.closest(".note-modal-overlay") || getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
const canRemove = !!(entity && entity.editUrl && entity.editUrl !== "#");
if (visibleTags.length === 0) {
container.classList.add("is-empty");
return;
}
container.classList.remove("is-empty");
visibleTags.forEach((tag) => {
const pill = createTagPill({ tag, onRemoveClass: "note-tag-remove-btn", tagClass: "note-tag", canRemove });
container.appendChild(pill);
});
}
function openNoteModal(note) {
const modal = document.querySelector(".note-modal-overlay");
if (!modal) return;
const modalCard = modal.querySelector(".note-modal");
const titleInput = modal.querySelector("#note-modal-title");
const descriptionSource = modal.querySelector("#note-modal-description-source");
const descriptionPreview = modal.querySelector("#note-modal-description-preview");
const tagsContainer = modal.querySelector("#note-modal-tags");
const editLink = modal.querySelector("#note-modal-edit");
const pinButton = modal.querySelector("#note-modal-pin");
const modalColorPopup = modal.querySelector("#note-modal-color-popup");
const formatToggleBtn = modal.querySelector("#note-modal-format-btn");
const formattingBar = modal.querySelector("#note-modal-formatting");
const setDescriptionEditMode = (isEditing) => {
if (!descriptionSource || !descriptionPreview) return;
if (isEditing) {
modal.classList.add("note-modal-editing");
descriptionPreview.setAttribute("aria-hidden", "true");
descriptionSource.removeAttribute("aria-hidden");
} else {
modal.classList.remove("note-modal-editing");
descriptionPreview.setAttribute("aria-hidden", "false");
descriptionSource.setAttribute("aria-hidden", "true");
}
};
modal.currentNote = note;
modalCard.className = "note-modal";
applyNoteVisualState(modalCard, note);
modalCard.dataset.noteId = note.id || "";
modalCard.dataset.editUrl = note.editUrl || "";
modalCard.dataset.deleteUrl = note.deleteUrl || "";
modalCard.dataset.background = note.background || "none";
const visibleTags = (note.tags || []).filter((tag) => tag && !isTechnicalTag(tag));
modalCard.dataset.tags = visibleTags.join("||");
if (titleInput) titleInput.value = note.title || "";
if (descriptionSource) descriptionSource.value = (note._noteMarkdown || note.descText || "").trim();
if (descriptionPreview) {
descriptionPreview.innerHTML = renderMarkdown((note._noteMarkdown || note.descText || "").trim());
}
setDescriptionEditMode(false);
renderModalTags(tagsContainer, visibleTags);
if (editLink) {
editLink.href = note.editUrl || "#";
}
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(note);
modalColorPopup.classList.remove("open");
}
setModalPinButtonState(pinButton, !!note.isPinned);
if (!modal._noteEditorState) {
modal._noteEditorState = { hasChanges: false, isSaving: false, lastSavedTitle: "", lastSavedMarkdown: "" };
}
const state = modal._noteEditorState;
state.hasChanges = false;
state.lastSavedTitle = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
state.lastSavedMarkdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
if (!modal._noteEditorBound) {
modal._noteEditorBound = true;
titleInput?.addEventListener("input", () => {
if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
});
descriptionSource?.addEventListener("input", () => {
if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
if (descriptionPreview) {
descriptionPreview.innerHTML = renderMarkdown(descriptionSource.value || "");
}
});
descriptionPreview?.addEventListener("click", () => {
setDescriptionEditMode(true);
descriptionSource?.focus({ preventScroll: true });
});
descriptionPreview?.addEventListener("keydown", (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
setDescriptionEditMode(true);
descriptionSource?.focus({ preventScroll: true });
}
});
descriptionSource?.addEventListener("blur", () => {
setDescriptionEditMode(false);
});
const setFormattingVisible = (visible) => {
const fb = modal.querySelector("#note-modal-formatting");
if (!fb) return;
if (visible) {
fb.classList.add("open");
fb.setAttribute("aria-hidden", "false");
modal.classList.add("show-formatting");
} else {
fb.classList.remove("open");
fb.setAttribute("aria-hidden", "true");
modal.classList.remove("show-formatting");
}
};
modal._setNoteModalFormattingVisible = setFormattingVisible;
const ftb = modal.querySelector("#note-modal-format-btn");
ftb?.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const fb = modal.querySelector("#note-modal-formatting");
const isOpen = fb && fb.classList.contains("open");
setFormattingVisible(!isOpen);
});
modal.querySelectorAll(".note-format-btn").forEach((btnEl) => {
btnEl.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
const src = modal.querySelector("#note-modal-description-source");
if (!src) return;
setDescriptionEditMode(true);
applyKeepNoteFormatting(src, btnEl.dataset.noteFormat || "");
if (modal._noteEditorState) modal._noteEditorState.hasChanges = true;
});
});
}
if (typeof modal._setNoteModalFormattingVisible === "function") {
modal._setNoteModalFormattingVisible(false);
}
hydrateNoteFromEditForm(note).then(() => {
if (modal.currentNote !== note) return;
if (titleInput && note._noteTitle) {
titleInput.value = note._noteTitle;
}
if (descriptionSource) {
descriptionSource.value = (note._noteMarkdown || "").trim();
}
if (descriptionPreview) {
descriptionPreview.innerHTML = renderMarkdown(descriptionSource ? descriptionSource.value : "");
}
setDescriptionEditMode(false);
state.lastSavedTitle = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
state.lastSavedMarkdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
});
modal.classList.add("open");
document.body.classList.add("note-modal-open");
titleInput?.focus({ preventScroll: true });
}
async function saveOpenNoteEditorModal(modal) {
if (!modal || !modal.currentNote) return;
const note = modal.currentNote;
const titleInput = modal.querySelector("#note-modal-title");
const descriptionSource = modal.querySelector("#note-modal-description-source");
const title = titleInput && typeof titleInput.value === "string" ? titleInput.value.trim() : "";
const markdown = descriptionSource && typeof descriptionSource.value === "string" ? descriptionSource.value.trim() : "";
const state = modal._noteEditorState || { hasChanges: false, isSaving: false, lastSavedTitle: "", lastSavedMarkdown: "" };
if (!title && !markdown) {
return;
}
const changed =
state.hasChanges ||
title !== (state.lastSavedTitle || "") ||
markdown !== (state.lastSavedMarkdown || "");
if (!changed || state.isSaving) return;
state.isSaving = true;
modal._noteEditorState = state;
await hydrateNoteFromEditForm(note);
await persistNoteChanges(note, { title, markdown });
note.title = title;
note._noteTitle = title;
note._noteMarkdown = markdown;
note.descText = markdown;
const card = document.querySelector(`.note-card[data-id="${CSS.escape(String(note.id))}"]`);
if (card) {
const titleEl = card.querySelector(".note-inner .note-title");
if (titleEl) titleEl.textContent = title;
const bodyEl = card.querySelector(".note-inner .note-body");
if (bodyEl) {
bodyEl.innerHTML = renderMarkdown(markdown);
note.descHtml = bodyEl.innerHTML;
}
}
state.lastSavedTitle = title;
state.lastSavedMarkdown = markdown;
state.hasChanges = false;
state.isSaving = false;
}
function generateModalPaletteButtons(note) {
return generateUnifiedPaletteMenu({
entityId: note && note.id ? note.id : "",
editUrl: note && note.editUrl ? note.editUrl : "",
currentColor: note && note.color ? note.color : "default",
currentFilter: note && note.filter ? note.filter : "none",
mode: "modal",
});
}
window.setModalNoteColor = function (color) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
setNoteColor(entity.id, color, entity.editUrl);
entity.color = color;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
modalColorPopup.classList.add("open");
positionPalettePopup(modalColorPopup);
}
};
window.setModalNoteFontColor = function (fontColorKey) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
setNoteFontColor(entity.id, fontColorKey, entity.editUrl);
entity.fontColor = fontColorKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
modalColorPopup.classList.add("open");
positionPalettePopup(modalColorPopup);
}
};
window.setModalNoteFilter = function (filterKey) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
const normalizedFilterKey = normalizeFilterKey(filterKey) || "none";
setNoteFilter(entity.id, normalizedFilterKey, entity.editUrl);
entity.filter = normalizedFilterKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
modalColorPopup.classList.add("open");
positionPalettePopup(modalColorPopup);
}
};
function generatePaletteButtons(note) {
return generateUnifiedPaletteMenu({
entityId: note && note.id ? note.id : "",
editUrl: note && note.editUrl ? note.editUrl : "",
currentColor: note && note.color ? note.color : "default",
currentFilter: note && note.filter ? note.filter : "none",
mode: "entity",
});
}
window.setNoteColor = function (noteId, color, editUrl) {
// 1. Visual Update (Immediate feedback)
setNoteColorVisual(noteId, color);
const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
if (bookmarkCard) {
const palettePopup = bookmarkCard.querySelector(".bookmark-palette .palette-popup");
if (palettePopup) {
const currentColor = getElementVisualColor(bookmarkCard);
const currentFilter = getElementVisualFilter(bookmarkCard);
palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, currentColor, currentFilter);
}
}
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (modal && entity && String(entity.id) === String(noteId)) {
entity.color = color;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
}
}
// 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");
// Extract all necessary fields
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, getFormFieldValue(input));
}
});
// Update Tags
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 new color tag (unless default)
if (color !== "default") {
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(" "));
formData.append("save_edit", "1"); // Trigger save action
// POST back to Shaarli
return fetch(form.action, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: formData.toString(),
});
})
.then((response) => {
if (response.ok) {
console.log(`Color ${color} saved for note ${noteId}`);
} else {
throw new Error("Failed to save color");
}
})
.catch((err) => {
console.error("Error saving note color:", err);
alert("Erreur lors de la sauvegarde de la couleur. Veuillez rafraîchir la page.");
});
};
window.setNoteFilter = function (noteId, filterKey, editUrl) {
const normalizedFilterKey = normalizeFilterKey(filterKey) || "none";
const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
if (card) {
const colorClass = Array.from(card.classList).find((cls) => cls.startsWith("note-color-"));
const color = colorClass ? colorClass.replace("note-color-", "") : card.dataset.color || "default";
applyNoteVisualState(card, { color, filter: normalizedFilterKey });
}
const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
if (bookmarkCard) {
const colorClass = Array.from(bookmarkCard.classList).find((cls) => cls.startsWith("note-color-"));
const color = colorClass ? colorClass.replace("note-color-", "") : bookmarkCard.dataset.color || "default";
applyNoteVisualState(bookmarkCard, { color, filter: normalizedFilterKey });
const palettePopup = bookmarkCard.querySelector(".bookmark-palette .palette-popup");
if (palettePopup) {
palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, color, normalizedFilterKey);
}
}
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (modal && entity && String(entity.id) === String(noteId)) {
entity.filter = normalizedFilterKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
}
}
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, getFormFieldValue(input));
}
});
let currentTags = formData.get("lf_tags") || "";
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_FILTER_TAG_PREFIX));
if (normalizedFilterKey && normalizedFilterKey !== "none") {
tagsArray.push(`${NOTE_FILTER_TAG_PREFIX}${normalizedFilterKey}`);
}
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 filter");
}
})
.catch((err) => {
console.error("Error saving note filter:", err);
alert("Erreur lors de la sauvegarde du filtre. Veuillez rafraîchir la page.");
});
};
window.setNoteBackground = function (noteId, backgroundKey, editUrl) {
const normalizedBackgroundKey = backgroundKey === "none" ? "none" : normalizeBackgroundKey(backgroundKey) || "none";
const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
if (card) {
const colorClass = Array.from(card.classList).find((cls) => cls.startsWith("note-color-"));
const color = colorClass ? colorClass.replace("note-color-", "") : card.dataset.color || "default";
const filter = card.dataset.filter || "none";
applyNoteVisualState(card, { color, filter, background: normalizedBackgroundKey });
}
const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
if (bookmarkCard) {
const colorClass = Array.from(bookmarkCard.classList).find((cls) => cls.startsWith("note-color-"));
const color = colorClass ? colorClass.replace("note-color-", "") : bookmarkCard.dataset.color || "default";
const filter = bookmarkCard.dataset.filter || "none";
applyNoteVisualState(bookmarkCard, { color, filter, background: normalizedBackgroundKey });
}
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (modal && entity && String(entity.id) === String(noteId)) {
entity.background = normalizedBackgroundKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
}
}
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, getFormFieldValue(input));
}
});
let currentTags = formData.get("lf_tags") || "";
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_BACKGROUND_TAG_PREFIX));
if (normalizedBackgroundKey && normalizedBackgroundKey !== "none") {
tagsArray.push(`${NOTE_BACKGROUND_TAG_PREFIX}${normalizedBackgroundKey}`);
}
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 background");
}
})
.catch((err) => {
console.error("Error saving note background:", err);
alert("Erreur lors de la sauvegarde du fond. Veuillez rafraîchir la page.");
});
};
window.setModalNoteBackground = function (backgroundKey) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
const normalizedBackgroundKey = backgroundKey === "none" ? "none" : normalizeBackgroundKey(backgroundKey) || "none";
setNoteBackground(entity.id, normalizedBackgroundKey, entity.editUrl);
entity.background = normalizedBackgroundKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
applyNoteVisualState(modalCard, entity);
}
const modalColorPopup = modal.querySelector(".note-modal-palette");
if (modalColorPopup) {
modalColorPopup.innerHTML = generateModalPaletteButtons(entity);
modalColorPopup.classList.add("open");
positionPalettePopup(modalColorPopup);
}
};
function addTagToNote(editUrl, tag) {
return 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, getFormFieldValue(input));
}
});
let currentTags = formData.get("lf_tags") || "";
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
if (!tagsArray.includes(tag)) tagsArray.push(tag);
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 update tags");
return response;
});
}
/* ==========================================================
PINNED ITEMS LOGIC (Tag: shaarli-pin)
========================================================== */
function initPinnedItems() {
const container = document.querySelector(".links-list, .notes-masonry, .notes-list-view");
if (!container) return; // Exit if no container found (e.g. empty page or other view)
const items = Array.from(container.children);
const pinnedItems = [];
items.forEach((item) => {
// Support both Standard Link items and Note items
if (item.classList.contains("link-outer") || item.classList.contains("note-card")) {
let isPinned = false;
// 1. Check for Tag 'shaarli-pin'
// In note-card, we might need to check dataset or re-parse tags if not visible?
// But usually renderNotes puts tags in DOM or we rely on data attribute if we saved it?
// Let's rely on finding the tag text in the DOM for consistency with Standard View.
// For Note View, tags are in .note-tags > .note-tag
// For Standard View, tags are in .link-tag-list > a
const itemHtml = item.innerHTML; // Simple search in content (quick & dirty but effective for tag presence)
// Better: Select text content of tags specifically to avoid false positives in description
const tagElements = item.querySelectorAll(".link-tag-list a, .note-tag");
for (let t of tagElements) {
if (t.textContent.trim() === "shaarli-pin") {
isPinned = true;
break;
}
}
// 2. Enforce Visual State based on Tag Presence
const pinBtnIcon = item.querySelector(".mdi-pin-outline, .mdi-pin");
const titleArea = item.querySelector(".link-title, .note-title");
const titleIcon = titleArea ? titleArea.querySelector("i.mdi-pin") : null;
if (isPinned) {
// It IS Pinned: Ensure UI reflects this
pinnedItems.push(item);
item.classList.add("is-pinned-tag");
// Button -> Filled Pin
if (pinBtnIcon) {
pinBtnIcon.classList.remove("mdi-pin-outline");
pinBtnIcon.classList.add("mdi-pin");
if (pinBtnIcon.parentElement) pinBtnIcon.parentElement.classList.add("active");
}
// Title -> Add Icon if missing
if (titleArea && !titleIcon) {
const newIcon = document.createElement("i");
newIcon.className = "mdi mdi-pin";
newIcon.style.color = "var(--primary)";
newIcon.style.marginRight = "8px";
titleArea.prepend(newIcon);
}
} else {
// It is NOT Pinned: Ensure UI reflects this (Clean up native sticky or mismatches)
item.classList.remove("is-pinned-tag");
// Button -> Outline Pin
if (pinBtnIcon) {
pinBtnIcon.classList.remove("mdi-pin");
pinBtnIcon.classList.add("mdi-pin-outline");
if (pinBtnIcon.parentElement) pinBtnIcon.parentElement.classList.remove("active");
}
// Title -> Remove Icon if present
if (titleIcon) {
titleIcon.remove();
}
}
}
});
// 3. Move Pinned Items to Top (Only for standard list, renderNotes already sorts itself)
if (container.classList.contains("links-list")) {
for (let i = pinnedItems.length - 1; i >= 0; i--) {
container.prepend(pinnedItems[i]);
}
}
if (typeof organizePinnedBookmarks === "function") {
window.requestAnimationFrame(organizePinnedBookmarks);
}
// 4. Click Listener for all Pin Buttons (Event Delegation)
// Avoid adding multiple listeners if init called multiple times?
// We'll rely on one global listener on document, but here we add it inside this function which is called once on load.
// To be safe, let's remove old one if we could, but anonymous function makes it hard.
// Better: Allow this to run, but ensure we don't duplicate.
// Since initPinnedItems is called on DOMContentLoaded, it runs once.
// Note: We already have the listener attached in previous version.
// We will just keep the listener logic here in the replacement.
document.addEventListener(
"click",
function (e) {
const btn = e.target.closest('a[href*="do=pin"], .note-hover-actions a[href*="pin"], .link-actions a[href*="pin"]');
if (btn) {
e.preventDefault();
e.stopPropagation();
const card = btn.closest(".link-outer, .note-card");
const id = card ? card.dataset.id : null;
// Re-derive edit URL if needed
let editUrl = btn.href.replace("do=pin", "do=editlink").replace("pin", "editlink");
if (card) {
const editBtn = card.querySelector('a[href*="edit_link"], a[href*="admin/shaare"]');
if (editBtn) editUrl = editBtn.href;
}
if (id && editUrl) {
togglePinTag(id, editUrl, btn);
}
}
},
{ once: false },
); // Listener is permanent
}
function togglePinTag(id, editUrl, btn) {
const icon = btn.querySelector("i");
let isPinning = false;
if (icon) {
if (icon.classList.contains("mdi-pin-outline")) {
icon.classList.remove("mdi-pin-outline");
icon.classList.add("mdi-pin");
btn.classList.add("active");
isPinning = true;
} else {
icon.classList.remove("mdi-pin");
icon.classList.add("mdi-pin-outline");
btn.classList.remove("active");
isPinning = false;
}
}
// Update Title Icon (The one "devant le titre")
const card = btn.closest(".link-outer, .note-card");
if (card) {
card.classList.toggle("is-pinned-tag", isPinning);
// Update Title Icon
const titleArea = card.querySelector(".link-title, .note-title");
if (titleArea) {
let titleIcon = titleArea.querySelector("i.mdi-pin");
if (isPinning) {
if (!titleIcon) {
const newIcon = document.createElement("i");
newIcon.className = "mdi mdi-pin";
newIcon.style.color = "var(--primary)";
newIcon.style.marginRight = "8px";
titleArea.prepend(newIcon);
}
} else {
if (titleIcon) titleIcon.remove();
}
}
// Update Tag List Visualization
// We need to handle both Note Cards (.note-tags) and Standard Links (.link-tag-list)
let tagContainer = card.querySelector(".note-tags");
if (!tagContainer) tagContainer = card.querySelector(".link-tag-list");
if (tagContainer) {
// Check if tag exists already
let existingTagElement = null;
// Search in children
// Notes: .note-tag
// Links: .label-tag > a OR just a
const allCandidates = tagContainer.querySelectorAll("*");
for (let el of allCandidates) {
if (el.textContent.trim() === "shaarli-pin") {
// We found the text.
// If note, it's the span.note-tag
if (el.classList.contains("note-tag")) {
existingTagElement = el;
break;
}
// If link, we want the anchor or its wrapper
if (el.tagName === "A") {
// Check if wrapped in .label-tag
if (el.parentElement.classList.contains("label-tag")) {
existingTagElement = el.parentElement;
} else {
existingTagElement = el;
}
break;
}
}
}
if (isPinning) {
if (!existingTagElement) {
if (card.classList.contains("note-card")) {
// Add Note Tag
const span = document.createElement("span");
span.className = "note-tag";
span.textContent = "shaarli-pin";
tagContainer.appendChild(span);
} else {
// Add Link Tag (Standard View)
// Structure: shaarli-pin
const wrapper = document.createElement("span");
wrapper.className = "link-tag";
const link = document.createElement("a");
link.href = "?searchtags=shaarli-pin";
link.textContent = "shaarli-pin";
wrapper.appendChild(link);
// Append space first for separation if there are other tags
if (tagContainer.children.length > 0) {
tagContainer.appendChild(document.createTextNode(" "));
}
tagContainer.appendChild(wrapper);
}
}
} else {
if (existingTagElement) {
// Remove the element
const prev = existingTagElement.previousSibling;
existingTagElement.remove();
// Clean up trailing space/text if it was the last one or between tags
if (prev && prev.nodeType === Node.TEXT_NODE && !prev.textContent.trim()) {
prev.remove();
}
}
}
}
}
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, getFormFieldValue(input));
}
});
let currentTags = formData.get("lf_tags") || "";
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
const pinTag = "shaarli-pin";
if (isPinning) {
if (!tagsArray.includes(pinTag)) tagsArray.push(pinTag);
} else {
tagsArray = tagsArray.filter((t) => t !== pinTag);
}
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((res) => {
if (res.ok) {
console.log("Pin toggled successfully");
if (typeof organizePinnedBookmarks === "function") {
window.requestAnimationFrame(organizePinnedBookmarks);
}
}
})
.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";
const mode = panel.dataset.mode || "entity";
const entityId = panel.dataset.entityId || "";
if (!skipRestore && mode === "draft") {
panel.dataset.skipRestore = "0";
panel.classList.remove("open");
panel.style.display = "none";
panel.setAttribute("aria-hidden", "true");
return;
}
if (!skipRestore && type === "font") {
const prevFontColorKey = panel.dataset.prevFontColorKey || "auto";
if (mode === "modal") {
setModalNoteFontColorVisual(prevFontColorKey);
} else {
setNoteFontColorVisual(entityId, prevFontColorKey);
}
}
if (!skipRestore && type === "background") {
const prevColorKey = panel.dataset.prevColorKey || "default";
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") === "draft") {
const bgPanel = document.getElementById("shaarli-bg-studio");
prevFontColorKey = bgPanel ? (bgPanel.dataset.fontColor || "auto") : "auto";
} else
if ((mode || "entity") === "modal") {
const modal = getOpenModalOverlay();
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") === "draft") {
const bgPanel = document.getElementById("shaarli-bg-studio");
if (bgPanel) {
prevColorKey = bgPanel.dataset.color || "default";
}
} else
if ((mode || "entity") === "modal") {
const modal = getOpenModalOverlay();
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 === "draft") {
const bgPanel = document.getElementById("shaarli-bg-studio");
if (bgPanel && typeof bgPanel.__draftApply === "function") {
bgPanel.__draftApply({ fontColor: previewKey });
}
} else 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 === "draft") {
const bgPanel = document.getElementById("shaarli-bg-studio");
if (bgPanel && typeof bgPanel.__draftApply === "function") {
bgPanel.__draftApply({ color: previewKey });
}
} else 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 (mode === "draft") {
const bgPanel = document.getElementById("shaarli-bg-studio");
if (bgPanel && typeof bgPanel.__draftApply === "function") {
if (type === "font") {
bgPanel.dataset.fontColor = `custom:${color}`;
bgPanel.__draftApply({ fontColor: `custom:${color}` });
} else {
bgPanel.dataset.color = `custom:${color}`;
bgPanel.__draftApply({ color: `custom:${color}` });
}
renderBackgroundStudioPanel(bgPanel);
}
panel.dataset.skipRestore = "1";
closeColorPickerPanel();
return;
}
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 = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (modal && entity && String(entity.id) === String(noteId)) {
const modalCard = modal.querySelector(".note-modal");
applyTo(modalCard);
}
}
function setModalNoteFontColorVisual(fontColorKey) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
setNoteFontColorVisual(entity.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);
Array.from(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 = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (modal && entity && String(entity.id) === String(noteId)) {
const modalCard = modal.querySelector(".note-modal");
applyTo(modalCard);
}
}
function setModalNoteColorVisual(colorKey) {
const modal = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
setNoteColorVisual(entity.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, getFormFieldValue(input));
}
});
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 = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity) return;
setNoteFontColor(entity.id, fontColorKey, entity.editUrl);
entity.fontColor = fontColorKey;
const modalCard = modal.querySelector(".note-modal");
if (modalCard) {
let colorValue = "auto";
if (String(fontColorKey || "").startsWith("custom:")) {
colorValue = String(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 = getOpenModalOverlay();
const entity = getModalCurrentEntity(modal);
if (!modal || !entity || !entity.editUrl) return;
// 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(entity.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, getFormFieldValue(input));
}
});
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 ${entity.id}`);
})
.catch((err) => {
console.error("Error saving custom color:", err);
});
}
${type === "font" ? "Couleur du texte" : "Couleur personnalisée"}