885 lines
34 KiB
JavaScript
885 lines
34 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
// Check URL parameters for custom views
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const searchTags = urlParams.get('searchtags');
|
|
|
|
const linkList = document.getElementById('links-list');
|
|
const container = document.querySelector('.content-container');
|
|
|
|
// Always init Pinned Items logic (sorting and listeners)
|
|
// This function is defined at the end of the file
|
|
if (typeof initPinnedItems === 'function') {
|
|
initPinnedItems();
|
|
}
|
|
|
|
if (!linkList || !container) return;
|
|
|
|
if (searchTags === 'todo') {
|
|
initTodoView(linkList, container);
|
|
} else if (searchTags === 'note') {
|
|
initNoteView(linkList, container);
|
|
}
|
|
});
|
|
|
|
/**
|
|
* Initialize the Google Tasks-like view
|
|
*/
|
|
function initTodoView(linkList, container) {
|
|
document.body.classList.add('view-todo');
|
|
|
|
// Extract task data from existing DOM
|
|
const rawLinks = Array.from(linkList.querySelectorAll('.link-outer'));
|
|
const tasks = rawLinks.map(link => parseTaskFromLink(link)).filter(t => t !== null);
|
|
|
|
// Create new Layout
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'special-view-wrapper';
|
|
|
|
// 1. Sidebar
|
|
const sidebar = document.createElement('div');
|
|
sidebar.className = 'todo-sidebar';
|
|
|
|
// Extract unique groups for the sidebar
|
|
const groups = new Set();
|
|
tasks.forEach(t => {
|
|
if (t.group) groups.add(t.group);
|
|
});
|
|
|
|
const groupsList = Array.from(groups).map(g =>
|
|
`<div class="todo-list-item" onclick="filterTasksByGroup('${g}')"><i class="mdi mdi-label-outline"></i> ${g}</div>`
|
|
).join('');
|
|
|
|
sidebar.innerHTML = `
|
|
<div class="sidebar-section-title" style="padding: 1rem 1rem 0.5rem; font-weight:bold; color:var(--text-light);">TASKS</div>
|
|
<div class="todo-list-item active" onclick="filterTasksByGroup('all')">
|
|
<i class="mdi mdi-inbox"></i> Mes tâches
|
|
<span style="margin-left:auto; font-size:0.8rem; background:rgba(0,0,0,0.1); padding:2px 6px; border-radius:10px;">${tasks.length}</span>
|
|
</div>
|
|
${groups.size > 0 ? `<div class="sidebar-section-title" style="padding: 1rem 1rem 0.5rem; font-weight:bold; color:var(--text-light);">LISTES</div>${groupsList}` : ''}
|
|
`;
|
|
|
|
// 2. Main Content
|
|
const main = document.createElement('div');
|
|
main.className = 'todo-main';
|
|
|
|
const mainHeader = document.createElement('div');
|
|
mainHeader.className = 'todo-main-header';
|
|
mainHeader.innerHTML = `
|
|
<h2 id="todo-list-title">Mes tâches</h2>
|
|
<div class="todo-actions">
|
|
<!-- Sorting/Menu could go here -->
|
|
</div>
|
|
`;
|
|
|
|
const itemsContainer = document.createElement('div');
|
|
itemsContainer.className = 'todo-items-container';
|
|
|
|
// Sort Tasks: Pinned items first
|
|
tasks.sort((a, b) => {
|
|
const aPinned = a.tags && a.tags.includes('shaarli-pin');
|
|
const bPinned = b.tags && b.tags.includes('shaarli-pin');
|
|
return bPinned - aPinned;
|
|
});
|
|
|
|
// Render Tasks
|
|
tasks.forEach(task => {
|
|
itemsContainer.appendChild(renderTaskItem(task));
|
|
});
|
|
|
|
main.appendChild(mainHeader);
|
|
main.appendChild(itemsContainer);
|
|
|
|
wrapper.appendChild(sidebar);
|
|
wrapper.appendChild(main);
|
|
|
|
// Inject and Hide original
|
|
linkList.style.display = 'none';
|
|
|
|
// Remove pagination/toolbar if present to clean up view
|
|
const toolbar = document.querySelector('.content-toolbar');
|
|
if (toolbar) toolbar.style.display = 'none';
|
|
|
|
if (linkList.parentNode) {
|
|
linkList.parentNode.insertBefore(wrapper, linkList);
|
|
} else {
|
|
container.appendChild(wrapper);
|
|
}
|
|
|
|
// Global filter function
|
|
window.filterTasksByGroup = function (group) {
|
|
const title = document.getElementById('todo-list-title');
|
|
const items = document.querySelectorAll('.todo-item');
|
|
|
|
// Update Sidebar Active State
|
|
document.querySelectorAll('.todo-list-item').forEach(el => el.classList.remove('active'));
|
|
if (event && event.currentTarget) event.currentTarget.classList.add('active');
|
|
|
|
if (group === 'all') {
|
|
title.textContent = 'Mes tâches';
|
|
items.forEach(item => item.style.display = 'flex');
|
|
} else {
|
|
title.textContent = group;
|
|
items.forEach(item => {
|
|
if (item.dataset.group === group) item.style.display = 'flex';
|
|
else item.style.display = 'none';
|
|
});
|
|
}
|
|
};
|
|
}
|
|
|
|
|
|
function parseTaskFromLink(linkEl) {
|
|
const id = linkEl.dataset.id;
|
|
const titleEl = linkEl.querySelector('.link-title'); // "Title" normally
|
|
// For Todos, the Bookmark Title is the Task Title?
|
|
// Or is the title inside the description?
|
|
// Mental model says: "Todo: reste un bookmark privé... LinkEntity.title" is used.
|
|
|
|
const title = titleEl ? titleEl.textContent.trim() : 'Task';
|
|
const descEl = linkEl.querySelector('.link-description');
|
|
const rawDesc = descEl ? descEl.innerHTML : '';
|
|
const textDesc = descEl ? descEl.textContent : '';
|
|
|
|
// Check if it's really a todo (should be if we are in ?searchtags=todo, but double check)
|
|
// We assume yes.
|
|
|
|
// Parse Metadata from Description text
|
|
// Format: 📅 **Échéance :** <Instant ISO>
|
|
// Format: 🏷️ **Groupe :** <nom>
|
|
// Format: - [ ] Subtask or Main task status?
|
|
|
|
// Status
|
|
// If [x] is found in the first few lines, maybe completed?
|
|
// User says: "Puis une checkbox markdown: - [ ] Titre"
|
|
// Wait, if the Description contains the checkbox and title, then Bookmark Title is ignored?
|
|
// Let's assume Bookmark Title is the master Display Title.
|
|
// And "Checkbox status" can be parsed from description.
|
|
|
|
let isCompleted = false;
|
|
if (textDesc.includes('[x]')) isCompleted = true;
|
|
|
|
// Due Date
|
|
let dueDate = null;
|
|
const dateMatch = textDesc.match(/Échéance\s*:\s*\*+([^*]+)\*+/); // varies by markdown regex
|
|
// Text might be "📅 **Échéance :** 2023-10-10"
|
|
// Regex: Échéance\s*:\s*(.*?)(\n|$)
|
|
const dueMatch = textDesc.match(/Échéance\s*[:]\s*(.*?)(\n|$)/);
|
|
if (dueMatch) dueDate = dueMatch[1].trim();
|
|
|
|
// Group
|
|
let group = null;
|
|
const groupMatch = textDesc.match(/Groupe\s*[:]\s*(.*?)(\n|$)/);
|
|
if (groupMatch) group = groupMatch[1].trim();
|
|
|
|
return {
|
|
id,
|
|
title,
|
|
isCompleted,
|
|
dueDate,
|
|
group,
|
|
originalUrl: linkEl.querySelector('.link-url') ? linkEl.querySelector('.link-url').textContent : '',
|
|
editUrl: linkEl.querySelector('a[href*="admin/shaare/"]') ? linkEl.querySelector('a[href*="admin/shaare/"]').href : '#'
|
|
};
|
|
}
|
|
|
|
function renderTaskItem(task) {
|
|
const el = document.createElement('div');
|
|
el.className = `todo-item ${task.isCompleted ? 'completed' : ''}`;
|
|
el.dataset.group = task.group || '';
|
|
|
|
/*
|
|
We cannot easily toggle state (AJAX) without a backend API that supports partial updates efficiently.
|
|
But we can provide a link to Edit.
|
|
Or simulate it.
|
|
*/
|
|
|
|
el.innerHTML = `
|
|
<div class="todo-checkbox ${task.isCompleted ? 'checked' : ''}">
|
|
${task.isCompleted ? '<i class="mdi mdi-check"></i>' : ''}
|
|
</div>
|
|
<div class="todo-content">
|
|
<div class="todo-title">${task.title}</div>
|
|
<div class="todo-meta">
|
|
${task.group ? `<span class="todo-badge">${task.group}</span>` : ''}
|
|
${task.dueDate ? `<span class="due-date ${isOverdue(task.dueDate) ? 'overdue' : ''}"><i class="mdi mdi-calendar"></i> ${formatDate(task.dueDate)}</span>` : ''}
|
|
<a href="${task.editUrl}" title="Edit Task" style="margin-left:auto;"><i class="mdi mdi-pencil" style="font-size:14px;"></i></a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Simple click handler to open edit (since we can't sync state easily)
|
|
el.querySelector('.todo-checkbox').addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
// Open edit page or toggle visually
|
|
// window.location.href = task.editUrl;
|
|
});
|
|
|
|
return el;
|
|
}
|
|
|
|
function isOverdue(dateStr) {
|
|
try {
|
|
return new Date(dateStr) < new Date();
|
|
} catch (e) { return false; }
|
|
}
|
|
|
|
function formatDate(dateStr) {
|
|
try {
|
|
const d = new Date(dateStr);
|
|
return d.toLocaleDateString();
|
|
} catch (e) { return dateStr; }
|
|
}
|
|
|
|
/**
|
|
* Initialize the Google Keep-like view
|
|
*/
|
|
|
|
/**
|
|
* Initialize the Google Keep-like view
|
|
*/
|
|
function initNoteView(linkList, container) {
|
|
document.body.classList.add('view-notes');
|
|
|
|
// 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';
|
|
|
|
// 2. Create Search/Input Area (Top)
|
|
const topBar = document.createElement('div');
|
|
topBar.className = 'notes-top-bar';
|
|
|
|
// Custom Input "Take a note..."
|
|
const inputContainer = document.createElement('div');
|
|
inputContainer.className = 'note-input-container';
|
|
inputContainer.innerHTML = `
|
|
<div class="note-input-collapsed" onclick="window.location.href='?do=addlink&tags=note'">
|
|
<span class="note-input-placeholder">Créer une note...</span>
|
|
<div class="note-input-actions">
|
|
<button title="Nouvelle liste" onclick="event.stopPropagation(); window.location.href='?do=addlink&tags=note&description=- [ ] '"><i class="mdi mdi-checkbox-marked-outline"></i></button>
|
|
<button title="Nouveau dessin" onclick="event.stopPropagation(); window.location.href='?do=addlink&tags=note'"><i class="mdi mdi-brush"></i></button>
|
|
<button title="Nouvelle image" onclick="event.stopPropagation(); window.location.href='?do=addlink&tags=note'"><i class="mdi mdi-image"></i></button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
topBar.appendChild(inputContainer);
|
|
|
|
// View Toggle and other tools
|
|
const tools = document.createElement('div');
|
|
tools.className = 'notes-tools';
|
|
tools.innerHTML = `
|
|
<button class="icon-btn active" id="btn-view-grid" title="Vue grille"><i class="mdi mdi-view-dashboard-outline"></i></button>
|
|
<button class="icon-btn" id="btn-view-list" title="Vue liste"><i class="mdi mdi-view-agenda-outline"></i></button>
|
|
`;
|
|
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 = `
|
|
<div class="note-modal">
|
|
<div class="note-modal-content"></div>
|
|
<div class="note-modal-actions">
|
|
<button class="btn btn-primary" id="note-modal-close">Fermer</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
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');
|
|
});
|
|
|
|
// 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');
|
|
});
|
|
}
|
|
|
|
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 tags = [];
|
|
let color = 'default';
|
|
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;
|
|
} else {
|
|
tags.push(t);
|
|
}
|
|
});
|
|
|
|
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, editUrl, deleteUrl, pinUrl, isPinned };
|
|
}
|
|
|
|
function renderNotes(container, notes, viewMode) {
|
|
container.innerHTML = '';
|
|
container.className = viewMode === 'grid' ? 'notes-masonry' : 'notes-list-view';
|
|
|
|
// Sort: Pinned items first
|
|
notes.sort((a, b) => {
|
|
const aPinned = a.tags.includes('shaarli-pin');
|
|
const bPinned = b.tags.includes('shaarli-pin');
|
|
return bPinned - aPinned;
|
|
});
|
|
|
|
notes.forEach(note => {
|
|
const card = document.createElement('div');
|
|
card.className = `note-card note-color-${note.color}`;
|
|
card.dataset.id = note.id;
|
|
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;
|
|
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 = `<img src="${note.coverImage}" alt="Cover">`;
|
|
card.appendChild(imgContainer);
|
|
}
|
|
|
|
// Inner Content
|
|
const inner = document.createElement('div');
|
|
inner.className = 'note-inner';
|
|
|
|
// Title
|
|
if (note.title) {
|
|
const h3 = document.createElement('h3');
|
|
h3.className = 'note-title';
|
|
h3.textContent = note.title;
|
|
inner.appendChild(h3);
|
|
}
|
|
|
|
// Body (truncated in grid, maybe?)
|
|
if (note.descHtml) {
|
|
const body = document.createElement('div');
|
|
body.className = 'note-body';
|
|
// Start simple: use innerHTML but maybe strip big images if we used cover?
|
|
// For now, let's just dump it and style images to fit or hide if first child
|
|
body.innerHTML = note.descHtml;
|
|
inner.appendChild(body);
|
|
}
|
|
|
|
// Tags (Labels)
|
|
if (note.tags.length > 0) {
|
|
const tagContainer = document.createElement('div');
|
|
tagContainer.className = 'note-tags';
|
|
note.tags.forEach(t => {
|
|
if (t !== 'note') {
|
|
const span = document.createElement('span');
|
|
span.className = 'note-tag';
|
|
span.textContent = t;
|
|
tagContainer.appendChild(span);
|
|
}
|
|
});
|
|
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}`;
|
|
|
|
actions.innerHTML = `
|
|
<button title="Rappel"><i class="mdi mdi-bell-outline"></i></button>
|
|
<button title="Collaborateur"><i class="mdi mdi-account-plus-outline"></i></button>
|
|
<div style="position:relative;">
|
|
<button title="Couleur" id="${paletteBtnId}"><i class="mdi mdi-palette-outline"></i></button>
|
|
<div class="palette-popup" id="popup-${paletteBtnId}">
|
|
${generatePaletteButtons(note)}
|
|
</div>
|
|
</div>
|
|
<button title="Image"><i class="mdi mdi-image-outline"></i></button>
|
|
<button title="Archiver"><i class="mdi mdi-archive-arrow-down-outline"></i></button>
|
|
<div class="spacer"></div>
|
|
<!-- Real Actions -->
|
|
<a href="${note.pinUrl}" title="${note.isPinned ? 'Unpin' : 'Pin'}" class="${note.isPinned ? 'active' : ''}"><i class="mdi mdi-pin${note.isPinned ? '' : '-outline'}"></i></a>
|
|
<a href="${note.editUrl}" title="Edit"><i class="mdi mdi-pencil-outline"></i></a>
|
|
<button title="Plus" onclick="window.location.href='${note.deleteUrl}'"><i class="mdi mdi-dots-vertical"></i></button>
|
|
`;
|
|
|
|
// Palette Toggle
|
|
const paletteBtn = actions.querySelector(`#${paletteBtnId}`);
|
|
const palettePopup = actions.querySelector(`#popup-${paletteBtnId}`);
|
|
|
|
paletteBtn.addEventListener('click', (e) => {
|
|
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');
|
|
});
|
|
|
|
|
|
inner.appendChild(actions);
|
|
card.appendChild(inner);
|
|
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function openNoteModal(note) {
|
|
const modal = document.querySelector('.note-modal-overlay');
|
|
const content = modal.querySelector('.note-modal-content');
|
|
|
|
// Build full content
|
|
let html = `
|
|
<h2 class="note-title" style="margin-top:0;">${note.title}</h2>
|
|
<div class="note-body">${note.descHtml}</div>
|
|
`;
|
|
// 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 `<button class="palette-btn note-color-${c}" title="${c}" onclick="setNoteColor('${note.id}', '${c}', '${note.editUrl}')" style="background-color:${colorMap[c]}"></button>`;
|
|
}).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: <span class="link-tag"><a ...>shaarli-pin</a></span>
|
|
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));
|
|
}
|