-
Créer une tâche...
-
-
-
+ inputContainer.className = "note-input-container todo-input-container";
+
+ const renderTodoInputCollapsed = () => {
+ inputContainer.classList.remove("is-editing", "todo-draft-mode", "is-enhanced");
+ applyNoteVisualState(inputContainer, { color: "default", filter: "none", background: "none", fontColor: "auto" });
+ inputContainer.innerHTML = `
+
`;
+
+ 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");
@@ -2084,7 +2546,7 @@ async function fetchShaareFormBaseData(url) {
async function createNewNoteViaForm({ title, markdown, visual = null }) {
const basePath = typeof shaarli !== "undefined" && shaarli.basePath ? shaarli.basePath : "";
- const formUrl = `${basePath}/admin/shaare?post=&tags=note`;
+ const formUrl = `${basePath}/admin/shaare?post=&tags=shaarli-note`;
const { action, baseData } = await fetchShaareFormBaseData(formUrl);
const formData = new URLSearchParams(baseData.toString());
@@ -2095,8 +2557,10 @@ async function createNewNoteViaForm({ title, markdown, visual = null }) {
const currentTags = (formData.get("lf_tags") || "").trim();
let tagsArray = currentTags.split(/[\s,]+/).filter((t) => t.trim() !== "");
- // Ensure note tag exists
+ // 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) {
@@ -2157,6 +2621,84 @@ async function createNewNoteViaForm({ title, markdown, visual = null }) {
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;
@@ -2196,6 +2738,14 @@ async function persistNoteChanges(note, { title, markdown }, retryCount = 0) {
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, {
@@ -2398,6 +2948,7 @@ function escapeHtml(str) {
function parseTodoMarkdown(markdown) {
const raw = String(markdown || "");
+ // Minimal normalization for parsing lines
const normalized = raw
.replace(/
/gi, "\n")
.replace(/<\/(p|div|li|h\d)\s*>/gi, "\n");
@@ -2778,6 +3329,13 @@ async function persistTodoChanges(todo, retryCount = 0) {
const description = buildTodoMarkdown(todo);
const formData = new URLSearchParams(todo._todoEditBaseData.toString());
formData.set("lf_description", description);
+
+ 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");
+ formData.set("lf_tags", tagsArray.join(" "));
+
formData.append("save_edit", "1");
const response = await fetch(todo._todoEditAction, {
@@ -2829,43 +3387,221 @@ function initNoteView(linkList, container) {
const inputContainer = document.createElement("div");
inputContainer.className = "note-input-container";
const renderNoteInputCollapsed = () => {
- inputContainer.classList.remove("is-editing", "is-enhanced");
+ inputContainer.classList.remove("is-editing", "is-enhanced", "todo-draft-mode");
+ applyNoteVisualState(inputContainer, { color: "default", filter: "none", background: "none", fontColor: "auto" });
inputContainer.innerHTML = `
Créer une note...
-
`;
const collapsed = inputContainer.querySelector(".note-input-collapsed");
- const btn = inputContainer.querySelector(".note-input-actions button");
- const openEditor = () => {
+ 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 = `
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -3619,11 +4345,21 @@ function renderNotes(container, notes, viewMode, isArchiveMode = false) {
}
// Body (truncated in grid, maybe?)
- if (note.descHtml || note._noteMarkdown) {
+ if (note.descHtml || note.descText || note._noteMarkdown) {
const body = document.createElement("div");
body.className = "note-body";
- const content = note._noteMarkdown || note.descHtml || "";
- body.innerHTML = renderMarkdown(content);
+
+ if (note._noteMarkdown !== undefined) {
+ body.innerHTML = renderMarkdown(note._noteMarkdown);
+ } else {
+ const textToRender = note.descText || "";
+ if (textToRender.trim().startsWith('
') || textToRender.trim().startsWith('<')) {
+ body.innerHTML = textToRender;
+ } else {
+ body.innerHTML = renderMarkdown(textToRender);
+ }
+ }
+
inner.appendChild(body);
}
@@ -3755,6 +4491,7 @@ function openNoteModal(note) {
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");
@@ -3762,6 +4499,19 @@ function openNoteModal(note) {
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";
@@ -3776,6 +4526,10 @@ function openNoteModal(note) {
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) {
@@ -3805,6 +4559,25 @@ function openNoteModal(note) {
});
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) => {
@@ -3838,6 +4611,7 @@ function openNoteModal(note) {
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;
});
@@ -3856,6 +4630,10 @@ function openNoteModal(note) {
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() : "";
});