+
`;
@@ -337,6 +617,103 @@ function initNoteView(linkList, container) {
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();
+ modalColorPopup.classList.toggle("open");
+ positionPalettePopup(modalColorPopup);
+ });
+
+ 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-archiver")
+ .then(() => {
+ if (modalOverlay.currentNote) {
+ if (!modalOverlay.currentNote.tags.includes("shaarli-archiver")) {
+ modalOverlay.currentNote.tags.push("shaarli-archiver");
+ }
+ }
+
+ 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");
+ })
+ .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");
+ });
+ });
}
function parseNoteFromLink(linkEl) {
@@ -364,12 +741,20 @@ function parseNoteFromLink(linkEl) {
const tags = [];
let color = "default";
+ let background = "none";
linkEl.querySelectorAll(".link-tag-list a").forEach((tag) => {
const t = tag.textContent.trim();
// Check for color tag
if (t.startsWith("note-")) {
const potentialColor = t.substring(5);
- color = potentialColor;
+ const knownColor = NOTE_COLOR_OPTIONS.some((opt) => opt.key === potentialColor);
+ if (knownColor) {
+ color = potentialColor;
+ } else {
+ tags.push(t);
+ }
+ } else if (t.startsWith(NOTE_BACKGROUND_TAG_PREFIX)) {
+ background = t.substring(NOTE_BACKGROUND_TAG_PREFIX.length) || "none";
} else {
tags.push(t);
}
@@ -385,30 +770,34 @@ function parseNoteFromLink(linkEl) {
// User requested "availability of the tag 'shaarli-pin' as the main source"
const isPinned = tags.includes("shaarli-pin");
- return { id, title, descHtml, descText, coverImage, url, tags, color, editUrl, deleteUrl, pinUrl, isPinned };
+ return { id, title, descHtml, descText, coverImage, url, tags, color, background, editUrl, deleteUrl, pinUrl, isPinned };
}
function renderNotes(container, notes, viewMode) {
container.innerHTML = "";
container.className = viewMode === "grid" ? "notes-masonry" : "notes-list-view";
+ const visibleNotes = notes.filter((note) => !(note.tags || []).includes("shaarli-archiver"));
+
// Sort: Pinned items first
- notes.sort((a, b) => {
+ visibleNotes.sort((a, b) => {
const aPinned = a.tags.includes("shaarli-pin");
const bPinned = b.tags.includes("shaarli-pin");
return bPinned - aPinned;
});
- notes.forEach((note) => {
+ visibleNotes.forEach((note) => {
const card = document.createElement("div");
- card.className = `note-card note-color-${note.color}`;
+ card.className = "note-card";
card.dataset.id = note.id;
+ 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);
});
@@ -488,18 +877,14 @@ function renderNotes(container, notes, viewMode) {
const palettePopup = actions.querySelector(`#popup-${paletteBtnId}`);
paletteBtn.addEventListener("click", (e) => {
+ e.preventDefault();
e.stopPropagation();
// Close others?
document.querySelectorAll(".palette-popup.open").forEach((p) => {
if (p !== palettePopup) p.classList.remove("open");
});
palettePopup.classList.toggle("open");
- });
-
- // Close palette when clicking outside
- // (Handled globally or card based? simple: card mouseleave?)
- card.addEventListener("mouseleave", () => {
- palettePopup.classList.remove("open");
+ positionPalettePopup(palettePopup);
});
inner.appendChild(actions);
@@ -509,60 +894,203 @@ function renderNotes(container, notes, viewMode) {
});
}
+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 && tag !== "note");
+
+ if (visibleTags.length === 0) {
+ container.classList.add("is-empty");
+ return;
+ }
+
+ container.classList.remove("is-empty");
+ visibleTags.forEach((tag) => {
+ const tagEl = document.createElement("span");
+ tagEl.className = "note-tag";
+ tagEl.textContent = tag;
+ container.appendChild(tagEl);
+ });
+}
+
function openNoteModal(note) {
const modal = document.querySelector(".note-modal-overlay");
+ if (!modal) return;
+
+ const modalCard = modal.querySelector(".note-modal");
+ const title = modal.querySelector("#note-modal-title");
const content = modal.querySelector(".note-modal-content");
+ 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");
- // Build full content
- let html = `
-
${note.title}
-
${note.descHtml}
- `;
- // Add images if not in desc? (desc usually has it)
+ 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 && tag !== "note");
+ modalCard.dataset.tags = visibleTags.join("||");
+
+ title.textContent = note.title || "Sans titre";
+ content.innerHTML = `
${note.descHtml || ""}
`;
+ renderModalTags(tagsContainer, visibleTags);
+
+ if (editLink) {
+ editLink.href = note.editUrl || "#";
+ }
+
+ if (modalColorPopup) {
+ modalColorPopup.innerHTML = generateModalPaletteButtons(note);
+ modalColorPopup.classList.remove("open");
+ }
+
+ setModalPinButtonState(pinButton, !!note.isPinned);
- content.innerHTML = html;
modal.classList.add("open");
}
-function generatePaletteButtons(note) {
- const colors = ["default", "red", "orange", "yellow", "green", "teal", "blue", "darkblue", "purple", "pink", "brown", "grey"];
- // Map to hex for the button background
- const colorMap = {
- default: "#ffffff",
- red: "#f28b82",
- orange: "#fbbc04",
- yellow: "#fff475",
- green: "#ccff90",
- teal: "#a7ffeb",
- blue: "#cbf0f8",
- darkblue: "#aecbfa",
- purple: "#d7aefb",
- pink: "#fdcfe8",
- brown: "#e6c9a8",
- grey: "#e8eaed",
- };
- // Dark mode mapping could be handled via CSS classes on buttons but inline styles are easier for the picker circles
- // We will just use class names and let CSS handle the preview color if possible, or set style.
+function generateModalPaletteButtons(note) {
+ const currentColor = note.color || "default";
+ const currentBackground = note.background || "none";
- return colors
- .map((c) => {
- // We use style for the button background roughly.
- // Actually, let's use the class on the button itself to pick up the color from CSS variables if defined,
- // OR just hardcode the light mode preview for simplicity as the picker is usually on white/dark background.
- return `
`;
- })
- .join("");
+ const colorButtons = [
+ `
`,
+ ...NOTE_COLOR_OPTIONS.filter((opt) => opt.key !== "default").map(
+ (opt) =>
+ `
`,
+ ),
+ ].join("");
+
+ const backgroundButtons = [
+ `
`,
+ ...NOTE_BACKGROUND_OPTIONS.map((bg) => {
+ const bgUrl = getNoteBackgroundUrl(bg.key);
+ return `
`;
+ }),
+ ].join("");
+
+ return `
+
${colorButtons}
+
${backgroundButtons}
+ `;
+}
+
+window.setModalNoteColor = function (color) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+
+ const currentNote = modal.currentNote;
+ setNoteColor(currentNote.id, color, currentNote.editUrl);
+
+ currentNote.color = color;
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ applyNoteVisualState(modalCard, currentNote);
+ }
+
+ const modalColorPopup = modal.querySelector("#note-modal-color-popup");
+ if (modalColorPopup) {
+ modalColorPopup.innerHTML = generateModalPaletteButtons(currentNote);
+ modalColorPopup.classList.add("open");
+ positionPalettePopup(modalColorPopup);
+ }
+};
+
+window.setModalNoteBackground = function (backgroundKey) {
+ const modal = document.querySelector(".note-modal-overlay");
+ if (!modal || !modal.currentNote) return;
+
+ const currentNote = modal.currentNote;
+ setNoteBackground(currentNote.id, backgroundKey, currentNote.editUrl);
+
+ currentNote.background = backgroundKey;
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ applyNoteVisualState(modalCard, currentNote);
+ }
+
+ const modalColorPopup = modal.querySelector("#note-modal-color-popup");
+ if (modalColorPopup) {
+ modalColorPopup.innerHTML = generateModalPaletteButtons(currentNote);
+ modalColorPopup.classList.add("open");
+ positionPalettePopup(modalColorPopup);
+ }
+};
+
+function generatePaletteButtons(note) {
+ const currentColor = note.color || "default";
+ const currentBackground = note.background || "none";
+
+ const colorButtons = [
+ `
`,
+ ...NOTE_COLOR_OPTIONS.filter((opt) => opt.key !== "default").map(
+ (opt) =>
+ `
`,
+ ),
+ ].join("");
+
+ const backgroundButtons = [
+ `
`,
+ ...NOTE_BACKGROUND_OPTIONS.map((bg) => {
+ const bgUrl = getNoteBackgroundUrl(bg.key);
+ return `
`;
+ }),
+ ].join("");
+
+ return `
+
${colorButtons}
+
${backgroundButtons}
+ `;
}
window.setNoteColor = function (noteId, color, editUrl) {
// 1. Visual Update (Immediate feedback)
const card = document.querySelector(`.note-card[data-id="${noteId}"]`);
if (card) {
- // Remove all color classes
- card.classList.forEach((cls) => {
- if (cls.startsWith("note-color-")) card.classList.remove(cls);
- });
- card.classList.add(`note-color-${color}`);
+ const background = card.dataset.background || "none";
+ applyNoteVisualState(card, { color, background });
+ }
+
+ const bookmarkCard = document.querySelector(`.link-outer[data-id="${noteId}"]`);
+ if (bookmarkCard) {
+ const background = bookmarkCard.dataset.background || "none";
+ applyNoteVisualState(bookmarkCard, { color, background });
+ const palettePopup = bookmarkCard.querySelector(".bookmark-palette .palette-popup");
+ if (palettePopup) {
+ palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, color, background);
+ }
+ }
+
+ const modal = document.querySelector(".note-modal-overlay");
+ if (modal && modal.currentNote && String(modal.currentNote.id) === String(noteId)) {
+ modal.currentNote.color = color;
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ applyNoteVisualState(modalCard, modal.currentNote);
+ }
+ const modalColorPopup = modal.querySelector("#note-modal-color-popup");
+ if (modalColorPopup) {
+ modalColorPopup.innerHTML = generateModalPaletteButtons(modal.currentNote);
+ }
}
// 2. Persistence via AJAX Form Submission
@@ -592,7 +1120,11 @@ window.setNoteColor = function (noteId, color, editUrl) {
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
// Remove existing color tags
- tagsArray = tagsArray.filter((t) => !t.startsWith("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") {
@@ -624,6 +1156,130 @@ window.setNoteColor = function (noteId, color, editUrl) {
});
};
+window.setNoteBackground = function (noteId, backgroundKey, editUrl) {
+ 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, background: backgroundKey });
+ }
+
+ 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, background: backgroundKey });
+ const palettePopup = bookmarkCard.querySelector(".bookmark-palette .palette-popup");
+ if (palettePopup) {
+ palettePopup.innerHTML = generateBookmarkPaletteButtons(noteId, editUrl, color, backgroundKey);
+ }
+ }
+
+ const modal = document.querySelector(".note-modal-overlay");
+ if (modal && modal.currentNote && String(modal.currentNote.id) === String(noteId)) {
+ modal.currentNote.background = backgroundKey;
+ const modalCard = modal.querySelector(".note-modal");
+ if (modalCard) {
+ applyNoteVisualState(modalCard, modal.currentNote);
+ }
+ const modalColorPopup = modal.querySelector("#note-modal-color-popup");
+ if (modalColorPopup) {
+ modalColorPopup.innerHTML = generateModalPaletteButtons(modal.currentNote);
+ }
+ }
+
+ fetch(editUrl)
+ .then((response) => response.text())
+ .then((html) => {
+ const parser = new DOMParser();
+ const doc = parser.parseFromString(html, "text/html");
+ const form = doc.querySelector('form[name="linkform"]');
+
+ if (!form) throw new Error("Could not find edit form");
+
+ const formData = new URLSearchParams();
+ const inputs = form.querySelectorAll("input, textarea");
+
+ inputs.forEach((input) => {
+ if (input.type === "checkbox") {
+ if (input.checked) formData.append(input.name, input.value || "on");
+ } else if (input.name) {
+ formData.append(input.name, input.value);
+ }
+ });
+
+ let currentTags = formData.get("lf_tags") || "";
+ let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
+
+ tagsArray = tagsArray.filter((t) => !t.startsWith(NOTE_BACKGROUND_TAG_PREFIX));
+ if (backgroundKey && backgroundKey !== "none") {
+ tagsArray.push(`${NOTE_BACKGROUND_TAG_PREFIX}${backgroundKey}`);
+ }
+
+ 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.");
+ });
+};
+
+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, input.value);
+ }
+ });
+
+ 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)
========================================================== */