${task.isCompleted ? '' : ''}
${task.title}
Créer une note...
`;
topBar.appendChild(inputContainer);
// 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);
}
// Modal Container
const modalOverlay = document.createElement('div');
modalOverlay.className = 'note-modal-overlay';
modalOverlay.innerHTML = `
${generatePaletteButtons(note)}
${note.title}
${note.descHtml}
`;
// Add images if not in desc? (desc usually has it)
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.
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('');
}
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}`);
}
// 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, input.value);
}
});
// Update Tags
let currentTags = formData.get('lf_tags') || '';
let tagsArray = currentTags.split(/[\s,]+/).filter(t => t.trim() !== '');
// Remove existing color tags
tagsArray = tagsArray.filter(t => !t.startsWith('note-'));
// Add new color tag (unless default)
if (color !== 'default') {
tagsArray.push(`note-${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.");
});
};
/* ==========================================================
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]);
}
}
// 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) {
// 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, input.value);
}
});
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");
})
.catch(err => console.error(err));
}